Skip to content

Commit

Permalink
Merge pull request #12 from vic-knyazeva/module9-task3
Browse files Browse the repository at this point in the history 
Module9 task3
  • Loading branch information
@vic-knyazeva
vic-knyazeva authored Dec 6, 2024
2 parents 807b00c + 359248c commit 5f997c6
Show file tree
Hide file tree
Showing 20 changed files with 120 additions and 96 deletions.
35 changes: 17 additions & 18 deletions source/catalog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
<title>Cat Energy: Каталог продукции</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>
<link rel="icon" href="favicon.ico">
<link rel="icon" href="favicons/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="favicons/apple.png">
Expand Down Expand Up @@ -87,7 +86,7 @@ <h3 class="card__title">
</li>
</ul>
</div>
<a class="card__button button" href="#">Заказать</a>
<a class="card__button button" href="./order.html">Заказать</a>
</article>
<article class="card-list__item card">
<a class="card__image-link" href="#">
Expand Down Expand Up @@ -119,7 +118,7 @@ <h3 class="card__title">
</li>
</ul>
</div>
<a class="card__button button" href="#">Заказать</a>
<a class="card__button button" href="./order.html">Заказать</a>
</article>
<article class="card-list__item card">
<a class="card__image-link" href="#">
Expand Down Expand Up @@ -151,7 +150,7 @@ <h3 class="card__title">
</li>
</ul>
</div>
<a class="card__button button" href="#">Заказать</a>
<a class="card__button button" href="./order.html">Заказать</a>
</article>
<article class="card-list__item card">
<a class="card__image-link" href="#">
Expand Down Expand Up @@ -183,7 +182,7 @@ <h3 class="card__title">
</li>
</ul>
</div>
<a class="card__button button" href="#">Заказать</a>
<a class="card__button button" href="./order.html">Заказать</a>
</article>
<article class="card-list__item card">
<a class="card__image-link" href="#">
Expand Down Expand Up @@ -215,7 +214,7 @@ <h3 class="card__title">
</li>
</ul>
</div>
<a class="card__button button" href="#">Заказать</a>
<a class="card__button button" href="./order.html">Заказать</a>
</article>
<article class="card-list__item card">
<a class="card__image-link" href="#">
Expand Down Expand Up @@ -247,7 +246,7 @@ <h3 class="card__title">
</li>
</ul>
</div>
<a class="card__button button" href="#">Заказать</a>
<a class="card__button button" href="./order.html">Заказать</a>
</article>
<article class="card-list__item card">
<a class="card__image-link" href="#">
Expand Down Expand Up @@ -279,7 +278,7 @@ <h3 class="card__title">
</li>
</ul>
</div>
<a class="card__button button" href="#">Заказать</a>
<a class="card__button button" href="./order.html">Заказать</a>
</article>
<article class="card-list__item card card--more">
<div class="card__description">
Expand All @@ -304,31 +303,31 @@ <h3 class="additional-products__item-title">Сахарозаменитель</h3
<dt class="additional-products__item-size">1 упаковка (100 г)</dt>
<dd class="additional-products__item-price">200&nbsp;&#8381;</dd>
</dl>
<a class="additional-products__button button" href="#">Заказать</a>
<a class="additional-products__button button" href="./order.html">Заказать</a>
</li>
<li class="additional-products__item">
<h3 class="additional-products__item-title">питьевая вода</h3>
<dl class="additional-products__item-description">
<dt class="additional-products__item-size">5 литров</dt>
<dd class="additional-products__item-price">50&nbsp;&#8381;</dd>
</dl>
<a class="additional-products__button button" href="#">Заказать</a>
<a class="additional-products__button button" href="./order.html">Заказать</a>
</li>
<li class="additional-products__item">
<h3 class="additional-products__item-title">молоко</h3>
<dl class="additional-products__item-description">
<dt class="additional-products__item-size">1 литр</dt>
<dd class="additional-products__item-price">100&nbsp;&#8381;</dd>
</dl>
<a class="additional-products__button button" href="#">Заказать</a>
<a class="additional-products__button button" href="./order.html">Заказать</a>
</li>
<li class="additional-products__item">
<h3 class="additional-products__item-title">витамины</h3>
<dl class="additional-products__item-description">
<dt class="additional-products__item-size">1 упаковка (30 г)</dt>
<dd class="additional-products__item-price">300&nbsp;&#8381;</dd>
</dl>
<a class="additional-products__button button" href="#">Заказать</a>
<a class="additional-products__button button" href="./order.html">Заказать</a>
</li>
</ul>
<div class="additional-products__banner">
Expand All @@ -349,8 +348,8 @@ <h2 class="subscription__title">Акции и новинки</h2>
</form>
</div>
</section>
<section class="contacts" data-test="contacts">
<div class="contacts__wrapper contacts__wrapper--inner">
<section class="contacts contacts--inner" data-test="contacts">
<div class="contacts__wrapper">
<div class="contacts__content">
<h2 class="contacts__title">Приглашаем<br>к сотрудничеству дилеров!</h2>
<address class="contacts__address address">
Expand Down Expand Up @@ -387,15 +386,14 @@ <h2 class="contacts__title">Приглашаем<br>к сотрудничест
<h2 class="visually-hidden">Давайте дружить!</h2>
<ul class="social__list">
<li class="social__item">
<a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy">Мы в Вконтакте</a>
<a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy"><span class="visually-hidden">Мы в Вконтакте</span></a>
</li>
<li class="social__item">
<a class="social__link social__link--youtube" href="https://www.youtube.com/user/htmlacademyru">Мы в Ютубе</a>
<a class="social__link social__link--youtube" href="https://www.youtube.com/user/htmlacademyru"><span class="visually-hidden">Мы в Ютубе</span></a>
</li>
<li class="social__item">
<a class="social__link social__link--telegram" href="https://t.me/htmlacademy">Мы в Телеграме</a>
<a class="social__link social__link--telegram" href="https://t.me/htmlacademy"><span class="visually-hidden">Мы в Телеграме</span></a>
</li>

</ul>
</div>
<div class="footer__designed-by designed-by">
Expand All @@ -409,6 +407,7 @@ <h2 class="visually-hidden">Давайте дружить!</h2>
</div>
</div>
</footer>
<script src="scripts/index.js" defer></script>
</body>

</html>
0 source/images/[email protected] → ...e/images/[email protected]
View file
File renamed without changes
0 source/images/[email protected] → .../images/[email protected]
View file
File renamed without changes.
0 source/images/[email protected] → ...e/images/[email protected]
View file
File renamed without changes
0 source/images/[email protected] → .../images/[email protected]
View file
File renamed without changes.
23 changes: 12 additions & 11 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
<title>Cat Energy: Функциональное питание для котов</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>
<link rel="icon" href="favicon.ico">
<link rel="icon" href="favicons/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="favicons/apple.png">
Expand Down Expand Up @@ -76,12 +75,13 @@ <h2 class="visually-hidden">Варианты рациона для Кота</h2>
<li class="diets__item diets__item--weight-loss">
<h3 class="diets__title">Похудение</h3>
<p class="diets__description">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p>
<a class="diets__link" href="#">Каталог slim</a>
<a class="diets__link" href="./catalog.html">Каталог slim</a>
</li>

<li class="diets__item diets__item--weight-gain">
<h3 class="diets__title">Набор массы</h3>
<p class="diets__description">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p>
<a class="diets__link" href="#">Каталог pro</a>
<a class="diets__link" href="./catalog.html">Каталог pro</a>
</li>
</ul>
</section>
Expand All @@ -99,7 +99,7 @@ <h2 class="benefits__title">Как это работает</h2>
<p class="benefits__description">Замените один-два приема обычной еды на наше функциональное питание.</p>
</li>
<li class="benefits__item benefits__item--time">
<p class="benefits__description">Уже через месяц наслаждайтесь изменениями к лучшему&nbsp; вашего питомца!</p>
<p class="benefits__description">Уже через месяц наслаждайтесь изменениями к лучшему&nbsp;&nbsp; вашего питомца!</p>
</li>
</ul>
</div>
Expand Down Expand Up @@ -128,15 +128,15 @@ <h2 class="example__title">Живой пример</h2>
</div>
<div class="example__slider slider">
<picture>
<source type="image/webp" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
<source type="image/webp" srcset="images/[email protected] 1x, images/[email protected] 2x">
<source width="560" height="512" type="image/webp" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
<source width="560" height="512" type="image/webp" srcset="images/[email protected] 1x, images/[email protected] 2x">

<source width="560" height="512" type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
<img class="slider__image slider__image--before" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="256" alt="Изображение кота до программы снижения веса.">
</picture>
<picture>
<source type="image/webp" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
<source type="image/webp" srcset="images/[email protected] 1x, images/[email protected] 2x">
<source width="560" height="512" type="image/webp" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
<source width="560" height="512" type="image/webp" srcset="images/[email protected] 1x, images/[email protected] 2x">

<source width="560" height="512" type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
<img class="slider__image slider__image--after" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="256" alt="Изображение кота после программы снижения веса.">
Expand Down Expand Up @@ -185,13 +185,13 @@ <h2 class="contacts__title">Приглашаем<br>к сотрудничест
<h2 class="visually-hidden">Давайте дружить!</h2>
<ul class="social__list">
<li class="social__item">
<a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy">Мы в Вконтакте</a>
<a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy"><span class="visually-hidden">Мы в Вконтакте</span></a>
</li>
<li class="social__item">
<a class="social__link social__link--youtube" href="https://www.youtube.com/user/htmlacademyru">Мы в Ютубе</a>
<a class="social__link social__link--youtube" href="https://www.youtube.com/user/htmlacademyru"><span class="visually-hidden">Мы в Ютубе</span></a>
</li>
<li class="social__item">
<a class="social__link social__link--telegram" href="https://t.me/htmlacademy">Мы в Телеграме</a>
<a class="social__link social__link--telegram" href="https://t.me/htmlacademy"><span class="visually-hidden">Мы в Телеграме</span></a>
</li>
</ul>
</div>
Expand All @@ -206,6 +206,7 @@ <h2 class="visually-hidden">Давайте дружить!</h2>
</div>
</div>
</footer>
<script src="scripts/index.js" defer></script>
</body>

</html>
20 changes: 17 additions & 3 deletions source/styles/blocks/additional-products.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,20 +297,34 @@
right: 0;
z-index: -1;
min-height: 290px;
background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background@1x.png");
background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background-mobile@1x.webp");
background-repeat: no-repeat;
background-size: cover, cover;
background-position: center center;

@media (min-width: $tablet-width) {
min-height: 200px;
background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background-tablet@1x.png");
background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background-tablet@1x.webp");
}

@media (min-width: $desktop-width) {
width: 245px;
min-height: 288px;
background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/[email protected]");
background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/[email protected]");
}
}

@media (min-resolution: 2x) {
.additional-products__banner::before {
background: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/[email protected]");

@media (min-width: $tablet-width) {
background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/[email protected]");
}

@media (min-width: $desktop-width) {
background: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/[email protected]");
}
}
}

Expand Down
18 changes: 14 additions & 4 deletions source/styles/blocks/benefits.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,16 @@

@media (min-width: $tablet-width) {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 37px 60px;
}

@media (min-width: $desktop-width) {
display: flex;
flex-flow: row nowrap;
grid-template-columns: repeat(4, 1fr);
gap: 37px 79px;
// display: flex;
// flex-flow: row wrap;
//gap: 37px 79px;
}
}

Expand All @@ -81,7 +83,8 @@
}

@media (min-width: $desktop-width) {
min-width: 246px;
min-width: 230px;
max-width: 250px;
padding-right: 0;
}
}
Expand Down Expand Up @@ -146,6 +149,13 @@
}
}

.benefits__item:nth-child(3)::after,
.benefits__item:nth-child(4)::after {
@media (min-width: $desktop-width) {
left: 114px;
}
}

.benefits__description {
margin: 2px 5px 0 80px;

Expand Down
2 changes: 0 additions & 2 deletions source/styles/blocks/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@

&:focus {
background-color: $bg-basic-green-2;
outline: none;
}

&:hover {
Expand All @@ -38,7 +37,6 @@

&:focus {
background-color: $bg-special-grey-4;
outline: none;
}

&:hover {
Expand Down
8 changes: 0 additions & 8 deletions source/styles/blocks/card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,6 @@ $card-top-offset: 81px;
place-self: start center;
align-content: center;

&:focus {
outline: none;
}

@media (min-width: $tablet-width) {
height: 210px;
}
Expand Down Expand Up @@ -92,10 +88,6 @@ $card-top-offset: 81px;
text-decoration: none;
text-transform: uppercase;

&:focus {
outline: none;
}

@media (min-width: $tablet-width) {
font-size: 20px;
line-height: 24px;
Expand Down
Loading

0 comments on commit 5f997c6

Please sign in to comment.