-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
472 lines (471 loc) · 23.7 KB
/
index.html
1
<!DOCTYPE html><html lang="ru"> <head> <title>Главная</title> <meta charset="UTF-8"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="css/style.min.css"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <!-- <meta name="robots" content="noindex, nofollow"> --> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> --> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head> <body> <div class="wrapper"> <header class="header"> <div class="header__content _container"> <div class="header__column"> <a href="" class="header__logo"><picture><source srcset="img/header/Your_Logo.webp" type="image/webp"><img src="img/header/Your_Logo.png" alt=""></picture></a> </div> <div class="header__menu menu"> <div class="menu__icon icon-menu"> <span></span> <span></span> <span></span> </div> <nav class="menu__body"> <ul class="menu__list"> <li><a href="" class="menu__link">Home</a></li> <li><a href="#about" class="menu__link _goto">About</a></li> <li><a href="#services" class="menu__link _goto">Servicing</a></li> <li><a href="#works" class="menu__link _goto">Portfolio</a></li> <li><a href="#blog" class="menu__link _goto">Blog</a></li> <li><a href="#contacts" class="menu__link _goto">Contact us</a></li> <li><a href="" class="menu__link"><picture><source srcset="img/header/header-search.webp" type="image/webp"><img src="img/header/header-search.png" alt=""></picture></a></li> </ul> </nav> </div> </div></header> <main class="page"> <div class="web"> <div class="web__container _container"> <div class="text"> <div class="text__title">Web development project</div> <div class="text__subtitle">Very suitable to support all web development projects</div> </div> <div class="btns"> <div class="btns__body"> <div class="btns__item"><a href="#services" class="btns__btn _goto">OUR SERVICES</a></div> <div class="btns__item btns__item--special"><a href="#contacts" class="btns__btn _goto">HIRE US NOW</a></div> </div> <a href="#about" class="btns__arrow _goto"><picture><source srcset="img/web/arrow.webp" type="image/webp"><img src="img/web/arrow.png" alt=""></picture></a> </div> <div class="web__image _ibg"><picture><source srcset="img/web/image.webp" type="image/webp"><img src="img/web/image.png" alt=""></picture></div> </div> </div> <div class="about"> <div class="about__container _container"> <div class="about-body"> <div class="about-body__title">About Us</div> <div class="about-body__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div> </div> <div class="columns"> <div class="columns__item"> <div class="columns__icon"><picture><source srcset="img/about/01.webp" type="image/webp"><img src="img/about/01.png" alt=""></picture></div> <div class="columns__subtitle subtitle">Awesome Icons</div> <div class="columns__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</div> </div> <div class="columns__item"> <div class="columns__icon"><picture><source srcset="img/about/02.webp" type="image/webp"><img src="img/about/02.png" alt=""></picture></div> <div class="columns__subtitle subtitle">One Page</div> <div class="columns__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</div> </div> <div class="columns__item"> <div class="columns__icon"><picture><source srcset="img/about/03.webp" type="image/webp"><img src="img/about/03.png" alt=""></picture></div> <div class="columns__subtitle subtitle">Fully Responsive</div> <div class="columns__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</div> </div> </div> </div> </div> <div class="services"> <div class="services__container _container"> <div class="services-body title-top"> <div class="title-top__title">Our Services</div> <div class="title-top__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div> </div> <div class="services-columns"> <div class="services-columns__item-wrap"> <div class="services-columns__item"> <div class="services-columns__icon"></div> <div class="services-columns__subtitle subtitle">Research</div> <div class="services-columns__text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</div> <div class="services-columns__btn btn"><a href="" class="btn__link">READ MORE</a></div> </div> </div> <div class="services-columns__item-wrap"> <div class="services-columns__item"> <div class="services-columns__icon"></div> <div class="services-columns__subtitle subtitle">Portfolio</div> <div class="services-columns__text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</div> <div class="services-columns__btn btn"><a href="" class="btn__link">READ MORE</a></div> </div> </div> <div class="services-columns__item-wrap"> <div class="services-columns__item"> <div class="services-columns__icon"></div> <div class="services-columns__subtitle subtitle">Support</div> <div class="services-columns__text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</div> <div class="services-columns__btn btn"><a href="" class="btn__link">READ MORE</a></div> </div> </div> <div class="services-columns__item-wrap"> <div class="services-columns__item"> <div class="services-columns__icon"></div> <div class="services-columns__subtitle subtitle">Documentation</div> <div class="services-columns__text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</div> <div class="services-columns__btn btn"><a href="" class="btn__link">READ MORE</a></div> </div> </div> <div class="services-columns__item-wrap"> <div class="services-columns__item"> <div class="services-columns__icon"></div> <div class="services-columns__subtitle subtitle">Development</div> <div class="services-columns__text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</div> <div class="services-columns__btn btn"><a href="" class="btn__link">READ MORE</a></div> </div> </div> <div class="services-columns__item-wrap"> <div class="services-columns__item"> <div class="services-columns__icon"></div> <div class="services-columns__subtitle subtitle">Design</div> <div class="services-columns__text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</div> <div class="services-columns__btn btn"><a href="" class="btn__link">READ MORE</a></div> </div> </div> </div> </div> </div> <div class="works"> <div class="works__container _container"> <div class="services-body title-top"> <div class="title-top__title">Latest Works</div> <div class="title-top__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div> </div> <nav class="works__filter filter"> <div class="filter__list"> <div data-filter="1" class="filter__item _active">ALL</div> <div data-filter="2" class="filter__item">WEB DESIGN</div> <div data-filter="3" class="filter__item">UI/UX DESIGN</div> <div data-filter="4" class="filter__item">MOCKUPS</div> </div> </nav> <div class="works__items gallery"> <div class="gallery__columns-wraper f_3"> <div class="gallery__columns"> <div class="gallery__text"> <div class="gallery__title">Hand Watch</div> <div class="gallery__subtitle">ui/ux design</div> </div> <div class="gallery__image _ibg"><picture><source srcset="img/gallery/Layer_7.webp" type="image/webp"><img src="img/gallery/Layer_7.png" alt=""></picture></div> </div> </div> <div class="gallery__columns-wraper f_2"> <div class="gallery__columns"> <div class="gallery__text"> <div class="gallery__title">HELIO</div> <div class="gallery__subtitle">web design</div> </div> <div class="gallery__image _ibg"><picture><source srcset="img/gallery/Layer_2.webp" type="image/webp"><img src="img/gallery/Layer_2.png" alt=""></picture></div> </div> </div> <div class="gallery__columns-wraper f_4"> <div class="gallery__columns"> <div class="gallery__text"> <div class="gallery__title">T-shirt</div> <div class="gallery__subtitle">mockups</div> </div> <div class="gallery__image _ibg"><picture><source srcset="img/gallery/Layer_3.webp" type="image/webp"><img src="img/gallery/Layer_3.png" alt=""></picture></div> </div> </div> <div class="gallery__columns-wraper f_3"> <div class="gallery__columns"> <div class="gallery__text"> <div class="gallery__title">Flask</div> <div class="gallery__subtitle">ui/ux design</div> </div> <div class="gallery__image _ibg"><picture><source srcset="img/gallery/Layer_4.webp" type="image/webp"><img src="img/gallery/Layer_4.png" alt=""></picture></div> </div> </div> <div class="gallery__columns-wraper f_3"> <div class="gallery__columns"> <div class="gallery__text"> <div class="gallery__title">Bottle</div> <div class="gallery__subtitle">ui/ux design</div> </div> <div class="gallery__image _ibg"><picture><source srcset="img/gallery/Layer_5.webp" type="image/webp"><img src="img/gallery/Layer_5.png" alt=""></picture></div> </div> </div> <div class="gallery__columns-wraper f_2"> <div class="gallery__columns"> <div class="gallery__text"> <div class="gallery__title">Bag</div> <div class="gallery__subtitle">web design</div> </div> <div class="gallery__image _ibg"><picture><source srcset="img/gallery/Layer_6.webp" type="image/webp"><img src="img/gallery/Layer_6.png" alt=""></picture></div> </div> </div> </div> <div class="works__footer"> <div class="works__footer-btn">VIEW ALL</div> </div> </div> </div> <div class="pricing"> <div class="pricing__container _container"> <div class="pricing-body title-top"> <div class="title-top__title">Pricing Plan</div> <div class="title-top__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div> </div> <div class="pricing__row"> <div class="pricing__column"> <div class="pricing__item item"> <div class="item__head"> <div class="item__head-title">Free Trail</div> <div class="item__head-price price"> <div class="price__val">$</div> <div class="price__dg">00</div> <div class="price__per">per month</div> </div> <div class="item__head-image _ibg"><picture><source srcset="img/pricing/header_blue.svg" type="image/webp"><img src="img/pricing/header_blue.svg" alt=""></picture></div> </div> <div class="item__body"> <div class="item__body-item">30 Free Trail</div> <div class="item__body-item">5 Free Projects</div> <div class="item__body-item">PHP 5 Enabled</div> <div class="item__body-item">24/7 Suports</div> <div class="item__body-item-btn">Order Now</div> </div> </div> </div> <div class="pricing__column"> <div class="pricing__item item"> <div class="item__head"> <div class="item__head-title">Basic</div> <div class="item__head-price price"> <div class="price__val">$</div> <div class="price__dg">50</div> <div class="price__per">per month</div> </div> <div class="item__head-image _ibg"><picture><source srcset="img/pricing/header_blue.svg" type="image/webp"><img src="img/pricing/header_blue.svg" alt=""></picture></div> </div> <div class="item__body"> <div class="item__body-item">30 Free Trail</div> <div class="item__body-item">5 Free Projects</div> <div class="item__body-item">PHP 5 Enabled</div> <div class="item__body-item">24/7 Suports</div> <div class="item__body-item-btn">Order Now</div> </div> </div> </div> <div class="pricing__column"> <div class="pricing__item item"> <div class="item__head"> <div class="item__head-title">Ultimates</div> <div class="item__head-price price"> <div class="price__val">$</div> <div class="price__dg">99</div> <div class="price__per">per month</div> </div> <div class="item__head-image _ibg"><picture><source srcset="img/pricing/header_blue.svg" type="image/webp"><img src="img/pricing/header_blue.svg" alt=""></picture></div> </div> <div class="item__body"> <div class="item__body-item">30 Free Trail</div> <div class="item__body-item">5 Free Projects</div> <div class="item__body-item">PHP 5 Enabled</div> <div class="item__body-item">24/7 Suports</div> <div class="item__body-item-btn">Order Now</div> </div> </div> </div> </div> </div> </div> <div class="team"> <div class="team__container _container"> <div class="team-header title-top"> <div class="title-top__title">Our Team Member</div> <div class="title-top__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div> </div> <div class="team__row swiper-container"> <div class="team__row-wrapper swiper-wrapper"> <div class="team__column item-t swiper-slide"> <div class="item-t__image _ibg"><picture><source srcset="img/team/1.webp" type="image/webp"><img src="img/team/1.png" alt=""></picture></div> <div class="item-t__text"> <div class="item-t__text-name">John Doe</div> <div class="item-t__text-work">General Manager</div> </div> <div class="item-t__social"> <div class="item-t__social-item _faceb"></div> <div class="item-t__social-item _twit"></div> <div class="item-t__social-item _chat"></div> <div class="item-t__social-item _ball"></div> </div> </div> <div class="team__column item-t swiper-slide"> <div class="item-t__image _ibg"><picture><source srcset="img/team/2.webp" type="image/webp"><img src="img/team/2.png" alt=""></picture></div> <div class="item-t__text"> <div class="item-t__text-name">Alexa Biru</div> <div class="item-t__text-work">Office Director</div> </div> <div class="item-t__social"> <div class="item-t__social-item _faceb"></div> <div class="item-t__social-item _twit"></div> <div class="item-t__social-item _chat"></div> <div class="item-t__social-item _ball"></div> </div> </div> <div class="team__column item-t swiper-slide"> <div class="item-t__image _ibg"><picture><source srcset="img/team/3.webp" type="image/webp"><img src="img/team/3.png" alt=""></picture></div> <div class="item-t__text"> <div class="item-t__text-name">Ronobir sing</div> <div class="item-t__text-work">Admin</div> </div> <div class="item-t__social"> <div class="item-t__social-item _faceb"></div> <div class="item-t__social-item _twit"></div> <div class="item-t__social-item _chat"></div> <div class="item-t__social-item _ball"></div> </div> </div> <div class="team__column item-t swiper-slide"> <div class="item-t__image _ibg"><picture><source srcset="img/team/2.webp" type="image/webp"><img src="img/team/2.png" alt=""></picture></div> <div class="item-t__text"> <div class="item-t__text-name">Alexa Biru</div> <div class="item-t__text-work">Office Director</div> </div> <div class="item-t__social"> <div class="item-t__social-item _faceb"></div> <div class="item-t__social-item _twit"></div> <div class="item-t__social-item _chat"></div> <div class="item-t__social-item _ball"></div> </div> </div> <div class="team__column item-t swiper-slide"> <div class="item-t__image _ibg"><picture><source srcset="img/team/1.webp" type="image/webp"><img src="img/team/1.png" alt=""></picture></div> <div class="item-t__text"> <div class="item-t__text-name">John Doe</div> <div class="item-t__text-work">General Manager</div> </div> <div class="item-t__social"> <div class="item-t__social-item _faceb"></div> <div class="item-t__social-item _twit"></div> <div class="item-t__social-item _chat"></div> <div class="item-t__social-item _ball"></div> </div> </div> </div> <div class="team__row-paginaton"></div> </div> </div> </div> <div class="blog"> <div class="blog__container _container"> <div class="blog-header title-top"> <div class="title-top__title">Blog</div> <div class="title-top__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div> </div> <div class="blog__row"> <div class="blog__column item-blog"> <div class="item-blog__image "><picture><source srcset="img/blog/1.webp" type="image/webp"><img src="img/blog/1.png" alt=""></picture></div> <div class="item-blog__body"> <div class="item-blog__title">SEO Quis Vestibulum</div> <div class="item-blog__info"> <div class="item-blog__info-date">14.0702017</div> <div class="item-blog__info-class">Development</div> </div> <div class="item-blog__text">Dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</div> </div> </div> <div class="blog__column item-blog"> <div class="item-blog__image "><picture><source srcset="img/blog/2.webp" type="image/webp"><img src="img/blog/2.png" alt=""></picture></div> <div class="item-blog__body"> <div class="item-blog__title">SEO Quis Vestibulum</div> <div class="item-blog__info"> <div class="item-blog__info-date">14.0702017</div> <div class="item-blog__info-class">Development</div> </div> <div class="item-blog__text">Dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</div> </div> </div> <div class="blog__column item-blog"> <div class="item-blog__image"><picture><source srcset="img/blog/3.webp" type="image/webp"><img src="img/blog/3.png" alt=""></picture></div> <div class="item-blog__body"> <div class="item-blog__title">SEO Quis Vestibulum</div> <div class="item-blog__info"> <div class="item-blog__info-date">14.0702017</div> <div class="item-blog__info-class">Development</div> </div> <div class="item-blog__text">Dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</div> </div> </div> </div> <div class="blog__footer"> <div class="blog__footer-btn">MORE VIEW</div> </div> </div> </div> <div class="contacts"> <div class="contacts__container _container"> <div class="contacts-header title-top"> <div class="title-top__title w">Contact Us</div> <div class="title-top__subtitle w">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div> </div> <div class="contacts__row"> <div class="contacts__item"> <div class="contacts__icon"><picture><source srcset="img/contacts/icon-loc.webp" type="image/webp"><img src="img/contacts/icon-loc.png" alt=""></picture></div> <div class="contacts__text">Nobinagar savar,Dhaka Bangladesh</div> </div> <div class="contacts__item"> <div class="contacts__icon"><picture><source srcset="img/contacts/icon-phone.webp" type="image/webp"><img src="img/contacts/icon-phone.png" alt=""></picture></div> <div class="contacts__text"> <div class="contacts_text-1">+8801743331996</div> <div class="contacts_text-2">+8801928737807</div> </div> </div> <div class="contacts__item"> <div class="contacts__icon"><picture><source srcset="img/contacts/icon-mail.webp" type="image/webp"><img src="img/contacts/icon-mail.png" alt=""></picture></div> <div class="contacts__text"> <div class="contacts_text-1">[email protected]</div> <div class="contacts_text-2">[email protected]</div> </div> </div> </div> <div class="contacts__body"> <form action="" class="contacts__form form-contacts"> <div class="form-contacts__row"> <div class="form-contacts__column"> <div class="form-contacts__label">YOUR NAME</div> <input autocomplete="off" type="text" name="form[]" data-error="Field should not be empty" data-value="" class="input _req"> </div> <div class="form-contacts__column"> <div class="form-contacts__label">YOUR E-MAIL</div> <input autocomplete="off" type="text" name="form[]" data-error="Email adress is not acceptable " data-value="" class="input _email _req"> </div> </div> <div class="form-contacts__input"> <div class="form-contacts__label">MESSAGE</div> <textarea autocomplete="off" name="form[]" data-value="" data-error="Ошибка" class="input"></textarea> </div> <button type="submit" class="form-contacts__btn">Send</button> </form> </div> </div> </div> </main> <footer class="footer"> <div class="footer__content _container"> <div class="footer__text"> All rights Reserved © 2017</div> </div></footer> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="js/vendors.min.js"></script><script src="js/app.min.js"></script> </body></html>