Skip to content

Commit

Permalink
Разметка страниц
Browse files Browse the repository at this point in the history
  • Loading branch information
IrinaRogacheva authored and IrinaRogacheva committed Dec 16, 2024
1 parent 4bb2dae commit 59afaf7
Show file tree
Hide file tree
Showing 16 changed files with 685 additions and 11 deletions.
301 changes: 301 additions & 0 deletions source/catalog.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,301 @@
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="utf-8">
<title>HTML Academy: Кэт энерджи</title>
</head>
<body class="page__body">
<header class="main-header">
<a class="main-header__logo logo">
<img src="img/logo-mobile.svg" width="33" height="38"
alt="Функциональное питание для котов «Cat Energy».">
</a>
<nav class="main-nav">
<button class="main-nav__toggle" type="button">
<span class="visually-hidden">Открыть меню</span>
</button>
<div class="main-nav__wrapper">
<ul class="main-nav__list">
<li class="site-list__item">
<a>
Главная
</a>
</li>
<li class="site-list__item site-list__item--active">
<a href="catalog.html">
Каталог продукции
</a>
</li>
<li class="site-list__item">
<a href="form.html">
Подбор программы
</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="main-container">
<section class="product">
<div class="product__wrapper">
<h1 class="product__title title">Каталог продукции</h1>
<ul class="product__list">
<li class="product__list-item">
<a class="product__image-link" href="#">
<img class="product__image" src="img/catalog/cat-energy-pro-chicken-500.png"
width="68" height="86" alt="Cat Energy PRO Курица 500 г">
</a>
<div class="product__card">
<a href="#">
<h2 class="product__card-title">Cat Energy PRO 500&nbsp;г</h2>
</a>
<dl class="product__card-list">
<div class="product__card-item">
<dt class="product__card-value">Масса</dt>
<dd class="product__card-description">500 г</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Вкус</dt>
<dd class="product__card-description">Курица</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Цена</dt>
<dd class="product__card-description">700 ₽</dd>
</div>
</dl>
</div>
<button class="product__button button" type="button">Заказать</button>
</li>
<li class="product__list-item">
<a class="product__image-link" href="#">
<img class="product__image" src="img/catalog/cat-energy-pro-chicken-1000.png"
width="84" height="100" alt="Cat Energy PRO Курица 1000 г">
</a>
<div class="product__card">
<a href="#">
<h2 class="product__card-title">Cat Energy PRO 1000&nbsp;г</h2>
</a>
<dl class="product__card-list">
<div class="product__card-item">
<dt class="product__card-value">Масса</dt>
<dd class="product__card-description">1000 г</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Вкус</dt>
<dd class="product__card-description">Курица</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Цена</dt>
<dd class="product__card-description">1000 ₽</dd>
</div>
</dl>
</div>
<button class="product__button button" type="button">Заказать</button>
</li>
<li class="product__list-item">
<a class="product__image-link" href="#">
<img class="product__image" src="img/catalog/cat-energy-pro-fish-500.png"
width="68" height="78" alt="Cat Energy PRO Рыба 500 г">
</a>
<div class="product__card">
<a href="#">
<h2 class="product__card-title">Cat Energy PRO 500&nbsp;г</h2>
</a>
<dl class="product__card-list">
<div class="product__card-item">
<dt class="product__card-value">Масса</dt>
<dd class="product__card-description">500 г</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Вкус</dt>
<dd class="product__card-description">Рыба</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Цена</dt>
<dd class="product__card-description">700 ₽</dd>
</div>
</dl>
</div>
<button class="product__button button" type="button">Заказать</button>
</li>
<li class="product__list-item">
<a class="product__image-link" href="#">
<img class="product__image" src="img/catalog/cat-energy-pro-fish-1000.png"
width="84" height="100" alt="Cat Energy PRO Рыба 1000 г">
</a>
<div class="product__card">
<a href="#">
<h2 class="product__card-title">Cat Energy PRO 1000&nbsp;г</h2>
</a>
<dl class="product__card-list">
<div class="product__card-item">
<dt class="product__card-value">Масса</dt>
<dd class="product__card-description">1000 г</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Вкус</dt>
<dd class="product__card-description">Рыба</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Цена</dt>
<dd class="product__card-description">1000 ₽</dd>
</div>
</dl>
</div>
<button class="product__button button" type="button">Заказать</button>
</li>
<li class="product__list-item">
<a class="product__image-link" href="#">
<img class="product__image" src="img/catalog/cat-energy-slim-buckwheat-500.png"
width="68" height="78" alt="Cat Energy slim Гречка 500 г">
</a>
<div class="product__card">
<a href="#">
<h2 class="product__card-title">Cat Energy slim 500&nbsp;г</h2>
</a>
<dl class="product__card-list">
<div class="product__card-item">
<dt class="product__card-value">Масса</dt>
<dd class="product__card-description">500 г</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Вкус</dt>
<dd class="product__card-description">Гречка</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Цена</dt>
<dd class="product__card-description">400 ₽</dd>
</div>
</dl>
</div>
<button class="product__button button" type="button">Заказать</button>
</li>
<li class="product__list-item">
<a class="product__image-link" href="#">
<img class="product__image" src="img/catalog/cat-energy-slim-buckwheat-1000.png"
width="84" height="100" alt="Cat Energy slim Гречка 1000 г">
</a>
<div class="product__card">
<a href="#">
<h2 class="product__card-title">Cat Energy slim 1000&nbsp;г</h2>
</a>
<dl class="product__card-list">
<div class="product__card-item">
<dt class="product__card-value">Масса</dt>
<dd class="product__card-description">1000 г</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Вкус</dt>
<dd class="product__card-description">Гречка</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Цена</dt>
<dd class="product__card-description">700 ₽</dd>
</div>
</dl>
</div>
<button class="product__button button" type="button">Заказать</button>
</li>
<li class="product__list-item">
<a class="product__image-link" href="#">
<img class="product__image" src="img/catalog/cat-energy-slim-rice-500.png"
width="72" height="84" alt="Cat Energy slim Рис 500 г">
</a>
<div class="product__card">
<a href="#">
<h2 class="product__card-title">Cat Energy slim 500&nbsp;г</h2>
</a>
<dl class="product__card-list">
<div class="product__card-item">
<dt class="product__card-value">Масса</dt>
<dd class="product__card-description">500 г</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Вкус</dt>
<dd class="product__card-description">Рис</dd>
</div>
<div class="product__card-item">
<dt class="product__card-value">Цена</dt>
<dd class="product__card-description">500 ₽</dd>
</div>
</dl>
</div>
<button class="product__button button" type="button">Заказать</button>
</li>
<li class="product__list-item product__list-item--more">
<div class="product__card product__card--more">
<h2 class="product__card-title product__card-title--more">Показать еще 100500 товаров</h2>
<p class="product__card-text">На самом деле вкусов гораздо больше!</p>
</div>
<button class="product__button product__button--more button" type="button">Показать все</button>
</li>
</ul>
</div>
</section>
<section class="additional">
<div class="additional__wrapper">
<h2 class="additional__title additional__title--decor">Дополнительные товары</h2>
<dl class="additional__list">
<div class="additional__item">
<h3 class="additional__item-title">Сахарозаменитель</h3>
<dt class="additional__item-value">1 упаковка (100 г)</dt>
<dd class="additional__item-description">200 ₽</dd>
<button class="additional__button button" type="button">Заказать</button>
</div>
<div class="additional__item">
<h3 class="additional__item-title">Питьевая вода</h3>
<dt class="additional__item-value">5 литров</dt>
<dd class="additional__item-description">50 ₽</dd>
<button class="additional__button button" type="button">Заказать</button>
</div>
<div class="additional__item">
<h3 class="additional__item-title">Молоко</h3>
<dt class="additional__item-value">1 литр</dt>
<dd class="additional__item-description">100 ₽</dd>
<button class="additional__button button" type="button">Заказать</button>
</div>
<div class="additional__item">
<h3 class="additional__item-title">Витамины</h3>
<dt class="additional__item-value">1 упаковка (30 г)</dt>
<dd class="additional__item-description">300 ₽</dd>
<button class="additional__button button" type="button">Заказать</button>
</div>
</dl>
<div class="additional__gift">
<h3 class="visually-hidden">Получить подарок</h3>
<p class="additional__gift-text">Закажите все и получите чехол для кота в подарок!</p>
</div>
</div>
</section>
</main>
<footer class="main-footer">
<div class="main-footer__wrapper">
<div class="main-footer__contacts contacts">
<b class="contacts__title">Приглашаем
к сотрудничеству дилеров!</b>
<p class="contacts__text">ул. Большая Конюшенная, д. 19/8 Санкт-Петербург</p>
<div class="contacts__map"></div>
</div>
<a class="main-footer__logo logo" href="#">
<img src="img/logo-mobile.svg" width="33" height="38"
alt="Функциональное питание для котов «Cat Energy».">
</a>
<div class="main-footer__social social">
<ul class="social__list">
<li class="social__item">
<a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy">Мы в Вконтакте</a>
</li>
<li class="social__item">
<a class="social__link social__link--youtube" href="https://www.youtube.com/user/htmlacademyru">Мы в Ютубе</a>
</li>
<li class="social__item">
<a class="social__link social__link--telegram" href="https://t.me/htmlacademy">Мы в Телеграме</a>
</li>
</ul>
</div>
<div class="main-footer__copyright copyright">
<a class="copyright__link" href="https://htmlacademy.ru/intensive/adaptive">HTML Academy</a>
</div>
</div>
</footer>
</body>
</html>
Loading

0 comments on commit 59afaf7

Please sign in to comment.