"layout"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/sashatran/pen/dNdeBb?depth=everything&order=popularity&page=14&q=builder&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Montserrat"); * { padding: 0; margin: 0; } nav { display: flex; width: 98%; justify-content: space-between; padding: 1%; } nav div { font-family: 'Montserrat', sans-serif; font-size: 16px; } i { padding-right: 5px; } .mid { font-size: 20px; } .right, .bar { color: #666; cursor: pointer; } .sidebar { position: fixed; width: 18%; transition: all 0.5s ease; transform: translateX(-200%); background: #999; height: 100vh; } .sidebar ul a { display: block; margin: 20px; font-family: 'Montserrat', sans-serif; color: #FFF; text-decoration: none; } .sidebar.show { transform: translateX(0); } .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .container .content { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; width: 70%; margin-left: auto; margin-right: auto; text-align: center; margin: 10% 0; padding: 20px; } .container .content h1 { font-family: 'Montserrat', sans-serif; } .container .content p { padding: 0; } .container img { width: 70%; } .des { font-family: 'Montserrat', sans-serif; font-size: 16px; color: #999; line-height: 30px; padding: 0; } .news { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; max-width: 1200px; margin-top: -10%; } .media { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 40%; min-height: 30%; } .media img { width: 50%; } #port { display: flex; justify-content: center; flex-direction: column; align-items: center; margin-top: 0%; } #photo { width: 70%; margin-top: 10%; } #fox { width: 24%; } h4 { margin: 5% 0 0 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 16px; } @media (max-width: 800px) { nav { margin-top: 5px; } .sidebar ul a { font-size: 20px; text-align: center; margin: 10%; color: #FFF; } .sidebar ul a:hover { color: #333; } .media { width: 100%; padding: 10px; text-align: center; } .sidebar { width: 100%; } h1 { font-size: 25px; } .des { font-size: 15px; padding-bottom: 30px; } } </style></head><body> <nav> <div class="right"> <i class="fa fa-bars"></i> Guides</div> <div class="mid">Wise Buyer</div> <div class="bar">Newsletter</div> </nav> <div class="sidebar"> <ul> <a href="">Website Builder</a> <a href="">Portfolio Builder</a> <a href="">Ecommerce Software</a> <a href="">Landing Page Builder</a> <a href="">Live Chat Software</a> </ul> </div> <div class="container"> <div class="content"> <h1>Software buyer guides based on conversations with thousands of real-life users.</h1> <img src="https://www.wisebuyer.com/assets/survey-mat-90894c43c24d50f5e3a2921efee34c01.png" alt="" /> </div> <div class="content"> <h1>Thoroughly researched.</h1> <p class="des">We do the research so you don't have to. Every buyer guide we publish is the result of hundreds of conversations with real-life users. This takes a long time— most buyer guides take around 150 hours to complete— but it's worth it.</p> <img src="https://www.wisebuyer.com/assets/lab-owl-05f5b08889a2c95afa338b2ed6946f73.jpg" alt="" /> </div> <div class="content"> <h1>Conversations with real-life, verified users.</h1> <p class="des">Instead of allowing anyone to submit a review, we only approach users we can verify. This avoids user-submitted reviews— a system which is commonly gamed on other software review websites by companies paying for fake reviews.</p> <img src="https://www.wisebuyer.com/assets/chat-no-text-7ccddb62008a0178a230556ebfb9044c.jpg" alt="" /> </div> <div class="content"> <h1>What we’ve published so far:</h1> <p class="des">We publish a new guide every month.</p> </div> <div class="news"> <div class="media"> <img src="https://www.wisebuyer.com/assets/2bear-mat-60669aca8b28a78846b96f53ec19ab9d.png" alt="" /> <h4>Website Builders</h4> <p class="des">What we learned by talking to 1,147 users.</p> </div> <div class="media"> <img id="photo" src="https://wisebuyeraws.imgix.net/guides/cartoons/000/000/002/original/camera.png?1484599933?ixlib=rails-1.1.0&h=170%201x,%20https://wisebuyeraws.imgix.net/guides/cartoons/000/000/002/original/camera.png?1484599933?ixlib=rails-1.1.0&h=170&dpr=2%202x" alt="" /> <div id="port"> <h4>Portfolio Builders </h4> <p class="des">What we learned by talking to 823 users.</p> </div> </div> <div class="media"> <img src="https://wisebuyeraws.imgix.net/guides/cartoons/000/000/003/original/delivery.png?1484599996?ixlib=rails-1.1.0&h=170" alt="" /> <h4>Ecommerce Software </h4> <p class="des">What we learned by talking to 917 users.</p> </div> <div class="media"> <img id="fox" src="https://wisebuyeraws.imgix.net/guides/cartoons/000/000/004/original/lan.png?1484599973?ixlib=rails-1.1.0&h=170 1x, https://wisebuyeraws.imgix.net/guides/cartoons/000/000/004/original/lan.png?1484599973?ixlib=rails-1.1.0&h=170&dpr=2 2x" alt="" /> <h4>Landing Page Builders </h4> <p class="des">What we learned by talking to 467 users.</p> </div> <div class="media"> <img src="https://www.wisebuyer.com/assets/2bear-mat-60669aca8b28a78846b96f53ec19ab9d.png" alt="" /> <h4>Live Chat Software </h4> <p class="des"> Coming Soon ... </p> </div> </div> <div class="content"> <h1>Get in touch</h1> <p class="des">We'd love to hear from you. Email steve@wisebuyer.com. </p> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script >//Rebuilding Wise Buyer website with //flexbox. //Images & content credit to Wise Buyer $(".right").on("click", function(){ $(".sidebar").toggleClass("show"); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Rotating CSS Card
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: