Skip to content

Instantly share code, notes, and snippets.

@RubanDurai

RubanDurai/index.html

Created January 25, 2022 07:56
Show Gist options
  • Save RubanDurai/c2c3c17f11caa3b2c21cfbad927abbfe to your computer and use it in GitHub Desktop.
Save RubanDurai/c2c3c17f11caa3b2c21cfbad927abbfe to your computer and use it in GitHub Desktop.
Download ZIP
one page template for ads
Raw
index.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modéle</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row row-1">
<div class="col-md-2 col-1"><img src="http://turismo.culturamix.com/blog/wp-content/uploads/2013/12/factory-store-dicas-de-outlets-em-milao-na-italia-foto.png" class="img-responsive" alt="Responsive image"></div>
<div class="col-md-8 col-md-offset-1 col-2"><img src="http://firstinsneakers.com/wp-content/uploads/2016/02/scarpe_nike.jpg" class="img-responsive" alt="Responsive image"></div>
</div>
</div>
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Imad Sab</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container cont">
<div class="row">
<div class="col-md-2 col-3">
<label>Menu</label>
<nav>
<ul>
<a><li>Item 1</li></a>
<a><li>Item 2</li></a>
<a><li>Item 3</li></a>
<a><li>Item 4</li></a>
<a><li>Item 5</li></a>
</ul>
</nav>
<label>Catégories</label>
<nav>
<ul>
<a><li>Catégorie 1</li></a>
<a><li>Catégorie 2</li></a>
<a><li>Catégorie 3</li></a>
<a><li>Catégorie 4</li></a>
<a><li>Catégorie 5</li></a>
</ul>
</nav>
<label>Marques</label>
<nav>
<ul>
<a><li>Item 1</li></a>
<a><li>Item 2</li></a>
<a><li>Item 3</li></a>
<a><li>Item 4</li></a>
<a><li>Item 5</li></a>
</ul>
</nav>
<img src="http://www.imhosted.com/partner/13_imhosted_120x90.gif" class="img-responsive" alt="Responsive image">
</div>
<div class="col-md-8 col-4">
<div class="row gray">
<img src="http://depramze.com/wp-content/uploads/2014/09/c-Banner.gif" class="img-responsive img-1" alt="Responsive image">
</div>
<div class="row black">
<div class="row black-1">
<div class="col-md-2 pic-1">
<a><img src="http://www.pegasustilbud.com/media/catalog/product/cache/1/thumbnail/9df78eab33525d08d6e5fb8d27136e95/N/i/Nike-Juvenate2015-002_2.jpg" alt="..." class="img-rounded"></a>
</div>
<div class="col-md-10 desc-1"><a><h4><strong>Title of the article</strong></h4></a>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles.</p></div>
</div>
<div class="row black-1">
<div class="col-md-2 pic-1">
<a><img src="http://static1.leksport.com/media/catalog/product/cache/1/small_image/280x280/9df78eab33525d08d6e5fb8d27136e95/n/i/nike_air_zoom_pegasus_32_mujer.jpg" alt="..." class="img-rounded"></a>
</div>
<div class="col-md-10 desc-1"><a><h4><strong>Title of the article</strong></h4></a>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles.</p></div>
</div>
<div class="row black-1">
<div class="col-md-2 pic-1">
<a><img src="http://scene7.zumiez.com/is/image/zumiez/pdp_hero/Nike-SB-Zoom-Team-Edition-Black,-Bone,-%26-Ivory-Skate-Shoes-_228700.jpg" alt="..." class="img-rounded"></a>
</div>
<div class="col-md-10 desc-1"><a><h4><strong>Title of the article</strong></h4></a>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles.</p></div>
</div>
<div class="row black-1">
<div class="col-md-2 pic-1">
<a><img src="http://i2.cdscdn.com/pdt2/0/0/1/1/1200x1200/749510001/rw/nike-baskets-air-max-siren-chaussures-femme.jpg" alt="..." class="img-rounded"></a>
</div>
<div class="col-md-10 desc-1"><a><h4><strong>Title of the article</strong></h4></a>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles.</p></div>
</div>
<div class="row black-1">
<div class="col-md-2 pic-1">
<a><img src="https://mosaic02.ztat.net/nvg/media/catalog1/NI/11/2B/0B/JQ/11/NI112B0BJ-Q11@12.jpg" alt="..." class="img-rounded"></a>
</div>
<div class="col-md-10 desc-1"><a><h4><strong>Title of the article</strong></h4></a>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles.</p></div>
</div>
<div class="row between">
<img src="https://i.imgur.com/MdbTTpS.gif" class="img-responsive img-1" alt="Responsive image">
</div>
<div class="row black-1">
<div class="col-md-2 pic-1">
<a><img src="http://images.sportsdirect.com/images/imgzoom/12/12149422_xxl.jpg" alt="..." class="img-rounded"></a>
</div>
<div class="col-md-10 desc-1"><a><h4><strong>Title of the article</strong></h4></a>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles.</p></div>
</div>
<div class="row black-1">
<div class="col-md-2 pic-1">
<a><img src="https://www.topsupershoes.co.uk/images/s/200908/new_nike_blazer_anthracite_silver_swoosh_shoes_459_18942.jpg" alt="..." class="img-rounded"></a>
</div>
<div class="col-md-10 desc-1"><a><h4><strong>Title of the article</strong></h4></a>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles.</p></div>
</div>
<div class="row black-1">
<div class="col-md-2 pic-1">
<a><img src="http://scene7.zumiez.com/is/image/zumiez/pdp_hero/Nike-SB-Portmore-Black-&-White-Skate-Shoes-_248753.jpg" alt="..." class="img-rounded"></a>
</div>
<div class="col-md-10 desc-1"><a><h4><strong>Title of the article</strong></h4></a>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles.</p></div>
</div>
<div class="row black-1">
<div class="col-md-2 pic-1">
<a><img src="http://www.yomister.com/image/large/iPZ8kLwDT=tB64ltkGcriONBkPVHkOgGlPUC6=gB/pi/79959001/zoom/nike-free-5.0+-mens" alt="..." class="img-rounded"></a>
</div>
<div class="col-md-10 desc-1"><a><h4><strong>Title of the article</strong></h4></a>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles.</p></div>
</div>
</div>
</div>
<div class="col-md-2 col-5">
<div class=div-1>
<img src="https://cbsv103.files.wordpress.com/2012/12/holiday-300x600-banner1.jpg" class="img-responsive img-3" alt="Responsive image"></div>
<div class="div-2">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<button type="button" class="btn btn-primary btn-lg btn-block">Newsletter</button>
</form>
</div>
<div class="div-3">
<img src="http://www.bannerinspiration.com/assets/uploads/s_13.gif" class="img-responsive img-5" alt="Responsive image">
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Ce modéle a été créé par Imad sab </p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
Raw
one-page-template-for-ads.markdown
Raw
script.js
/* je peux ajouter un code javascript */
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js"></script>
Raw
style.css
body {
padding-top: 10px;
}
.row-1{
padding-bottom: 10px;
}
.col-1{
max-height: 90px !important;
}
.col-1 img{
max-height:90px !important;
max-width:150px !important;
}
.col-2{
max-height: 100px !important;
}
.col-2 img{
max-height: 90px !important;
width: 728px !important;
}
.col-3 img{
height: 90px !important;
width: 120px !important;
margin: 0 auto;
}
.col-4{
padding-bottom: 50px;
}
.black{
padding-top: 10px;
padding-right:20px;
}
.col-4 .img-1{
height: 60px !important;
width: 468px !important;
margin: 0 auto;
}
.col-5 .img-3{
height: 600px !important;
width: 300px !important;
}
.col-5 .img-5{
height:250px !important;
width:300px !important;
}
.cont{
width:100%;
}
.img-rounded{
height: 140px !important;
width:100px !important;
}
.pic-1{
border:1px solid #D8D8D8;
}
.desc-1{
height: 140px;
border:1px solid #D8D8D8;
}
h4{
color:#084B8A;
}
a{
cursor:pointer;
}
ul{
list-style:none;
}
img{
cursor:pointer;
}
.between{
padding-top:10px;
padding-bottom:10px;
}
.side-menu{
padding-top:10px;
padding-bottom:10px;
border:1px solid #D8D8D8;
}
.footer {
width: 100%;
height: 60px;
background-color: #D8D8D8;
text-align:center;
padding-top: 20px;
}
.div-2{
padding-top:20px;
}
form{
border:1px solid #D8D8D8;
background-color:#D8D8D8;
}
.div-3{
padding-top:20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment