-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
15 lines (15 loc) · 10.6 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>MiSHKA</title><link rel="stylesheet" href="css/style.min.css"></head><body><header class="page-header"><div class="page-header__wrapper"><div class="container page-header__inner"><a class="page-header__logo"><picture><source media="(min-width: 1150px)" srcset="images/logo-desktop.svg"><source media="(min-width: 768px)" srcset="images/logo-tablet.svg"><img class="page-header__logo-image" src="images/logo-mobile.svg" alt="Логотип"></picture></a><nav class="main-nav"><button class="main-nav__toggle"><span class="visually-hidden">Открыть меню</span> <span class="main-nav__toggle-line"></span></button><ul class="main-nav__list main-nav--nojs"><li class="main-nav__item"><a href="catalog.html" class="main-nav__link">Каталог товаров</a></li><li class="main-nav__item"><a href="form.html" class="main-nav__link">Вязание на заказ</a></li></ul></nav><div class="page-header__user-nav main-nav--nojs"><ul class="user-nav__list"><li class="user-nav__item user-nav__item--search"><a href="#" class="user-nav__link user-nav__link--search"><svg width="18" height="18"><use xlink:href="images/sprite.svg#icon-search"></use></svg> <span class="user-nav__title user-nav__title--search">Поиск по сайту</span></a></li><li class="user-nav__item user-nav__item--basket"><a href="#" class="user-nav__link user-nav__link--basket"><svg width="18" height="18"><use xlink:href="images/sprite.svg#icon-cart"></use></svg> <span class="user-nav__title user-nav__title--basket">Корзина: пока пуста</span></a></li></ul></div><div class="page-header__menu-offer"><ul class="menu-offer__list"><li class="menu-offer__item"><a href="" class="menu-offer__link">Новые поступления</a></li><li class="menu-offer__item"><a href="" class="menu-offer__link">Распродажа</a></li></ul></div><p class="page-header__text">Бесплатная доставка по России</p></div></div></header><main class="page-main"><section class="categories"><div class="categories__wrapper"><div class="container"><h2 class="categories__title">Милые штуки<br> ручной<br>работы для дома</h2></div><ul class="categories__list"><li class="categories__item"><a href="#" class="categories__link categories__link--light-green">Предметы<br>интерьера</a></li><li class="categories__item"><a href="#" class="categories__link categories__link--dark-green">Детские<br>игрушки</a></li></ul></div></section><section class="week-product"><div class="container"><div class="week-product__header"><h2 class="week-product__title">Вязаные корзинки</h2><span class="week-product__subtitle">Товар недели</span></div><div class="week-product__content"><div class="week-product__content-header"><p class="week-product__text paragraph">Экологически чистая пряжа, ручная работа. Доступны в шести расцветках, и трех размерах.</p><table class="week-product__list product-table"><tbody><tr><td class="product-table__name">Цвет:</td><td class="product-table__value">«Тифани»/серый</td></tr><tr><td class="product-table__name">Диаметр:</td><td class="product-table__value">25 см</td></tr><tr><td class="product-table__name">Высота:</td><td class="product-table__value">15 см</td></tr></tbody></table></div><picture><source type="image/webp" media="(min-width: 1150px)" srcset="images/[email protected], images/[email protected] 2x"><source type="image/webp" media="(min-width: 768px)" srcset="images/[email protected], images/[email protected] 2x"><source type="image/webp" srcset="images/[email protected], images/[email protected] 2x"><source media="(min-width: 1150px)" srcset="images/[email protected], images/[email protected] 2x"><source media="(min-width: 768px)" srcset="images/[email protected], images/triple-set-tablet@2x 2x"><img class="week-product__image" src="images/[email protected]" srcset="images/[email protected] 2x" alt="Вязаные корзинки"></picture><div class="week-product__content-footer"><p class="week-product__price">Цена: 990 руб.</p><a data-target="#modal" class="toggle-modal button button--large week-product__button">Заказать</a></div></div></div></section><section class="about-us"><div class="container"><div class="about-us__wrapper"><h2 class="about-us__title">Коротко о нас:</h2><ul class="about-us__list"><li class="about-us__item about-us__item--eco"><p class="about-us__text">Экологически чистые материалы</p></li><li class="about-us__item about-us__item--price"><p class="about-us__text">Скандинавский стиль по российской цене</p></li><li class="about-us__item about-us__item--like"><p class="about-us__text">Увеличивает лайки на фотографиях</p></li><li class="about-us__item about-us__item--hand-made"><p class="about-us__text">Связано вручную с любовью и умилением</p></li><li class="about-us__item about-us__item--native"><p class="about-us__text">Поддержка отечественного производителя</p></li><li class="about-us__item about-us__item--pack"><p class="about-us__text">Поставляется в подарочной упаковке</p></li></ul></div></div></section><section class="reviews"><div class="reviews__wrapper container"><div class="reviews__inner"><h2 class="reviews__title">Отзывы</h2><p class="reviews__text paragraph">Я молодая мама, но всё равно фотографии не набирали и близко такого количества лайков, как у популярных инстамамочек. В отчаянии, я накупила аксессуаров и игрушек в Мишке, и мои фотографии сразу стали более стильными, а также набирают больше лайков!</p><div class="reviews__author"><p class="reviews__author-name">Анастасия Красильникова</p><p class="reviews__author-mail">@misssssiskras</p></div><div class="reviews__slider-nav slider-nav"><button class="slider-nav__arrow slider-nav__arrow--prev" type="button"><span class="visually-hidden">Назад</span></button> <button class="slider-nav__arrow slider-nav__arrow--next" type="button"><span class="visually-hidden">Вперёд</span></button></div><a data-target="#image" class="toggle-modal button button-reviews reviews__button">Написать</a></div></div></section><section class="contacts"><div class="contacts__wrapper"><div class="contacts__info container"><h2 class="contacts__title">Контакты</h2><address class="contacts__list"><p class="contacts__item"><span class="contacts__item-name">e-mail:</span> <a class="contacts__item-value contacts__item-value--email">[email protected]</a></p><p class="contacts__item"><span class="contacts__item-name">адрес:</span> <span class="contacts__item-value">г. Санкт-Петербург,<br>ул. Большая Конюшенная,<br>д. 19/8, офис 101</span></p></address></div><div class="contacts__map-wrapper"><div id="map" class="contacts__map"></div></div><div class="contacts__button-wrapper container"><a data-target="#image" class="toggle-modal button">Напишите нам</a></div></div></section></main><footer class="page-footer"><div class="page-footer__wrapper container"><div class="page-footer__wrapper-logo"><a class="page-footer__logo"><svg width="101" height="34"><use xlink:href="images/sprite.svg#icon-logo"></use></svg></a></div><ul class="page-footer__social social-list"><li class="social-list__item"><a href="#" class="social-list__link"><svg width="22" height="21"><use xlink:href="images/sprite.svg#icon-insta"></use></svg></a></li><li class="social-list__item"><a href="#" class="social-list__link"><svg width="15" height="28"><use xlink:href="images/sprite.svg#icon-fb"></use></svg></a></li><li class="social-list__item"><a href="#" class="social-list__link"><svg width="23" height="20"><use xlink:href="images/sprite.svg#icon-twitter"></use></svg></a></li></ul><p class="copyright"><a href="" class="copyright__link"><b class="copyright__link-text">Разработано</b> <svg width="27" height="34"><use xlink:href="images/sprite.svg#logo-htmlacademy"></use></svg></a></p></div></footer><div id="modal" class="modal"><div class="modal__body"><div class="modal__content"><h2 class="modal__title">Добавить <br>в корзину</h2><p class="modal__sub-title">Выберите размер:</p><form class="modal__form modal-form" method="get" action="https://echo.htmlacademy.ru"><ul class="modal-form__list"><li class="modal-form__radio-item"><input class="visually-hidden input-radio" type="radio" name="Тип" value="Размер - S" id="size-S" checked=""> <label class="input-radio__label" for="size-S">S</label></li><li class="modal-form__radio-item"><input class="visually-hidden input-radio" type="radio" name="Тип" value="Размер - M" id="size-M"> <label class="input-radio__label" for="size-M">M</label></li><li class="modal-form__radio-item"><input class="visually-hidden input-radio" type="radio" name="Тип" value="Размер - L" id="size-L"> <label class="input-radio__label" for="size-L">L</label></li></ul><button class="modal__button button button--green" type="submit">Добавить</button></form></div></div></div><div id="image" class="modal modal-image"><div class="modal__body"><div class="modal__content modal__content_image"><div class="modal__image"><picture><source srcset="images/image-modal.webp" type="image/webp"><img src="images/image-modal.jpg"></picture></div></div></div></div><script src="js/script.js"></script><script>function initMap() { var uluru = { lat: 59.9385814, lng: 30.3202457 }; var map = new google.maps.Map( document.getElementById('map'), { zoom: 16, center: uluru }); var marker = new google.maps.Marker({ position: uluru, map: map }); }</script><script defer="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBC-iUQBHzKh4DT45LnAO-QgAILp0iN4hE&callback=initMap"></script></body></html>