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?

assignment5_css-layouts-final-review/index.html

Go to file
 
 
Cannot retrieve contributors at this time
executable file 180 lines (161 sloc) 8.89 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>CSS Final Review</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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="css/fonts/fonts.css"> <!-- Must be before main stylesheet -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<main>
<header class="large-section" id="section-1" style="
background-image: url(img/header-bg.jpg);
background-repeat: no-repeat;
background-size: 100%;
">
<h1>Code Out This Layout So Flawlessly It'll Make Joel Cry</h1>
<a href="#"><h3>TRY NOW</h3></a>
<p>* This should all be text</p>
</header>
<div class="large-section columns" id="section-2">
<div>
<h6 class="subheading-red">January 28, 2016</h6>
<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.<br><br>
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>
<img src="img/dog-1.jpg" alt="dog 1">
</div>
<div class="large-section rows" id="section-3">
<div class="columns" id="section-3-columnfix">
<h6 class="subheading-red">NEW FEATURES</h6>
<h2>Some Awesome Columns</h2>
</div>
<div class="columns">
<div class="rows">
<img src="img/column-pic-photos.png" alt="photos illustration">
<h6>Some awesome features</h6>
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="rows">
<img src="img/column-pic-plane.png" alt="plane illustration">
<h6>Some awesome features</h6>
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="rows">
<img src="img/column-pic-lightbulb.png" alt="lightbulb illustration">
<h6>Some awesome features</h6>
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
</div>
</div>
<div class="large-section columns" id="section-4">
<img src="img/dog-2.jpg" alt="dog 2">
<div>
<h6 class="subheading-red">Start ASAP</h6>
<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. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
</div>
</div>
<div class="large-section" id="section-5"
style="background-image: url(img/triangulation.jpg);"> <!-- Triangulated -->
<div class="columns">
<div>
<div class="portrait-box"></div>
<h5>Jonathon Doe</h5>
<h6 class="subheading-red">Co Founder</h6>
<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 class="portrait-box"></div>
<h5>Jonathon Doe</h5>
<h6 class="subheading-red">Co Founder</h6>
<p>“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>
<div class="portrait-box"></div>
<h5>Jonathon Doe</h5>
<h6 class="subheading-red">Co Founder</h6>
<p>“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>
<div id="row-logos">
<img src="img/partner-logo-1.png" alt="Logo: Hits">
<img src="img/partner-logo-4.png" alt="Logo: RVLVR">
<img src="img/partner-logo-5.png" alt="Logo: Eat Finds">
<img src="img/partner-logo-7.png" alt="Logo: IGOR">
<img src="img/partner-logo-8.png" alt="Logo: Sienna">
</div>
</div>
<div class="large-section" id="section-6">
<div>
<h6 class="subheading-red">SERIOUSLY</h6>
<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>
<img src="img/browserwindow.png" alt="Safari browser window">
</div>
<div class="large-section rows" id="section-7"> <!-- Blue fields section -->
<h6 class="subheading-red">THIS FORM DOESN'T HAVE TO WORK</h6>
<h2>But create it anyway. Use the right fields <span>...</span></h2>
<div>
<input placeholder="FULL NAME" type="text">
<input placeholder="YOUR EMAIL" type="text">
<input placeholder="PASSWORD" type="text">
<a href="#"><h3>TRY NOW</h3></a>
</div>
<p>And some small text should go here.</p>
</div>
<footer class="large-section columns" id="section-8">
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.
USA &amp; CAN: 1-888-123-4567
Address: 34 Brokel Rd. NY</p>
<div>
<h6>Support</h6>
<a href="#"><li>Help Center</li></a>
<a href="#"><li>Get Started</li></a>
<a href="#"><li>Contact Us</li></a>
</div>
<div>
<h6>About Us</h6>
<a href="#"><li>About Us</li></a>
<a href="#"><li>Terms of Use</li></a>
<a href="#"><li>Privacy Policy</li></a>
</div>
<div id="get-newsletter">
<h6>Get Newsletter</h6>
<input placeholder="EMAIL" type="text">
<a href="#"><img id="email-send" src="img/email-send.png" alt="email send button"></a>
<div>
<a href="#"><img src="img/dribbble_S.png" alt="dribble logo"></a>
<a href="#"><img src="img/facebook_S.png" alt="facebook logo"></a>
<a href="#"><img src="img/googleplus_S.png" alt="google plus logo"></a>
<a href="#"><img src="img/twitter_S.png" alt="twitter logo"></a>
</div>
</div>
</footer>
</main>
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>