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
243 lines (213 sloc) 10.3 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></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 -->
<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>
<div class="clearfix" id="page1">
<img id="home" class="mobile_hide" src="img/home.PNG"/>
<div id="home_title" >
<h1> Code Out This Layout So Flawlessly It'll Make Joel Cry.
</h1>
</div>
<div id="try_now">
<a href="#"> TRY NOW </a>
</div>
</div>
<div class=" clearfix" id="page2">
<div id="text_block_1" class="mobile_100">
<p class="p1">JANUARY 28, 2016</p>
<h2>And here's a random photo of a dog...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="photo1">
<img src="img/section2.PNG" alt="dog">
</div>
</div>
<div class=" clearfix" id="page3">
<div id="p3header">
<p> NEW FEATURES</p>
<h2> Some Awesome Columns</h2>
</div>
<div class="column" class="mobile_100">
<img src="img/icon1.PNG" alt="photo icon">
<h3> Some awesome features</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="column" class="mobile_100">
<img src="img/icon2.PNG" alt="plane icon">
<h3> Some awesome features</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="column" class="mobile_100">
<img src="img/icon3.PNG" alt="lightbulb icon">
<h3> Some awesome features</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class=" clearfix" id="page4">
<div id="photo2">
<img class="mobile_hide" src="img/section4.PNG">
</div>
<div id="text_block_2" class="mobile_100">
<p class="p1"> Start ASAP</p>
<h2>This is a pretty big project, you know...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="clearfix" id="page5">
<div id="overlay">
<div class="column" class="mobile_100">
<div class="shape">
</div>
<h3 class="name">Jonathon Doe</h3>
<p class="label"> Co Founder</p>
<p class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
</div>
<div class="column" class="mobile_100">
<div class="shape">
</div>
<h3 class="name">Jonathon Doe</h3>
<p class="label"> Co Founder</p>
<p class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
</div>
<div class="column" class="mobile_100">
<div class="shape">
</div>
<h3 class="name">Jonathon Doe</h3>
<p class="label"> Co Founder</p>
<p class="quote"">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
</div>
<table id="logo" class="mobile_hide">
<tr>
<td>
<img src="img/partner-logo-1.PNG" alt="Hits logo">
</td>
<td>
<img src="img/partner-logo-4.PNG" alt="RVLVR logo">
</td>
<td>
<img src="img/partner-logo-5.PNG" alt="Eatfindr logo">
</td>
<td>
<img src="img/partner-logo-7.PNG" alt="IGOR logo">
</td>
<td>
<img src="img/partner-logo-8.PNG" alt="Sienna logo">
</td>
</tr>
</table>
</div>
</div>
<div id="page6">
<div class="header2" class="mobile_100">
<p class="p1">SERIOUSLY</p>
<h2>So start this soon.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="photo3" class="mobile_hide">
<img id="screen" src="img/screen.PNG" alt="Mac Screen">
</div>
</div>
<div id="page7" class="clearfix">
<div class="header2" class="mobile_100">
<p class="p1">THIS FORM DOESN'T HAVE TO WORK</p>
<h2 style="color: white;"> But create it anyway. Use the right fields...</h2>
</div>
<!--make input fields-->
<div id="box_container">
<form action="#">
<div class="text_box">
<input style="margin-right: 2%;" type="text" placeholder="name">
</input>
</div>
<div class="text_box">
<input style="margin-right: 2%;" type=”text” placeholder="email">
</input>
</div>
<div class="text_box">
<input style="margin-right: 2%;" type=”text” placeholder="password">
</input>
</div>
</form>
<button type="submit">
TRY NOW
</button>
</div>
<div id="offer" class="mobile_hide">
<img src="img/arrow.PNG" alt="arrow"/>
<p style="font-family: 'Exo'; font-size: 14px; color: white;">30 day free trial</p>
</div>
<p id="small_text"> And some small text should go here.</p>
</div>
<div id="footer">
<div id="content">
<div class="section" style="width:30%;">
<p class="mobile_hide"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
USA & CAN: 1-888-123-4567
Adress: 34 Brokel Rd, NY</p>
</div>
<div class="section" >
<h3>Support</h3>
<!--make links; send in FTP link-->
<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="section" >
<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="section" style="width: 30%;">
<h3> Get Newsletter</h3>
<div id="email">
<form action="#">
<input type="text" placeholder="EMAIL">
</form>
</div>
<button type="submit">
</button>
<div id="social_mobile">
<img class="social" src="img/dribble.PNG"/>
<img class="social" src="img/facebook.PNG"/>
<img class="social" src="img/googleplus.PNG"/>
<img class="social" src="img/twitter.PNG"/>
</div>
</div>
</div>
</div>
</body>
</html>