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

<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 ----------> <!DOCTYPE html> <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.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="assets/img/favicon.png"> <title>Siimple - Free Bootstrap 3 Landing Page</title> <!-- Bootstrap --> <link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap-theme.css" rel="stylesheet"> <!-- siimple style --> <link href="assets/css/style.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <!-- 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://upload.wikimedia.org/wikipedia/commons/f/f5/Howlsnow.jpg" alt=""> </div> <div class="item"> <img src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Grey_wolf_P1130270.jpg" alt=""> </div> <div class="item"> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/An_endangered_gray_wolf_peers_out_from_a_snow_covered_shelter.jpg/1280px-An_endangered_gray_wolf_peers_out_from_a_snow_covered_shelter.jpg" 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 - Bootstraptaste.com <a href="http://www.cnn.com/">My Site</a></p> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> </body> </html>
/* ==== 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://upload.wikimedia.org/wikipedia/commons/5/5f/Kolm%C3%A5rden_Wolf.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: