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

dmd3470-spring-2022/final-project/index.html

Go to file
 
 
Cannot retrieve contributors at this time
318 lines (269 sloc) 12.2 KB
Raw Blame
<!doctype html>
<html class="no-js" lang="zxx">
<head>
<meta charset="utf-8">
<title>3470 Final Project</title>
<meta name="description" content="Corporate Landing Page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<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/main.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<meta name="theme-color" content="#fafafa">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>
<body>
<div class="container">
<section id="main-menu">
<h1 data-aos="fade-down" id="first-title">Code Out This Layout Flawlessly It'll Make Joel Cry</h1>
<a data-aos="flip-up" id="first-button" href="#">TRY NOW</a>
<p data-aos="fade-up" id="first-subText">*This should be all text</p>
</section>
<div id="second">
<div class="second-container">
<picture data-aos="zoom-in-down" id="second-right">
<source srcset="img/dog1-big.jpg" media="(min-width: 600px)">
<img src="img/dog1-small.jpg" alt="Picture of Dog">
</picture>
<article data-aos="zoom-in-up" id="second-left">
<h3 class="tomato-text" id="second-h3">JANUARY 28, 2016</h3>
<h2 id="second-h2">
<span id="second-h2-span1">And here's a random photo of a dog</span>
<span class="tomato-text" id="second-h2-span2">....</span>
</h2>
<p class="font-down">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae alias, soluta tempore natus eius sapiente totam. Amet eaque, ipsa labore nihil inventore, assumenda tempore sapiente deleniti placeat eos accusantium quos.</p>
<p class="font-down">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, eius magnam aut quidem repellat id consectetur tenetur obcaecati ratione repudiandae facere fugiat aliquid dolores facilis exercitationem ex possimus dolore sint!</p>
</article>
</div>
</div>
<section id="third">
<div class="third-container">
<div data-aos="zoom-out-down" id="third-top">
<h3 class="tomato-text">
NEW FEATURES
</h3>
<h2 id="third-top-text2">
Some Awesome Columns
</h2>
</div>
<div id="third-bottom">
<div data-aos="fade-right" class="third-div" id="third-bottom1">
<picture>
<img src="img/picture.png" alt="Photos Icon" width="60" height="60">
</picture>
<h3>
Some awesome features
</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab, sequi magni fugiat temporibus error dignissimos deserunt laboriosam.
</p>
</div>
<div data-aos="flip-up" class="third-div" id="third-bottom2">
<picture>
<img src="img/airplane.png" alt="Plane Icon" width="60" height="60">
</picture>
<h3>
Some awesome features
</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab, sequi magni fugiat temporibus error dignissimos deserunt laboriosam.
</p>
</div>
<div data-aos="fade-left" class="third-div" id="third-bottom3">
<picture>
<img src="img/bulb.png" alt="Lightbulb Icon" width="60" height="60">
</picture>
<h3>
Some awesome features
</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab, sequi magni fugiat temporibus error dignissimos deserunt laboriosam.
</p>
</div>
</div>
</div>
</section>
<div id="fourth">
<div class="fourth-container">
<picture id="fourth-right">
<source data-aos="flip-left" srcset="img/dog2-big.jpg" media="(min-width: 600px)">
<img data-aos="flip-left" src="img/dog2-small.jpg" alt="Picture of Dog 2">
</picture>
<article data-aos="flip-right" id="fourth-left">
<h3 class="tomato-text" id="fourth-h3">Start ASAP</h3>
<h2 id="fourth-h2">
<span id="fourth-h2-span1">This is a pretty big project, you know</span>
<span class="tomato-text" id="fourth-h2-span2">....</span>
</h2>
<p class="font-down">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae alias, soluta tempore natus eius sapiente totam. Amet eaque, ipsa labore nihil inventore, assumenda tempore sapiente deleniti placeat eos accusantium quos.</p>
</article>
</div>
</div>
<section id="fifth">
<div id="fifth-top">
<div data-aos="zoom-in" id="fifth-top1">
<div class="profile-box"></div>
<h2>
Jonathon Doe
</h2>
<h3 class="tomato-text">
Co Founder
</h3>
<p class="font-down">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio sapiente atque, aspernatur autem repellat sit blanditiis adipisci nobis nisi eos illum numquam saepe sed eligendi molestias rem magnam tempora incidunt."</p>
</div>
<div data-aos="zoom-in" id="fifth-top2">
<div class="profile-box"></div>
<h2>
Jonathon Doe
</h2>
<h3 class="tomato-text">
Co Founder
</h3>
<p class="font-down">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio sapiente atque, aspernatur autem repellat sit blanditiis adipisci nobis nisi eos illum numquam saepe sed eligendi molestias rem magnam tempora incidunt."</p>
</div>
<div data-aos="zoom-in" id="fifth-top3">
<div class="profile-box"></div>
<h2>
Jonathon Doe
</h2>
<h3 class="tomato-text">
Co Founder
</h3>
<p class="font-down">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio sapiente atque, aspernatur autem repellat sit blanditiis adipisci nobis nisi eos illum numquam saepe sed eligendi molestias rem magnam tempora incidunt."</p>
</div>
</div>
<div data-aos="zoom-out-up" id="fifth-bottom">
<picture>
<img src="https://camo.githubusercontent.com/bae75bf297dd6a0e7990b8f0433b6a100119fdacfd529352ca3645540f263146/687474703a2f2f7069676d656e742e6769746875622e696f2f66616b652d6c6f676f732f6c6f676f732f766563746f722f677261797363616c652f677265656e732d666f6f642d737570706c696572732e737667" alt="Company 1" width="120" height="120" class="fifth-bottom-img">
</picture>
<picture>
<img src="https://camo.githubusercontent.com/c937764d63e19a845e557bff009556180c5ec811442256275cd9c24d111af42d/687474703a2f2f7069676d656e742e6769746875622e696f2f66616b652d6c6f676f732f6c6f676f732f766563746f722f677261797363616c652f6175746f2d73706565642e737667" alt="Company 2" width="120" height="120" class="fifth-bottom-img">
</picture>
<picture>
<img src="https://camo.githubusercontent.com/5ad6341cefee0bdd8f17b067ad5a421d1cf5fa2aa17ed846db18f054036b8e66/687474703a2f2f7069676d656e742e6769746875622e696f2f66616b652d6c6f676f732f6c6f676f732f766563746f722f677261797363616c652f63726f6674732d6163636f756e74616e74732e737667" alt="Company 3" width="120" height="120" class="fifth-bottom-img">
</picture>
<picture>
<img src="https://camo.githubusercontent.com/7bed464c19a1f1083b333443d9903d5d1894d5dc69148391c112815807bcb002/687474703a2f2f7069676d656e742e6769746875622e696f2f66616b652d6c6f676f732f6c6f676f732f766563746f722f677261797363616c652f63686573686972652d636f756e74792d68796769656e652d73657276696365732e737667" alt="Company 4" width="120" height="120" class="fifth-bottom-img">
</picture>
<picture>
<img src="https://camo.githubusercontent.com/95fe54f793dee4a2c6c4ba97672f2504c5f400f7362bfe7574a2c2e0658b5737/687474703a2f2f7069676d656e742e6769746875622e696f2f66616b652d6c6f676f732f6c6f676f732f766563746f722f677261797363616c652f796f67612d626162792e737667" alt="Company 5" width="120" height="120" class="fifth-bottom-img">
</picture>
</div>
</section>
<section data-aos="zoom-out-down" id="sixth">
<h3 class="tomato-text">SERIOUSLY</h3>
<h2>So start on this soon.</h2>
<p class="font-down">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, impedit? Quam accusamus cumque iure qui excepturi ab quia quibusdam corrupti voluptates maiores ratione, dolor reiciendis. Maxime culpa qui dicta quod.</p>
<picture>
<img data-aos="zoom-in-up" src="img/browser.png" alt="Empty Browser">
</picture>
</section>
<section id="seventh">
<div data-aos="fade-down-right" id="seventh-top">
<h3 class="tomato-text">
THIS FORM DOESN'T HAVE TO WORK
</h3>
<h2>
<span>But create it anyway. Use the right fields </span>
<span id="seventh-span2">...</span>
</h2>
</div>
<div id="seventh-middle">
<div id="seventh-middle2" data-aos="fade-down-left">
<form>
<input class="input-field" type="text" placeholder="FULL NAME">
<input class="input-field" type="text" placeholder="YOUR EMAIL">
<input class="input-field" type="text" placeholder="PASSWORD">
</form>
</div>
<div id="seventh-middle1">
<div data-aos="flip-up">
<picture>
<img src="img/arrow.png" alt="Arrow Downward"
width="18" height="40">
</picture>
<p>30 days free trial for all.</p>
</div>
<a href="#" data-aos="flip-up" class="input-field">TRY NOW</a>
</div>
</div>
<div id="seventh-bottom">
<p class="font-down">And some small text should go here.</p>
</div>
</section>
<section id="footer">
<div id="footer1">
<p class="font-down">Aenean lacinla blbendum nulla sed consectetur. Aenean eu leo quam.</p>
<p class="font-down">USA & CAN: 1-888-123-4567</p>
<p class="font-down">Address: 34 Brokel Rd. NY</p>
</div>
<div id="footer2">
<h3>
Support
</h3>
<p class="font-down">
Help Center
</p>
<p class="font-down">
Get Started
</p>
<p class="font-down">
Contact Us
</p>
</div>
<div id="footer3">
<h3>
About Us
</h3>
<p class="font-down">
About Us
</p>
<p class="font-down">
Terms of Use
</p>
<p class="font-down">
Privacy Policy
</p>
</div>
<div id="footer4">
<h3>
Get Newsletter
</h3>
<form id="footerForm">
<div id="email">
<input type="text" placeholder="EMAIL"><input type="image" src="img/paperairplane.png" width="40" id="paperSubmit" alt="Email Submit"></div>
<div id="socialLogo">
<picture>
<img src="https://blog-assets.hootsuite.com/wp-content/uploads/2018/09/flogo-Hex-RGB-MedGrey-58.png" alt="Facebook Logo" width="20" height="20">
</picture>
<picture>
<img src="https://blog.hootsuite.com/wp-content/uploads/2018/09/Twitter_Logo_WhiteOnImage-150x150.png" alt="Twitter Logo" width="20" height="20">
</picture>
<picture>
<img src="https://blog.hootsuite.com/wp-content/uploads/2018/09/glyph-logo_May2016-150x150.png" alt="Instagram Logo" width="20" height="20">
</picture>
<picture>
<img src="https://cdn1.iconfinder.com/data/icons/social-media-rounded-corners/512/Rounded_Whatsapp_svg-512.png" alt="WhatsApp Logo" width="20" height="20">
</picture>
</div>
</form>
</div>
</section>
</div>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script>
AOS.init();
</script>
</body>
</html>