Skip to content

Commit 60d54e7

Browse files
DimaKhUkrDimaKhUkr
committed
hw3-alfa
1 parent 9dc9b13 commit 60d54e7

File tree

3 files changed

+60
-26
lines changed

3 files changed

+60
-26
lines changed

‎css/styles.css

+40-6
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,9 @@ p {
103103
.header .header-link:hover {
104104
color: var(--alt-text-color);
105105
}
106+
.header {
107+
border-bottom: 1px solid #ececec;
108+
}
106109

107110
/* ** Main ** */
108111
.section-title,
@@ -170,13 +173,15 @@ p {
170173
}
171174
.features-list {
172175
display: flex;
176+
justify-content: space-between;
173177
}
174178
.features-item {
175-
width: calc(100% -3 * 30px) / 4;
179+
width: calc((100% - 3 * 30px) / 4);
176180
}
177-
.features-item:not(:last-child) {
181+
/* .features-item:not(:last-child) {
178182
margin-right: 30px;
179-
}
183+
} */
184+
180185
/* Works */
181186
.works-title {
182187
margin-bottom: 50px;
@@ -185,6 +190,16 @@ p {
185190
display: flex;
186191
justify-content: space-between;
187192
}
193+
/* .works-item {
194+
width: calc((100% - 60 px) / 3);
195+
}
196+
.works-item + .works-item {
197+
margin-left: 30px;
198+
} */
199+
200+
.works-item > img {
201+
display: block;
202+
}
188203
/* Team */
189204
.team {
190205
background-color: var(--alt-background-color);
@@ -209,6 +224,7 @@ p {
209224
}
210225

211226
.team .team-item {
227+
/* width: calc((100% - 90px) / 4); */
212228
padding-bottom: 30px;
213229
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14),
214230
0px 2px 1px rgba(0, 0, 0, 0.2);
@@ -219,6 +235,11 @@ p {
219235
display: flex;
220236
justify-content: space-between;
221237
}
238+
239+
/* .team .team-item:not(:last-child) {
240+
margin-right: 30px;
241+
} */
242+
222243
/* ** Portfolio Main ** */
223244

224245
.examples-button {
@@ -241,22 +262,24 @@ p {
241262
background-color: var(--alt-text-color);
242263
}
243264
.examples .title {
265+
padding-left: 24px;
244266
margin-bottom: 4px;
245267
font-size: 18px;
246268
line-height: 2;
247269
letter-spacing: 0.06em;
248270
}
249271
.examples-type {
272+
padding-left: 24px;
250273
font-size: 16px;
251274
line-height: 1.88;
252275
}
253276

254277
.example-images {
255-
margin-bottom: 20px;
278+
display: block;
256279
}
257-
.example-cards li {
280+
/* .example-cards li {
258281
padding-bottom: 20px;
259-
}
282+
} */
260283
.example-list {
261284
display: flex;
262285
justify-content: center;
@@ -281,6 +304,13 @@ p {
281304
margin-bottom: 30px;
282305
}
283306

307+
.examle-description {
308+
padding-top: 20px;
309+
padding-bottom: 20px;
310+
border-bottom: 1px solid #eeeeee;
311+
border-right: 1px solid #eeeeee;
312+
border-left: 1px solid #eeeeee;
313+
}
284314
/* ** Footer ** */
285315
.down {
286316
background-color: var(--dark-background-color);
@@ -311,3 +341,7 @@ section.section,
311341
padding-top: 94px;
312342
padding-bottom: 94px;
313343
}
344+
345+
.hidden {
346+
display: none;
347+
}

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ <h1 class="hero-title">
6363
</section>
6464
<section class="section">
6565
<div class="container">
66-
<h2 class="section-title">Переваги</h2>
66+
<h2 class="section-title hidden">Переваги</h2>
6767
<ul class="list features-list">
6868
<li class="features-item">
6969
<h3 class="title features-title">УВАГА ДО ДЕТАЛЕЙ</h3>

‎portfolio.html

+19-19
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
</header>
5757
<main>
5858
<section class="examples section"><div class="container">
59-
<h2 class="section-title">Приклади робіт</h2>
59+
<h2 class="section-title hidden">Приклади робіт </h2>
6060
<ul class="list example-list">
6161
<li class="button-item"><button type="button" class="examples-button">Усі</button></li>
6262
<li class="button-item">
@@ -81,8 +81,8 @@ <h2 class="section-title">Приклади робіт</h2>
8181
width="370"
8282
class="example-images"
8383
/>
84-
<h3 class="title">Технокряк</h3>
85-
<p class="examples-type">Веб-сайт</p>
84+
<div class="examle-description"><h3 class="title">Технокряк</h3>
85+
<p class="examples-type">Веб-сайт</p></div>
8686
</a></li>
8787
<li class="example-item" ><a href="" class="link"
8888
>
@@ -92,8 +92,8 @@ <h3 class="title">Технокряк</h3>
9292
width="370"
9393
class="example-images"
9494
/>
95-
<h3 class="title">Постер New Orlean vs Golden Star</h3>
96-
<p class="examples-type">Дизайн</p>
95+
<div class="examle-description"><h3 class="title">Постер New Orlean vs Golden Star</h3>
96+
<p class="examples-type">Дизайн</p></div>
9797
</a></li>
9898
<li class="example-item" ><a href="" class="link"
9999
>
@@ -103,8 +103,8 @@ <h3 class="title">Постер New Orlean vs Golden Star</h3>
103103
width="370"
104104
class="example-images"
105105
/>
106-
<h3 class="title">Ресторан Seafood</h3>
107-
<p class="examples-type">Додаток</p>
106+
<div class="examle-description"><h3 class="title">Ресторан Seafood</h3>
107+
<p class="examples-type">Додаток</p></div>
108108
</a></li>
109109
<li class="example-item" ><a href="" class="link"
110110
>
@@ -114,8 +114,8 @@ <h3 class="title">Ресторан Seafood</h3>
114114
width="370"
115115
class="example-images"
116116
/>
117-
<h3 class="title">Проєкт Prime</h3>
118-
<p class="examples-type">Маркетинг</p>
117+
<div class="examle-description"><h3 class="title">Проєкт Prime</h3>
118+
<p class="examples-type">Маркетинг</p></div>
119119
</a></li>
120120
<li class="example-item" ><a href="" class="link"
121121
>
@@ -125,8 +125,8 @@ <h3 class="title">Проєкт Prime</h3>
125125
width="370"
126126
class="example-images"
127127
/>
128-
<h3 class="title">Проєкт Boxes</h3>
129-
<p class="examples-type">Додаток</p>
128+
<div class="examle-description"><h3 class="title">Проєкт Boxes</h3>
129+
<p class="examples-type">Додаток</p></div>
130130
</a></li>
131131
<li class="example-item" ><a href="" class="link"
132132
>
@@ -136,8 +136,8 @@ <h3 class="title">Проєкт Boxes</h3>
136136
width="370"
137137
class="example-images"
138138
/>
139-
<h3 class="title">Inspiration has no Borders</h3>
140-
<p class="examples-type">Веб-сайт</p>
139+
<div class="examle-description"><h3 class="title">Inspiration has no Borders</h3>
140+
<p class="examples-type">Веб-сайт</p></div>
141141
</a></li>
142142
<li class="example-item" ><a href="" class="link"
143143
>
@@ -147,8 +147,8 @@ <h3 class="title">Inspiration has no Borders</h3>
147147
width="370"
148148
class="example-images"
149149
/>
150-
<h3 class="title">Видання Limited Edition</h3>
151-
<p class="examples-type">Дизайн</p>
150+
<div class="examle-description"><h3 class="title">Видання Limited Edition</h3>
151+
<p class="examples-type">Дизайн</p></div>
152152
</a></li>
153153
<li class="example-item" ><a href="" class="link"
154154
>
@@ -158,8 +158,8 @@ <h3 class="title">Видання Limited Edition</h3>
158158
width="370"
159159
class="example-images"
160160
/>
161-
<h3 class="title">Проєкт LAB</h3>
162-
<p class="examples-type">Маркетинг</p>
161+
<div class="examle-description"><h3 class="title">Проєкт LAB</h3>
162+
<p class="examples-type">Маркетинг</p></div>
163163
</a></li>
164164
<li class="example-item" ><a href="" class="link"
165165
>
@@ -169,8 +169,8 @@ <h3 class="title">Проєкт LAB</h3>
169169
width="370"
170170
class="example-images"
171171
/>
172-
<h3 class="title">Growing Business</h3>
173-
<p class="examples-type">Додаток</p>
172+
<div class="examle-description"><h3 class="title">Growing Business</h3>
173+
<p class="examples-type">Додаток</p></div>
174174
</a></li>
175175
</ul>
176176
</div></section>

0 commit comments

Comments
 (0)