"IM 215 TEST - Task TWO"
Bootstrap 3.1.0 Snippet by karlyvis

<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 ----------> <!-- Fixed navbar --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">Siimple</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Sign up</a></li> <li><a href="#">Sign in</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div id="header"> <div class="container"> <div class="row"> <div class="col-lg-6"> <h1>Simple landing page</h1> <h2 class="subtitle">No need huge slogan, we believe in less is better</h2> <form class="form-inline signup" role="form"> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter your email address"> </div> <button type="submit" class="btn btn-theme">Get it now</button> </form> </div> <div class="col-lg-4 col-lg-offset-2"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://bootstraptaste.com/theme/siimple/assets/img/slide1.png" alt=""> </div> <div class="item"> <img src="http://bootstraptaste.com/theme/siimple/assets/img/slide2.png" alt=""> </div> <div class="item"> <img src="http://bootstraptaste.com/theme/siimple/assets/img/slide3.png" alt=""> </div> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3"> <p class="copyright">Copyright © 2014 - <a href="cnn.com">mysite.com</a></p> </div> </div> </div> </div>
/* ==== Google font ==== */ @import url('http://fonts.googleapis.com/css?family=Lato:400,300,700,900'); body { background-color: #f2f2f2; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 16px; color: #555; line-height: 1.6em; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; } h1, h2, h3, h4, h5, h6 { font-family: 'Lato', sans-serif; font-weight: 300; color: #444; } h1 { font-size: 40px; } h3 { font-weight: 400; } h4 { font-weight: 400; font-size: 20px; } p { margin-bottom: 20px; font-size: 16px; } a { color: #d6ee18; word-wrap: break-word; -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; -moz-transition: color 0.1s ease-in, background 0.1s ease-in; -ms-transition: color 0.1s ease-in, background 0.1s ease-in; -o-transition: color 0.1s ease-in, background 0.1s ease-in; transition: color 0.1s ease-in, background 0.1s ease-in; } a:hover, a:focus { color: #b7cb1b; text-decoration: none; outline: 0; } a:before, a:after { -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; -moz-transition: color 0.1s ease-in, background 0.1s ease-in; -ms-transition: color 0.1s ease-in, background 0.1s ease-in; -o-transition: color 0.1s ease-in, background 0.1s ease-in; transition: color 0.1s ease-in, background 0.1s ease-in; } .navbar-inverse .navbar-nav > li > a { color: #c6d550; } .alignleft { text-align: left; } .alignright { text-align: right; } .aligncenter { text-align: center; } .btn-theme { color: #fff; background-color: #fd680e; border-color: #fd680e; } .btn-theme:hover { color: #fff; background-color: #444; border-color: #444; } form.signup { margin-top: 30px; } form.signup button.btn { text-transform: uppercase; font-weight: 700; } form.signup input.form-control:focus { border-color: #fd680e; } /* Nav */ a.navbar-brand { color: #fff !important; font-weight: 900; text-transform: uppercase; } a.navbar-brand:hover { color: #ddd !important; } /* Header */ #header { background-color: #444; background: url("http://www.anyclean.co.uk/userfiles/image/articles/get-rid-of-leaves.jpg") no-repeat center top; margin-top: -20px; padding-top: 150px; background-attachment: relative; background-position: center center; min-height: 650px; width: 100%; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #header h1 { margin-top: 60px; margin-bottom: 15px; color: #fff; font-size: 45px; font-weight: 900; letter-spacing: -1px; } h2.subtitle { color: #fff; font-size: 20px; } /* slide */ .carousel-indicators { position: absolute; bottom: -40px; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -50%; text-align: center; list-style: none; } .carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: #000 \9; background-color: #fff; border: 1px solid #fff; border-radius: 10px; } .carousel-indicators .active { width: 12px; height: 12px; margin: 0; background-color: #b7cb1b; } /* footer */ #footer { background: #fd680e; padding: 20px 0 5px; } p.copyright { color: #fff; text-align: center; }

Related: See More


Questions / Comments: