Skip to content

Commit 1a5cdec

Browse files
keksobotkeksobot
authored
Merge pull request #4 from aleks-yustas/master
2 parents fdfe92d + 2270da4 commit 1a5cdec

File tree

7 files changed

+105
-71
lines changed

7 files changed

+105
-71
lines changed

‎source/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,13 @@ <h1 class="banner__title section-title section-title--contrast">Функцион
6161
<section class="page__modules page__centerer modules" data-test="programs">
6262
<h2 class="visually-hidden">Виды программ</h2>
6363
<ul class="modules__list">
64-
<li class="modules__item card">
65-
<h3 class="card__title card__title--slim">Похудение</h3>
64+
<li class="modules__item card card--slim">
65+
<h3 class="card__title">Похудение</h3>
6666
<p class="card__text">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p>
6767
<a class="card__link" href="#">Каталог Slim</a>
6868
</li>
69-
<li class="modules__item card">
70-
<h3 class="card__title card__title--pro">Набор массы</h3>
69+
<li class="modules__item card card--pro">
70+
<h3 class="card__title">Набор массы</h3>
7171
<p class="card__text">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p>
7272
<a class="card__link" href="#">Каталог Pro</a>
7373
</li>

‎source/styles/blocks/card.scss‎

Lines changed: 85 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
flex-direction: column;
66
justify-content: flex-start;
77
align-items: flex-start;
8-
padding: 24px 20px 0;
8+
padding: 30px 20px 22px;
99

1010
background-color: $bg-color-lighten;
1111

@@ -15,68 +15,39 @@
1515
}
1616

1717
@media (width >= #{$desktop-width}) {
18-
padding: 47px 50px 37px 52px;
19-
}
20-
}
21-
22-
.card__title {
23-
position: relative;
24-
25-
display: flex;
26-
justify-content: flex-start;
27-
align-items: center;
28-
29-
margin: 0 0 22px;
30-
font-family: $accent-font;
31-
font-weight: 400;
32-
font-size: 24px;
33-
line-height: 37px;
34-
text-transform: uppercase;
35-
color: $text-color-accent;
36-
37-
@media (#{$tablet-width} <= width < #{$desktop-width}) {
38-
position: static;
39-
}
40-
41-
@media (width >= #{$tablet-width}) {
42-
margin-bottom: 25px;
43-
44-
font-size: 36px;
45-
line-height: 36px;
46-
}
47-
48-
@media (width >= #{$desktop-width}) {
49-
margin-bottom: 40px;
18+
padding: 77px 50px 37px 52px;
5019
}
5120

5221
&::before {
5322
--module-card-icon-size: 50px;
5423

5524
content: "";
5625

57-
flex-shrink: 1;
26+
position: absolute;
27+
top: 24px;
28+
left: 20px;
29+
5830
display: block;
5931
width: var(--module-card-icon-size);
6032
height: var(--module-card-icon-size);
61-
margin-right: 18px;
6233
border-radius: 50%;
6334

6435
background-color: $bg-color-accent;
6536

66-
@media (#{$tablet-width} <= width < #{$desktop-width}) {
37+
@media (width >= #{$tablet-width}) {
6738
--module-card-icon-size: 200px;
6839

69-
position: absolute;
70-
top: 90px;
71-
right: 62px;
72-
73-
margin-right: 0;
40+
top: 92px;
41+
left: initial;
42+
right: 64px;
7443
}
7544

7645
@media (width >= #{$desktop-width}) {
7746
--module-card-icon-size: 100px;
7847

79-
margin-right: 62px;
48+
top: 47px;
49+
left: 53px;
50+
right: initial;
8051
}
8152
}
8253

@@ -94,24 +65,25 @@
9465
&--slim::after {
9566
--module-icon: url("../../icons/stack.svg#cat-slim");
9667

97-
top: -3px;
98-
left: 7px;
68+
top: 21px;
69+
left: 27px;
9970

10071
width: 36px;
10172
height: 50px;
10273

103-
@media (#{$tablet-width} <= width < #{$desktop-width}) {
74+
@media (width >= #{$tablet-width}) {
10475
top: 81px;
105-
right: 92px;
76+
right: 94px;
10677
left: initial;
10778

10879
width: 140px;
10980
height: 194px;
11081
}
11182

11283
@media (width >= #{$desktop-width}) {
113-
top: -6px;
114-
left: 15px;
84+
top: 41px;
85+
left: 68px;
86+
right: initial;
11587

11688
width: 70px;
11789
height: 97px;
@@ -121,8 +93,8 @@
12193
&--pro::after {
12294
--module-icon: url("../../icons/stack.svg#cat-pro");
12395

124-
top: 11px;
125-
left: -10px;
96+
top: 35px;
97+
left: 12px;
12698

12799
width: 67px;
128100
height: 28px;
@@ -137,21 +109,73 @@
137109
}
138110

139111
@media (width >= #{$desktop-width}) {
140-
top: 20px;
141-
left: -19px;
112+
top: 67px;
113+
left: 34px;
114+
right: initial;
142115

143116
width: 134px;
144117
height: 56px;
145118
}
146119
}
147120
}
148121

122+
.card__title {
123+
margin: 0 0 29px;
124+
padding-left: 71px;
125+
126+
font-family: $accent-font;
127+
font-weight: 400;
128+
font-size: 24px;
129+
line-height: 37px;
130+
text-transform: uppercase;
131+
color: $text-color-accent;
132+
133+
@media (width >= #{$tablet-width}) {
134+
margin-bottom: 25px;
135+
padding-left: 0;
136+
137+
font-size: 36px;
138+
line-height: 36px;
139+
}
140+
141+
@media (width >= #{$desktop-width}) {
142+
margin-bottom: 74px;
143+
padding-left: 162px;
144+
}
145+
}
146+
149147
.card__text {
148+
position: relative;
149+
150150
margin: 0 0 22px;
151151

152152
font-family: $main-font;
153153
color: $text-color-main;
154154

155+
&:not(:last-of-type) {
156+
margin-bottom: 1em;
157+
}
158+
159+
&:last-of-type {
160+
margin-bottom: 42px;
161+
}
162+
163+
@media (width < #{$tablet-width}) {
164+
&:last-of-type::after {
165+
content: "";
166+
position: absolute;
167+
left: 0;
168+
right: 0;
169+
bottom: -23px;
170+
171+
display: block;
172+
width: 100%;
173+
height: 1px;
174+
175+
background-color: $border-color-dark;
176+
}
177+
}
178+
155179
@media (#{$tablet-width} <= width < #{$desktop-width}) {
156180
margin-bottom: 33px;
157181
}
@@ -162,12 +186,12 @@
162186
}
163187

164188
.card__link {
165-
align-self: flex-start;
166-
display: flex;
189+
display: grid;
190+
grid-template-columns: auto 32px;
191+
justify-content: start;
167192
align-items: center;
168-
width: 100%;
169-
padding: 19px 0 22px;
170-
border-top: 1px solid $border-color-dark;
193+
gap: 15px;
194+
width: fit-content;
171195

172196
font-family: $accent-font;
173197
font-weight: 400;
@@ -187,6 +211,10 @@
187211
line-height: 30px;
188212
}
189213

214+
@media (width >= #{$desktop-width}) {
215+
gap: 25px;
216+
}
217+
190218
&:active {
191219
opacity: 0.3;
192220
}
@@ -197,15 +225,10 @@
197225
display: block;
198226
width: 32px;
199227
height: 11px;
200-
margin-left: 15px;
201228

202229
background: $text-color-accent;
203230
mask: url("../../icons/stack.svg#arrow") no-repeat -8px center / 32px 11px;
204231
transition: 0.08s linear all;
205-
206-
@media (width >= #{$tablet-width}) {
207-
margin-left: 25px;
208-
}
209232
}
210233

211234
&:hover::after,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010

1111
@media (width >= #{$desktop-width}) {
12-
grid-template-columns: repeat(4, 1fr);
12+
grid-template-columns: repeat(4, 245px);
1313
gap: 73px 80px;
1414
}
1515
}

‎source/styles/blocks/form.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
@media (width >= #{$tablet-width}) {
99
grid-template-columns: 59.5% 1fr;
10+
grid-template-rows: minmax(56px, auto);
1011
gap: 0;
1112
}
1213

‎source/styles/blocks/page-title.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
}
1616

1717
@media (width >= #{$desktop-width}) {
18-
padding-top: 53px;
18+
padding-top: 43px;
1919
}
2020
}

‎source/styles/blocks/page.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@
4747

4848
.page__header {
4949
display: grid;
50-
grid-template-rows: 65px;
50+
grid-template-rows: minmax(65px, auto);
5151

5252
@media (width >= #{$tablet-width}) {
53-
grid-template-rows: 50px;
53+
grid-template-rows: minmax(50px, auto);
5454
}
5555

5656
@media (width >= #{$desktop-width}) {

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
}
1414

1515
.parameters-list__item {
16-
display: flex;
16+
display: grid;
17+
grid-template-columns: 50% 50%;
1718
justify-content: space-between;
1819
align-items: center;
1920
width: 100%;
@@ -55,3 +56,12 @@
5556
}
5657
}
5758
}
59+
60+
.parameters-list__name {
61+
text-align: left;
62+
}
63+
64+
.parameters-list__value {
65+
margin: 0;
66+
text-align: right;
67+
}

0 commit comments

Comments
 (0)