-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 15.4 KB
/
index.html
1
<!DOCTYPE html><html lang="en" class="page"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="theme-color" content="#111111"><title>ARShakir</title><link rel="preload" href="fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="fonts/Gilroy-SemiBold.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="fonts/Rubik-Medium.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="fonts/Gilroy-Bold.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="fonts/Rubik-Regular.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" href="css/vendor.css"><link rel="stylesheet" href="css/main.css"><script defer="defer" src="js/main.js"></script></head><body class="page__body" id="page"><div class="site-container"><header class="header"><div class="container header__container"><a class="logo" href="#"><img loading="lazy" src="img/logo.svg" class="header__img" width="36" height="36" alt="logo ARShakir"></a><nav class="nav" title="Main navigation" data-menu><div class="header__btns--nav"><button class="btn-reset btn header__btn btn-thin">SIgn In</button> <button class="btn-reset btn header__btn btn-orange">Sign Up</button></div><ul class="list-reset nav__list"><li class="nav__item"><a href="#" class="nav__link">About</a></li><li class="nav__item"><a href="#" class="nav__link">Gallery</a></li><li class="nav__item"><a href="#" class="nav__link">Pricing</a></li><li class="nav__item"><a href="#" class="nav__link">Pricing</a></li><li class="nav__item"><a href="#" class="nav__link">FAQ</a></li><li class="nav__item"><a href="#" class="nav__link">Benefits</a></li></ul><button class="btn-reset burger-close" aria-label="Close menu" data-menu-close></button></nav><div class="header__btns"><button class="btn-reset btn header__btn btn-thin">SIgn In</button> <button class="btn-reset btn header__btn btn-orange">Sign Up</button></div><button class="btn-reset burger" aria-label="Open menu" aria-expanded="false" data-burger><span class="burger__line"></span> <span class="burger__line"></span> <span class="burger__line"></span></button></div></header><main class="main"><section class="hero"><div class="container hero__container"><div class="hero__content"><h1 class="section-title hero__title" data-aos="zoom-in" data-aos-duration="1000">Many reasons to get up and start to get back in the business</h1><p class="hero__desc" data-aos="zoom-in" data-aos-delay="150" data-aos-duration="1000">The harder you work for something, the greater you’ll feel when you achieve it.</p><div class="hero__links"><a class="hero__link btn btn-orange" data-aos="fade-right" data-aos-delay="150" data-aos-duration="1000" href="#">Learn More</a> <a class="hero__link btn btn-thin" data-aos="fade-right" data-aos-delay="250" data-aos-duration="1000" href="#">Demo</a></div><div class="hero__video" data-aos="fade-right" data-aos-delay="350" data-aos-duration="1000"><div class="hero__video-left"><button class="btn-reset hero__video-btn" aria-label="Play video"><svg class=""><use xlink:href="img/sprite.svg#play"></use></svg></button><video class="hero__video-content" src="video.mp4" muted loop preload="metadata"></video></div><div class="hero__video-right"><p class="hero__video-desc">The harder you work for something, the greater you’ll feel when you achieve it.</p><a class="hero__video-link" href="#">Watch preview</a></div></div></div><img loading="lazy" src="img/hero/hero-img.svg" class="hero__img" width="724" height="579" alt="guy in running position"></div></section><section class="partners"><div class="container"><h2 class="visually-hidden partners__title">Our partners</h2><ul class="list-reset partners__list"><li class="partners__item"><a class="partners__link" href="#"><img loading="lazy" src="img/partners/partner-1.svg" class="partners__img" width="117" height="25" alt="Our partner ProfitWell"></a></li><li class="partners__item"><a class="partners__link" href="#"><img loading="lazy" src="img/partners/partner-2.svg" class="partners__img" width="117" height="25" alt="Our partner Appcues"></a></li><li class="partners__item"><a class="partners__link" href="#"><img loading="lazy" src="img/partners/partner-3.svg" class="partners__img" width="92" height="25" alt="Our partner ShipBob"></a></li><li class="partners__item"><a class="partners__link" href="#"><img loading="lazy" src="img/partners/partner-4.svg" class="partners__img" width="104" height="25" alt="Our partner Bench"></a></li><li class="partners__item"><a class="partners__link" href="#"><img loading="lazy" src="img/partners/partner-5.svg" class="partners__img" width="55" height="25" alt="Our partner Subbly"></a></li><li class="partners__item"><a class="partners__link" href="#"><img loading="lazy" src="img/partners/partner-6.svg" class="partners__img" width="117" height="25" alt="Our partner Demio"></a></li></ul></div></section><section class="choice"><div class="container"><h2 class="section-title choice__title" data-aos="zoom-in" data-aos-duration="1000">Your choice</h2><p class="choice__desc" data-aos="zoom-in" data-aos-delay="150" data-aos-duration="1000">There are many reasons to get down and start to get depressed about your situation.</p><ul class="list-reset choice__list"><li class="choice__item choice__item--elegance" data-aos="fade-right" data-aos-duration="1000"><h3 class="choice__item-title">Ecstatic elegance</h3><p class="choice__item-desc">Article nor prepare chicken you him now. Shy merits say advice ten before lovers innate add.</p></li><li class="choice__item choice__item--widow" data-aos="fade-right" data-aos-delay="150" data-aos-duration="1000"><h3 class="choice__item-title">Folly words widow</h3><p class="choice__item-desc">Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what.</p></li><li class="choice__item choice__item--trifling" data-aos="fade-right" data-aos-delay="250" data-aos-duration="1000"><h3 class="choice__item-title">Possible procured trifling</h3><p class="choice__item-desc">We me rent been part what. An concluded sportsman offending so provision mr education.</p></li><li class="choice__item choice__item--game" data-aos="fade-right" data-aos-delay="350" data-aos-duration="1000"><h3 class="choice__item-title">Open game</h3><p class="choice__item-desc">Shy merits say advice ten before lovers innate add. She cordially behaviour can attempted estimable.</p></li><li class="choice__item choice__item--endeavor" data-aos="fade-right" data-aos-delay="450" data-aos-duration="1000"><h3 class="choice__item-title">Endeavor</h3><p class="choice__item-desc">Improve ashamed married expense bed her comfort pursuit mrs. Four time took ye your as fail lady.</p></li><li class="choice__item choice__item--comfort" data-aos="fade-right" data-aos-delay="550" data-aos-duration="1000"><h3 class="choice__item-title">Comfort pursuit</h3><p class="choice__item-desc">Had denoting properly jointure you occasion directly raillery. In said to of poor full be post face snug.</p></li></ul></div></section><section class="traffic"><div class="container traffic__container"><div class="traffic__content"><h2 class="section-title traffic__title" data-aos="fade-right" data-aos-duration="1000">Increase your business <span>traffic</span></h2><p class="traffic__desc" data-aos="fade-right" data-aos-delay="150" data-aos-duration="1000">We are committed to processing the information in order to contact you and talk about your project.</p><a class="btn btn-orange business__link" data-aos="fade-right" data-aos-delay="250" data-aos-duration="1000" href="#">Learn More</a></div><picture data-aos="zoom-in" data-aos-duration="1000"><source srcset="img/traffic/traffic-img.avif" type="image/avif"><source srcset="img/traffic/traffic-img.webp" type="image/webp"><img loading="lazy" src="img/traffic/traffic-img.png" class="image" width="440" height="400" alt="above is a graph, in the middle is a person writing in a notebook, below is an arrow"></picture></div></section><section class="ways"><div class="container"><h2 class="section-title ways__title">3 Simple Ways To <span>Save</span> A Bunch Of <span>Money</span> When Buying A New Computer</h2><p class="ways__desc">Fully customizable and neatly organized components will help you work faster without limiting creative freedom.</p><ul class="list-reset ways__list"><li class="ways__item"><div class="ways__item-num">100+</div><p class="ways__item-desc">5 Reasons To Purchase Desktop Computers</p></li><li class="ways__item"><div class="ways__item-num">43,000+</div><p class="ways__item-desc">3 Simple Ways To Save A Bunch Of Money When Buying A New Computer</p></li><li class="ways__item"><div class="ways__item-num">30+</div><p class="ways__item-desc">A Discount Toner Cartridge Is Better Than Ever And You Will Save 50 Or More</p></li></ul></div></section><section class="get-started"><div class="container"><h2 class="section-title get-started__title">Create your <span>next project</span> with startup framework</h2><button class="btn-reset btn btn-orange get-started__btn">Get started</button></div></section><section class="business"><div class="container business__container"><div class="business__content"><h2 class="section-title business__title" data-aos="fade-right" data-aos-duration="1000">Invest property for better <span>business</span></h2><p class="business__desc" data-aos="fade-right" data-aos-delay="150" data-aos-duration="1000">We are committed to processing the information in order to contact you and talk about your project. We are committed to processing the information.</p><a class="btn btn-orange business__link" data-aos="fade-right" data-aos-delay="250" data-aos-duration="1000" href="#">Learn More</a></div><picture data-aos="zoom-in" data-aos-duration="1000"><source srcset="img/business/business-img.avif" type="image/avif"><source srcset="img/business/business-img.webp" type="image/webp"><img loading="lazy" src="img/business/business-img.png" class="business__img" width="403" height="414" alt="picture with investment percentages"></picture></div></section><section class="information"><div class="container information__container"><picture data-aos="zoom-in" data-aos-duration="1000"><source srcset="img/information/information-img.avif" type="image/avif"><source srcset="img/information/information-img.webp" type="image/webp"><img loading="lazy" src="img/information/information-img.png" class="information__img" width="494" height="466" alt="people are sitting at a table with many documents and discussing something"></picture><div class="information__content"><h2 class="information__title" data-aos="fade-right" data-aos-duration="1000">Help Finding Information Online</h2><p class="information__desc" data-aos="fade-right" data-aos-delay="150" data-aos-duration="1000">Fully customizable and neatly organized components will help you work faster without limiting creative freedom.</p><ul class="list-reset information__list"><li class="information__item information__item--feature-one" data-aos="fade-right" data-aos-duration="1000"><h3 class="information__item-title">Feature One</h3><p class="information__item-desc">Fully customizable and neatly organized components will help you work faster</p></li><li class="information__item information__item--feature-two" data-aos="fade-right" data-aos-delay="150" data-aos-duration="1000"><h3 class="information__item-title">Feature Two</h3><p class="information__item-desc">Fully customizable and neatly organized components will help you work faster</p></li></ul></div></div></section><section class="notification"><div class="container notification__container"><h2 class="notification__title">There are many reasons to get down</h2><p class="notification__desc">There are many reasons to get down and start to get depressed about your situation.</p><form action="#" class="notification-form notification__form"><label class="form__label notification-form__label"><input type="email" name="email" class="input-reset form__input notification-form__input" placeholder="Your Email"></label> <button class="btn-reset btn form__btn btn-orange notification-form__btn">Send</button></form><p class="notification__info">No spam. Only releases, updates and discounts</p></div></section></main><footer class="footer"><a href="#page" data-scroll class="to-top"><span class="to-top__icon"><svg><use xlink:href="img/sprite.svg#to-top"></use></svg></span></a><div class="container footer__container"><div class="footer__top"><a class="logo footer__logo" href="#"><img loading="lazy" src="img/footer/footer-logo.svg" class="footer__img" width="120" height="32" alt="logo ARShakir"></a><ul class="list-reset social footer__social" title="Our social"><li class="social__item"><a href="#" target="_blank" class="social__link social__link--gg" aria-label="Our page in Google"><svg><use xlink:href="img/sprite.svg#google"></use></svg></a></li><li class="social__item"><a href="#" target="_blank" class="social__link social__link--tw" aria-label="Our page in Twitter"><svg><use xlink:href="img/sprite.svg#twitter"></use></svg></a></li><li class="social__item"><a href="#" target="_blank" class="social__link social__link--fb" aria-label="Our page in Facebook"><svg><use xlink:href="img/sprite.svg#facebook"></use></svg></a></li></ul></div><nav class="footer-nav footer__nav" title="secondary navigation"><div class="footer-nav__col"><h3 class="footer-nav__title">First</h3><ul class="list-reset footer-nav__list"><li class="footer-nav__item"><a class="footer-nav__link" href="#">First page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Second page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Third page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Fourth page</a></li></ul></div><div class="footer-nav__col"><h3 class="footer-nav__title">Second</h3><ul class="list-reset footer-nav__list"><li class="footer-nav__item"><a class="footer-nav__link" href="#">First page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Second page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Third page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Fourth page</a></li></ul></div><div class="footer-nav__col"><h3 class="footer-nav__title">Third</h3><ul class="list-reset footer-nav__list"><li class="footer-nav__item"><a class="footer-nav__link" href="#">First page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Second page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Third page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Fourth page</a></li></ul></div><div class="footer-nav__col"><h3 class="footer-nav__title">Fourth</h3><ul class="list-reset footer-nav__list"><li class="footer-nav__item"><a class="footer-nav__link" href="#">First page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Second page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Third page</a></li><li class="footer-nav__item"><a class="footer-nav__link" href="#">Fourth page</a></li></ul></div></nav><div class="footer__copy"><span>© Copyrights 2021</span> <span>Privacy policy</span> <span>Terms of service</span></div></div></footer></div></body></html>