-
Notifications
You must be signed in to change notification settings - Fork 0
/
catalog.html
216 lines (209 loc) · 9.92 KB
/
catalog.html
1
<!DOCTYPE html><html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="img/favicon.svg" type="image/x-icon" /> <link rel="shortcut icon" href="img/favicon.svg" type="image/x-icon" /> <link rel="stylesheet" href="css/style.min.css"> <title>Каталог изделий</title> </head> <body> <header class="header header__catalog"> <div class="container"> <div class="header__block" data-da=".burger-content, 840"> <a href="#">Контрагентам</a> <a href="#">Дизайнерам</a> <a href="#">Вакансии</a> </div> <a href="#" class="header__logo"> <picture><source srcset="img/logo.svg" type="image/webp"><img src="img/logo.svg" alt=""></picture> <p>OJJO</p> </a> <nav class="header__menu" data-da=".burger-content, 840"> <div> <i class="fa fa-search" aria-hidden="true"></i> <input type="search" class="header__search" placeholder="Поиск"> </div> <p><a href="#popup" class="popup__link">Вход</a>/<a href="#popup-2" class="popup__link">Регистрация</a></p> <div class="header__account"></div> <a href="#" data-da=".header__account, 840"><i class="fa fa-user" aria-hidden="true"></i></a> <a href="#" data-da=".header__account, 840"><i class="fa fa-heart" aria-hidden="true"></i></a> </nav> <div class="burger"><span></span><span></span><span></span></div> <div class="burger-content"></div> </div></header> <main class="main"> <section class="filter"> <div class="container"> <div class="filter__content"> <a href="#popup-3" class="filter__column popup__link">Бренд</a> <a href="#popup-4" class="filter__column popup__link">Цена</a> <a href="#" class="filter__column">Для кого</a> <a href="#" class="filter__column">Коллекция</a> <a href="#" class="filter__column">Сезон</a> <a href="#" class="filter__column">Событие</a> </div> </div> </section> <section class="product-card"> <div class="container"> <div class="product-card__content"> <div class="product-card__item"> <a href="product.html"><picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture></a> <p>Подвеска</p> <a href="product.html"><h3>Dolce & Gabanna</h3></a> <a href="#" class="product-card__button">175 000 ₽</a> </div> <div class="product-card__item"> <a href="product.html"><picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture></a> <p>Подвеска</p> <a href="product.html"><h3>Dolce & Gabanna</h3></a> <a href="#" class="product-card__button">175 000 ₽</a> </div> <div class="product-card__item"> <a href="product.html"><picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture></a> <p>Подвеска</p> <a href="product.html"><h3>Dolce & Gabanna</h3></a> <a href="#" class="product-card__button">175 000 ₽</a> </div> <div class="product-card__item"> <a href="product.html"><picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture></a> <p>Подвеска</p> <a href="product.html"><h3>Dolce & Gabanna</h3></a> <a href="#" class="product-card__button">175 000 ₽</a> </div> <div class="product-card__item"> <a href="product.html"><picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture></a> <p>Подвеска</p> <a href="product.html"><h3>Dolce & Gabanna</h3></a> <a href="#" class="product-card__button">175 000 ₽</a> </div> <div class="product-card__item"> <a href="product.html"><picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture></a> <p>Подвеска</p> <a href="product.html"><h3>Dolce & Gabanna</h3></a> <a href="#" class="product-card__button">175 000 ₽</a> </div> </div> <a href="#" class="product-card__btn">покажите еще</a> </div> </section> <section class="description"> <div class="container"> <div class="description__column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet, lorem eu commodo porttitor erat. Amet mauris cursus bibendum in egestas. Nulla porttitor amet quam elit, mauris. Tortor egestas dignissim augue suspendisse rutrum pretium lobortis dolor. Commodo sagittis at amet faucibus faucibus id. Bibendum placerat convallis gravida eu quisque et augue. Sed dignissim amet ut vitae at ornare sed.</p> <p>Commodo sagittis at amet faucibus faucibus id. Bibendum placerat convallis gravida eu quisque et augue. Sed dignissim amet ut vitae at ornare sed.</p> <a href="#" class="description__button">читать полностью</a> </div> <div class="description__column"> <div class="description__icon"> <picture><source srcset="img/catalog/delivery.svg" type="image/webp"><img src="img/catalog/delivery.svg" alt=""></picture> <p>Бесплатная доставка</p> </div> <div class="description__icon"> <picture><source srcset="img/catalog/Group.svg" type="image/webp"><img src="img/catalog/Group.svg" alt=""></picture> <p>Индивидуальный дизайн</p> </div> <div class="description__icon"> <picture><source srcset="img/catalog/ribbon-design.svg" type="image/webp"><img src="img/catalog/ribbon-design.svg" alt=""></picture> <p>Бесплатная примерка</p> </div> <div class="description__icon"> <picture><source srcset="img/catalog/Group(1).svg" type="image/webp"><img src="img/catalog/Group(1).svg" alt=""></picture> <p>Личный подход</p> </div> </div> </div></section> <section class="subscribe"> <div class="container"> <div class="title"> <h3>Полезные советы и персональный предложения</h3> <h2>Эксклюзивная рассылка</h2> </div> <div class="subscribe__content"> <ul class="subscribe__list"> <li>Личный менеджер</li> <li>Доставка и оформление</li> <li>Индивидуальный дизайн</li> </ul> <form action="#" method="get" class="subscribe__form"> <input type="email" class="form__e-mail" placeholder="Ваш e-mail"> <button type="submit" class="form__button">отправить</button> </form> </div> </div></section> </main> <footer class="footer"> <div class="container"> <div class="footer__content"> <div class="footer__column"> <h4>Полезные ссылки</h4> <a href="#" class="footer__link">Доставка</a> <a href="#" class="footer__link">Оплата </a> <a href="#" class="footer__link">Акции</a> <a href="#" class="footer__link">Политика конфиденциальности</a> </div> <div class="footer__column"> <h4>оплата</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper justo, nec, pellentesque.</p> <picture><source srcset="img/visa.svg" type="image/webp"><img src="img/visa.svg" alt=""></picture> <picture><source srcset="img/mastercard.svg" type="image/webp"><img src="img/mastercard.svg" alt=""></picture> </div> <div class="footer__column"> <h4>контакты</h4> <a href="tel:88122345655" class="footer__link"><i class="fa fa-phone" aria-hidden="true"></i>8 (812) 234-56-55</a> <a href="tel:88122345655" class="footer__link"><i class="fa fa-phone" aria-hidden="true"></i>8 (812) 234-56-55</a> <a href="mailto:ojjo@ojjo.ru" class="footer__link"><i class="fa fa-envelope" aria-hidden="true"></i>ojjo@ojjo.ru</a> </div> <div class="footer__column"> <h4>социальные сети</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper justo, nec, pellentesque.</p> <a href="#" class="social-link"><i class="fa fa-youtube-play" aria-hidden="true"></i></a> <a href="#" class="social-link"><i class="fa fa-vk" aria-hidden="true"></i></a> <a href="#" class="social-link"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#" class="social-link"><i class="fa fa-paper-plane" aria-hidden="true"></i></a> <a href="#" class="social-link"><i class="fa fa-etsy" aria-hidden="true"></i></a> </div> </div> <div class="footer__row"> <a href="#" class="footer__link">(c) 2020 OJJO jewelry</a> <a href="#" class="footer__link">Договор публичной офферты</a> <a href="#" class="footer__link">Контрагентам</a> <a href="https://figma.info" target="_blank" class="footer__link">Сделано Figma.info</a> </div> </div></footer> <div class="popup filter-popup" id="popup-3"> <div class="popup__body"> <div class="popup__content"> <!-- <a href="#" class="close close__popup">X</a> --> <label class="filter-popup__label"> <input type="checkbox" class="filter-popup__checkbox"> <span>Versacci</span> </label> <label class="filter-popup__label"> <input type="checkbox" class="filter-popup__checkbox"> <span>Trebbo</span> </label> <label class="filter-popup__label"> <input type="checkbox" class="filter-popup__checkbox"> <span>Jewelry for you family</span> </label> <label class="filter-popup__label"> <input type="checkbox" class="filter-popup__checkbox"> <span>VIP ghoret </span> </label> <label class="filter-popup__label"> <input type="checkbox" class="filter-popup__checkbox"> <span>Dolce & Gabanna</span> </label> </div> </div> </div> <script src="js/script.min.js"></script> </body></html>