Skip to content
Permalink
bd591bebc1
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?

media-query-practice/index.html

Go to file
 
 
Cannot retrieve contributors at this time
executable file 154 lines (141 sloc) 7.36 KB
Raw Blame
<!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="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="first-page">
<div id="first-page-content">
<h1>Code This Layout So Flawlessly It'll Make Joel Cry</h1>
<div id="button">
<p>try now</p>
</div>
<p>*This should be all text</p>
</div>
</div>
<div class="second-page">
<div class="second-page-text">
<h3>January 28, 2016</h3>
<h2>And here's a random photo of a dog
<span>....</span></h2>
<div class="indent">
<h5>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.</h5>
<h5>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.</h5>
</div>
</div>
<img src="src/images/dog1.png" alt="this is a dog">
</div>
<div class="third-page clearfix">
<div class="title">
<h3>new features</h3>
<h2>Some Awesome Columns</h2>
</div>
<div class="info">
<img src="src/images/icon1.png" alt="this is an icon">
<h4>Some awesome features</h4>
<h5>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.
</h5>
</div>
<div class="info">
<img src="src/images/icon2.png" alt="this is an icon">
<h4>Some awesome features</h4>
<h5>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.
</h5>
</div>
<div class="info">
<img src="src/images/icon3.png" alt="this is an icon">
<h4>Some awesome features</h4>
<h5>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.
</h5>
</div>
</div>
<div class="fourth-page">
<img src="src/images/dog2.png" alt="this is another dog">
<div class="fourth-page-text">
<h3>Start ASAP</h3>
<h2>This is a pretty big project, you know <span>....</span></h2>
<h5 class="indent">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.</h5>
</div>
</div>
<div class="fifth-page">
<div class="founders">
<div class="fake-pic"></div>
<p class="name">Jonathon Doe</p>
<p class="job-title">Co Founder</p>
<p class="quote">“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p>
</div>
<div class="founders">
<div class="fake-pic"></div>
<p class="name">Jonathon Doe</p>
<p class="job-title">Co Founder</p>
<p class="quote">“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="founders">
<div class="fake-pic"></div>
<p class="name">Jonathon Doe</p>
<p class="job-title">Co Founder</p>
<p class="quote">“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>
<img src="src/images/logos.png" alt="these are logos">
</div>
<div class="sixth-page">
<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. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
</div>
<div class="seventh-page">
<h3>This form doesn't have to work</h3>
<h2>But create it anyway. Use the right fields ...</h2>
<img src="src/images/arrow.png" alt="this is an arrow">
<p>30 days free trial for all.</p>
<form class="clearfix">
<input type="text" name="fullname" value="FULL NAME">
<input type="text" name="email" value="YOUR EMAIL">
<input type="text" name="password" value="PASSWORD">
<input type="text" name="trynow" value="TRY NOW">
</form>
<p>And some small text should go here.</p>
</div>
<div class="eighth-page">
<div class="column">
<p class="footer-body">Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.</p>
<p class="footer-body">USA & CAN: 1-888-123-4567</p>
<p class="footer-body">Address: 34 Brokel Rd. NY</p>
</div>
<div class="column">
<p class="footer-headings">Support</p>
<p class="footer-body">Help Center</p>
<p class="footer-body">Get Started</p>
<p class="footer-body">Contact Us</p>
</div>
<div class="column">
<p class="footer-headings">About Us</p>
<p class="footer-body">About Us</p>
<p class="footer-body">Terms of Use</p>
<p class="footer-body">Privacy Policy</p>
</div>
<div class="column">
<p class="footer-headings">Get Newsletter</p>
<form>
<input type="text" name="email" value="EMAIL">
</form>
<img src="src/images/button.png" alt="this is a button">
<div class="social">
<img src="src/images/social1.png" alt="this is a social tag">
<img src="src/images/social2.png" alt="this is a social tag">
<img src="src/images/social3.png" alt="this is a social tag">
<img src="src/images/social4.png" alt="this is a social tag">
</div>
</div>
</div>
</body>
</html>