"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 ----------> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Mi.com</title> <!-- Bootstrap core CSS --> <link href="https://res.cloudinary.com/depmtifn8/raw/upload/v1465489851/bootstrap/css/theme.css" rel="stylesheet"> <!-- Main template --> <link href="https://res.cloudinary.com/depmtifn8/raw/upload/v1465624620/images/style.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700,100' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Raleway:300,700,900,500' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376208/assets/css/pushy.css"> <link rel="stylesheet" href="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376210/assets/css/masonry.css"> <link rel="stylesheet" href="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376212/assets/css/animate.css"> <link rel="stylesheet" href="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376210/assets/css/magnific-popup.css"> <link rel="stylesheet" href="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376208/assets/css/odometer-theme-default.css"> <script> window.odometerOptions = { selector: '.odometer', format: '(,ddd)', // Change how digit groups are formatted, and how many digits are shown after the decimal point duration: 13000, // Change how long the javascript expects the CSS animation to take theme: 'default' }; </script> </head> <body class=""> <!-- Pushy Menu --> <nav class="pushy pushy-left"> <ul class="list-unstyled"> <li><a href="#">Home</a></li> <li><a href="http://xiaomi-mi.com/smartphones/">Mi Phones</a></li> <li><a href="https://www.mi.com/in/note3/">Redmi Phones</a></li> <li><a href="http://xiaomi-mi.com/mi-tablets/">Mi Pad</a></li> <li><a href="http://xiaomi-mi.com/mi-band/">Mi Band</a></li> <li><a href="https://buy.mi.com/in/accessories">Accessories</a></li> <li><a href="http://en.miui.com/thread-279019-1-1.html">MIUI 8</a></li> <li><a href="https://www.mi.com/in/service/">Support</a></li> </ul> </nav> <!-- Site Overlay --> <div class="site-overlay"></div> <header id="home"> <div class="container-fluid"> <!-- change the image in style.css to the class header .container-fluid [approximately row 50] --> <div class="container"> <div class="row"> <div class="col-md-3 col-xs-10"> <a href="#" class="thumbnail logo"> <img src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465549306/images/your_logo.png" width="200" alt="" class="img-responsive"> </a> </div> <div class="col-md-1 col-md-offset-8 col-xs-2 text-center"> <div class="menu-btn"><span class="hamburger">☰</span></div> </div> </div> <div class="jumbotron"> <h1><small>Wait Is Over</small></br> </h1><br/><br/><br/> <p><a class="btn btn-primary btn-lg" href="https://codepen.io/gautamis/pen/qNbogw" role="button">Learn more</a> <a target="_blank" href="http://en.miui.com/download.html" class="btn btn-lg btn-danger" role="button">Download</a></p> </div> </div> </div> </header> <section id="feat"> <div class="container"> <div class="row features"> <div class="col-md-4 text-center wow fadeInUp" data-wow-delay="100ms"> <span class="typcn typcn-pencil x3"></span><br/> <h4>Mi Lanting</h4> <p>We redefined and enhancing mobile reading experience. Perhaps some of you might not notice the changes but for those who read and understand Chinese language this changes is significant</p> </div> <div class="col-md-4 text-center wow fadeInUp" data-wow-delay="300ms"> <span class="typcn typcn-camera-outline x3"></span> <h4>MIUI 8 Wallpaper Carousel</h4> <p>We've partnered with 50 medias to work on the 12 categories of daily lockscreen in MIUI 8. Pick your favourite category, set the frequency and wait for the wallpaper to be changed daily ! </p> </div> <div class="col-md-4 text-center wow fadeInUp" data-wow-delay="500ms"> <span class="typcn typcn-bookmark x3"></span> <h4>Enhanced Video Editing</h4> <p>Try out our new video editing tools with crops, filters, captions and music. Everyone can become a director from today onwards</p> </div> </div> </div> </section> <br/><br/> <section id="photos" class="gallery wow fadeInUp" data-wow-delay="300ms"> <h3 style="text-align:center">Our Products</h3> <div class="container"> <div class="row"> <div class="masonry image-gallery"> <div class="grid-sizer"></div> <div class="gutter-sizer"></div> <div class="item item-width2"> <a href="https://www.mi.com/in/note3/"> <img src="https://res.cloudinary.com/depmtifn8/image/upload/v1465622955/products/Redmi-Note-3-flash-sale.jpg" alt="" /> </a> </div> <div class="item"> <a href="https://www.mi.com/in/mi5/"> <img src="https://res.cloudinary.com/depmtifn8/image/upload/v1465623115/products/white.jpg" alt="" /> </a> </div> <div class="item"> <a href="https://buy.mi.com/in/item/3160700012"> <img src="https://res.cloudinary.com/depmtifn8/image/upload/v1465623849/products/speaker.jpg" alt="" /> </a> </div> <div class="item"> <a href="https://buy.mi.com/in/accessories/133"> <img src="https://res.cloudinary.com/depmtifn8/image/upload/v1465623974/products/mi-headphones-render.png" alt="" /> </a> </div> <div class="item"> <a href="https://www.mi.com/in/miband/"> <img src="https://res.cloudinary.com/depmtifn8/image/upload/v1465623558/products/miband.jpg" alt="" /> </a> </div> <div class="item"> <a href="https://www.mi.com/in/pb10400"> <img src="https://res.cloudinary.com/depmtifn8/image/upload/v1465623683/products/XMIPB-10400-2.jpg" alt="" /> </a> </div> <div class="item item-width2"> <a href="https://www.mi.com/in/mipad/"> <img src="https://res.cloudinary.com/depmtifn8/image/upload/v1465623328/products/Xiaomi-MiPad.jpg" alt="" /> </a> </div> </div> </div> </div> </section> <section id="about" class="number wow fadeInUp" data-wow-delay="300ms"> <!-- change the image in style.css to the class .number .container-fluid [approximately row 102] --> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-6 opaline col-md-offset-6"> <div class="row"> <div class="col-md-offset-1 col-md-10"> <h3>Beast AKA Mi Max!</h3> <h5>Mi Max, the largest handset with a large 6.44” display, is powered by a snapdragon processor and houses a 4850mAh battery. </h5> <p>- 6.44" large immersive display<br/> - 4850mAh all-day battery<br/> - Qualcomm Snapdragon 650/652<br/> - 4GB RAM +128GB Flash + 128GB MicroSD (other memory versions avail)<br/> - 16MP PDAF and 5MP cameras<br/> - 7.5mm ultra-thin metal body, weighs 203g<br/> - Fingerprint recognition<br/> - 4G Dual SIM</p> </div> </div> <div class="row text-center"> <!-- set the numbers in assets/js/scripts.js --> </div> </div> </div> </div> </div> </section> <section id="history" class="story wow fadeInUp" data-wow-delay="300ms"> <!-- change the image in style.css to the class .story .container-fluid [approximately row 141] --> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-6 opaline"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <p class="lead"><i>So, if you are ready to have some knowledge about Mi Max then follow this to the end!</i></p> <p><i>Mi Max comes with a 6.4" Full HD (1920 x 1080px) display with 342 ppi and is equipped with the powerful Qualcomm Snapdragon 650/652 processors to make your gameplay even faster and smoother. With the ultimate 4850 mAh battery, you can watch videos for upto a day in a single charge! If you were worried about the storage then there is no need to worry anymore because Mi Max comes with upto 128GB internal storage and that is why we call it "Max" because it is maximum from every aspect. </i></p> <a target="_blank" href="http://en.miui.com/thread-278829-1-1.html" class="btn btn-lg btn-danger" role="button">Learn More</a> </div> </div> </div> </div> </div> </div> </section> <section id="photos" class="gallery wow fadeInUp" data-wow-delay="300ms"> <div class="container"> <h3 style="text-align:center">Mi Max Camera Samples</h3> <div class="row"> <div class="masonry image-gallery"> <div class="grid-sizer"></div> <div class="gutter-sizer"></div> <div class="item item-width2"> <a href="https://unsplash.it/1000/600?image=529"> <img src="https://unsplash.it/600/300?image=529" alt="" /> </a> </div> <div class="item"> <a href="https://unsplash.it/1000/600?image=523"> <img src="https://unsplash.it/320/776?image=523" alt="" /> </a> </div> <div class="item"> <a href="https://unsplash.it/600/1000?image=503"> <img src="https://unsplash.it/500/800?image=503" alt="" /> </a> </div> <div class="item"> <a href="https://unsplash.it/1000/600?image=505"> <img src="https://unsplash.it/400/400?image=505" alt="" /> </a> </div> <div class="item"> <a href="https://unsplash.it/800/800?image=454"> <img src="https://unsplash.it/4403/2476?image=454" alt="" /> </a> </div> <div class="item"> <a href="https://unsplash.it/800/800?image=515"> <img src="https://unsplash.it/585/439?image=515" alt="" /> </a> </div> <div class="item item-width2"> <a href="https://unsplash.it/1000/600?image=451"> <img src="https://unsplash.it/600/140?image=451" alt="" /> </a> </div> </div> </div> </div> </section> <section id="contact" class="prefooter wow fadeInUp" data-wow-delay="300ms"> <!-- change the image in style.css to the class .prefooter .container-fluid [approximately row 154] --> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-8"> <h3>Sign Up for the Newsletter and never miss any latest News and Launch.</h3> <p></p> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Your Email Here..."> <br> <button type="button" class="btn btn-danger">Submit Newsletter</button> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="container"> <div class="row"> <div class="col-md-8"> <h3>Gautam.Is</h3> <p>© 2016 MIUI. Designed and Developed by <a target="_blank" href="http://en.miui.com/home.php?mod=space&uid=73801845">Gautam.Is</a></p> </div> <div class="col-md-4"> <p class="text-right social"><i class="typcn typcn-social-facebook-circular"></i><i class="typcn typcn-social-twitter-circular"></i><i class="typcn typcn-social-tumbler-circular"></i><i class="typcn typcn-social-github-circular"></i><i class="typcn typcn-social-dribbble-circular"></i></p> </div> </div> </div> </footer> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376261/assets/js/jquery.min.js"></script> <script src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465489899/bootstrap/js/bootstrap.min.js"></script> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap-scrollspy.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376258/assets/js/ie10-viewport-bug-workaround.js"></script> <script src="https://masonry.desandro.com/masonry.pkgd.js"></script> <script src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376259/assets/js/masonry.js"></script> <script src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376256/assets/js/pushy.min.js"></script> <script src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376258/assets/js/jquery.magnific-popup.min.js"></script> <script src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376257/assets/js/wow.min.js"></script> <script src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376257/assets/js/scripts.js"></script> <script src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376257/assets/js/odometer.js"></script> </body> </html>

Related: See More

Vue Now UI Kit
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: