Skip to content

Commit

Permalink
Merge pull request #5 from KershDKas/module4-task1
Browse files Browse the repository at this point in the history
  • Loading branch information
@keksobot
keksobot authored Dec 6, 2024
2 parents 854d6be + 1320817 commit 2513995
Show file tree
Hide file tree
Showing 25 changed files with 834 additions and 425 deletions.
475 changes: 240 additions & 235 deletions source/catalog.html
View file

Large diffs are not rendered by default.

143 changes: 73 additions & 70 deletions source/form.html
View file

Large diffs are not rendered by default.

Binary file added source/img/background-additional-goods-present-tablet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
203 changes: 106 additions & 97 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,68 @@
<html class="page" lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Academy: Кэт энерджи</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body class="page__body">
<header class="main-header">
<a class="main-header__logo">
<img src="img/logo.svg" height="38px" width="33px" alt="Кэт энерджи">
<img src="img/site-name.svg" height="18px" width="101px" 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 main-nav__wrapper--mobile-close">
<ul class="main-nav__list">
<li class="main-nav__item main-nav__item--active">
<a class="main-nav__link" href="#">
Главная
</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="catalog.html">
Каталог продукций
</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="form.html">
Подбор программы
</a>
</li>
</ul>
<div class="container">
<div class="main-header__row">
<a class="main-header__logo">
<img src="img/logo.svg" height="38px" width="33px" alt="Кэт энерджи">
<img src="img/site-name.svg" height="18px" width="101px" 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 main-nav__wrapper--mobile-close">
<ul class="main-nav__list">
<li class="main-nav__item main-nav__item--active">
<a class="main-nav__link" href="#">
Главная
</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="catalog.html">
Каталог продукций
</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="form.html">
Подбор программы
</a>
</li>
</ul>
</div>
</nav>
</div>
</nav>
</div>
</header>

<main class="main-container">
<section class="programs">
<div class="programs__wrapper">
<div class="container">
<header class="programs__header">
<h1 class="programs__title">Функциональное питание для котов</h1>
<p class="programs__slogan">Занялся собой? Займись котом!</p>
<img class="programs__img" src="./img/index-can.png" width="280px" height="270px" alt="Фото упаковки здорового питания Cat Energy">
<a href="form.html" class="button programs__button">Подобрать программу</a>
<h1 class="programs__title">Функциональное питание для котов</h1>
<p class="programs__slogan">Занялся собой? Займись котом!</p>
<img class="programs__img" src="./img/index-can.png" width="280px" height="270px" alt="Фото упаковки здорового питания Cat Energy">
<a href="form.html" class="button programs__button">Подобрать программу</a>
</header>
<div class="programs__list">
<div class="programs__item">
<h2 class="programs__item-title">Похудение</h2>
<p class="programs__item-description">
Ваш кот весит больше собаки и почти утратил способность<br>
лазить по деревьям? Пора на диету! Cat Energy Slim поможет<br>
Ваш кот весит больше собаки и почти утратил способность
лазить по деревьям? Пора на диету! Cat Energy Slim поможет
вашему питомцу сбросить лишний вес.
</p>
<a class="programs__item-link" href="#">Каталог SLIM</a>
</div>
<div class="programs__item">
<h2 class="programs__item-title">Набор массы</h2>
<p class="programs__item-description">
Заработать авторитет среди дворовых котов и даже собак?<br>
Серия Cat Energy Pro поможет вашему коту нарастить<br>
Заработать авторитет среди дворовых котов и даже собак?
Серия Cat Energy Pro поможет вашему коту нарастить
необходимые мышцы!
</p>
<a class="programs__item-link" href="#">Каталог PRO</a>
Expand All @@ -68,78 +73,82 @@ <h2 class="programs__item-title">Набор массы</h2>
</section>

<section class="advantages">
<div class="advantages__wrapper">
<h2 class="advantages__title">Как это работает</h2>
<ul class="advantages__list">
<li class="advantages__item">
<p class="advantages__description advantages__description--leaf">
Функциональное питание<br>
содержит только полезные<br>
питательные вещества.
</p>
</li>
<li class="advantages__item">
<p class="advantages__description advantages__description--powder">
Выпускается в виде порошка,<br>
который нужно лишь залить<br>
кипятком и готово.
</p>
</li>
<li class="advantages__item">
<p class="advantages__description advantages__description--kitchen-appliances">
Замените один-два приема<br>
обычной еды на наше<br>
функциональное питание.
</p>
</li>
<li class="advantages__item">
<p class="advantages__description advantages__description--clock">
Уже через месяц наслаждайтесь<br>
изменениями к лучшему<br>
вашего питомца!
</p>
</li>
</ul>
<div class="container">
<div class="advantages__wrapper">
<h2 class="advantages__title">Как это работает</h2>
<ul class="advantages__list">
<li class="advantages__item">
<p class="advantages__description advantages__description--leaf">
Функциональное питание<br>
содержит только полезные<br>
питательные вещества.
</p>
</li>
<li class="advantages__item">
<p class="advantages__description advantages__description--powder">
Выпускается в виде порошка,<br>
который нужно лишь залить<br>
кипятком и готово.
</p>
</li>
<li class="advantages__item">
<p class="advantages__description advantages__description--kitchen-appliances">
Замените один-два приема<br>
обычной еды на наше<br>
функциональное питание.
</p>
</li>
<li class="advantages__item">
<p class="advantages__description advantages__description--clock">
Уже через месяц наслаждайтесь<br>
изменениями к лучшему<br>
вашего питомца!
</p>
</li>
</ul>
</div>
</div>
</section>

<section class="life-example">
<div class="life-example__wrapper">
<h2 class="life-example__title">Живой пример</h2>
<p class="life-example__description">
Борис сбросил 5 кг за 2 месяца, просто
заменив свой обычный корм на Cat Energy
Slim. Отличный результат без изнуряющих
тренировок! При этом он не менял своих
привычек и по-прежнему спит по 16 часов
в день.
</p>
<ul class="life-example__chars-list">
<li class="life-example__item">
<p class="life-example__item-title">5 Кг</p>
<p class="life-example__item-description">снижение<br> веса</p>
</li>
<li class="life-example__item">
<p class="life-example__item-title">60 дней</p>
<p class="life-example__item-description">затрачено<br> времени</p>
</li>
</ul>
<p class="life-example__price"> Затраты на питание: 15 000 руб.</p>
</div>
<div class="life-example__slider slider-range">
<div class="slider-range__item">
<div class="slider-range__slide slider-range__slide--before">
<img class="slider-range__img slider-range__img--before" src="img/cat-mobile-before.png" width="280px" height="256px" alt="Кот до здорового питания">
</div>
<div class="slider-range__slide slider-range__slide--after">
<img class="slider-range__img slider-range__img--after" src="img/cat-mobile-after.png" width="280px" height="256px" alt="Кот после здорового питания">
<div class="container">
<div class="life-example__wrapper">
<h2 class="life-example__title">Живой пример</h2>
<p class="life-example__description">
Борис сбросил 5 кг за 2 месяца, просто
заменив свой обычный корм на Cat Energy
Slim. Отличный результат без изнуряющих
тренировок! При этом он не менял своих
привычек и по-прежнему спит по 16 часов
в день.
</p>
<ul class="life-example__chars-list">
<li class="life-example__item">
<p class="life-example__item-title">5 Кг</p>
<p class="life-example__item-description">снижение<br> веса</p>
</li>
<li class="life-example__item">
<p class="life-example__item-title">60 дней</p>
<p class="life-example__item-description">затрачено<br> времени</p>
</li>
</ul>
<p class="life-example__price"> Затраты на питание: 15 000 руб.</p>
</div>
<div class="life-example__slider slider-range">
<div class="slider-range__item">
<div class="slider-range__slide slider-range__slide--before">
<img class="slider-range__img slider-range__img--before" src="img/cat-mobile-before.png" width="280px" height="256px" alt="Кот до здорового питания">
</div>
<div class="slider-range__slide slider-range__slide--after">
<img class="slider-range__img slider-range__img--after" src="img/cat-mobile-after.png" width="280px" height="256px" alt="Кот после здорового питания">
</div>
</div>
</div>
</div>
</section>

<section class="cooperation">
<div class="cooperation__wrapper cooperation__wrapper--main">
<div class="container cooperation__wrapper cooperation__wrapper--main">
<h2 class="visually-hidden">Сотрудничество</h2>
<p class="cooperation__title">Приглашаем к сотрудничеству<br> дилеров!</p>
<p class="cooperation__description">
Expand All @@ -152,7 +161,7 @@ <h2 class="visually-hidden">Сотрудничество</h2>
</section>
</main>

<footer class="main-footer">
<footer class="main-footer container">
<a class="main-footer__logo">
<img src="img/site-name.svg" height="24px" width="128px" alt="Название сайта CAT ENERGY">
</a>
Expand Down
26 changes: 25 additions & 1 deletion source/less/blocks/additional-goods.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
.additional-goods {
padding: 25px 20px 35px;
padding: 25px 0 35px;

@media (min-width: @tablet-width) {
padding: 70px 0 70px;
}
}

.additional-goods__title {
Expand All @@ -22,6 +26,19 @@
.additional-goods__item {
padding: 13px 0 19px;
border-bottom: 1px solid #CDCDCD;

@media (min-width: @tablet-width) {
border-left: 1px solid #CDCDCD;
border-right: 1px solid #CDCDCD;
}
}

@media (min-width: @tablet-width) {
.additional-goods-card {
display: flex;
flex-direction: column;
padding: 0 38px;
}
}

.additional-goods-card__title {
Expand Down Expand Up @@ -55,4 +72,11 @@
color: #FFFFFF;
margin: 0;
text-align: center;

@media (min-width: @tablet-width) {
background-image: url(../../img/background-additional-goods-present-tablet.png);
background-repeat: no-repeat;
background-size: auto;
padding: 71px 125px 69px 421px;
}
}
31 changes: 30 additions & 1 deletion source/less/blocks/advantages.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
.advantages {
padding: 0 20px 49px;
padding-bottom: 49px;

@media (min-width: @tablet-width) {
padding-bottom: 47px;
}

@media (min-width: @desktop-width) {
padding-bottom: 69px;
}
}

.advantages__title {
Expand All @@ -19,10 +27,31 @@
list-style: none;
margin: 0;
padding: 0;

@media (min-width: @tablet-width) {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

@media (min-width: @desktop-width) {
grid-template-columns: repeat(4, 1fr);
justify-content: space-between;
gap: 10px;
}
}

.advantages__item {
padding-left: 80px;

@media (min-width: @tablet-width) {
padding-left: 0;
padding-top: 151px;
}

@media (min-width: @desktop-width) {
padding: 151px 0 57px;
}
}

.advantages__description {
Expand Down
2 changes: 1 addition & 1 deletion source/less/blocks/button.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.button {
display: block;
display: inline-block;
font-family: @oswald;
font-weight: 400;
font-size: 16px;
Expand Down
13 changes: 13 additions & 0 deletions source/less/blocks/card.less
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,27 @@
.card {
padding: 20px 20px 25px;
display: flex;
flex-direction: column;

@media (min-width: @tablet-width) {
background-color: #F2F2F2;
}
}

.card__wrapper {
display: flex;
justify-content: space-between;

@media (min-width: @tablet-width) {
flex-direction: column;
align-items: center;
}
}


.card__image {
padding: 10.5px 36px;
box-sizing: content-box;
}

.card__title {
Expand Down
Loading

0 comments on commit 2513995

Please sign in to comment.