-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
510 lines (509 loc) · 24.6 KB
/
index.html
1
<!DOCTYPE html><html lang="ru"> <head> <title>Funiro</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"> <!-- <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__wrapper"> <div class="header__container _container"> <div class="header__body"> <div class="header__main"> <a href="" class="header__logo">Funiro.</a> <div class="header__menu menu"> <nav class="menu__body"> <ul data-spollers="768,max" class="menu__list"> <li class="menu__item"> <a href="" class="menu__link">Products</a> <button data-spoller type="button" class="menu__arrow _icon-arrow-down"></button> <ul class="menu__sub-list"> <li class="menu__sub-item"> <a href="" class="menu__sub-link">Product #1</a> </li> <li class="menu__sub-item"> <a href="" class="menu__sub-link">Product #2</a> </li> <li class="menu__sub-item"> <a href="" class="menu__sub-link">Product #3</a> </li> <li class="menu__sub-item"> <a href="" class="menu__sub-link">Product #4</a> </li> </ul> </li> <li class="menu__item"> <a href="" class="menu__link">Rooms</a> <button data-spoller type="button" class="menu__arrow _icon-arrow-down"></button> <ul class="menu__sub-list"> <li class="menu__sub-item"> <a href="" class="menu__sub-link">Room #1</a> </li> <li class="menu__sub-item"> <a href="" class="menu__sub-link">Room #2</a> </li> <li class="menu__sub-item"> <a href="" class="menu__sub-link">Room #3</a> </li> <li class="menu__sub-item"> <a href="" class="menu__sub-link">Room #4</a> </li> </ul> </li> <li class="menu__item"> <a href="" class="menu__link">Inspirations</a> </li> </ul> </nav> </div> </div> <div class="header__search"> <div class="search-form"> <button type="button" class="search-form__icon _icon-search"></button> <form action="#" class="search-form__item"> <button type="submit" class="search-form__btn _icon-search"></button> <input autocomplete="off" type="text" name="form[]" data-value="Search for minimalist chair" class="search-form__input"> </form> </div> </div> <div class="header__actions actions-header"> <a href="" class="actions-header__item actions-header__item_favorites _icon-favorite"></a> <div class="actions-header__item cart-header"> <a href="" class="cart-header__icon _icon-cart"></a> <div class="cart-header__body"> <ul class="cart-header__list cart-list"></ul> </div> </div> <a href="" class="actions-header__item actions-header__item_user _ibg"> <picture><source srcset="img/avatar.webp" type="image/webp"><img src="img/avatar.jpg" alt="Avatar"></picture> </a> </div> <button type="button" class="icon-menu"> <span></span> <span></span> <span></span> </button> </div> </div> </div></header> <main class="page"> <section class="page__main-slider main-slider"> <div class="main-slider__container _container"> <div class="main-slider__body"> <div class="main-slider__content content-main"> <h1 class="content-main__title">High-Quality Furniture Just For You</h1> <div class="content-main__text"> Our furniture is made from selected and best quality materials that are suitable for your dream home </div> <a href="" data-da=".main-slider__body,991.98" class="content-main__button btn">Shop Now</a> </div> <div class="main-slider__slider slider-main"> <div class="slider-main__controls controls-slider-main"> <div class="controls-slider-main__dotts"></div> <div class="controls-slider-main__arrows slider-arrows"> <button type="button" class="slider-arrow slider-arrow_prev _icon-arrow-down"></button> <button type="button" class="slider-arrow slider-arrow_next _icon-arrow-down"></button> </div> </div> <div class="slider-main__body _swiper"> <div class="slider-main__slide"> <div class="slider-main__image _ibg"> <picture><source srcset="img/main-slider/01.webp" type="image/webp"><img src="img/main-slider/01.jpg" alt="Image"></picture> </div> <a href="" data-swiper-parallax-opacity="0" data-swiper-parallax-x="-100%" class="slider-main__content"> <div class="slider-main__title">Bohauss</div> <div class="slider-main__text">Luxury big sofa 2-seat</div> <div class="slider-main__price _icon-arrow-link">Rp 17.000.000</div> </a> </div> <div class="slider-main__slide"> <div class="slider-main__image _ibg"> <picture><source srcset="img/main-slider/02.webp" type="image/webp"><img src="img/main-slider/02.jpg" alt="Картинка слайда"></picture> </div> <a href="" data-swiper-parallax-opacity="0" data-swiper-parallax-x="-100%" class="slider-main__content"> <div class="slider-main__title">Bohauss</div> <div class="slider-main__text">Luxury big sofa 2-seat</div> <div class="slider-main__price _icon-arrow-link">Rp 17.000.000</div> </a> </div> <div class="slider-main__slide"> <div class="slider-main__image _ibg"> <picture><source srcset="img/main-slider/03.webp" type="image/webp"><img src="img/main-slider/03.jpg" alt="Картинка слайда"></picture> </div> <a href="" data-swiper-parallax-opacity="0" data-swiper-parallax-x="-100%" class="slider-main__content"> <div class="slider-main__title">Bohauss</div> <div class="slider-main__text">Luxury big sofa 2-seat</div> <div class="slider-main__price _icon-arrow-link">Rp 17.000.000</div> </a> </div> </div> </div> </div> </div> </section> <section class="page__advantages advantages"> <div class="advantages__container _container"> <div class="advantages__item"> <div class="advantages__icon"> <picture><source srcset="img/advantages/01.svg" type="image/webp"><img src="img/advantages/01.svg" alt="High Quality"></picture> </div> <h3 class="advantages__title">High Quality</h3> <div class="advantages__text">crafted from top materials</div> </div> <div class="advantages__item"> <div class="advantages__icon"> <picture><source srcset="img/advantages/02.svg" type="image/webp"><img src="img/advantages/02.svg" alt="Warrany Protection"></picture> </div> <h3 class="advantages__title">Warrany Protection</h3> <div class="advantages__text">Over 2 years</div> </div> <div class="advantages__item"> <div class="advantages__icon"> <picture><source srcset="img/advantages/03.svg" type="image/webp"><img src="img/advantages/03.svg" alt="Free Shipping"></picture> </div> <h3 class="advantages__title">Free Shipping</h3> <div class="advantages__text">Order over 150 $</div> </div> <div class="advantages__item"> <div class="advantages__icon"> <picture><source srcset="img/advantages/04.svg" type="image/webp"><img src="img/advantages/04.svg" alt="24 / 7 Support"></picture> </div> <h3 class="advantages__title">24 / 7 Support</h3> <div class="advantages__text">Dedicated support</div> </div> </div> </section> <section class="page__products products"> <div class="products__container _container"> <h2 class="products__title _title">Our Products</h2> <div class="products__items"> <article data-pid="1" class="products__item item-product"> <div class="item-product__labels"> <div class="item-product__label item-product__label_sale">-30%</div> <div class="item-product__label item-product__label_new">New</div> </div> <a href="" class="item-product__image _ibg"> <picture><source srcset="img/products/01.webp" type="image/webp"><img src="img/products/01.jpg" alt="Syltherine"></picture> </a> <div class="item-product__body"> <div class="item-product__content"> <h3 class="item-product__title">Syltherine</h3> <div class="item-product__text">Stylish cafe chair</div> </div> <div class="item-product__prices"> <div class="item-product__price">Rp 2.500.000</div> <div class="item-product__price item-product__price_old">Rp 3.500.000</div> </div> <div class="item-product__actions actions-product"> <div class="actions-product__body"> <a href="" class="actions-product__button btn btn_white">Add to cart</a> <a href="" class="actions-product__link _icon-share">Share</a> <a href="" class="actions-product__link _icon-favorite">Like</a> </div> </div> </div> </article> <article data-pid="2" class="products__item item-product"> <div class="item-product__labels"> <div class="item-product__label item-product__label_new">New</div> </div> <a href="" class="item-product__image _ibg"> <picture><source srcset="img/products/02.webp" type="image/webp"><img src="img/products/02.jpg" alt="Leviosa"></picture> </a> <div class="item-product__body"> <div class="item-product__content"> <h3 class="item-product__title">Leviosa</h3> <div class="item-product__text">Stylish cafe chair</div> </div> <div class="item-product__prices"> <div class="item-product__price">Rp 2.500.000</div> </div> <div class="item-product__actions actions-product"> <div class="actions-product__body"> <a href="" class="actions-product__button btn btn_white">Add to cart</a> <a href="" class="actions-product__link _icon-share">Share</a> <a href="" class="actions-product__link _icon-favorite">Like</a> </div> </div> </div> </article> <article data-pid="3" class="products__item item-product"> <div class="item-product__labels"> <div class="item-product__label item-product__label_sale">-50%</div> </div> <a href="" class="item-product__image _ibg"> <picture><source srcset="img/products/03.webp" type="image/webp"><img src="img/products/03.jpg" alt="Lolito"></picture> </a> <div class="item-product__body"> <div class="item-product__content"> <h3 class="item-product__title">Lolito</h3> <div class="item-product__text">Luxury big sofa</div> </div> <div class="item-product__prices"> <div class="item-product__price">Rp 2.500.000</div> <div class="item-product__price item-product__price_old">Rp 3.500.000</div> </div> <div class="item-product__actions actions-product"> <div class="actions-product__body"> <a href="" class="actions-product__button btn btn_white">Add to cart</a> <a href="" class="actions-product__link _icon-share">Share</a> <a href="" class="actions-product__link _icon-favorite">Like</a> </div> </div> </div> </article> <article data-pid="4" class="products__item item-product"> <div class="item-product__labels"></div> <a href="" class="item-product__image _ibg"> <picture><source srcset="img/products/04.webp" type="image/webp"><img src="img/products/04.jpg" alt="Lolito"></picture> </a> <div class="item-product__body"> <div class="item-product__content"> <h3 class="item-product__title">Respira</h3> <div class="item-product__text">Minimalist fan</div> </div> <div class="item-product__prices"> <div class="item-product__price">Rp 500.000</div> </div> <div class="item-product__actions actions-product"> <div class="actions-product__body"> <a href="" class="actions-product__button btn btn_white">Add to cart</a> <a href="" class="actions-product__link _icon-share">Share</a> <a href="" class="actions-product__link _icon-favorite">Like</a> </div> </div> </div> </article> </div> <div class="products__footer"> <a href="" class="products__more btn btn_white">Show More</a> </div> </div> </section> <section class="page__rooms rooms"> <div class="rooms__container _container"> <div class="rooms__body"> <h2 class="rooms__title _title">50+ Beautiful rooms inspiration</h2> <div class="rooms__text">Our designer already made a lot of beautiful prototipe of rooms that inspire you</div> <a href="" class="rooms__button btn">Explore More</a> </div> <div class="rooms__slider slider-rooms"> <div class="slider-rooms__body _swiper"> <div class="slider-rooms__slide"> <div class="slider-rooms__image _ibg"> <picture><source srcset="img/rooms/01.webp" type="image/webp"><img src="img/rooms/01.jpg" alt="Bed Room"></picture> </div> <a href="" data-swiper-parallax-opacity="0" data-swiper-parallax-y="-100%" class="slider-rooms__content _icon-arrow-link"> <div class="slider-rooms__label label-slider"> <div class="label-slider__number">01</div> <div class="label-slider__line"></div> <div class="label-slider__text">Bed Room</div> </div> <div class="slider-rooms__title">Inner Peace</div> </a> </div> <div class="slider-rooms__slide"> <div class="slider-rooms__image _ibg"> <picture><source srcset="img/rooms/02.webp" type="image/webp"><img src="img/rooms/02.jpg" alt="Bed Room"></picture> </div> <a href="" data-swiper-parallax-opacity="0" data-swiper-parallax-y="-100%" class="slider-rooms__content _icon-arrow-link"> <div class="slider-rooms__label label-slider"> <div class="label-slider__number">02</div> <div class="label-slider__line"></div> <div class="label-slider__text">Bed Room</div> </div> <div class="slider-rooms__title">Inner Peace</div> </a> </div> <div class="slider-rooms__slide"> <div class="slider-rooms__image _ibg"> <picture><source srcset="img/rooms/03.webp" type="image/webp"><img src="img/rooms/03.jpg" alt="Bed Room"></picture> </div> <a href="" data-swiper-parallax-opacity="0" data-swiper-parallax-y="-100%" class="slider-rooms__content _icon-arrow-link"> <div class="slider-rooms__label label-slider"> <div class="label-slider__number">03</div> <div class="label-slider__line"></div> <div class="label-slider__text">Bed Room</div> </div> <div class="slider-rooms__title">Inner Peace</div> </a> </div> </div> <div class="slider-rooms__arrows slider-arrows"> <button type="button" class="slider-arrow slider-arrow_white slider-arrow_prev _icon-arrow-down"></button> <button type="button" class="slider-arrow slider-arrow_white slider-arrow_next _icon-arrow-down"></button> </div> <div class="slider-rooms__dotts"></div> </div> </div> </section> <section class="page__tips tips"> <div class="tips__container _container"> <h2 class="tips__title _title">Tips & Tricks</h2> <div class="tips__slider slider-tips"> <div class="slider-tips__body _swiper"> <div class="slider-tips__slide"> <a href="" class="slider-tips__image _ibg"> <picture><source srcset="img/tips/01.webp" type="image/webp"><img src="img/tips/01.jpg" alt="How to create a living room to love"></picture> </a> <div class="slider-tips__content"> <a href="" class="slider-tips__title">How to create a living room to love</a> <div class="slider-tips__text">20 jan 2020</div> </div> </div> <div class="slider-tips__slide"> <a href="" class="slider-tips__image _ibg"> <picture><source srcset="img/tips/02.webp" type="image/webp"><img src="img/tips/02.jpg" alt="Solution for clean look working space"></picture> </a> <div class="slider-tips__content"> <a href="" class="slider-tips__title">Solution for clean look working space</a> <div class="slider-tips__text">10 jan 2020</div> </div> </div> <div class="slider-tips__slide"> <a href="" class="slider-tips__image _ibg"> <picture><source srcset="img/tips/03.webp" type="image/webp"><img src="img/tips/03.jpg" alt="Make your cooking activity more fun with good setup"></picture> </a> <div class="slider-tips__content"> <a href="" class="slider-tips__title">Make your cooking activity more fun with good setup</a> <div class="slider-tips__text">20 jan 2020</div> </div> </div> </div> <div class="slider-tips__dotts"></div> <div class="slider-tips__arrows slider-arrows"> <button type="button" class="slider-arrow slider-arrow_white slider-arrow_prev _icon-arrow-down"></button> <button type="button" class="slider-arrow slider-arrow_white slider-arrow_next _icon-arrow-down"></button> </div> </div> </div> </section> <section class="page__furniture furniture"> <div class="furniture__container"> <div class="furniture__label">Share your setup with</div> <h2 class="furniture__title _title">#FuniroFurniture</h2> <div data-speed="0.01" class="furniture__body"> <div class="furniture__items _gallery"> <div class="furniture__column"> <div class="furniture__row row-furniture row-furniture_left-top"> <a href="img/furniture/09.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/09.webp" type="image/webp"><img src="img/furniture/09.jpg" alt="Image"></picture></a> <a href="img/furniture/01.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/01.webp" type="image/webp"><img src="img/furniture/01.jpg" alt="Image"></picture></a> <a href="img/furniture/02.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/02.webp" type="image/webp"><img src="img/furniture/02.jpg" alt="Image"></picture></a> </div> <div class="furniture__row row-furniture row-furniture_left-bottom"> <a href="img/furniture/04.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/04.webp" type="image/webp"><img src="img/furniture/04.jpg" alt="Image"></picture></a> <a href="img/furniture/06.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/06.webp" type="image/webp"><img src="img/furniture/06.jpg" alt="Image"></picture></a> <a href="img/furniture/07.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/07.webp" type="image/webp"><img src="img/furniture/07.jpg" alt="Image"></picture></a> </div> </div> <div class="furniture__column"> <div class="furniture__row row-furniture row-furniture_center"> <a href="img/furniture/03.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/03.webp" type="image/webp"><img src="img/furniture/03.jpg" alt="Image"></picture></a> </div> </div> <div class="furniture__column"> <div class="furniture__row row-furniture row-furniture_right-top"> <a href="img/furniture/04.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/04.webp" type="image/webp"><img src="img/furniture/04.jpg" alt="Image"></picture></a> <a href="img/furniture/05.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/05.webp" type="image/webp"><img src="img/furniture/05.jpg" alt="Image"></picture></a> <a href="img/furniture/01.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/01.webp" type="image/webp"><img src="img/furniture/01.jpg" alt="Image"></picture></a> </div> <div class="furniture__row row-furniture row-furniture_right-bottom"> <a href="img/furniture/08.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/08.webp" type="image/webp"><img src="img/furniture/08.jpg" alt="Image"></picture></a> <a href="img/furniture/09.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/09.webp" type="image/webp"><img src="img/furniture/09.jpg" alt="Image"></picture></a> <a href="img/furniture/06.jpg" class="row-furniture__item"><picture><source srcset="img/furniture/06.webp" type="image/webp"><img src="img/furniture/06.jpg" alt="Image"></picture></a> </div> </div> </div> </div> </div> </section> </main> <footer class="footer"> <div class="footer__container _container"> <div class="footer__body"> <div class="footer__main"> <a href="" class="footer__logo _footer-title">Funiro.</a> <div class="footer__text">Worldwide furniture store since 2020. We sell over 1000+ branded products on our website</div> <div class="footer__contacts contacts-footer"> <a href="" class="contacts-footer__item _icon-location">Sawojajar Malang, Indonesia</a> <a href="tel:+62894563455" class="contacts-footer__item _icon-phone">+6289 456 3455</a> <a href="https://www.funiro.com" target="_blank" class="contacts-footer__item">www.funiro.com</a> </div> </div> <div data-spollers="768,max" class="footer__menu menu-footer"> <div class="menu-footer__column"> <button type="button" data-spoller class="menu-footer__title _footer-title">Menu</button> <ul class="menu-footer__list"> <li><a href="" class="menu-footer__link">Products</a></li> <li><a href="" class="menu-footer__link">Rooms</a></li> <li><a href="" class="menu-footer__link">Inspirations</a></li> <li><a href="" class="menu-footer__link">About Us</a></li> <li><a href="" class="menu-footer__link">Terms & Policy</a></li> </ul> </div> <div class="menu-footer__column"> <button type="button" data-spoller class="menu-footer__title _footer-title">Account</button> <ul class="menu-footer__list"> <li><a href="" class="menu-footer__link">My Account</a></li> <li><a href="" class="menu-footer__link">Checkout</a></li> <li><a href="" class="menu-footer__link">My Cart</a></li> <li><a href="" class="menu-footer__link">My catalog</a></li> </ul> </div> <div class="menu-footer__column"> <button type="button" data-spoller class="menu-footer__title _footer-title">Stay Connected</button> <ul class="menu-footer__list"> <li><a href="" class="menu-footer__link">Facebook</a></li> <li><a href="" class="menu-footer__link">Instagram</a></li> <li><a href="" class="menu-footer__link">Twitter</a></li> </ul> </div> </div> <div class="footer__subscribe subscribe"> <div class="subscribe__title _footer-title">Stay Updated</div> <form data-message="subscribe" data-test action="#" class="subscribe__form"> <input autocomplete="off" type="text" name="form[]" data-error="Ошибка" data-value="Enter your email" class="subscribe__input _req _email"> <button type="submit" class="subscribe__button _icon-send"></button> </form> </div> </div> </div></footer> </div> <div class="popup popup_popup"> <div class="popup__content"> <div class="popup__body"> <div class="popup__close"></div> </div> </div></div><div class="popup popup_subscribe-message"> <div class="popup__content"> <div class="popup__body"> <div class="popup__close"></div> </div> </div></div><div class="popup popup_video"> <div class="popup__content"> <div class="popup__body"> <div class="popup__close popup__close_video"></div> <div class="popup__video _video"></div> </div> </div></div> <!-- Swiper --><script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script><script src="js/vendors.min.js"></script><script src="js/app.min.js"></script> </body></html>