-
Notifications
You must be signed in to change notification settings - Fork 0
/
products.html
1 lines (1 loc) · 18.3 KB
/
products.html
1
<!doctype html><html><head><meta charset="utf-8"><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><title>tennis kys</title><link rel="apple-touch-icon" href="apple-touch-icon.png"><link rel="stylesheet" href="fonts/SFProDisplay/stylesheet.css"><link rel="stylesheet" href="fonts/HeliosCond/stylesheet.css"><link rel="stylesheet" href="styles/vendor.css"><link rel="stylesheet" href="styles/main.css"></head><body><!--[if IE]><p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]--><main><header class="app-header"><div class="container"><a href="#" class="app-header__logo"><img src="images/logo.svg" alt="Tennis kys"></a><div id="app-header__menu" class="app-header__menu"><div class="app-header__menu__items-wrapper"><a href="#" class="app-header__menu__item active">Главная</a> <a href="#" class="app-header__menu__item">Теннисная ложка</a> <a href="#" class="app-header__menu__item">Футболки</a> <a href="#" class="app-header__menu__item">Аксессуары</a></div><div class="app-header__menu__social"><a href="#"><img src="images/icons/ic-instagram.svg" alt="Instagram"> </a><a href="#"><img src="images/icons/ic-facebook.svg" alt="Facebook"> </a><a href="#"><img src="images/icons/ic-youtube.svg" alt="Youtube"></a></div></div><div class="app-header__options"><a href="#"><img src="images/icons/ic-bag.svg" alt="Cart"></a><div id="app-header__toggle-mobile" class="app-header__toggle-mobile"></div></div></div></header><div class="app-sidebar"><a href="#" class="app-sidebar__item"><img src="images/icons/ic-instagram.svg" alt="Instagram"> </a><a href="#" class="app-sidebar__item"><img src="images/icons/ic-facebook.svg" alt="Facebook"> </a><a href="#" class="app-sidebar__item"><img src="images/icons/ic-youtube.svg" alt="Youtube"></a></div><div class="app-content"><div class="container products-intro"><div class="column-left"><div class="page-subtitle">Lorem Ipsum - это текст-"рыба"</div><div class="page-title">Футболки</div><p class="page-description">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p><div class="products-intro__preview"><img src="images/img-4.png" alt=""> <img src="images/img-5.png" alt=""></div><div class="products-intro__slider-mobile__wrapper"><div class="slider-counter">01 | 03</div><div class="products-intro__slider-mobile"><div style="background-image:url(images/img-4.png)"></div><div style="background-image:url(images/img-5.png)"></div></div></div></div><div class="column-right"><img src="images/img-6.png" alt=""></div></div><div class="block-divider"></div><div class="products__mobile"><div class="products__mobile__tabs"><div id="smarttab"><ul class="nav"><li><a class="nav-link" href="#casual">Повседневные</a></li><li><a class="nav-link" href="#sport">Спортивные</a></li></ul><div class="tab-content"><div id="casual" class="tab-pane" role="tabpanel"><div class="products__mobile__preview"><div class="title">Выберите модель, чтобы узнать подробнее</div><div class="products__mobile__preview__items"><div class="product-preview__slider__wrapper"><div id="product-preview__mobile-slider__daily" class="product-preview__slider"><div class="product-preview__slider__item mobile" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item mobile" style="background-image:url(images/img-8.png)"></div><div class="product-preview__slider__item mobile" style="background-image:url(images/img-9.png)"></div><div class="product-preview__slider__item mobile" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item mobile" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item mobile" style="background-image:url(images/img-7.png)"></div></div><div class="slider-nav"></div></div></div></div><div class="block-divider"></div><div class="product-item"><div class="product-item__title">Название модели</div><div class="product-item__body"><div class="column-left"><div class="product-item__image" style="background-image:url(images/img-4.png)"></div><div class="product-item__info"><div class="product-item__info__description">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</div><div class="product-item__info__options"><div class="product-item__info__option"><div class="name">Цвет:</div><div class="value">Чёрный</div></div><div class="product-item__info__option"><div class="name">Ткань:</div><div class="value">Хлопок</div></div></div><div class="product-item__info__size"><div class="size-mobile-header"><div class="title">Размер:</div><a href="#" class="title">Размерная сетка</a></div><span class="radio-group select-size"><label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">xs</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" checked="checked" name="size1"> <span class="radio-container__label">s</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" name="size1"> <span class="radio-container__label">m</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">l</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">xl</span> <span class="checkmark"></span></label></span></div><div class="product-item__info__price"><div class="title">цена:</div><div class="value">₴ 464.00</div></div><button class="button button-primary">В корзину <svg width="34" height="10" viewBox="0 0 34 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.5862 1L32 5M32 5L27.5862 9M32 5H0.5" stroke="#1C3E6E" stroke-width="2"></path></svg></button></div></div></div></div></div><div id="sport" class="tab-pane" role="tabpanel"><div class="products__mobile__preview"><div class="title">Выберите модель, чтобы узнать подробнее</div><div class="products__mobile__preview__items"><div class="product-preview__slider__wrapper"><div id="product-preview__mobile-slider__sport" class="product-preview__slider"><div class="product-preview__slider__item mobile" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item mobile" style="background-image:url(images/img-8.png)"></div><div class="product-preview__slider__item mobile" style="background-image:url(images/img-9.png)"></div><div class="product-preview__slider__item mobile" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item mobile" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item mobile" style="background-image:url(images/img-7.png)"></div></div><div class="slider-nav"></div></div></div></div><div class="block-divider"></div><div class="product-item"><div class="product-item__title">Название модели 2</div><div class="product-item__body"><div class="column-left"><div class="product-item__image" style="background-image:url(images/img-4.png)"></div><div class="product-item__info"><div class="product-item__info__description">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</div><div class="product-item__info__options"><div class="product-item__info__option"><div class="name">Цвет:</div><div class="value">Чёрный</div></div><div class="product-item__info__option"><div class="name">Ткань:</div><div class="value">Хлопок</div></div></div><div class="product-item__info__size"><div class="size-mobile-header"><div class="title">Размер:</div><a href="#" class="title">Размерная сетка</a></div><span class="radio-group select-size"><label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">xs</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" checked="checked" name="size1"> <span class="radio-container__label">s</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" name="size1"> <span class="radio-container__label">m</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">l</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">xl</span> <span class="checkmark"></span></label></span></div><div class="product-item__info__price"><div class="title">цена:</div><div class="value">₴ 464.00</div></div><button class="button button-primary">В корзину <svg width="34" height="10" viewBox="0 0 34 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.5862 1L32 5M32 5L27.5862 9M32 5H0.5" stroke="#1C3E6E" stroke-width="2"></path></svg></button></div></div></div></div></div></div></div></div></div><div class="product-item"><div class="container"><div class="product-item__title">Повседневные футболки</div><div class="product-item__body"><div class="column-left"><div class="product-item__image" style="background-image:url(images/img-4.png)"></div><div class="product-item__info"><div class="product-item__info__title">Название модели</div><div class="product-item__info__description">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</div><div class="product-item__info__options"><div class="product-item__info__option"><div class="name">Цвет:</div><div class="value">Чёрный</div></div><div class="product-item__info__option"><div class="name">Ткань:</div><div class="value">Хлопок</div></div></div><div class="product-item__info__size"><span class="radio-group select-size"><label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">xs</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" checked="checked" name="size1"> <span class="radio-container__label">s</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" name="size1"> <span class="radio-container__label">m</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">l</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">xl</span> <span class="checkmark"></span></label></span></div><div class="product-item__info__price"><div class="title">цена:</div><div class="value">₴ 464.00</div></div><button class="button button-primary">В корзину <svg width="34" height="10" viewBox="0 0 34 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.5862 1L32 5M32 5L27.5862 9M32 5H0.5" stroke="#1C3E6E" stroke-width="2"></path></svg></button></div></div><div class="column-right"><div class="product-preview__slider__wrapper"><div id="product-preview__slider_1" class="product-preview__slider"><div class="product-preview__slider__item" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-8.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-9.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-8.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-1.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-8.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-9.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-8.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-1.png)"></div></div><div class="slider-nav"></div></div></div></div></div></div><div class="product-item"><div class="container"><div class="product-item__title">Спортивные футболки</div><div class="product-item__body"><div class="column-left"><div class="product-item__image" style="background-image:url(images/img-4.png)"></div><div class="product-item__info"><div class="product-item__info__title">Название модели</div><div class="product-item__info__description">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</div><div class="product-item__info__options"><div class="product-item__info__option"><div class="name">Цвет:</div><div class="value">Чёрный</div></div><div class="product-item__info__option"><div class="name">Ткань:</div><div class="value">Хлопок</div></div></div><div class="product-item__info__size"><span class="radio-group select-size"><label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">xs</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" checked="checked" name="size1"> <span class="radio-container__label">s</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" name="size1"> <span class="radio-container__label">m</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">l</span> <span class="checkmark"></span></label> <label class="radio-container"><input type="radio" disabled="disabled" name="size1"> <span class="radio-container__label">xl</span> <span class="checkmark"></span></label></span></div><div class="product-item__info__price"><div class="title">цена:</div><div class="value">₴ 464.00</div></div><button class="button button-primary">В корзину <svg width="34" height="10" viewBox="0 0 34 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.5862 1L32 5M32 5L27.5862 9M32 5H0.5" stroke="#1C3E6E" stroke-width="2"></path></svg></button></div></div><div class="column-right"><div class="product-preview__slider__wrapper"><div id="product-preview__slider_2" class="product-preview__slider"><div class="product-preview__slider__item" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-8.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-9.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-7.png)"></div><div class="product-preview__slider__item" style="background-image:url(images/img-7.png)"></div></div><div class="slider-nav"></div></div></div></div></div></div><div class="container products-footer"><p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p></div></div><footer class="app-footer"><div class="container"><div class="column-left"><a href="#">Политика конфиденциальности</a> <a href="#">Условия использования</a></div><a href="#" class="app-header__logo"><img src="images/logo.svg" alt="Tennis kys"></a><div class="column-right"><div>Copyright 2020 | All Rights Reserved</div><div>Design by <a href="http://panchenkoju.com/" target="_blank" rel="noopener noreferrer">panchenkoju.com</a></div></div></div></footer></main><script>!function(e,a,t,n,g,c){e.GoogleAnalyticsObject=n,e.ga||(e.ga=function(){(e.ga.q=e.ga.q||[]).push(arguments)}),e.ga.l=+new Date,g=a.createElement(t),c=a.getElementsByTagName(t)[0],g.src="https://www.google-analytics.com/analytics.js",c.parentNode.insertBefore(g,c)}(window,document,"script","ga"),ga("create","UA-XXXXX-X"),ga("send","pageview")</script><script src="scripts/vendor.js"></script><script src="scripts/main.js"></script></body></html>