-
Notifications
You must be signed in to change notification settings - Fork 0
/
product.html
197 lines (190 loc) · 9.7 KB
/
product.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>Подвеска Dolce & Gabanna</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="breadcrumbs"> <div class="container"> <a href="index.html">Главная</a> <span>/</span> <a href="catalog.html">Каталог</a> <span>/</span> <a href="#">Категория</a> <span>/</span> <p>Подвеска Dolce & Gabanna</p> </div> </section> <section class="product"> <div class="container"> <div class="product__column"> <picture><source srcset="img/Rectangle23.webp" type="image/webp"><img src="img/Rectangle23.jpg" alt="" class="big-img"></picture> <div class="product__gallery"> <picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture> <picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture> <picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture> </div> </div> <div class="product__column"> <h3>Подвеска Dolce & Gabanna</h3> <span>Категория: Подвески</span> <span>Бренд: Подвеска Dolce & Gabanna</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mattis scelerisque odio nunc. Ipsum quis facilisis turpis vulputate. Viverra dignissim in nec phasellus. Tincidunt est ipsum diam, vestibulum dignissim dui diam. Et nulla sit convallis orci est, fames sit luctus lacus. Nunc donec malesuada amet eget eget pharetra. Ultricies et, ac varius at amet viverra feugiat non massa.</p> <p>Vel vel in urna, sodales urna ac sed felis. Tellus augue et senectus malesuada faucibus sollicitudin ornare. Sit non et sit enim in ornare velit. Ac imperdiet vitae, orci, nec scelerisque enim sit enim risus.</p> <p>Et nulla sit convallis orci est, fames sit luctus lacus.</p> <p class="product__price">200 000 ₽</p> <a href="#" class="product__button">купить</a> <a href="#" class="product__button product__button_white">добавить в корзину</a> </div> </div> </section> <h2 class="container" data-da=".description, 10000, 0">Полное описание товара</h2> <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="recommendation"> <div class="container"> <div class="title"> <h3>Мы подготовили для вас кое-что еще</h3> <h2>Товары, которые могут Вам понравиться</h2> </div> <div class="product-card__content"> <div class="product-card__item"> <a href="#"><picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture></a> <p>Подвеска</p> <a href="#"><h3>Dolce & Gabanna</h3></a> <a href="#" class="product-card__button">175 000 ₽</a> </div> <div class="product-card__item"> <a href="#"><picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture></a> <p>Подвеска</p> <a href="#"><h3>Dolce & Gabanna</h3></a> <a href="#" class="product-card__button">175 000 ₽</a> </div> <div class="product-card__item"> <a href="#"><picture><source srcset="img/catalog/Rectangle21.webp" type="image/webp"><img src="img/catalog/Rectangle21.jpg" alt=""></picture></a> <p>Подвеска</p> <a href="#"><h3>Dolce & Gabanna</h3></a> <a href="#" class="product-card__button">175 000 ₽</a> </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> <script src="js/script.min.js"></script> </body></html>