"TEST IM 215 - TASK TWO"
Bootstrap 3.1.0 Snippet by Redleader246

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://startbootstrap.com">Start Bootstrap</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-right navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li><a href="#about">About</a> </li> <li><a href="#services">Services</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <div class="intro-header"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="intro-message"> <h1>Landing Page</h1> <h3>A Template by Start Bootstrap</h3> <hr class="intro-divider"> <ul class="list-inline intro-social-buttons"> <li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a> </li> <li><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> </li> <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a> </li> </ul> </div> </div> </div> </div> <!-- /.container --> </div> <!-- /.intro-header --> <div class="content-section-a"> <div class="container"> <div class="row"> <div class="col-lg-5 col-sm-6"> <hr class="section-heading-spacer"> <div class="clearfix"></div> <h2 class="section-heading">Death to the Stock Photo: <br>Special Thanks</h2> <p class="lead">A special thanks to Death to the Stock Photo for providing the photographs that you see in this template. <a target="_blank" href="http://join.deathtothestockphoto.com/">Visit their website</a> to become a member.</p> </div> <div class="col-lg-5 col-lg-offset-2 col-sm-6"> <img class="img-responsive" src="http://img4.wikia.nocookie.net/__cb20120303233955/lotr/images/6/6e/Witch_King.png" alt=""> </div> </div> </div> <!-- /.container --> </div> <!-- /.content-section-a --> <div class="content-section-b"> <div class="container"> <div class="row"> <div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6"> <hr class="section-heading-spacer"> <div class="clearfix"></div> <h2 class="section-heading">3D Device Mockups <br>by PSDCovers</h2> <p class="lead">Turn your 2D designs into high quality, 3D product shots in seconds using free Photoshop actions by PSDCovers! <a target="_blank" href="http://www.psdcovers.com/">Visit their website</a> to download some of their awesome, free photoshop actions!</p> </div> <div class="col-lg-5 col-sm-pull-6 col-sm-6"> <img class="img-responsive" src="http://img3.wikia.nocookie.net/__cb20130209172436/lotr/images/8/8d/Gandalf-2.jpg" alt=""> </div> </div> </div> <!-- /.container --> </div> <!-- /.content-section-b --> <div class="content-section-a"> <div class="container"> <div class="row"> <div class="col-lg-5 col-sm-6"> <hr class="section-heading-spacer"> <div class="clearfix"></div> <h2 class="section-heading">Google Web Fonts and <br>Font Awesome Icons</h2> <p class="lead">This template features the 'Lato' font, part of the <a target="_blank" href="http://www.google.com/fonts">Google Web Font library</a>, as well as <a target="_blank" href="http://fontawesome.io">icons from Font Awesome</a>.</p> </div> <div class="col-lg-5 col-lg-offset-2 col-sm-6"> <img class="img-responsive" src="http://topicstock.pantip.com/chalermthai/topicstock/2010/01/A8782411/A8782411-vote9.jpg" alt=""> </div> </div> </div> <!-- /.container --> </div> <!-- /.content-section-a --> <div class="banner"> <div class="container"> <div class="row"> <div class="col-lg-6"> <h2>Connect to Start Bootstrap:</h2> </div> <div class="col-lg-6"> <ul class="list-inline banner-social-buttons"> <li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a> </li> <li><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> </li> <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a> </li> </ul> </div> </div> </div> <!-- /.container --> </div> <!-- /.banner --> <footer> <a herf="http://www.cnn.com/"></a> <div class="container"> <div class="row"> <div class="col-lg-12"> <ul class="list-inline"> <li><a href="#home">Home</a> </li> <li class="footer-menu-divider">⋅</li> <li><a href="#about">About</a> </li> <li class="footer-menu-divider">⋅</li> <li><a href="#services">Services</a> </li> <li class="footer-menu-divider">⋅</li> <li><a href="#contact">Contact</a> </li> </ul> <p class="copyright text-muted small">Copyright © Your Company 2013. All Rights Reserved ⋅<a href="http://www.xcom.com/enemyunknown/entry">mysite.com</a></p> </div> </div> </div> </footer>
body, html { height: 100%; width: 100%; } body, h1, h2, h3, h4, h5, h6 { font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; } .lead { font-size: 18px; font-weight: 400; } .intro-header { padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ padding-bottom: 50px; color: #f8f8f8; background: url(http://imgc.allpostersimages.com/images/P-473-488-90/56/5695/9DTUG00Z/posters/lord-of-the-rings-1-the-fellowship-of-the-ring.jpg) no-repeat center center; background-size: cover; text-align: center; } .intro-message { position: relative; padding-top: 20%; padding-bottom: 20%; } .intro-message > h1 { margin: 0; font-size: 5em; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); } .intro-divider { width: 400px; border-top: 1px solid #f8f8f8; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .intro-message > h3 { text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); } @media (max-width: 767px) { .intro-message { padding-bottom: 15%; } .intro-message > h1 { font-size: 3em; } ul.intro-social-buttons > li { display: block; margin-bottom: 20px; padding: 0; } ul.intro-social-buttons > li:last-child { margin-bottom: 0; } .intro-divider { width: 100%; } } .network-name { text-transform: uppercase; font-size: 14px; font-weight: 400; letter-spacing: 2px; } .content-section-a { background-color: #f8f8f8; padding: 50px 0; } .content-section-b { border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; padding: 50px 0; } .section-heading { margin-bottom: 30px; } .section-heading-spacer { border-top: 3px solid #e7e7e7; width: 200px; float: left; } .banner { padding: 100px 0; color: #f8f8f8; background: url(http://imgc.allpostersimages.com/images/P-473-488-90/56/5695/9DTUG00Z/posters/lord-of-the-rings-1-the-fellowship-of-the-ring.jpg) no-repeat center center; background-size: cover; } .banner h2 { margin: 0; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); font-size: 3em; } .banner ul { margin-bottom: 0; } .banner-social-buttons { float: right; margin-top: 0; } @media (max-width: 1199px) { ul.banner-social-buttons { float: left; margin-top: 15px; } } @media (max-width: 767px) { .banner h2 { margin: 0; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); font-size: 3em; } ul.banner-social-buttons > li { display: block; margin-bottom: 20px; padding: 0; } ul.banner-social-buttons > li:last-child { margin-bottom: 0; } } footer { background-color: #f8f8f8; padding: 50px 0; } p.copyright { margin: 15px 0 0; }

Related: See More


Questions / Comments: