"vitrine responsive"
Bootstrap 4.1.1 Snippet by sidskaka

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <style> </style> </head> <body> <header class="page-header"> <div class="row"> <div style="width: 100%;" id="demo" class="carousel slide" data-ride="carousel"> <div style="display: flex; justify-content: space-between;"> <img class="logo" style="" src="https://industries.ma/wp-content/uploads/2020/10/21357707045c24e38ec359c.png" alt="logo YNOV"> </div> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> </ul> <!-- The slideshow --> <div style="margin-top: -16%;" class="carousel-inner"> <div class="carousel-item active"> <img style="height: 477px;" src="https://moodle.ynov.com/pluginfile.php/1/theme_fordson/slide1image/1611223349/welcome_op.jpg" width="100%" alt="Los Angeles"> </div> <!--<div class="carousel-item"> <img style="height: 477px;" src="https://moodle.ynov.com/pluginfile.php/1/theme_fordson/slide2image/1611223349/slide_home2_op.jpg" width="100%" alt="Chicago"> </div>--> <div class="carousel-item"> <img style="height: 477px;" src="http://moodle.ynov.com/pluginfile.php/1/theme_fordson/slide3image/1611223349/slide_home3_op.jpg" width="100%" alt="Chicago"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> </header> <hr style="margin-top: 6px; margin-bottom: 0px;"> <div class="menu"> <ul> <li><a>Accueil</a></li> <li><a>A propos</a></li> <li><a>Blog</a></li> <li><a>Contact</a></li> </ul> </div> <div style="z-index: 1; margin-left: 87%;" class="burger" id="toggleMenuBurger"> <div style="z-index: 1;width: 50px;height: 6px;background: #00aeef;margin-top: 7px"></div> <div style="z-index: 1;width: 50px;height: 6px;background: #00aeef;margin-top: 7px"></div> <div style="z-index: 1;width: 50px;height: 6px;background: #00aeef;margin-top: 7px"></div> </div> <hr style="margin-top: 6px; margin-bottom: 0px;"> </body> </html>
.logo { z-index: 1; margin-left: 3%; width: 11%; height: 96px; } .menu ul li { display: inline; margin-left: 3%; } .menu ul li a { text-transform: uppercase; font: caption; font-weight: bold; } .menu ul { padding-left: 36%; } .menu { margin-top: 1%; } @media screen and (min-width:1280px){ } @media screen and (max-width:1280px){ } @media screen and (max-width:1400px){ .logo { z-index: 1; margin-left: 3%; width: 14%; height: 96px; } } @media screen and (max-width:1200px){ .logo { z-index: 1; margin-left: 3%; width: 18%; height: 96px; } } @media screen and (min-width:801px){ .burger { display: none; } } @media screen and (max-width:800px){ .menu { display: none; } .logo { z-index: 1; margin-left: 3%; width: 22%; height: 96px; } } @media screen and (max-width:700px){ .menu { display: none; } .logo { z-index: 1; margin-left: 3%; width: 25%; height: 96px; } } @media screen and (max-width:540px){ .menu { display: none; } .logo { z-index: 1; margin-left: 3%; width: 29%; height: 96px; } }

Related: See More

Coming Sssoon Page
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Responsive Event Html template bootstrap 4

Questions / Comments: