"layout"
Bootstrap 3.3.0 Snippet by evarevirus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BLUEBOX</title> <link rel="icon" type="image/png" href="http://res.cloudinary.com/dekbzep16/image/upload/v1484574304/Layout/Bluebox/bluebox-logo.png" /> </head> <body> <header> <div class="container"> <div id="responsive-menu-icon" onclick="toggleResponsiveMenu()"> <span class="menu-box"> <span class="menu-inner"></span> </span> </div> <div class="logo"> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574304/Layout/Bluebox/bluebox-logo.png" alt="BlueBox logo" /> <span>BLUEBOX</span> </div> <div class="search-box"> <form> <input type="text" id="search" placeholder="Search" onChange="searchInput()" /> <input type="submit" value="" /> </form> </div> <nav id="top-menu"> <div class='menu-group'> <a href="#">About</a> </div> <div class='menu-group'> <a href="#">Services</a> <div class="sub-menu"> <a href="#">Web Design</a> <a href="#">Wordpress Design</a> <a href="#">Mobile Apps</a> <a href="#">Social Media</a> </div> </div> <div class='menu-group'> <a href="#">Works</a> </div> <div class='menu-group'> <a href="#">Blog</a> </div> <div class='menu-group'> <a href="#">Contact us</a> </div> </nav> </div> </header> <section class="slider"> <div class="container"> <div class="slider-header"> <h1>We are a Creative Digital Agency</h1> <button>Learn More</button> </div> <div class="flexslider"> <ul class="slides"> <li> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574303/Layout/Bluebox/slide1.png" alt="Slide 1" /> </li> <li> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574304/Layout/Bluebox/slide2.png" alt="Slide 2" /> </li> </ul> </div> </div> </section> <div class="portfolio"> <div class="container"> <div class="box"> <h2>Web Design</h2> <div class="icon-box"> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574304/Layout/Bluebox/brush2.png" alt="Web Design" /> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus, lacus ac commodo volutpat, felis odio pulvinar enim, non dapibus mauris nulla sed ipsum. </p> <a href ="#">Read more</a> </div> <div class="box"> <h2>Social Media</h2> <div class="icon-box"> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574303/Layout/Bluebox/share2.png" alt="Social Media" /> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus, lacus ac commodo volutpat, felis odio pulvinar enim, non dapibus mauris nulla sed ipsum. </p> <a href ="#">Read more</a> </div> <div class="box"> <h2>Mobile Apps</h2> <div class="icon-box"> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574303/Layout/Bluebox/phone2.png" alt="Mobile Apps" /> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus, lacus ac commodo volutpat, felis odio pulvinar enim, non dapibus mauris nulla sed ipsum. </p> <a href ="#">Read more</a> </div> </div> </div> <section class="newsletter"> <div class="container"> <h2>Newsletter</h2> <div class="newsletter-box"> <input type="text" placeholder="E-mail..." /> <button>Sign up</button> </div> </div> </section> <section class="clients"> <div class="container"> <h2>Clients</h2> <div class="clients-list"> <div class="row"> <div class="item"><img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574303/Layout/Bluebox/client-cnn.png" alt="CNN" /></div> <div class="item"><img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574303/Layout/Bluebox/client-fujifilm.png" alt="FUJIFILM" /></div> </div> <div class="row"> <div class="item"><img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574305/Layout/Bluebox/client-casio.png" alt="CASIO" /></div> <div class="item"><img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574304/Layout/Bluebox/client-apartment-finder.png" alt="APARTMENT FINDER" /></div> </div> </div> </div> </section> <footer> <div class="container"> <div> <nav> <a href="#">About</a> <a href="#">Services</a> <a href="#">Works</a> <a href="#">Blog</a> <a href="#">Contact us</a> </nav> <div class="social-icons"> <a href="#"> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574304/Layout/Bluebox/social-facebook.png" alt="Facebook" title="Facebook" /> </a> <a href="#"> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574304/Layout/Bluebox/social-linkedin.png" alt="LinkedIn" title="LinkedIn" /> </a> <a href="#"> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574304/Layout/Bluebox/social-twitter.png" alt="Twitter" title="Twitter" /> </a> <a href="#"> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574304/Layout/Bluebox/social-pinterest.png" alt="Pinterest" title="Pinterest" /> </a> <a href="#"> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574304/Layout/Bluebox/social-dribbble.png" alt="Dribbble" title="Dribbble" /> </a> <a href="#"> <img src="http://res.cloudinary.com/dekbzep16/image/upload/v1484574304/Layout/Bluebox/social-googleplus.png" alt="Google+" title="Google+" /> </a> </div> </div> <div class="copyright-box"> © 2013 BlueBox. All Rights Reserved. </div> </div> </footer> </body> </html>
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700); /* VARIABLE.SCSS */ /* - */ /* MIXINS.SCSS */ /* - */ /* MEDIA.SCSS */ @import url(https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css); @media (max-width: 599px) { button { height: 45px; padding: 0 15px; } h1 { font-size: 1.6rem; } h2 { font-size: 1.4rem; } header .logo { display: flex; justify-content: center; align-items: center; flex-basis: 100%; } header .logo img { width: 20px; } header .logo span { font-size: 1.66rem; } header nav { display: inline; flex-basis: 100%; } header nav:not(.responsive) { display: none; } header nav.responsive .menu-group { display: block; } header nav.responsive .menu-group a { display: block; padding: 8px 0; } header nav.responsive .menu-group:hover .sub-menu { display: block; } header nav.responsive .menu-group:hover .sub-menu a { color: inherit; padding: 5px 15px; } header nav.responsive .menu-group:hover .sub-menu a:hover { color: #66ceff; } .clients .item { width: 100%; } footer nav > a:not(:last-child):after { margin: 0 5px; } } @media (min-width: 600px) and (max-width: 768px) { header .logo { display: flex; justify-content: center; align-items: center; flex-basis: 100%; } header .logo img { width: 20px; } header .logo span { font-size: 1.66rem; } header nav { display: inline; flex-basis: 100%; } header nav:not(.responsive) { display: none; } header nav.responsive .menu-group { display: block; } header nav.responsive .menu-group a { display: block; padding: 8px 0; } header nav.responsive .menu-group:hover .sub-menu { display: block; } header nav.responsive .menu-group:hover .sub-menu a { color: inherit; padding: 5px 15px; } header nav.responsive .menu-group:hover .sub-menu a:hover { color: #66ceff; } .portfolio .container .box { width: 45%; } footer nav > a:not(:last-child):after { margin: 0 5px; } } @media (min-width: 600px) { button { height: 60px; padding: 0 25px; } h1 { font-size: 3rem; } h2 { font-size: 2rem; } } @media (min-width: 769px) { header #responsive-menu-icon { display: none; } header .logo { display: flex; align-items: center; padding: 10px 0; } header .logo span { font-size: 2.188rem; } header nav { display: flex; align-items: center; padding: 15px 0; order: 1; } header nav > .menu-group:not(:first-child) { padding: 0 20px; } header nav > .menu-group:first-child { padding-right: 20px; } header nav > .menu-group:not(:last-child) { border-right: 2px solid #a1a1a1; } header nav > .menu-group:hover > .sub-menu { display: block; position: absolute; } header nav > .menu-group:hover > .sub-menu:before { content: ""; display: block; height: 15px; } header nav > .menu-group:hover > .sub-menu > a:first-child:before { transition: all .2s ease; -webkit-transition: all .2s ease; content: ''; position: absolute; left: 30px; top: 7px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #e2e7ed; } header nav > .menu-group:hover > .sub-menu > a:hover:first-child:before { border-bottom: 8px solid #00aeff; } header nav > .menu-group:hover > .sub-menu > a:not(:last-child) { border-bottom: 1px solid #31333e; } header nav > .menu-group a { color: #626262; } header nav > .menu-group a:hover { color: #66ceff; } header nav > .menu-group .sub-menu { display: none; } header nav > .menu-group .sub-menu a { background-color: #e2e7ed; color: #000000; padding: 12px 15px; display: block; } header nav > .menu-group .sub-menu a:hover { background-color: #00aeff; color: #ffffff; } .slider { height: 650px; } .portfolio .container .box { width: 30%; } footer nav > a:not(:last-child):after { margin: 0 15px; } } @media (min-width: 769px) and (max-width: 980px) { nav { flex-basis: 100%; } } @media (min-width: 981px) { header .container .logo { margin-right: 50px; } header .container .search-box { order: 2; flex-basis: 155px; } } /* - */ /* FLEXSLIDER.SCSS */ .flexslider { background: none !important; border: none !important; } .flexslider .slides img { max-width: 700px; margin: auto; } .flexslider .flex-prev, .flexslider .flex-next { font-size: 0; } /* - */ /* MAIN.SCSS */ * { margin: 0px; padding: 0px; } html { font-family: "PT Sans", sans-serif; font-size: 16px; color: #2a2e39; } body { background-color: #ffffff; } h1, h2 { font-weight: normal; } h2 { color: #626262; margin-bottom: 40px; } a { text-decoration: none; outline: none; color: #00aeff; white-space: nowrap; transition: all .2s ease; -webkit-transition: all .2s ease; } a:hover { color: #31333e; } button { border-width: 0; border-radius: 5px; background-color: #00aeff; color: #ffffff; font-size: 1.375rem; cursor: pointer; transition: all .2s ease; -webkit-transition: all .2s ease; } button:hover { background-color: #007ab7; } .container { margin: auto; max-width: 960px; width: 90%; } /* - */ /* HEADER.SCSS */ header > .container { display: flex; justify-content: space-between; flex-wrap: wrap; } header > .container .logo { order: -1; } header > .container .logo > span { margin-left: 10px; font-weight: bold; letter-spacing: -2px; color: #31333e; } header > .container #responsive-menu-icon { align-self: flex-end; padding: 0; height: 35px; outline: none; cursor: pointer; background-color: transparent; } header > .container #responsive-menu-icon .menu-box { position: relative; display: inline-block; width: 30px; height: 20px; } header > .container #responsive-menu-icon .menu-box .menu-inner, header > .container #responsive-menu-icon .menu-box .menu-inner:before, header > .container #responsive-menu-icon .menu-box .menu-inner:after { display: block; position: absolute; width: 30px; height: 2px; background-color: #626262; border-radius: 4px; } header > .container #responsive-menu-icon .menu-box .menu-inner:before { content: ''; top: 7px; } header > .container #responsive-menu-icon .menu-box .menu-inner:after { content: ''; top: 14px; } header > .container #responsive-menu-icon.open-menu .menu-inner, header > .container #responsive-menu-icon.open-menu .menu-box .menu-inner:before, header > .container #responsive-menu-icon.open-menu .menu-box .menu-inner:after, header > .container #responsive-menu-icon.open-menu .menu-inner:before, header > .container #responsive-menu-icon.open-menu .menu-inner:after { background-color: #66ceff; } header > .container nav .menu-group > a { color: #626262; text-transform: uppercase; } header > .container nav .menu-group > a:hover { color: #66ceff; } header > .container nav .sub-menu { display: none; width: 150px; } header > .container .search-box { display: flex; justify-content: flex-end; align-items: center; padding: 10px 0; } header > .container .search-box form { position: relative; } header > .container .search-box .stretch, header > .container .search-box input[type="text"]:focus { width: 120px !important; background-color: #d8f3ff !important; } header > .container .search-box input { border: none; outline: none; } header > .container .search-box input[type="text"] { width: 80px; height: 30px; font-style: italic; padding: 0 25px 0 9px; background-color: #f1f3f6; border-radius: 2px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } header > .container .search-box input[type="submit"] { background: url(../img/search-icon.png) no-repeat; position: absolute; top: 3px; right: 5px; width: 20px; height: 24px; cursor: pointer; } /* - */ /* MAIN-PAGE.SCCS */ .slider { background-color: #31333e; } .slider .container > .slider-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 60px 0 80px 0; } .slider .container > .slider-header h1 { color: #ffffff; margin: 0 15px 15px 0; } .portfolio .container { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 50px 0; } .portfolio .container .box { text-align: center; } .portfolio .container .box .icon-box { margin: 25px 0; } .portfolio .container .box a, .portfolio .container .box p { font-size: .9375rem; } .portfolio .container .box p { margin-bottom: 25px; line-height: 1.5rem; } .portfolio .container .box a { font-weight: bold; text-transform: uppercase; } .newsletter { background-color: #e2e7ed; } .newsletter .container { padding: 80px 0; } .newsletter .container .newsletter-box { display: flex; justify-content: space-between; flex-wrap: wrap; } .newsletter .container .newsletter-box input { width: 100%; max-width: 650px; height: 60px; padding: 0 30px; margin-bottom: 20px; border-radius: 5px; margin-right: 30px; border: none; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3); webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3); } .clients { display: flex; align-items: center; } .clients .container { padding: 80px 0; } .clients .container .clients-list { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .clients .container .clients-list .row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .clients .container .clients-list .row .item { text-align: center; padding: 15px; } /* - */ /* FOOTER.SCSS */ footer { background-color: #31333e; min-height: 210px; font-size: 0.9375rem; color: #cacfd6; } footer > .container > div { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 25px; } footer > .container > div > nav > a { color: #cacfd6; } footer > .container > div > nav > a:hover { color: #66ceff; } footer > .container > div > nav > a:not(:last-child):after { content: ""; border-right: 2px solid #cacfd6; } footer > .container > div .social-icons img { transition: all .2s ease; -webkit-transition: all .2s ease; } footer > .container > div .social-icons img:hover { opacity: .7; filter: alpha(opacity=70); } footer > .container > div .social-icons > a:not(:last-child) { margin-right: 11px; } footer > .container > div > * { padding-top: 25px; }
$(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: false }); }); function toggleResponsiveMenu() { const menu = document.getElementById("top-menu"); const menuIcon = document.getElementById("responsive-menu-icon"); if (menu.className === "responsive") { menu.className = ""; menuIcon.className = ""; } else { menu.className = "responsive"; menuIcon.className = "open-menu"; } } function searchInput() { const search= document.getElementById("search"); if (search.value !== "") { search.className = "stretch" } else { search.className = "" } }

Related: See More


Questions / Comments: