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?

dmd5470-mr-final/index.html

Go to file
 
 
Cannot retrieve contributors at this time
198 lines (182 sloc) 8.83 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Corporate Landing Page</title>
<meta name="description" content="Final Project for DMD 5470 by Maria Raykova, spring 2020">
<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 href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,400;0,500;1,300&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<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]-->
<section id="section-1">
<h1 class="dark-gray thin">Code Out This Layout So Flawlessly It'll Make Joel Cry</h1>
<a><p id="try-now" class="salmon-button">TRY NOW</p></a>
<p class="dark-gray tiny">* This should all be text</p>
</section>
<section class="medium" id="section-2">
<div id="section-2-title">
<p class="salmon small pre-title">JANUARY 28, 2016</p>
<h3 class="dark-gray title">And here's a random photo of a dog <span class="salmon">....</span></h3>
</div>
<div id="section-2-text" class="tiny">
<p class="dark-gray">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 class="dark-gray">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 id="section-2-img">
<picture>
<source media="(min-width: 950px)" srcset="img/dog-1_md.jpg">
<img alt="Random Dog" src="img/dog-1_sm.jpeg">
</picture>
</div>
</section>
<section class="dark-gray medium" id="section-3">
<p class="salmon small pre-title">NEW FEATURES</p>
<h3 class="title">Some Awesome Columns</h3>
<div id="section-3-flex-container">
<div class="section-3-col">
<img alt="" src="img/picture.png">
<p class="small">Some awesome features</p>
<p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="section-3-col">
<img alt="" src="img/airplane.png">
<p class="small">Some awesome features</p>
<p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="section-3-col">
<img alt="" src="img/bulb.png">
<p class="small">Some awesome features</p>
<p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
</div>
</section>
<section class="dark-gray medium" id="section-4">
<div id="section-4-img">
<picture>
<source media="(min-width: 950px)" srcset="img/dog-2_md.jpg">
<img alt="Different Random Dog" src="img/dog-2_sm.jpeg">
</picture>
</div>
<div id="section-4-title">
<p class="salmon small pre-title">Start ASAP</p>
<h3 class="title">This is a pretty big project, you know <span class="salmon">....</span></h3>
</div>
<div id="section-4-text">
<p class="tiny">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="white medium tiny" id="section-5">
<div id="section-5-jons">
<div class="jon">
<img alt="" src="img/placeholder-square.png">
<p class="small">Jonathon Doe</p>
<p class="salmon">Co-Founder</p>
<p class="light-italic">“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p>
</div>
<div class="jon">
<img alt="" src="img/placeholder-square.png">
<p class="small">Jonathon Doe</p>
<p class="salmon">Co-Founder</p>
<p class="light-italic">“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="jon">
<img alt="" src="img/placeholder-square.png">
<p class="small">Jonathon Doe</p>
<p class="salmon">Co-Founder</p>
<p class="light-italic">“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>
<ul id="section-5-logos">
<li><img alt="Hits logo" src="img/partner-logo-1.png"></li>
<li><img alt="RVLVR logo" src="img/partner-logo-2.png"></li>
<li><img alt="Eatfindr logo" src="img/partner-logo-3.png"></li>
<li><img alt="IGOR logo" src="img/partner-logo-4.png"></li>
<li><img alt="Sienna logo" src="img/partner-logo-5.png"></li>
</ul>
</section>
<section class="dark-gray medium" id="section-6">
<div id="section-6-text">
<p class="salmon small pre-title">SERIOUSLY</p>
<h3 class="title">So start on this soon.</h3>
<p class="tiny">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 id="section-6-img">
<picture>
<source media="(min-width: 950px)" srcset="img/window.png">
<img alt="" src="img/window-2.png">
</picture>
</div>
</section>
<section class="white" id="section-7">
<p class="salmon small pre-title">THIS FORM DOESN'T HAVE TO WORK</p>
<h3 class="medium title">But create it anyway. Use the right fields...</h3>
<div id="form-flex-container">
<form class="small">
<input type="text" id="name" placeholder="FULL NAME">
<input type="text" id="email" placeholder="YOUR EMAIL">
<input type="text" id="password" placeholder="PASSWORD">
</form>
<div id="trial-wrapper">
<div id="trial-flex-container">
<img alt="" id="trial-img" src="img/arrow.png">
<p id="trial-text" class="small">30 days free trial for all.</p>
</div>
<button class="salmon-button">TRY NOW</button>
</div>
</div>
<p class="tiny">And some small text should go here.</p>
</section>
<footer class="dark-gray tiny">
<div id="contact" class="medium">
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.</p>
<p>USA & CAN: 1-888-123-4567</p>
<p>Address: 34 Brokel Rd. NY</p>
</div>
<div id="footer-flex-container">
<div>
<h3 class="medium small">Support</h3>
<ul>
<li>Help Center</li>
<li>Get Started</li>
<li>Contact US</li>
</ul>
</div>
<div>
<h3 class="medium small">About US</h3>
<ul>
<li>About Us</li>
<li>Terms of Use</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div id="newsletter-wrapper">
<p class="medium small">Get Newsletter</p>
<form>
<input type="text" id="email-2" placeholder="EMAIL">
<button class="salmon-button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
</form>
<ul id="social-flex-container">
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
</ul>
</div>
</footer>
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
</body>
</html>