Skip to content

Commit

Permalink
Дополняю разметку
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrsGermy
MrsGermy committed Sep 27, 2022
1 parent c8e248e commit 71febed
Showing 1 changed file with 58 additions and 33 deletions.
91 changes: 58 additions & 33 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,32 @@
<header class="main_header">
<div class="page_logo">
<h1 class="visually_hidden">GllacyShop</h1>
<img src="Logo.svg" alt="Logo of GllacyShop">
<img src="Logo.svg" alt="Logo of GllacyShop.">
</div>
<nav class="header_nav">
<ul class="header_nav_list">
<li class="header_nav_item"><a href="catalog.html" class="header_nav_link">Каталог</a></li>
<li class="header_nav_item"><button type="button" class="button button_active">Каталог</button></li> <!--действие на странице -> button -->
<li class="header_nav_item"><a href="shipping_and_payment.html" class="header_nav_link">Доставка и оплата</a></li>
<li class="header_nav_item"><a href="about.html" class="header_nav_link">О компании</a></li>
</ul>
<ul class="header_nav_list header_nav_user">
<li class="header_nav_item"><a href="tel:+78005558628" class="header_nan_link">+7 800 555-86-28</a></li>
<li class="header_nav_item"><a href="#" class="header_nav_link"><span class="visually_hidden">Поиск</span></a></li>
<li class="header_nav_item"><a href="#" class="header_nav_link">Вход</a></li>
<li class="header_nan_item"><a href="#" class="header_nav_link">2 товара</a></li>
<li class="header_nav_item"><button type="button" class="button button_active"><span class="visually_hidden">Поиск</span></button></li> <!--действие на странице -> button -->
<li class="header_nav_item"><button type="button" class="button button_active">Вход</button></li> <!--действие на странице -> button -->
<li class="header_nan_item"><button type="button" class="button button_active">2 товара</button></li> <!--действие на странице -> button -->
</ul>
</nav>
<div class="catalog"> <!--выбор в каталоге-->
<select class="catalog_list" id="catalog" name="header_select" >
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</div>
<div class="popap_card visually_hidden">Корзина</div> <!--появление корзины-->
<div class="popap_account visually_hidden">Личный кабинет</div> <!--появление личного кабинета-->
<div class="popap_search visually_hidden">Поиск</div> <!--появление поля поиска-->
</header>

<!----MAIN_INDEX---->
Expand All @@ -33,7 +44,7 @@ <h1 class="visually_hidden">GllacyShop</h1>
<h2 class="visually_hidden">Разновидности мороженого</h2>
<h3 class="main_page_info_title">Нежный пломбир с клубничным джемом</h3>
<p class="main_page_info_description">Натуральное мороженое из свежих сливок и молока с вкуснейшим клубничным джемом – это идеальный десерт для всей семьи. </p>
<img class="slider_icecream" src="#" alt="Вкусы мороженого">
<img class="slider_icecream" src="#" alt="Вкусы мороженого.">
<button type="button" class="slider_button button_prev"><span class="visually_hidden">Предыдущее мороженое</span></button>
<button type="button" class="slider_button button_next"><span class="visually_hidden">Следующее мороженое</span></button>
<ol class="slider_pagination">
Expand All @@ -52,44 +63,44 @@ <h2 class="title main_offer_header">Заказывайте мороженое и
<h3 class="offer_list_title">Малинка даром!</h3>
<p class="offer_list_description">При покупке 2 кг любого фруктового мороженого добавим в ваш заказ банку малинового варенья бесплатно.</p>
<a href="#">Хочу подарок</a>
<img class="offer_list_image" src="#" alt="Малинка в рожке">
<img class="offer_list_image" src="#" alt="Малинка в рожке.">
</li>
<li class="offer_item">
<h3 class="offer_list_title">Маршмеллоу даром!</h3>
<p class="offer_list_description">При покупке 2 кг пломбира добавим в ваш заказ упаковку нежных
зефирок совершенно бесплатно.</p>
<a href="#">Хочу подарок</a>
<img class="offer_list_image" src="#" alt="Маршмеллоу в рожке">
<img class="offer_list_image" src="#" alt="Маршмеллоу в рожке.">
</li>
</ul>
</section>

<!----OTHER_OFFERS---->
<!----POPULAR_OFFERS---->
<section class="popular_offers">
<h2 class="title popular_offers_header">Попробуйте самые популярные вкусы нашего мороженого</h2>
<ul class="popular_offers_list">
<li class="popular_offers_list_item">
<img class="popular_icecream" src="#" alt="Шарик малинового мороженного">
<img class="popular_icecream" src="#" alt="Шарик малинового мороженного.">
<h3 class="popular_offers_title">Малинка</h3>
<p class="popular_offers_description">Сливочное мороженое с малиновым джемом</p>
<b>310 ₽/кг</b>
<a href="#"><span class="visually_hidden">Корзина</span></a>
</li>
<li class="popular_offers_list_item">
<img class="popular_icecream" src="#" alt="Шарик фисташкового мороженного">
<img class="popular_icecream" src="#" alt="Шарик фисташкового мороженного.">
<h3 class="popular_offers_title">Фисташка</h3>
<p class="popular_offers_description">Фисташковый пломбир с кусочками шоколада</p>
<b>310 ₽/кг</b>
<a href="#"><span class="visually_hidden">Корзина</span></a>
</li>
<li class="popular_offers_list_item">
<img class="popular_icecream" src="#" alt="Шарик черничного мороженного">
<img class="popular_icecream" src="#" alt="Шарик черничного мороженного.">
<h3 class="popular_offers_title">Черника</h3>
<p class="popular_offers_description">Крем-брюле с черничным джемом</p>
<b>310 ₽/кг</b>
<a href="#"><span class="visually_hidden">Корзина</span></a>
</li>
<li class="popular_offers_list_item">
<img class="popular_icecream" src="#" alt="Шарик мороженного Бабл-гам">
<img class="popular_icecream" src="#" alt="Шарик мороженного Бабл-гам.">
<h3 class="popular_offers_title">Бабл-гам</h3>
<p class="popular_offers_description">Ванильный пломбир со сладкой посыпкой</p>
<b>310 ₽/кг</b>
Expand All @@ -103,74 +114,90 @@ <h3 class="popular_offers_title">Бабл-гам</h3>
<h2 class="title about_gllacyshop_header">Магазин Глейси – это онлайн и офлайн-магазин по продаже мороженого собственного производства на развес</h2>
<ul class="about_gllacyshop_list">
<li class="about_gllacyshop_item">
<img class="about_gllacyshop_icon" src="#" alt="Мороженое на палочке">
<img class="about_gllacyshop_icon" src="#" alt="Мороженое на палочке.">
<h3 class="visually_hidden">Лучшее оборудование</h3>
<p class="about_gllacyshop_description">Всё наше мороженое изготавливается на собственном производстве с использованием современного оборудования и проверенных временем технологий.</p>
</li>
<li class="about_gllacyshop_item">
<img class="about_gllacyshop_icon" src="#" alt="Коровка">
<img class="about_gllacyshop_icon" src="#" alt="Коровка.">
<h3 class="visually_hidden">Проверенные поставщики</h3>
<p class="about_gllacyshop_description">Закупка ингредиентов производится только у проверенных фермерских хозяйств, с которыми нас связывает долговременное сотрудничество.</p>
</li>
<li class="about_gllacyshop_item">
<img class="about_gllacyshop_icon" src="#" alt="Листик с дерева">
<img class="about_gllacyshop_icon" src="#" alt="Листик с дерева.">
<h3 class="visually_hidden">Высочайшее качество сырья</h3>
<p class="about_gllacyshop_description">Для приготовления мороженого используются сливки и молоко высочайшего качества. Все ингредиенты и добавки произведены из натурального сырья.</p>
</li>
<li class="about_gllacyshop_item">
<img class="about_gllacyshop_icon" src="#" alt="Градусник">
<img class="about_gllacyshop_icon" src="#" alt="Градусник.">
<h3 class="visually_hidden">Бережная доставка</h3>
<p class="about_gllacyshop_description">Доставка нашего мороженого осуществляется в специальном термопаке, который не даёт мороженому растаять и позволяет сохранить превосходный вкус.</p>
</li>
</ul>
</section>
</main>

<!----BLOG---->
<article class="blog">
<h2 class="visually_hidden">Новости блога</h2>
<h3 class="blog_subtitle">Новое в нашем блоге</h3>
<a class="blog_new_title" href="new.html">10 способов сервировки фруктовых щербетов к столу</a>
<img class="blog_background_img" src="#" alt="Пример сервировки мороженного">
</article>

<!----SUBSCRIBE---->
<section class="subscribe">
<h2 class="visually_hidden">Подписка на рассылку</h3>
<p class="subscribe_description">Подпишитесь на нашу сладкую рассылку и будьте всегда в курсе всего самого вкусного, что у нас происходит. Обещаем не спамить и не слать всякой ненужной ерунды. Честно =)</p>
<form action="subscribe">
<form class="subscribe_form" action="https://echo.htmlacademy.ru" method="post">
<label for="email">Почта</label>
<input type="email" id="email">
<input type="text" id="email" name="subscribe_email" placeholder="meow@pochta.prr">
<button class="button" type="submit">Отправить</button>
</form>
</section>

<!----DELIVERY---->
<section class="delivery">
<h2 class="delivery_title">Доставка любимого мороженого на дом</h2>
<p class="delivery_description">Хочется полакомиться любимым десертом, но нет времени съездить в магазин? Закажите доставку мороженого на дом, и курьер привезёт вам ваш заказ в течение часа!</p>
<h3 class="visually_hidden">Ваш адрес</h3>
<form class="delivery_form" action="куда отправляются данные" method="post">
<form class="delivery_form" action="https://echo.htmlacademy.ru" method="post">
<p class="delivery_form_date">
<label for="date">Дата</label>
<input type="date" id="date">
<label for="tel">Телефон</label>
<input type="text" id="tel">
<input type="text" id="date" name="date" placeholder="01.01.2001">
</p>
<p class="delivery_form_tel">
<label for="text">Телефон</label>
<input type="text" id="tel" name="delivery_tel" placeholder="+7(999)-888-55-21">
</p>
<p class="delivery_form_address">
<label for="address">Адрес</label>
<textarea name="address" id="address" cols="30" rows="10"></textarea>
<input type="text" name="text" id="address"></input>
</p>
<button class="button" type="submit">Oтправить</button>
</form>
<button class="button" type="submit">Oтправить</button>
<img class="delivery_background_img" src="#" alt="Много разновидностей мороженного">

</section>

<!----CONTACTS---->
<section class="contacts">
<h2 class="visually_hidden">Контакты</h2>
<h3 class="contacts_subtitle">Адрес главного офиса и офлайн-магазина:</h3>
<div class="contacts_popup visually_hidden "><h3>Мы обязательно ответим вам!</h3></div>
<address class="contacts_address">
<p class="contacts_address_text">наб. реки Карповки, 5 лит П, Санкт-Петербург</p>
<h3 class="contacts_subtitle">Для заказов по телефону:</h3>
<a class="contacts_tel" href="tel:88128121212">+7 (812) 812-12-12</a>
</address>
<p class="contacts_time">(с 10 до 20 ежедневно)</p>
<button class="button" type="button">Форма обратной связи</button>
</address>
<img src="#" alt="3 рожка с мороженным">
<div class="feedback">
<form class="feedback_form visually_hidden" action="https://echo.htmlacademy.ru" method="post" name="feedback_area"> <!----форма обратной связи, действие на странице---->
<!--Данные для обратной связи-->
</form>
</div>
</section>

<!----MAIN_FOOTER---->
<footer class="main_footer">
<h2 class="visually_hidden">Дополнительная информация</h2>
<ul class="main_footer_list">
Expand All @@ -191,11 +218,9 @@ <h2 class="visually_hidden">Дополнительная информация</h
<li class="main_footer_standarts"><a href="#">Экологические стандарты</a></li>
</ul>
<div class="html_academy">
<a class="html_academy_logo" href="https://htmlacademy.ru/"><img src="#" alt="HTML Академия"></a>
<a class="html_academy_logo" href="https://htmlacademy.ru/"><img src="#" alt="HTML Академия."></a>
<a class="html_academy_link" href="https://htmlacademy.ru/">Сделано в .html academy © 2021</a>
</div>
</footer>


</body>
</body>
</html>

0 comments on commit 71febed

Please sign in to comment.