-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (82 loc) · 13.4 KB
/
index.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>OJJO</title> </head> <body> <header class="header"> <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="tagline"> <div class="container"> <h1>Долго, дорого, богато!</h1> <a href="catalog.html" class="tagline__button">каталог изделий</a> <div class="tagline__brands"> <picture><source srcset="img/Rectangle2.svg" type="image/webp"><img src="img/Rectangle2.svg" alt=""></picture> <picture><source srcset="img/Rectangle2.svg" type="image/webp"><img src="img/Rectangle2.svg" alt=""></picture> <picture><source srcset="img/Rectangle2.svg" type="image/webp"><img src="img/Rectangle2.svg" alt=""></picture> <picture><source srcset="img/Rectangle2.svg" type="image/webp"><img src="img/Rectangle2.svg" alt=""></picture> <picture><source srcset="img/Rectangle2.svg" type="image/webp"><img src="img/Rectangle2.svg" alt=""></picture> <picture><source srcset="img/Rectangle2.svg" type="image/webp"><img src="img/Rectangle2.svg" alt=""></picture> </div> </div> </section> <section class="assortment"> <div class="container"> <div class="title"> <h3>К мероприятиям</h3> <h2>Настоящая красота здесь!</h2> </div> <ul class="assortment__list"> <li><a href="#tab-1" class="assortment__button">Свадьба</a></li> <li><a href="#tab-2" class="assortment__button">Мужу</a></li> <li><a href="#tab-3" class="assortment__button">Жене</a></li> <li><a href="#tab-4" class="assortment__button">Партнеру</a></li> <li><a href="#tab-5" class="assortment__button">Коллекции</a></li> <li><a href="#tab-6" class="assortment__button">Редкость</a></li> </ul> <div class="assortment__content"> <div class="assortment__menu" id="tab-1"> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(1).webp" type="image/webp"><img src="img/Rectangle5(1).jpg" alt=""></picture> <p>Кольца</p> </a> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5.webp" type="image/webp"><img src="img/Rectangle5.jpg" alt=""></picture> <p>Серьги</p> </a> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(2).webp" type="image/webp"><img src="img/Rectangle5(2).jpg" alt=""></picture> <p>Подвески</p> </a> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(3).webp" type="image/webp"><img src="img/Rectangle5(3).jpg" alt=""></picture> <p>Запонки</p> </a> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(4).webp" type="image/webp"><img src="img/Rectangle5(4).jpg" alt=""></picture> <p>Браслеты</p> </a> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(5).webp" type="image/webp"><img src="img/Rectangle5(5).jpg" alt=""></picture> <p>Часы</p> </a> </div> <div class="assortment__menu" id="tab-2"> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(4).webp" type="image/webp"><img src="img/Rectangle5(4).jpg" alt=""></picture> <p>Браслеты</p> </a> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(3).webp" type="image/webp"><img src="img/Rectangle5(3).jpg" alt=""></picture> <p>Запонки</p> </a> </div> <div class="assortment__menu" id="tab-3"> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5.webp" type="image/webp"><img src="img/Rectangle5.jpg" alt=""></picture> <p>Серьги</p> </a> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(2).webp" type="image/webp"><img src="img/Rectangle5(2).jpg" alt=""></picture> <p>Подвески</p> </a> </div> <div class="assortment__menu" id="tab-4"> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(5).webp" type="image/webp"><img src="img/Rectangle5(5).jpg" alt=""></picture> <p>Часы</p> </a> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(4).webp" type="image/webp"><img src="img/Rectangle5(4).jpg" alt=""></picture> <p>Браслеты</p> </a> </div> <div class="assortment__menu" id="tab-5"> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(1).webp" type="image/webp"><img src="img/Rectangle5(1).jpg" alt=""></picture> <p>Кольца</p> </a> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(5).webp" type="image/webp"><img src="img/Rectangle5(5).jpg" alt=""></picture> <p>Часы</p> </a> </div> <div class="assortment__menu" id="tab-6"> <a href="#" class="menu__item"> <picture><source srcset="img/Rectangle5(2).webp" type="image/webp"><img src="img/Rectangle5(2).jpg" alt=""></picture> <p>Подвески</p> </a> </div> </div> </div> </section> <section class="salons"> <div class="container"> <div class="title"> <h3>Не знаете, что выбрать?</h3> <h2>Посетите наши салоны в Москве</h2> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut duis tortor vitae pellentesque egestas quam pulvinar. Pellentesque porttitor velit sit pellentesque. Suspendisse donec pretium id dignissim. Dignissim ultrices eget orci viverra. Egestas quis et ut ultrices imperdiet lectus nulla tempus. Pharetra lorem sem purus nisi libero viverra ipsum.</p> <a href="contacts.html" class="salons__button">Наши салоны</a> </div> </section> <section class="blog"> <div class="container"> <div class="title"> <h3>Полезные статьи</h3> <h2>Лучшие советы по подбору дорогих подарков</h2> </div> <div class="blog__content"> <a href="#" class="blog__item"> <picture><source srcset="img/Rectangle5(6).webp" type="image/webp"><img src="img/Rectangle5(6).jpg" alt=""></picture> <p>Как выбрать часы для своей будущей жены</p> </a> <a href="#" class="blog__item"> <picture><source srcset="img/Rectangle5(7).webp" type="image/webp"><img src="img/Rectangle5(7).jpg" alt=""></picture> <p>Запонки для мужа: 7 ключевых правил покупки аксессуара</p> </a> <a href="#" class="blog__item"> <picture><source srcset="img/Rectangle5(8).webp" type="image/webp"><img src="img/Rectangle5(8).jpg" alt=""></picture> <p>Как выбрать обручальные кольца молодоженам</p> </a> </div> <a href="#" class="blog__button">читать наш блог</a> </div> </section> <section class="gallery"> <div class="container"> <div class="title"> <h3>#ojjo_jewerly</h3> <h2>Мы в социальных сетях</h2> </div> <div class="gallery__content"> <div class="img-hover popup__link"> <picture><source srcset="img/img--hover.webp" type="image/webp"><img src="img/img--hover.jpg" alt=""></picture> </div> <div class="img-hover popup__link"> <picture><source srcset="img/gallery__image.webp" type="image/webp"><img src="img/gallery__image.jpg" alt=""></picture> </div> <div class="img-hover popup__link"> <picture><source srcset="img/gallery__image(1).webp" type="image/webp"><img src="img/gallery__image(1).jpg" alt=""></picture> </div> <div class="img-hover popup__link"> <picture><source srcset="img/gallery__image(2).webp" type="image/webp"><img src="img/gallery__image(2).jpg" alt=""></picture> </div> <div class="img-hover popup__link"> <picture><source srcset="img/gallery__image(3).webp" type="image/webp"><img src="img/gallery__image(3).jpg" alt=""></picture> </div> <div class="img-hover popup__link"> <picture><source srcset="img/Rectangle8.webp" type="image/webp"><img src="img/Rectangle8.jpg" alt=""></picture> </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" id="popup"> <div class="popup__body"> <div class="popup__content"> <a href="#" class="close close__popup">X</a> <h3>Вход</h3> <form action="#" method="get"> <input type="text" placeholder="Имя" required> <input type="password" placeholder="Пароль" required> <button type="submit">Войти</button> </form> </div> </div> </div> <div class="popup" id="popup-2"> <div class="popup__body"> <div class="popup__content"> <a href="#" class="close close__popup">X</a> <h3>Регистрация</h3> <form action="#" method="get"> <input type="text" placeholder="Имя" required> <input type="password" placeholder="Пароль" required> <input type="password" placeholder="Повторите пароль" required> <button type="submit" class="">Зарегистрироваться</button> </form> </div> </div> </div> <script src="js/script.min.js"></script> </body></html>