Permalink
Cannot retrieve contributors at this time
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?
dmd-3470-final/index.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
executable file
294 lines (256 sloc)
10.9 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html class="no-js" lang=""> | |
<head> | |
<meta charset="utf-8"> | |
<title>Final Project - Mahnoor Afteb</title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<!-- Place favicon.ico in the root directory --> | |
<link rel="icon" type="image/png" href="favicon.png"> | |
<link rel="apple-touch-icon" href="favicon-32x32.png"> | |
<!-- CSS import --> | |
<link rel="stylesheet" href="css/normalize.css"> | |
<link rel="stylesheet" href="css/main.css"> | |
<!--Exo font import--> | |
<link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,400;0,500;1,400&display=swap" rel="stylesheet"> | |
<!--Font Awesome import--> | |
<link rel="stylesheet" href="css/all.min.css"> | |
<!-- Animated on Scroll import!--> | |
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
<meta name="theme-color" content="#fafafa"> | |
</head> | |
<body> | |
<!-- Add your site or application content here --> | |
<div class="bg-image"> | |
<div class="center"> | |
<h1>Code Out This Layout So Flawlessly It’ll Make Joel Cry </h1> | |
<div class="btn-coral"> | |
<div data-aos="flip-up"> | |
<button class="button1">TRY NOW</button> | |
</div> | |
<h5>* This should all be text</h5> | |
</div> | |
</div> | |
</div> | |
<!--First--> | |
<div class="first-container"> | |
<div class="text1"> | |
<h6>JANUARY 28, 2016</h6> | |
<h3>And here’s a random photo of a dog <span style="color: #ff6d6d;">....</span></h3> | |
<br> | |
<div class="firstp"> | |
<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.</p> | |
<br> | |
<p>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> | |
<div class="dog1"> | |
<div data-aos="fade-left"> | |
<img id="dog" src="img/dog1.jpg" alt="golden retriever"/> | |
</div> | |
</div> | |
</div> | |
<!--Second--> | |
<div class="second-container"> | |
<div class="row1"> | |
<h6>NEW FEATURES</h6> | |
<h3>Some Awesome Columns</h3> | |
</div> | |
<div class="row2"> | |
<div class="column1"> | |
<div data-aos="flip-left"> | |
<img src="img/icon1.jpg" alt="picture icon"/> | |
<h2 class="sub-title">Some awesome features</h2> | |
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p> | |
</div> | |
</div> | |
<div class="column2"> | |
<div data-aos="flip-left"> | |
<img src="img/icon2.jpg" alt="plane icon"/> | |
<h2 class="sub-title">Some awesome features</h2> | |
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p> | |
</div> | |
</div> | |
<div class="column3"> | |
<div data-aos="flip-right"> | |
<img src="img/icon3.jpg" alt="light bulb icon"/> | |
<h2 class="sub-title">Some awesome features</h2> | |
<p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!--Third--> | |
<div class="third-container"> | |
<div class="dog2"> | |
<div data-aos="fade-right"> | |
<img src="img/dog2.jpg" style="display: block" alt="light brown dog"/> | |
</div> | |
</div> | |
<div class="text2"> | |
<h6>Start ASAP</h6> | |
<h3>This is a pretty big project, you know <span style="color: #ff6d6d;">....</span></h3> | |
<br> | |
<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> | |
<!--Fourth--> | |
<div class="fourth-container"> <!--bg-image #2--> | |
<div class="three-items"> | |
<div class="item1"> | |
<div data-aos="flip-left" data-aos-easing="ease-out-cubic"data-aos-duration="2000"> | |
<img class="square" src="img/square.png" alt="blank square"/> | |
<h2 class="name">Jonathon Doe</h2> | |
<h5 class="co-founder">Co Founder</h5> | |
<p class="little">“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="item2"> | |
<div data-aos="flip-left" data-aos-easing="ease-out-cubic"data-aos-duration="2000"> | |
<img class="square" src="img/square.png" alt="blank square"/> | |
<h2 class="name">Jonathon Doe</h2> | |
<h5 class="co-founder">Co Founder</h5> | |
<p class="little">“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="item3"> | |
<div data-aos="flip-left" data-aos-easing="ease-out-cubic"data-aos-duration="2000"> | |
<img class="square" src="img/square.png" alt="blank square"/> | |
<h2 class="name">Jonathon Doe</h2> | |
<h5 class="co-founder">Co Founder</h5> | |
<p class="little">“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p> | |
</div> | |
</div> | |
</div> | |
<div class="five-logos"> | |
<div class="hits"> | |
<img src="img/hits.png" alt="logo"/> | |
</div> | |
<div class="rvlr"> | |
<img src="img/rvlr.png" alt="logo"/> | |
</div> | |
<div class="eat"> | |
<img src="img/eatfindr.png" alt="logo"/> | |
</div> | |
<div class="igor"> | |
<img src="img/igor.png" alt="logo"/> | |
</div> | |
<div class="sienna"> | |
<img src="img/sienna.png" alt="logo"/> | |
</div> | |
</div> | |
</div> | |
<!--Fifth--> | |
<div class="fifth-container"> | |
<div class="roww1"> | |
<h6>SERIOUSLY</h6> | |
<h3 id="so">So start on this soon.</h3> | |
<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="mac-screen"> | |
<div data-aos="fade-down"> | |
<img class="screen" src="img/mac-screen.png" style="display: block" alt="computer screen"/> | |
</div> | |
</div> | |
</div> | |
<!--Sixth--> | |
<div class="sixth-container"> | |
<div class="middle"> | |
<h6>THIS FORM DOESN’T HAVE TO WORK</h6> | |
<h3 id="purple">But create it anyway. Use the right fields <span style="color: #ffffff;">....</span></h3> | |
</div> | |
<div class="arrow"> | |
<img src="img/arrow.png" alt="arrow"/> | |
<p style="color:#ffffff; font-size: 0.8rem; | |
margin-left: 0.5rem;">30 days free trial for all.</p> | |
</div> | |
<!--form--> | |
<form class="form-inline"> | |
<input type="text" id="name" placeholder="FULL NAME" name="Full Name"> | |
<input type="text" id="email" placeholder="YOUR EMAIL" name="Email"> | |
<input type="password" id="pwd" placeholder="PASSWORD" name="Password"> | |
<!--<div class="arrow">--> <!--don't know why i put this class here lol--> | |
<div data-aos= "flip-left"> | |
<button type="submit" name="Try Now">TRY NOW</button> | |
</div> | |
<!--</div>--> | |
</form> | |
<p id="last">And some small text should go here.</p> | |
</div> | |
<!--FOOTER!--> | |
<div class="footer"></div> | |
<footer> | |
<section class="ft-main"> | |
<div class="ft-main-item"> | |
<div class="ft-title"></div> | |
<ul> | |
<li class="h4">Aenean lacinia bibendum nulla sed<br> consectetur. Aenean eu leo quam. <br> | |
USA & CAN: 1-888-123-4567<br> | |
Address: 34 Brokel Rd. NY | |
</li> | |
</ul> | |
</div> | |
<div class="ft-main-item"> | |
<h2 class="ft-title">Support</h2> | |
<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="ft-main-item"> | |
<h2 class="ft-title">About US</h2> | |
<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="ft-main-item"> | |
<h2 class="ft-title">Get Newsletter</h2> | |
<form> | |
<input id="foot" type="email" name="text" placeholder="EMAIL"> | |
<input type="image" src="img/paper-plane.png" alt="Submit"> | |
</form> | |
<div class="ft-social"> | |
<ul class="ft-social-list"> | |
<li><a href="#"><i class="fas fa-basketball-ball"></i></a></li> | |
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li> | |
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li> | |
<li><a href="#"><i class="fab fa-twitter"></i></a></li> | |
</ul> | |
</div> | |
</div> | |
</section> | |
</footer> | |
<!--JavaScript for Animated on Scroll feature!--> | |
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
<script> | |
AOS.init(); | |
</script> | |
<script> | |
// below listed default settings | |
AOS.init({ | |
// Global settings: | |
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function | |
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on | |
initClassName: 'aos-init', // class applied after initialization | |
animatedClassName: 'aos-animate', // class applied on animation | |
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll | |
disableMutationObserver: false, // disables automatic mutations' detections (advanced) | |
debounceDelay: 50, // the delay on debounce used while resizing window (advanced) | |
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced) | |
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes: | |
offset: 120, // offset (in px) from the original trigger point | |
delay: 0, // values from 0 to 3000, with step 50ms | |
duration: 400, // values from 0 to 3000, with step 50ms | |
easing: 'ease', // default easing for AOS animations | |
once: false, // whether animation should happen only once - while scrolling down | |
mirror: false, // whether elements should animate out while scrolling past them | |
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation | |
}); | |
</script> | |
</body> | |
</html> |