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-1/index.html

Go to file
 
 
Cannot retrieve contributors at this time
212 lines (169 sloc) 8.37 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Layout-Practice 1</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="mountain">
<h1>
Code Out This Layout So Flawlessly It'll Make Joel Cry
</h1>
<a class="btn" href="#">TRY NOW</a>
<p class="small">* This should all be text</p>
</div>
<section class="section-1">
<div class="left">
<div class="left_container">
<p class="date"> January 28, 2016</p>
<h2>And here's a random photo of a dog <span class="dots">...</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>
<div class="right">
<img src="img/1st-dog.jpg" alt= "dog">
</div>
</section>
<section class="section-2">
<div class="coloumn-2">
<p class="date">NEW FEATURES</p>
<h2>Some Awesome Columns</h2>
<div class="thirds thirds_l">
<img src="img/icon1.png" alt="jsljakllsk">
<h3>Some awesome features</h3>
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="thirds thirds_m">
<img src="img/icon2.png" alt="jsljakllsk">
<h3>Some awesome features</h3>
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="thirds thirds_r">
<img src="img/icon3.png" alt="jsljakllsk">
<h3>Some awesome features</h3>
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
</div>
</section>
<section class="section-3">
<div class="left2">
<img src="img/dog.jpg">
</div>
<div class="right2">
<p class="date">Start Asap</p>
<h2>This is a pretty big project, you know <span class="dots">...</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. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
</div>
</section>
<section class="section-4">
<section class="Doe">
<div class="thirds_4 thirds_l4">
<img src="img/doe.png">
<h3 class="white">Jonathon Doe</h3>
<p class="date">Co Founder</p>
<p class="white">“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p>
</div>
<div class="thirds_4 thirds_m4">
<img src="img/doe.png" >
<h3 class="white">Jonathon Doe</h3>
<p class="date">Co Founder</p>
<p class="white">“Pellentesque ornare sem lacinia quam. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn”</p>
</div>
<div class="thirds_4 thirds_r4">
<img src="img/doe.png">
<h3 class="white">Jonathon Doe</h3>
<p class="date">Co Founder</p>
<p class="white">“Aenean eu leo quam. Pellentesque ornare sem lacinia qua emere wancerid elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn”</p>
</div>
<div class="partner">
<img src="img/logos.png" alt="lajlaj">
</div>
</section>
</section>
<section class="sec5">
<p class="date">SERIOUSLY</p>
<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. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
<img src="img/video.png" alt="sljsljsljklj">
</section>
<section class="sec6">
<p class="date">THIS FORM DOESN'T HAVE TO WORK</p>
<h2 class="white">But create it anyway. Use the right fields ...</h2>
<form>
<input type="text" name="fullname" value="FULL NAME">
<input type="text" name="email" value="YOUR EMAIL">
<input type="password" name="psw" value="PASSWORD">
<input class="btn" type="submit" name="submit" value="TRY NOW">
</form>
<p class="white">And some small text should go here.</p>
</section>
<footer>
<div class="widget width_one">
<p>Aenaena lacinia bibendum nulla sed consecteur. Aenean eu leo quam. <br>
USA and CAN: 1-888-123-4567 <br>
Address: 34 Brokel Rd. NY</p>
</div>
<div class="widget width_two">
<h3>Support</h3>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Get Started</a></li>
<li><a href="#">Contact US</a></li>
</ul>
</div>
<div class="widget width_three">
<h3>About US</h3>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="widget width_four">
<h3>Get Newsletter</h3>
<form>
<input type="text" name="email" value="EMAIL">
<input type="image" src="img/submit.png" alt="Submit Form" />
</form>
<ul>
<li><a href="#"><img src="img/dribbble_S.png" alt="dribble"></a></li>
<li><a href=""><img src="img/facebook.png" alt="facebook"></a></li>
<li><a href="#"><img src="img/googleplus.png" alt="gplus"></a></li>
<li><a href="#"><img src="img/twitter.png" alt="twitter"></a></li>
</ul>
</div>
</footer>
<!-- Do not change after here -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>