Skip to content

Commit 24a8a2b

Browse files
jrandjjrandj
committed
Add progress for section 5
1 parent accb13b commit 24a8a2b

File tree

2 files changed

+262
-0
lines changed

2 files changed

+262
-0
lines changed

‎attempt/05-Design/index.html

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,21 @@ <h1>We design and build better chairs, for a better life</h1>
3232
<h2>What makes our chairs special</h2>
3333
<div class="grid-3-cols">
3434
<div>
35+
<svg
36+
xmlns="http://www.w3.org/2000/svg"
37+
fill="none"
38+
viewBox="0 0 24 24"
39+
stroke-width="1.5"
40+
stroke="currentColor"
41+
class="features-icon"
42+
>
43+
<path
44+
stroke-linecap="round"
45+
stroke-linejoin="round"
46+
d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
47+
/>
48+
</svg>
49+
3550
<p class="features-title"><strong>Science meets design</strong></p>
3651
<p class="features-text">
3752
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
@@ -40,6 +55,21 @@ <h2>What makes our chairs special</h2>
4055
</div>
4156

4257
<div>
58+
<svg
59+
xmlns="http://www.w3.org/2000/svg"
60+
fill="none"
61+
viewBox="0 0 24 24"
62+
stroke-width="1.5"
63+
stroke="currentColor"
64+
class="features-icon"
65+
>
66+
<path
67+
stroke-linecap="round"
68+
stroke-linejoin="round"
69+
d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
70+
/>
71+
</svg>
72+
4373
<p class="features-title">
4474
<strong>Maximal comfort</strong>
4575
</p>
@@ -50,6 +80,21 @@ <h2>What makes our chairs special</h2>
5080
</div>
5181

5282
<div>
83+
<svg
84+
xmlns="http://www.w3.org/2000/svg"
85+
fill="none"
86+
viewBox="0 0 24 24"
87+
stroke-width="1.5"
88+
stroke="currentColor"
89+
class="features-icon"
90+
>
91+
<path
92+
stroke-linecap="round"
93+
stroke-linejoin="round"
94+
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
95+
/>
96+
</svg>
97+
5398
<p class="features-title">
5499
<strong>Ethical and sustainable</strong>
55100
</p>
@@ -85,16 +130,73 @@ <h2>Our bestselling chairs</h2>
85130
<h3>The Laid Back</h3>
86131
<ul class="chair-details">
87132
<li>
133+
<svg
134+
xmlns="http://www.w3.org/2000/svg"
135+
fill="none"
136+
viewBox="0 0 24 24"
137+
stroke-width="1.5"
138+
stroke="currentColor"
139+
class="chair-icon"
140+
>
141+
<path
142+
stroke-linecap="round"
143+
stroke-linejoin="round"
144+
d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
145+
/>
146+
</svg>
88147
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
89148
<span>Leisure and relaxing</span>
90149
</li>
91150
<li>
151+
<svg
152+
xmlns="http://www.w3.org/2000/svg"
153+
fill="none"
154+
viewBox="0 0 24 24"
155+
stroke-width="1.5"
156+
stroke="currentColor"
157+
class="chair-icon"
158+
>
159+
<path
160+
stroke-linecap="round"
161+
stroke-linejoin="round"
162+
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
163+
/>
164+
</svg>
92165
<span>Comfortable for 4h</span>
93166
</li>
94167
<li>
168+
<svg
169+
xmlns="http://www.w3.org/2000/svg"
170+
fill="none"
171+
viewBox="0 0 24 24"
172+
stroke-width="1.5"
173+
stroke="currentColor"
174+
class="chair-icon"
175+
>
176+
<path
177+
stroke-linecap="round"
178+
stroke-linejoin="round"
179+
d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 0 0-8.862 12.872M12.75 3.031a9 9 0 0 1 6.69 14.036m0 0-.177-.529A2.25 2.25 0 0 0 17.128 15H16.5l-.324-.324a1.453 1.453 0 0 0-2.328.377l-.036.073a1.586 1.586 0 0 1-.982.816l-.99.282c-.55.157-.894.702-.8 1.267l.073.438c.08.474.49.821.97.821.846 0 1.598.542 1.865 1.345l.215.643m5.276-3.67a9.012 9.012 0 0 1-5.276 3.67m0 0a9 9 0 0 1-10.275-4.835M15.75 9c0 .896-.393 1.7-1.016 2.25"
180+
/>
181+
</svg>
95182
<span>Vegan leather</span>
96183
</li>
97184
<li>
185+
<svg
186+
xmlns="http://www.w3.org/2000/svg"
187+
fill="none"
188+
viewBox="0 0 24 24"
189+
stroke-width="1.5"
190+
stroke="currentColor"
191+
class="chair-icon"
192+
>
193+
<path
194+
stroke-linecap="round"
195+
stroke-linejoin="round"
196+
d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
197+
/>
198+
</svg>
199+
98200
<span>Weighs 16 kg</span>
99201
</li>
100202
</ul>
@@ -111,15 +213,71 @@ <h3>The Laid Back</h3>
111213
<h3>The Worker Bee</h3>
112214
<ul class="chair-details">
113215
<li>
216+
<svg
217+
xmlns="http://www.w3.org/2000/svg"
218+
fill="none"
219+
viewBox="0 0 24 24"
220+
stroke-width="1.5"
221+
stroke="currentColor"
222+
class="chair-icon"
223+
>
224+
<path
225+
stroke-linecap="round"
226+
stroke-linejoin="round"
227+
d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
228+
/>
229+
</svg>
114230
<span>Work</span>
115231
</li>
116232
<li>
233+
<svg
234+
xmlns="http://www.w3.org/2000/svg"
235+
fill="none"
236+
viewBox="0 0 24 24"
237+
stroke-width="1.5"
238+
stroke="currentColor"
239+
class="chair-icon"
240+
>
241+
<path
242+
stroke-linecap="round"
243+
stroke-linejoin="round"
244+
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
245+
/>
246+
</svg>
117247
<span>Comfortable for 8h</span>
118248
</li>
119249
<li>
250+
<svg
251+
xmlns="http://www.w3.org/2000/svg"
252+
fill="none"
253+
viewBox="0 0 24 24"
254+
stroke-width="1.5"
255+
stroke="currentColor"
256+
class="chair-icon"
257+
>
258+
<path
259+
stroke-linecap="round"
260+
stroke-linejoin="round"
261+
d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 0 0-8.862 12.872M12.75 3.031a9 9 0 0 1 6.69 14.036m0 0-.177-.529A2.25 2.25 0 0 0 17.128 15H16.5l-.324-.324a1.453 1.453 0 0 0-2.328.377l-.036.073a1.586 1.586 0 0 1-.982.816l-.99.282c-.55.157-.894.702-.8 1.267l.073.438c.08.474.49.821.97.821.846 0 1.598.542 1.865 1.345l.215.643m5.276-3.67a9.012 9.012 0 0 1-5.276 3.67m0 0a9 9 0 0 1-10.275-4.835M15.75 9c0 .896-.393 1.7-1.016 2.25"
262+
/>
263+
</svg>
120264
<span>Vegan leather</span>
121265
</li>
122266
<li>
267+
<svg
268+
xmlns="http://www.w3.org/2000/svg"
269+
fill="none"
270+
viewBox="0 0 24 24"
271+
stroke-width="1.5"
272+
stroke="currentColor"
273+
class="chair-icon"
274+
>
275+
<path
276+
stroke-linecap="round"
277+
stroke-linejoin="round"
278+
d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
279+
/>
280+
</svg>
123281
<span>Weighs 22 kg</span>
124282
</li>
125283
</ul>
@@ -136,15 +294,71 @@ <h3>The Worker Bee</h3>
136294
<h3>The Chair 4/2</h3>
137295
<ul class="chair-details">
138296
<li>
297+
<svg
298+
xmlns="http://www.w3.org/2000/svg"
299+
fill="none"
300+
viewBox="0 0 24 24"
301+
stroke-width="1.5"
302+
stroke="currentColor"
303+
class="chair-icon"
304+
>
305+
<path
306+
stroke-linecap="round"
307+
stroke-linejoin="round"
308+
d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
309+
/>
310+
</svg>
139311
<span>Leisure and relaxing</span>
140312
</li>
141313
<li>
314+
<svg
315+
xmlns="http://www.w3.org/2000/svg"
316+
fill="none"
317+
viewBox="0 0 24 24"
318+
stroke-width="1.5"
319+
stroke="currentColor"
320+
class="chair-icon"
321+
>
322+
<path
323+
stroke-linecap="round"
324+
stroke-linejoin="round"
325+
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
326+
/>
327+
</svg>
142328
<span>Comfortable all day!</span>
143329
</li>
144330
<li>
331+
<svg
332+
xmlns="http://www.w3.org/2000/svg"
333+
fill="none"
334+
viewBox="0 0 24 24"
335+
stroke-width="1.5"
336+
stroke="currentColor"
337+
class="chair-icon"
338+
>
339+
<path
340+
stroke-linecap="round"
341+
stroke-linejoin="round"
342+
d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 0 0-8.862 12.872M12.75 3.031a9 9 0 0 1 6.69 14.036m0 0-.177-.529A2.25 2.25 0 0 0 17.128 15H16.5l-.324-.324a1.453 1.453 0 0 0-2.328.377l-.036.073a1.586 1.586 0 0 1-.982.816l-.99.282c-.55.157-.894.702-.8 1.267l.073.438c.08.474.49.821.97.821.846 0 1.598.542 1.865 1.345l.215.643m5.276-3.67a9.012 9.012 0 0 1-5.276 3.67m0 0a9 9 0 0 1-10.275-4.835M15.75 9c0 .896-.393 1.7-1.016 2.25"
343+
/>
344+
</svg>
145345
<span>Organic cotton</span>
146346
</li>
147347
<li>
348+
<svg
349+
xmlns="http://www.w3.org/2000/svg"
350+
fill="none"
351+
viewBox="0 0 24 24"
352+
stroke-width="1.5"
353+
stroke="currentColor"
354+
class="chair-icon"
355+
>
356+
<path
357+
stroke-linecap="round"
358+
stroke-linejoin="round"
359+
d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
360+
/>
361+
</svg>
148362
<span>Weighs 80 kg</span>
149363
</li>
150364
</ul>

‎attempt/05-Design/style.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ FONT SIZE SYSTEM (px)
66
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
77
*/
88

9+
/*
10+
MAIN COLOUR: #087f5b
11+
GREY COLOUR: #343a40
12+
*/
13+
914
* {
1015
margin: 0;
1116
padding: 0;
@@ -19,6 +24,8 @@ body {
1924
font-family: "Inter", sans-serif;
2025
font-size: 18px;
2126
line-height: 1.6;
27+
color: #343a40;
28+
border-bottom: 8px solid #087f5b;
2229
}
2330

2431
.container {
@@ -43,6 +50,31 @@ h2 {
4350
column-gap: 80px;
4451
}
4552

53+
.btn:link,
54+
btn:visited {
55+
background-color: #087f5b;
56+
color: #fff;
57+
text-decoration: none;
58+
text-transform: uppercase;
59+
60+
display: inline-block;
61+
font-weight: 500;
62+
}
63+
64+
.btn:hover,
65+
.btn:active {
66+
background-color: #099268;
67+
}
68+
69+
.btn--big {
70+
font-size: 18px;
71+
padding: 16px 32px;
72+
}
73+
.btn--small {
74+
font-size: 14px;
75+
padding: 8px 12px;
76+
}
77+
4678
/* ------------------------ */
4779
/* COMPONENT STYLES */
4880
/* ------------------------ */
@@ -64,6 +96,7 @@ h1 {
6496
font-size: 44px;
6597
line-height: 1.1;
6698
letter-spacing: -1px;
99+
/* text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); */
67100
}
68101

69102
.header-text {
@@ -76,6 +109,10 @@ img {
76109

77110
/* FEATURES */
78111
.features-icon {
112+
stroke: #087f5b;
113+
width: 32px;
114+
height: 32px;
115+
margin-bottom: 16px;
79116
}
80117

81118
.features-title {
@@ -91,6 +128,9 @@ img {
91128

92129
/* TESTIMONIAL */
93130
.testimonial-section {
131+
background-color: #087f5b;
132+
color: #fff;
133+
padding: 24px;
94134
}
95135

96136
.testimonial-box {
@@ -111,6 +151,10 @@ img {
111151
}
112152

113153
/* CHAIRS */
154+
.chair {
155+
box-shadow: 0px 20px 30px 0px rgb(0, 0, 0, 0.07);
156+
}
157+
114158
.chair-box {
115159
padding: 24px;
116160
}
@@ -137,6 +181,9 @@ h3 {
137181
}
138182

139183
.chair-icon {
184+
stroke: #087f5b;
185+
width: 24px;
186+
height: 24px;
140187
}
141188

142189
.chair-price {
@@ -148,4 +195,5 @@ h3 {
148195
footer {
149196
margin-bottom: 48px;
150197
font-size: 14px;
198+
color: #495057;
151199
}

0 commit comments

Comments
 (0)