"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 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/popcorn245/pen/QEVWKd?limit=all&page=73&q=service" /> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700); * { font-family: 'Open Sans', sans-serif; } body { margin: 0; padding: 0; } [class^="btn-"] { display: block; text-align: center; margin: 0 auto; border-radius: 3px; } [class^="break-"] { display: none; } .btn-blue { background-color: #125dba; color: #fff; font-weight: 600; } .btn-white { color: #fff; border: 1px solid #fff; } .btn-white:hover { cursor: pointer; background-color: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.72); } #home-landing .banner { padding: 25px 0; position: relative; background-color: #21a3df; height: 650px; /*&:before { content: ''; width: 100%; height: 50px; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/514050/bg-angle.svg'); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; bottom: -50px; left: 0px; }*/ } #home-landing .banner nav .logo { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/514050/logo-short.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; position: absolute; top: 25px; left: 25px; width: 100px; height: 37px; } #home-landing .banner nav .btn-white { position: absolute; top: 27px; right: 25px; height: 32px; line-height: 32px; width: 84px; font-size: 12px; } #home-landing .banner nav form { display: none; } #home-landing .banner h1 { margin: 150px auto 0 auto; padding: 0; color: #fff; font-weight: 400; width: 300px; text-align: center; font-size: 34px; } #home-landing .banner h1 .break-xs { display: block; } #home-landing .banner .btn-blue { width: 190px; height: 56px; line-height: 56px; font-weight: 600; font-size: 18px; margin-top: 30px; } #home-landing .banner .phone { position: absolute; bottom: -300px; left: 1; height: 550px; width: 100%; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/514050/phone-with-shadow%402.png'); background-repeat: no-repeat; background-size: contain; background-position: center; } #home-landing .chevron-down { display: block; margin: 0 auto; width: 100%; margin-top: -1px; } #home-landing ul { list-style: none; padding: 0; } #home-landing ul.values { margin: 300px 0 0 0; } #home-landing ul.values li { color: #363636; text-align: center; padding: 100px 20px; vertical-align: middle; font-size: 22px; line-height: 35px; } #home-landing ul.values li:nth-child(even) { background-color: #fafafa; } #home-landing ul.values li span { margin: 0 auto; display: block; width: 100%; max-width: 960px; } #home-landing footer { background-color: #21a3df; padding: 50px 20px; min-height: 37px; } #home-landing footer .logo { display: block; width: 72px; height: 84px; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/514050/logo-vertical.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; margin: 0 auto; } #home-landing footer .terms { margin: 50px 0; } #home-landing footer .terms li a { display: inline-block; width: 100%; text-align: center; color: #fff; font-size: 14px; font-weight: 300; height: 30px; line-height: 30px; cursor: pointer; } #home-landing footer .mixpanel { display: block; margin: 0 auto 50px auto; } #home-landing footer .mixpanel img { display: block; margin: 0 auto; } #home-landing footer .copyright { font-size: 11px; font-weight: 300; text-align: center; color: #fff; line-height: 20px; } @media (min-width: 756px) { #home-landing .banner h1 { width: 520px; font-size: 44px; } #home-landing .banner h1 .break-xs { display: none; } #home-landing .banner h1 .break-sm { display: block; } #home-landing ul.values li { font-size: 28px; line-height: 40px; } #home-landing ul.values li span { max-width: 530px; } } @media (min-width: 1200px) { #home-landing .banner nav .logo { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/514050/logo.svg'); width: 250px; height: 54px; left: 200px; top: 50px; } #home-landing .banner nav .btn-white { display: none; } #home-landing .banner nav form { display: block; position: absolute; right: 200px; top: 50px; } #home-landing .banner nav form input { border-radius: 3px; outline: none; border: 1px solid #fff; background: rgba(255, 255, 255, 0.15); width: 200px; height: 46px; text-indent: 20px; margin-right: 3px; display: inline-block; padding: 0; } #home-landing .banner nav form ::-webkit-input-placeholder { font-size: 16px; color: #fff; } #home-landing .banner nav form :-moz-placeholder { /* Firefox 18- */ font-size: 16px; color: #fff; } #home-landing .banner nav form ::-moz-placeholder { /* Firefox 19+ */ font-size: 16px; color: #fff; } #home-landing .banner nav form :-ms-input-placeholder { font-size: 16px; color: #fff; } #home-landing .banner nav form button.btn-blue { display: inline-block; border: none; width: 78px; height: 48px; line-height: 40px; margin-top: 0; } #home-landing .banner nav form a { color: #fff; font-weight: normal; font-size: 12px; position: absolute; right: 90px; top: 55px; cursor: pointer; } #home-landing .banner h1 { font-size: 60px; width: 900px; } #home-landing .banner h1 .break-xs, #home-landing .banner h1 .break-sm, #home-landing .banner h1 .break-md { display: none; } #home-landing ul.values li { font-size: 48px; line-height: 55px; } #home-landing ul.values li span { max-width: 960px; } #home-landing footer { padding: 20px 200px; } #home-landing footer .logo { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/514050/logo-short.svg'); display: inline-block; width: 105px; height: 37px; float: left; } #home-landing footer .terms { display: inline-block; height: 37px; margin: 0 0 0 50px; float: left; } #home-landing footer .terms li { display: inline-block; margin-right: 30px; } #home-landing footer .terms li a { height: 37px; line-height: 37px; display: inline-block; width: auto; } #home-landing footer .mixpanel { position: absolute; left: 50%; margin: 0; } #home-landing footer .copyright { display: inline-block; float: right; line-height: 37px; } #home-landing footer .copyright br { display: none; } } </style></head><body> <div id="home-landing"> <div class="banner"> <nav> <a class="logo"></a> <form> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> <button type="submit" class="btn-blue">Log In</button> <a>Login help</a> </form> <a class="btn-white">Web Login</a> </nav> <h1>A better<br class="break-xs" /> way to<br class="break-sm" /> share recommendations with friends</h1> <a class="btn-blue">Try the App</a> <div class="phone"></div> </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/514050/bg-angle.svg" class="chevron-down" /> <ul class="values"> <li><span>We made Joojoo because we trust our family and friends more than strangers, anonymous reviews and advertisements.<span></li> <li><span>Sites like Yelp, Angie's List, Google and YP rank businesses that pay for ads higher than ones that don't.</span></li> <li><span>When you and your friends recommend a business on Joojoo, it will be ranked higher throughout your social network</span></li> <li><span>Your recommendation is another way to support your favorite shops, restaurants and professionals while sharing them with your friends.</span></li> <li><span>We're already covering more than 15 million businesses throughout the US and Canada</span></li> <li><span>Discover great places from the people you trust.</span></li> <li><span>No ads.<br/>No charge.<br/>No fake reviews.<span></li> </ul> <footer> <a class="logo"></a> <ul class="terms"> <li><a>Privacy Policy</a></li> <li><a>Terms of Service</a></li> </ul> <a class="mixpanel" href="https://mixpanel.com/f/partner" rel="nofollow"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/514050/badge_blue.png" alt="Mobile Analytics" /></a> <div class="copyright"> © 2016 All Rights Reserved<br/> Joojoo Internet, LLC. </div> </footer> </div> </body></html>

Related: See More

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

Questions / Comments: