Skip to content

Commit

Permalink
Merge pull request #2 from Tuvakova/module2-task1
Browse files Browse the repository at this point in the history 
Делает разметку
  • Loading branch information
@NikolaiKotikov
NikolaiKotikov authored Oct 18, 2024
2 parents ad8da76 + b12a546 commit 69a2acb
Show file tree
Hide file tree
Showing 2 changed files with 509 additions and 10 deletions.
326 changes: 326 additions & 0 deletions source/catalog.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,326 @@
<!DOCTYPE html>
<html class="page" lang="ru">

<head>
<meta charset="UTF-8">
<title>Название проекта</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles/styles.css">
<script src="scripts/index.js" defer></script>
</head>

<body class="page__body">
<header class="main-header">
<a class="main-header__logo" href="#">
<span class="visually-hidden" hidden>Логотип</span>
</a>
<nav class="main-nav">
<button class="main-nav__toggle" type="button">
<span class="visually-hidden">Открыть меню</span>
</button>
<div class="main-nav__container">
<ul class="main-nav__list">
<li class="main-nav__item main-nav__item--active">
<a href="index.html">
Главная
</a>
</li>
<li class="main-nav__item">
<a href="catalog.html">
Каталог продукции
</a>
</li>
<li class="main-nav__item">
<a href="#">
Подбор программы
</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="catalog-main">
<h1 class="catalog-main__title">
Каталог продукции
</h1>
<section class="catalog">
<h2 class="visually-hidden">Список товаров</h2>
<ul class="catalog__list">
<li class="catalog__item product-card">
<a class="product-card__img-link" href="№">
500 Г
</a>
<div class="product-card__description">
<h3 class="product-card__title">
<a class="product-card__title-link" href="#">Cat Energy PRO 500г</a>
</h3>
<table class="product-specification">
<tr class="product-specification__row">
<th class="product-specification__title"><span>Объем</span></th>
<td class="product-specification__value"><span>500г</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Вкус</span></th>
<td class="product-specification__value"><span>Курица</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Цена</span></th>
<td class="product-specification__value"><span>700 Р.</span></td>
</tr>
</table>
</div>
<a class="product-card__order-link action-button" href="#">Заказать</a>
</li>
<li class="catalog__item product-card">
<a class="product-card__img-link" href="#">
1000 Г
</a>
<div class="product-card__description">
<h3 class="product-card__title">
<a class="product-card__title-link" href="#">Cat Energy PRO 1000</a>
</h3>
<table class="product-specification">
<tr class="product-specification__row">
<th class="product-specification__title"><span>Объем</span></th>
<td class="product-specification__value"><span>1000г</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Вкус</span></th>
<td class="product-specification__value"><span>Курица</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Цена</span></th>
<td class="product-specification__value"><span>1000 Р.</span></td>
</tr>
</table>
</div>
<a class="product-card__order-link action-button" href="#">Заказать</a>
</li>
<li class="catalog__item product-card">
<a class="product-card__img-link" href="№">
500 Г
</a>
<div class="product-card__description">
<h3 class="product-card__title">
<a class="product-card__title-link" href="#">Cat Energy PRO 500г</a>
</h3>
<table class="product-specification">
<tr class="product-specification__row">
<th class="product-specification__title"><span>Объем</span></th>
<td class="product-specification__value"><span>500г</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Вкус</span></th>
<td class="product-specification__value"><span>Рыба</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Цена</span></th>
<td class="product-specification__value"><span>700 Р.</span></td>
</tr>
</table>
</div>
<a class="product-card__order-link action-button" href="#">Заказать</a>
</li>
<li class="catalog__item product-card">
<a class="product-card__img-link" href="#">
1000 Г
</a>
<div class="product-card__description">
<h3 class="product-card__title">
<a class="product-card__title-link" href="#">Cat Energy PRO 1000</a>
</h3>
<table class="product-specification">
<tr class="product-specification__row">
<th class="product-specification__title"><span>Объем</span></th>
<td class="product-specification__value"><span>1000г</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Вкус</span></th>
<td class="product-specification__value"><span>Рыба</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Цена</span></th>
<td class="product-specification__value"><span>1000 Р.</span></td>
</tr>
</table>
</div>
<a class="product-card__order-link action-button" href="#">Заказать</a>
</li>
<li class="catalog__item product-card">
<a class="product-card__img-link" href="№">
500 Г
</a>
<div class="product-card__description">
<h3 class="product-card__title">
<a class="product-card__title-link" href="#">Cat Energy SLIM 500г</a>
</h3>
<table class="product-specification">
<tr class="product-specification__row">
<th class="product-specification__title"><span>Объем</span></th>
<td class="product-specification__value"><span>500г</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Вкус</span></th>
<td class="product-specification__value"><span>Гречка</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Цена</span></th>
<td class="product-specification__value"><span>400 Р.</span></td>
</tr>
</table>
</div>
<a class="product-card__order-link action-button" href="#">Заказать</a>
</li>
<li class="catalog__item product-card">
<a class="product-card__img-link" href="#">
1000 Г
</a>
<div class="product-card__description">
<h3 class="product-card__title">
<a class="product-card__title-link" href="#">Cat Energy SLIM 1000</a>
</h3>
<table class="product-specification">
<tr class="product-specification__row">
<th class="product-specification__title"><span>Объем</span></th>
<td class="product-specification__value"><span>1000г</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Вкус</span></th>
<td class="product-specification__value"><span>Гречка</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Цена</span></th>
<td class="product-specification__value"><span>700 Р.</span></td>
</tr>
</table>
</div>
<a class="product-card__order-link action-button" href="#">Заказать</a>
</li>
<li class="catalog__item product-card">
<a class="product-card__img-link" href="№">
500 Г
</a>
<div class="product-card__description">
<h3 class="product-card__title">
<a class="product-card__title-link" href="#">Cat Energy SLIM 500г</a>
</h3>
<table class="product-specification">
<tr class="product-specification__row">
<th class="product-specification__title"><span>Объем</span></th>
<td class="product-specification__value"><span>500г</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Вкус</span></th>
<td class="product-specification__value"><span>Рис</span></td>
</tr>
<tr class="product-specification__row">
<th class="product-specification__title"><span>Цена</span></th>
<td class="product-specification__value"><span>500 Р.</span></td>
</tr>
</table>
</div>
<a class="product-card__order-link action-button" href="#">Заказать</a>
</li>
<li class="catalog__item more-products-card">
<div class="more-products-card__content">
<h3 class="more-products-card__title">Показать еще 100500 товаров</h3>
<p class="more-products-card__text">На самом деле вкусов гораздо больше!</p>
</div>
<a class="more-products-card__show-all-link" href="#">Показать все</a>
</li>
</ul>
</section>
<section class="additional-products">
<div class="additional-products__title-wrapper">
<h2 class="additional-products__title">
<span class="additional-products__text">Дополнительные товары</span>
</h2>
</div>
<div class="additional-products__wrapper">
<ul class="additional-products__list">
<li class="additional-products__item additional-product-card">
<h3 class="additional-product-card__title">Сахарозаменитель</h3>
<p class="additional-product-card__content">
<span class="additional-product-card__unit">1 упаковка (100г)</span>
<span class="additional-product-card__price">200 р.</span>
</p>
<a class="additional-product-card__order action-button" href="#">Заказать</a>
</li>
<li class="additional-products__item additional-product-card">
<h3 class="additional-product-card__title">Питьевая вода</h3>
<p class="additional-product-card__content">
<span class="additional-product-card__unit">5 литров</span>
<span class="additional-product-card__price">50 р.</span>
</p>
<a class="additional-product-card__order action-button" href="#">Заказать</a>
</li>
<li class="additional-products__item additional-product-card">
<h3 class="additional-product-card__title">Молоко</h3>
<p class="additional-product-card__content">
<span class="additional-product-card__unit">1 литр</span>
<span class="additional-product-card__price">100 р.</span>
</p>
<a class="additional-product-card__order action-button" href="#">Заказать</a>
</li>
<li class="additional-products__item additional-product-card">
<h3 class="additional-product-card__title">Витамины</h3>
<p class="additional-product-card__content">
<span class="additional-product-card__unit">1 упаковка (30 г)</span>
<span class="additional-product-card__price">300 р.</span>
</p>
<a class="additional-product-card__order action-button" href="#">Заказать</a>
</li>
</ul>
<div class="promo-block">
<div class="promo-block__gift"></div>
<p class="promo-block__text">Закажите все и получите чехол для кота в подарок!</p>
</div>
</div>
</section>
</main>
<footer class="page-footer">
<section class="page-footer__adress adress">
<h2 class="visually-hidden">Адрес магазина</h2>
<div class="adress__content-wrapper">
<div class="adress__content adress__content--index ">
<p class="adress__text">приглашаем к сотрудничеству дилеров!</p>
<p class="adress__location">
<span class="adress__location-street">
ул. Большая Конюшенная, д. 19/8
</span>
<span class="adress__location-city">
Санкт-Петербург
</span>
</p>
</div>
</div>
</section>
<div class="page-footer__bottom-block">
<a class="page-footer__logo-link" href="#" title="Вы уже здесь">
Главная страница
</a>
<ul class="page-footer-social social">
<li class="social__item social__item--vk">
<a class="social__link social__link--vk" href="#" aria-label="В контакте">
В контакте
</a>
</li>
<li class="social__item social__item--ig">
<a class="social__link social__link--ig" href="#" aria-label="Instagram">
Инстаграм
</a>
</li>
<li class="social__item social__item--fb">
<a class="social__link social__link--fb" href="#" aria-label="Facebook">
Фэйсбук
</a>
</li>
</ul>
<p class="page-footer__developer developer">
<a class="developer__link developer__link--text" href="#" aria-label="Перейти на сайт разработчика">HTML Academy</a>
</p>
</div>
</footer>
</body>

</html>
Loading

0 comments on commit 69a2acb

Please sign in to comment.