Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

layout-practice/index.html

Go to file
 
 
Cannot retrieve contributors at this time
256 lines (232 sloc) 10.4 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Exo:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Layout Exercise</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
<div class="jumbotron vertical-center" id="header">
<div class="container text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Code Out This Layout So Flawlessly It'll Make Joel Cry</h1>
</div>
</div>
<p><a id="headerbtn"class="btn btn-primary btn-lg" href="#" role="button">TRY NOW</a></p>
<p class="note-text">* This should all be text</p>
</div>
</div>
<div id="first" class="container-fluid">
<div class="row vertical-center">
<div class="col-md-5 col-md-offset-1">
<h3>JANUARY 28, 2016</h3>
<h2>And here's a random photo of a dog <span>....</span></h2>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.</p>
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="col-md-3 col-md-offset-2">
<img id="deaddog" src="img/dog_1.jpg" alt="A golden retriever">
</div>
</div>
</div>
<div id="dogs" class="container">
<div class="row martop">
<div class="col-md-12 text-center">
<h3>NEW FEATURES</h3>
<h2>Some Awesome Columns</h2>
</div>
<div class="col-md-4 col-sm-4">
<div class="thumbnail">
<img src="img/postcard.png" alt="Two flat postcards">
<div class="caption">
<h4>Some Awesome Features</h4>
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="thumbnail">
<img src="img/airplane.png" alt="Two flat postcards">
<div class="caption">
<h4>Some Awesome Features</h4>
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="thumbnail">
<img src="img/bulb.png" alt="Two flat postcards">
<div class="caption">
<h4>Some Awesome Features</h4>
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
</div>
</div>
</div>
<div class="row vertical-center martop marbot">
<div class="col-md-6 col-xs-12">
<img src="img/dog_2.jpg" class="img-responsive" alt="another golden retriever">
</div>
<div class="col-xs-12 col-md-6">
<h3>Start ASAP</h3>
<h2>This is a pretty big project, you know <span>....</span></h2>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
<div class="jumbotron" id="mosaic">
<div class="container">
<div id="clients1" class="row">
<div class="col-md-4 col-xs-4 text-center">
<img class="client_img" src="img/client_fill.png" alt="grey square">
<h4>Jonathon Doe</h4>
<h3>Co Founder</h3>
<p>“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p>
</div>
<div class="col-md-4 col-xs-4 text-center">
<img class="client_img" src="img/client_fill.png" alt="grey square">
<h4>Jonathon Doe</h4>
<h3>Co Founder</h3>
<p>“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p>
</div>
<div class="col-md-4 col-xs-4 text-center">
<img class="client_img" src="img/client_fill.png" alt="grey square">
<h4>Jonathon Doe</h4>
<h3>Co Founder</h3>
<p>“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p>
</div>
</div>
<div id="clients2" class="row">
<div class="col-md-2 col-xs-2 col-md-offset-1">
<img src="img/logo1.png">
</div>
<div class="col-md-2 col-xs-2">
<img src="img/logo2.png">
</div>
<div class="col-md-2 col-xs-2">
<img src="img/logo3.png">
</div>
<div class="col-md-2 col-xs-2">
<img src="img/logo4.png">
</div>
<div class="col-md-2 col-xs-2">
<img src="img/logo5.png">
</div>
</div>
</div>
</div>
<div class="jumbotron" id="browser">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>SERIOUSLY</h3>
<h2>So start on this soon.</h2>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.</p>
<img src="img/browser.jpg" class="hidden-xs">
</div>
</div>
</div>
</div>
<div class="jumbotron" id="formjumb">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<h3>THIS FORM DOESN'T HAVE TO WORK</h3>
<h2>But create it anyway.Use the right fields ...</h2>
</div>
</div>
<div class="row">
<div id="daysfree">
<p>30 days free trail for all</p>
</div>
<div id="arrow">
<img src="img/arrow.png" alt="arrow">
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="input-group-lg">
<input type="text" class="form-control borrad" placeholder="FULL NAME" aria-describedby="sizing-addon1">
</div>
</div>
<div class="col-md-3">
<div class="input-group-lg">
<input type="text" class="form-control borrad" placeholder="YOUR EMAIL" aria-describedby="sizing-addon1">
</div>
</div>
<div class="col-md-3">
<div class="input-group-lg">
<input type="text" class="form-control borrad" placeholder="PASSWORD" aria-describedby="sizing-addon1">
</div>
</div>
<div class="col-md-3">
<a id="formbtn"class="btn btn-primary btn-lg" href="#" role="button">TRY NOW</a>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p class="note-text">And some small text goes here</p>
</div>
</div>
</div>
</div>
<div id="footer" class="container">
<div class="row">
<div class="col-md-3 col-sm-3">
<h6 class="tohide">Random Title</h6>
<p class="littleinfo">Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.</p>
<p class="littleinfo">USA & CAN: 1-888-123-4567</p>
<p>Address: 34 Brokel Rd. NY</p>
</div>
<div class="col-md-3 col-sm-3">
<h6>Support</h6>
<p>Help Center</p>
<p>Get Started</p>
<p>Contact US</p>
</div>
<div class="col-md-3 col-sm-3">
<h6>About US</h6>
<p>About US</p>
<p>Terms 0f Use</p>
<p>Privacy Policy</p>
</div>
<div class="col-md-3 col-sm-3">
<h6>Get Newsletter</h6>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="EMAIL" aria-describedby="sizing-addon1">
<span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-send" aria-hidden="true"></span></span>
</div>
<div id="socialicons" class="col-md-3 col-sm-3">
<img src="img/dribble.png">
</div>
<div id="socialicons" class="col-md-3 col-sm-3">
<img src="img/facebook.png">
</div>
<div id="socialicons" class="col-md-3 col-sm-3">
<img src="img/google.png">
</div>
<div id="socialicons" class="col-md-3 col-sm-3">
<img src="img/twitter.png">
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>