-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
508 lines (496 loc) · 22.3 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Description"> <meta name="keywords" content="clean, bobokhuja"> <title>Document</title> <link rel="stylesheet" href="css/style.min.css" type="text/css"> <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=Quicksand:wght@300;400;500;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"></head><body> <header class="header"> <div class="header__wrapper"> <div class="header__wrap wrap2"> <a href="/" class="header__logo" aria-label="Logotype"> <picture><source srcset="img/logo.webp" type="image/webp"><img src="img/logo.png" alt="" class="header__logo-img"></picture> </a> <nav class="header__menu menu"> <button class="menu__burger"> <span></span> </button> <button class="menu__burger menu__burger--close"> <span></span> </button> <div class="menu__dark"></div> <ul class="menu__list"> <li class="menu__item"> <a href="#home" class="menu__link">Home</a> </li> <li class="menu__item"> <a href="#blog" class="menu__link">Blog</a> </li> <li class="menu__item"> <a href="#features" class="menu__link">Features</a> </li> <li class="menu__item"> <a href="#pricing" class="menu__link">Pricing</a> </li> <li class="menu__item"> <a href="#doc" class="menu__link">Documentation</a> </li> </ul> </nav> <div class="header__right"> <div class="header__social social"> <ul class="social__list"> <li class="social__item"> <a href="#" class="social__link" aria-label="Facebook"> <svg class="social__svg social__svg--facebook"> <use xlink:href="img/stack/sprite.svg#icons--facebook"/> </svg> </a> </li> <li class="social__item"> <a href="#" class="social__link" aria-label="Telegram"> <svg class="social__svg social__svg--telegram"> <use xlink:href="img/stack/sprite.svg#icons--telegram"/> </svg> </a> </li> <li class="social__item"> <a href="#" class="social__link" aria-label="Twitter"> <svg class="social__svg social__svg--twitter"> <use xlink:href="img/stack/sprite.svg#icons--twitter"/> </svg> </a> </li> <li class="social__item"> <a href="#" class="social__link" aria-label="Medium"> <svg class="social__svg social__svg--medium"> <use xlink:href="img/stack/sprite.svg#icons--medium"/> </svg> </a> </li> </ul> </div> <a href="#" class="header__btn">Get started</a> </div> </div> </div></header> <section class="hero"> <div class="hero__wrap"> <div class="hero__wrapper owl-carousel"> <div style="background-image: url('img/graphic.svg')" class="hero__item"> <h3 class="hero__subtitle subtitle">PLAN YOUR LIFE</h3> <h2 class="hero__title title">Increase your <strong>productivity</strong></h2> <p class="hero__description description">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui laudem an, insolens gubergren similique est cu. Et vel modus congue vituperata.</p> <button class="hero__btn" aria-label="play"> <svg class="hero__btn-svg"> <use xlink:href="img/stack/sprite.svg#icons--play" /> </svg> </button> </div> <div style="background-image: url('img/graphic.svg')" class="hero__item"> <h3 class="hero__subtitle subtitle">PLAN YOUR LIFE</h3> <h2 class="hero__title title">Increase your <strong>productivity</strong></h2> <p class="hero__description description">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui laudem an, insolens gubergren similique est cu. Et vel modus congue vituperata.</p> <button class="hero__btn" aria-label="play"> <svg class="hero__btn-svg"> <use xlink:href="img/stack/sprite.svg#icons--play" /> </svg> </button> </div> <div style="background-image: url('img/graphic.svg')" class="hero__item"> <h3 class="hero__subtitle subtitle">PLAN YOUR LIFE</h3> <h2 class="hero__title title">Increase your <strong>productivity</strong></h2> <p class="hero__description description">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui laudem an, insolens gubergren similique est cu. Et vel modus congue vituperata.</p> <button class="hero__btn" aria-label="play"> <svg class="hero__btn-svg"> <use xlink:href="img/stack/sprite.svg#icons--play" /> </svg> </button> </div> </div> </div></section> <div class="brands"> <div class="brands__wrap wrap"> <div class="brands__block"> <div class="brands__item"> <svg class="brands__img brands__img--bitbucket"> <use xlink:href="img/stack/sprite.svg#brands--bitbucket" /> </svg> </div> <div class="brands__item"> <svg class="brands__img brands__img--apple-watch"> <use xlink:href="img/stack/sprite.svg#brands--apple-watch" /> </svg> </div> <div class="brands__item"> <svg class="brands__img brands__img--facebook"> <use xlink:href="img/stack/sprite.svg#brands--facebook" /> </svg> </div> <div class="brands__item"> <svg class="brands__img brands__img--atlassian"> <use xlink:href="img/stack/sprite.svg#brands--atlassian" /> </svg> </div> <div class="brands__item"> <svg class="brands__img brands__img--audi"> <use xlink:href="img/stack/sprite.svg#brands--audi" /> </svg> </div> </div> </div></div> <section class="plan"> <div class="plan__wrap wrap"> <div class="plan__content"> <h3 class="plan__subtitle subtitle">DESKTOP AND MOBILE APP</h3> <h2 class="plan__title title"><strong>Plan</strong> and <strong>manage</strong></h2> <p class="plan__description description">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui laudem an, insolens gubergren similique est cu. Et vel modus congue vituperata. Solum patrioque no sea. Mea ex malis mollis oporteat. Eum an expetenda consequat.</p> <div class="plan__btns"> <a href="#" class="plan__btn">View video <svg> <use xlink:href="img/stack/sprite.svg#icons--play" /> </svg> </a> <a href="#" class="plan__btn plan__btn--white">See features</a> </div> </div> <div class="plan__img"> <picture><source srcset="img/img1.webp" type="image/webp"><img src="img/img1.png" alt="" width="auto" height="auto"></picture> </div> </div></section> <section class="about"> <div class="about__wrap wrap"> <h3 class="about__subtitle subtitle">ABOUT US</h3> <h2 class="about__title title">Read about our app</h2> <div class="about__block"> <div class="about__item"> <div class="about__img"> <svg class="about__svg about__svg--overview"> <use xlink:href="img/stack/sprite.svg#icons--overview" /> </svg> </div> <h3 class="about__name">Overview</h3> <p class="about__text">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro.</p> </div> <div class="about__item"> <div class="about__img"> <svg class="about__svg about__svg--folder"> <use xlink:href="img/stack/sprite.svg#icons--folder" /> </svg> </div> <h3 class="about__name">Files</h3> <p class="about__text">No vim nulla vitae intellegat. Ei enim error ius, solet atomorum conceptam ex has.</p> </div> <div class="about__item"> <div class="about__img"> <svg class="about__svg about__svg--message"> <use xlink:href="img/stack/sprite.svg#icons--message" /> </svg> </div> <h3 class="about__name">Meeting chats</h3> <p class="about__text">Vim ne tacimates neglegentur. Erat diceret omittam at est.</p> </div> <div class="about__item"> <div class="about__img"> <svg class="about__svg about__svg--upload"> <use xlink:href="img/stack/sprite.svg#icons--upload" /> </svg> </div> <h3 class="about__name">Save events</h3> <p class="about__text">Nisl idque mel ea, nominati voluptatum.</p> </div> </div> <div class="about__btns"> <a href="#" class="about__btn about__btn--more">Read more</a> <span class="about__divider-btn">OR</span> <a href="#" class="about__btn about__btn--started">Get started</a> </div> </div></section> <section class="counts"> <div class="counts__left"> <div class="counts__img"> <svg class="counts__svg"> <use xlink:href="img/stack/sprite.svg#icons--speedtest" /> </svg> </div> <p class="counts__number">89%</p> <p class="counts__text">Customers who have increased their productivity</p> </div> <div class="counts__right"> <div class="counts__img"> <svg class="counts__svg"> <use xlink:href="img/stack/sprite.svg#icons--users" /> </svg> </div> <p class="counts__number">3123</p> <p class="counts__text">Users who have used our application</p> </div></section> <section class="blog"> <div class="blog__wrap"> <h3 class="blog__subtitle subtitle">OUR RESOURCES</h3> <h2 class="blog__title title">Start reading our blog</h2> <div class="blog__block owl-carousel"> <div class="blog__item"> <div class="blog__images"> <picture><source srcset="img/img2.webp" type="image/webp"><img src="img/img2.jpg" alt=""></picture> <div class="blog__images-two"> <picture><source srcset="img/img3.webp" type="image/webp"><img src="img/img3.jpg" alt=""></picture> <picture><source srcset="img/img4.webp" type="image/webp"><img src="img/img4.jpg" alt=""></picture> </div> </div> <div class="blog__content"> <p class="blog__name">How to start planning</p> <div class="blog__text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...</div> <div class="blog__btns"> <a href="#" class="blog__btn blog__btn--more">Read now</a> <a href="#" class="blog__btn blog__btn--add">Add to your bookmarks</a> </div> </div> </div> <div class="blog__item"> <div class="blog__images"> <picture><source srcset="img/img2.webp" type="image/webp"><img src="img/img2.jpg" alt=""></picture> <div class="blog__images-two"> <picture><source srcset="img/img3.webp" type="image/webp"><img src="img/img3.jpg" alt=""></picture> <picture><source srcset="img/img4.webp" type="image/webp"><img src="img/img4.jpg" alt=""></picture> </div> </div> <div class="blog__content"> <p class="blog__name">How to start planning</p> <div class="blog__text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...</div> <div class="blog__btns"> <a href="#" class="blog__btn blog__btn--more">Read now</a> <a href="#" class="blog__btn blog__btn--add">Add to your bookmarks</a> </div> </div> </div> <div class="blog__item"> <div class="blog__images"> <picture><source srcset="img/img2.webp" type="image/webp"><img src="img/img2.jpg" alt=""></picture> <div class="blog__images-two"> <picture><source srcset="img/img3.webp" type="image/webp"><img src="img/img3.jpg" alt=""></picture> <picture><source srcset="img/img4.webp" type="image/webp"><img src="img/img4.jpg" alt=""></picture> </div> </div> <div class="blog__content"> <p class="blog__name">How to start planning</p> <div class="blog__text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...</div> <div class="blog__btns"> <a href="#" class="blog__btn blog__btn--more">Read now</a> <a href="#" class="blog__btn blog__btn--add">Add to your bookmarks</a> </div> </div> </div> <div class="blog__item"> <div class="blog__images"> <picture><source srcset="img/img2.webp" type="image/webp"><img src="img/img2.jpg" alt=""></picture> <div class="blog__images-two"> <picture><source srcset="img/img3.webp" type="image/webp"><img src="img/img3.jpg" alt=""></picture> <picture><source srcset="img/img4.webp" type="image/webp"><img src="img/img4.jpg" alt=""></picture> </div> </div> <div class="blog__content"> <p class="blog__name">How to start planning</p> <div class="blog__text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...</div> <div class="blog__btns"> <a href="#" class="blog__btn blog__btn--more">Read now</a> <a href="#" class="blog__btn blog__btn--add">Add to your bookmarks</a> </div> </div> </div> </div> </div></section> <section class="quotes"> <div class="quotes__wrap wrap"> <div class="quotes__content"> <h3 class="quotes__subtitle subtitle">TESTIMONIALS</h3> <h2 class="quotes__title title">Customers's quotes</h2> <p class="quotes__text description">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui laudem an.</p> </div> <div class="quotes__slider href="#""> <div class="quotes__item"> <p class="quotes__quote">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. </p> <div class="quotes__author"> <picture><source srcset="img/user.webp" type="image/webp"><img src="img/user.png" alt="" class="quotes__author-img"></picture> </div> </div> <div class="quotes__item"> <p class="quotes__quote">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. </p> <div class="quotes__author"> <picture><source srcset="img/user.webp" type="image/webp"><img src="img/user.png" alt="" class="quotes__author-img"></picture> </div> </div> <div class="quotes__item"> <p class="quotes__quote">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. </p> <div class="quotes__author"> <picture><source srcset="img/user.webp" type="image/webp"><img src="img/user.png" alt="" class="quotes__author-img"></picture> </div> </div> </div> </div></section> <section class="faq"> <div class="faq__wrap wrap"> <h3 class="faq__subtitle subtitle">Customer help</h3> <h2 class="faq__title title">Frequently asked questions</h2> <div class="faq__block"> <div class="faq__item"> <p class="faq__name">Reque insolens in vel?</p> <div class="faq__text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda dicta distinctio facilis maxime nobis nostrum perferendis quo repudiandae sunt. Dolore harum incidunt quae suscipit. </p> </div> </div> <div class="faq__item"> <p class="faq__name">Vis rebum error graecis ea, id sit postea accusamus?</p> <div class="faq__text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda dicta distinctio facilis maxime nobis nostrum perferendis quo repudiandae sunt. Dolore harum incidunt quae suscipit. </p> </div> </div> <div class="faq__item"> <p class="faq__name">Lorem repudiandae ne nec?</p> <div class="faq__text"> <p>Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti.</p> <p>Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti.</p> <p>Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti.</p> <a href="#" class="faq__link">Go to documentation</a> </div> </div> <div class="faq__item"> <p class="faq__name">Ad dicit numquam vel. Et eos iudico feugait percipitur?</p> <div class="faq__text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda dicta distinctio facilis maxime nobis nostrum perferendis quo repudiandae sunt. Dolore harum incidunt quae suscipit. </p> </div> </div> <div class="faq__item"> <p class="faq__name">Sea no dico percipitur. Fierent constituam definitiones id eum?</p> <div class="faq__text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda dicta distinctio facilis maxime nobis nostrum perferendis quo repudiandae sunt. Dolore harum incidunt quae suscipit. </p> </div> </div> </div> </div></section> <section class="get"> <div class="get__wrap wrap"> <h3 class="get__subtitle subtitle">PLAN YOUR LIFE</h3> <h2 class="get__title title">Get <strong>started</strong> now</h2> <p class="get__description">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui laudem an, insolens gubergren similique est cu. Et vel modus congue vituperata.</p> <div class="get__btns"> <a href="#" class="get__btn">View pricing</a> <a href="#" class="get__btn get__btn--white">Read documentation</a> </div> </div></section> <section class="sign-up"> <div class="sign-up__wrap wrap"> <div class="sign-up__left"> <h3 class="sign-up__title title">Sign up for newsletter</h3> <p class="sign-up__text">Cu qui soleat partiendo urbanitas. Eum aperiri indoctum eu, homero alterum.</p> </div> <form class="sign-up__form"> <label class="sign-up__group"> <input type="email" class="sign-up__email" placeholder="Email address"> </label> <button type="submit" class="sign-up__btn">Save me</button> </form> </div></section> <footer class="footer"> <div class="footer__wrapper"> <div class="footer__wrap wrap2"> <a href="/" class="footer__logo" aria-label="Logotype"> <picture><source srcset="img/logo.webp" type="image/webp"><img src="img/logo.png" alt="" class="footer__logo-img"></picture> </a> <nav class="footer__menu menu"> <button class="menu__burger"> <span></span> </button> <button class="menu__burger menu__burger--close"> <span></span> </button> <div class="menu__dark"></div> <ul class="menu__list"> <li class="menu__item"> <a href="#home" class="menu__link">Home</a> </li> <li class="menu__item"> <a href="#blog" class="menu__link">Blog</a> </li> <li class="menu__item"> <a href="#features" class="menu__link">Features</a> </li> <li class="menu__item"> <a href="#pricing" class="menu__link">Pricing</a> </li> <li class="menu__item"> <a href="#doc" class="menu__link">Documentation</a> </li> </ul> </nav> <div class="footer__right"> <div class="footer__social social"> <ul class="social__list"> <li class="social__item"> <a href="#" class="social__link"> <svg class="social__svg social__svg--facebook" aria-label="Facebook"> <use xlink:href="img/stack/sprite.svg#icons--facebook"/> </svg> </a> </li> <li class="social__item"> <a href="#" class="social__link" aria-label="Telegram"> <svg class="social__svg social__svg--telegram"> <use xlink:href="img/stack/sprite.svg#icons--telegram"/> </svg> </a> </li> <li class="social__item"> <a href="#" class="social__link" aria-label="Twitter"> <svg class="social__svg social__svg--twitter"> <use xlink:href="img/stack/sprite.svg#icons--twitter"/> </svg> </a> </li> <li class="social__item"> <a href="#" class="social__link" aria-label="Medium"> <svg class="social__svg social__svg--medium"> <use xlink:href="img/stack/sprite.svg#icons--medium"/> </svg> </a> </li> </ul> </div> <a href="#" class="footer__btn">Get started</a> </div> <p class="footer__copyright">Copyright © 2018 by Random site</p> </div> </div></footer> <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <script src="js/script.js" type="text/javascript"></script></body></html>