Skip to content

Commit 56c916d

Browse files
Kate1jkeeKate1jkee
authored
Cat energy защита (#14)
* Правки на допуск * Правки на допуск * Правки на допуск * Правки на допуск * Исправления на допуск
1 parent ca81d92 commit 56c916d

27 files changed

+252
-166
lines changed

‎source/catalog.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
</picture>
3737
</a>
3838
<nav class="main-header__nav main-nav">
39+
<!-- Если JS выключен - модификатор nojs к main-nav -->
3940
<input class="main-nav__input visually-hidden" type="checkbox" id="main-nav-input" name="main-nav-input">
4041
<label class="main-nav__toggle" for="main-nav-input"></label>
4142
<ul class="main-nav__list">
@@ -58,8 +59,8 @@
5859
</nav>
5960
</header>
6061

61-
<main class="page__main">
62-
<section class="goods">
62+
<main class="page__main main">
63+
<section class="main__goods goods">
6364
<h1 class="goods__title">Каталог продукции</h1>
6465
<ul class="goods__list product-list">
6566
<li class="product-list__item product-card">
@@ -283,7 +284,7 @@ <h2 class="product-card__title product-card__title--special">Показать е
283284
</ul>
284285
</section>
285286

286-
<section class="extra-goods">
287+
<section class="main__extra-goods extra-goods">
287288
<h2 class="extra-goods__title">Дополнительные товары</h2>
288289
<div class="extra-goods__wrapper">
289290
<ul class="extra-goods__list extra-product-list">
@@ -334,7 +335,7 @@ <h3 class="extra-product-card__title">Витамины</h3>
334335
</div>
335336
</section>
336337

337-
<section class="promos-and-new">
338+
<section class="main__promos-and-new promos-and-new">
338339
<h2 class="promos-and-new__title">Акции и новинки</h2>
339340
<p class="promos-and-new__description">Подпишитесь на наши новости и не пропустите ни одного предложения!</p>
340341
<form class="promos-and-new__form form-block" action="https://echo.htmlacademy.ru/" method="post">

‎source/index.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
</picture>
3737
</a>
3838
<nav class="main-header__nav main-nav">
39+
<!-- Если JS выключен - модификатор nojs к main-nav -->
3940
<input class="main-nav__input visually-hidden" type="checkbox" id="main-nav-input" name="main-nav-input">
4041
<label class="main-nav__toggle" for="main-nav-input"></label>
4142
<ul class="main-nav__list main-nav__list--bg">
@@ -58,8 +59,8 @@
5859
</nav>
5960
</header>
6061

61-
<main class="page__main">
62-
<section class="nutrition-selector">
62+
<main class="page__main main">
63+
<section class="main__nutrition-selector nutrition-selector">
6364
<div class="nutrition-selector__wrapper">
6465
<div class="nutrition-selector__text">
6566
<h1 class="nutrition-selector__title">Функциональное
@@ -80,7 +81,7 @@ <h1 class="nutrition-selector__title">Функциональное
8081
</div>
8182
</section>
8283

83-
<section class="nutrition-programs">
84+
<section class="main__nutrition-programs nutrition-programs">
8485
<h2 class="visually-hidden">Программы питания</h2>
8586
<ul class="nutrition-programs__list offer-list">
8687
<li class="offer-list__item program-card program-card--slim-cat-outline">
@@ -96,7 +97,7 @@ <h3 class="program-card__title">Набор массы</h3>
9697
</ul>
9798
</section>
9899

99-
<section class="advantages">
100+
<section class="main__advantages advantages">
100101
<h2 class="advantages__title">Как это работает</h2>
101102
<ul class="advantages__list benefits">
102103
<li class="benefits__item benefits__item--useful">
@@ -120,7 +121,7 @@ <h2 class="advantages__title">Как это работает</h2>
120121
</ul>
121122
</section>
122123

123-
<section class="advertising-example">
124+
<section class="main__advertising-example advertising-example">
124125
<div class="advertising-example__wrapper">
125126
<h2 class="advertising-example__title">Живой пример</h2>
126127
<p class="advertising-example__description">Борис сбросил 5 кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.</p>
@@ -137,7 +138,7 @@ <h2 class="advertising-example__title">Живой пример</h2>
137138
</dl>
138139
<p class="advertising-example__subtitle">Затраты на питание: <span class="advertising-example__subtitle-value">15 000 РУБ.</span></p>
139140
</div>
140-
<div class=" advertising-example__slider slider">
141+
<div class="advertising-example__slider slider">
141142
<picture class="slider__left-image">
142143
<source type="image/webp" media="(min-width: 1200px)" srcset="images/fat-cat-slider-tablet@1x.webp 1x, images/fat-cat-slider-tablet@2x.webp 2x">
143144
<source type="image/webp" media="(min-width: 768px)" srcset="images/fat-cat-slider-tablet@1x.webp 1x, images/fat-cat-slider-tablet@2x.webp 2x">

‎source/styles/blocks/advantages.scss‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
.advantages {
22
min-width: 280px;
33
max-width: 280px;
4-
margin: 0 auto;
5-
padding: 20px 20px 49px;
64
}
75

86
@media (min-width: $tablet-width) {
97
.advantages {
108
min-width: 708px;
119
max-width: 708px;
12-
margin: 0 auto;
13-
padding: 45px 30px 0;
1410
border-bottom: 1px solid #e6e6e6;
1511
}
1612
}
@@ -19,8 +15,6 @@
1915
.advantages {
2016
min-width: 1220px;
2117
max-width: 1220px;
22-
margin: 0 auto;
23-
padding: 71px 60px 0;
2418
border: none;
2519
}
2620
}
@@ -41,3 +35,15 @@
4135
.advantages__list {
4236
@include list();
4337
}
38+
39+
@media (min-width: $tablet-width) {
40+
.advantages__list {
41+
margin-bottom: 47px;
42+
}
43+
}
44+
45+
@media (min-width: $desktop-width) {
46+
.advantages__list {
47+
margin-bottom: 0;
48+
}
49+
}

‎source/styles/blocks/advertising-example.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,3 +150,27 @@
150150
margin-left: 63px;
151151
}
152152
}
153+
154+
.advertising-example__list {
155+
margin-bottom: 10px;
156+
}
157+
158+
@media (min-width: $desktop-width) {
159+
.advertising-example__list {
160+
margin-bottom: 35px;
161+
}
162+
}
163+
164+
@media (min-width: $tablet-width) {
165+
.advertising-example__slider {
166+
margin: 0 auto;
167+
}
168+
}
169+
170+
@media (min-width: $desktop-width) {
171+
.advertising-example__slider {
172+
margin: 0;
173+
margin-bottom: 85px;
174+
margin-right: 60px;
175+
}
176+
}

‎source/styles/blocks/benefits.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,12 @@
44
flex-wrap: wrap;
55
gap: 37px 137px;
66
counter-reset: benefits__item 0;
7-
margin-bottom: 47px;
87
}
98
}
109

1110
@media (min-width: $desktop-width) {
1211
.benefits {
1312
gap: 77px;
14-
margin-bottom: 0;
1513
}
1614
}
1715

‎source/styles/blocks/contacts.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,19 @@
33
justify-content: space-between;
44
min-width: 280px;
55
max-width: 280px;
6-
margin: 0 auto;
7-
padding: 26px 20px;
86
}
97

108
@media (min-width: $tablet-width) {
119
.contacts {
1210
min-width: 628px;
1311
max-width: 628px;
14-
margin: 0 auto;
15-
padding: 60px 70px;
1612
}
1713
}
1814

1915
@media (min-width: $desktop-width) {
2016
.contacts {
2117
min-width: 407px;
2218
max-width: 407px;
23-
margin: 0;
24-
padding: 60px 78px 60px 80px;
2519
}
2620
}
2721

‎source/styles/blocks/definition-list.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
flex-wrap: wrap;
55
gap: 32px;
66
text-align: center;
7-
margin-bottom: 10px;
87
}
98

109
@media (min-width: $tablet-width) {
@@ -13,12 +12,6 @@
1312
}
1413
}
1514

16-
@media (min-width: $desktop-width) {
17-
.definition-list {
18-
margin-bottom: 35px;
19-
}
20-
}
21-
2215
.definition-list__description {
2316
@include font-text-secondary(24px, 24px, $color-text-dark);
2417
text-transform: uppercase;

‎source/styles/blocks/extra-goods.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
11
.extra-goods {
22
min-width: 280px;
33
max-width: 280px;
4-
margin: 0 auto;
5-
padding: 25px 20px 0;
64
}
75

86
@media (min-width: $tablet-width) {
97
.extra-goods {
108
min-width: 708px;
119
max-width: 708px;
12-
margin: 0 auto;
13-
padding: 0 30px;
1410
}
1511
}
1612

1713
@media (min-width: $desktop-width) {
1814
.extra-goods {
1915
min-width: 1220px;
2016
max-width: 1220px;
21-
margin: 0 auto;
22-
padding: 0 60px;
2317
}
2418
}
2519

‎source/styles/blocks/extra-product-card.scss‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.extra-product-card {
22
display: grid;
33
grid-template-columns: 140px 70px 70px;
4-
grid-template-rows: 29px 29px 55px;
4+
grid-template-rows: auto auto auto;
55
padding-top: 0;
66
padding-bottom: 14px;
77
border-bottom: 1px solid #ebebeb;
@@ -11,7 +11,7 @@
1111
@media (min-width: $tablet-width) {
1212
.extra-product-card {
1313
grid-template-columns: 285px 254px 91px;
14-
grid-template-rows: 10px 70px;
14+
grid-template-rows: auto 70px;
1515
padding-top: 26px;
1616
border-left: 1px solid #ebebeb;
1717
border-right: 1px solid #ebebeb;
@@ -22,10 +22,11 @@
2222
@media (min-width: $desktop-width) {
2323
.extra-product-card {
2424
grid-template-columns: 325px 243px 82px 244px;
25-
grid-template-rows: 69px;
25+
grid-template-rows: auto;
2626
padding: 0;
2727
border-left: none;
2828
border-right: none;
29+
min-height: 70px;
2930
}
3031
}
3132

@@ -38,8 +39,9 @@
3839

3940
@media (min-width: $tablet-width) {
4041
.extra-product-card__link {
41-
grid-column: 1/-1;
42+
grid-column: 1/2;
4243
grid-row: 1/2;
44+
margin-top: 0;
4345
}
4446
}
4547

@@ -83,22 +85,24 @@
8385
.extra-product-card__info {
8486
display: grid;
8587
grid-template-columns: 254px 91px;
86-
grid-template-rows: 20px;
87-
grid-column: 2/4;
88+
grid-template-rows: auto;
89+
grid-column: 2/auto;
8890
grid-row: 1/2;
8991
margin-top: auto;
9092
text-align: end;
93+
align-items: start;
9194
}
9295
}
9396

9497
@media (min-width: $desktop-width) {
9598
.extra-product-card__info {
9699
display: grid;
97100
grid-template-columns: 243px 82px;
98-
grid-template-rows: 70px;
101+
grid-template-rows: auto;
99102
grid-column: 2/4;
100103
grid-row: 1/-1;
101104
align-items: center;
105+
height: 100%;
102106
}
103107
}
104108

@@ -133,6 +137,7 @@
133137
@include font-text-primary(16px, 20px, $color-text-base);
134138
grid-column: 2/3;
135139
grid-row: 1/2;
140+
word-break: break-word;
136141
}
137142
}
138143

‎source/styles/blocks/extra-product-list.scss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,6 @@
22
@include list();
33
}
44

5-
/* --
6-
@media (min-width: $tablet-width) {
7-
.extra-product-list {
8-
border: none;
9-
}
10-
}
11-
-- */
12-
135
.extra-product-list__item {
146
padding-top: 20px;
157
padding-bottom: 25px;

0 commit comments

Comments
 (0)