Skip to content

Commit 48d2529

Browse files
Nadix92Nadix92
committed
border radius finished
1 parent 06ef3e5 commit 48d2529

File tree

2 files changed

+307
-16
lines changed

2 files changed

+307
-16
lines changed

‎starter/05-Design/index.html

Lines changed: 228 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77

8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
815
<link rel="stylesheet" href="style.css" />
916
<title>Lisbon Chair Shop</title>
1017
</head>
@@ -14,9 +21,8 @@
1421
<div class="header-text-box">
1522
<h1>We design and build better chairs, for a better life</h1>
1623
<p class="header-text">
17-
In a small shop in the heart of Lisbon, we spend our days
18-
relentlessly perfecting the chair. The result is a perfect blend of
19-
beauty and comfort, that will have a lasting impact on your health.
24+
In a small shop in the heart of Lisbon, we spend our days relentlessly perfecting the chair. The
25+
result is a perfect blend of beauty and comfort, that will have a lasting impact on your health.
2026
</p>
2127
<a class="btn btn--big" href="#">Shop chairs</a>
2228
</div>
@@ -27,30 +33,71 @@ <h1>We design and build better chairs, for a better life</h1>
2733
<h2>What makes our chairs special</h2>
2834
<div class="grid-3-cols">
2935
<div>
36+
<svg
37+
xmlns="http://www.w3.org/2000/svg"
38+
class="features-icon"
39+
fill="none"
40+
viewBox="0 0 24 24"
41+
stroke="currentColor"
42+
>
43+
<path
44+
stroke-linecap="round"
45+
stroke-linejoin="round"
46+
stroke-width="2"
47+
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
48+
/>
49+
</svg>
3050
<p class="features-title"><strong>Science meets design</strong></p>
3151
<p class="features-text">
32-
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
33-
similique adipisci praesentium.
52+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus similique adipisci praesentium.
3453
</p>
3554
</div>
3655

3756
<div>
57+
<svg
58+
xmlns="http://www.w3.org/2000/svg"
59+
class="features-icon"
60+
fill="none"
61+
viewBox="0 0 24 24"
62+
stroke="currentColor"
63+
>
64+
<path
65+
stroke-linecap="round"
66+
stroke-linejoin="round"
67+
stroke-width="2"
68+
d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
69+
/>
70+
</svg>
3871
<p class="features-title">
3972
<strong>Maximal comfort</strong>
4073
</p>
4174
<p class="features-text">
42-
Reprehenderit optio placeat quasi excepturi architecto, explicabo
43-
facilis perspiciatis error maxime magnam.
75+
Reprehenderit optio placeat quasi excepturi architecto, explicabo facilis perspiciatis error
76+
maxime magnam.
4477
</p>
4578
</div>
4679

4780
<div>
81+
<svg
82+
xmlns="http://www.w3.org/2000/svg"
83+
class="features-icon"
84+
fill="none"
85+
viewBox="0 0 24 24"
86+
stroke="currentColor"
87+
>
88+
<path
89+
stroke-linecap="round"
90+
stroke-linejoin="round"
91+
stroke-width="2"
92+
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
93+
/>
94+
</svg>
4895
<p class="features-title">
4996
<strong>Ethical and sustainable</strong>
5097
</p>
5198
<p class="features-text">
52-
Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat
53-
omnis est laudantium voluptatem voluptas!
99+
Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat omnis est laudantium voluptatem
100+
voluptas!
54101
</p>
55102
</div>
56103
</div>
@@ -62,9 +109,8 @@ <h2>What makes our chairs special</h2>
62109
<div class="testimonial-box">
63110
<h2>"We couldn't live without these chairs anymore"</h2>
64111
<blockquote class="testimonial-text">
65-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
66-
repellat at, nesciunt quia cum minima ipsum culpa totam sapiente
67-
recusandae earum debitis doloribus in quasi voluptatibus!
112+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat at, nesciunt quia cum
113+
minima ipsum culpa totam sapiente recusandae earum debitis doloribus in quasi voluptatibus!
68114
</blockquote>
69115
<p class="testimonial-author">&mdash; Mary and Sarah Johnson</p>
70116
</div>
@@ -80,16 +126,72 @@ <h2>Our bestselling chairs</h2>
80126
<h3>The Laid Back</h3>
81127
<ul class="chair-details">
82128
<li>
129+
<svg
130+
xmlns="http://www.w3.org/2000/svg"
131+
class="chair-icon"
132+
fill="none"
133+
viewBox="0 0 24 24"
134+
stroke="currentColor"
135+
>
136+
<path
137+
stroke-linecap="round"
138+
stroke-linejoin="round"
139+
stroke-width="2"
140+
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
141+
/>
142+
</svg>
83143
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
84144
<span>Leisure and relaxing</span>
85145
</li>
86146
<li>
147+
<svg
148+
xmlns="http://www.w3.org/2000/svg"
149+
class="chair-icon"
150+
fill="none"
151+
viewBox="0 0 24 24"
152+
stroke="currentColor"
153+
>
154+
<path
155+
stroke-linecap="round"
156+
stroke-linejoin="round"
157+
stroke-width="2"
158+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
159+
/>
160+
</svg>
87161
<span>Comfortable for 4h</span>
88162
</li>
89163
<li>
164+
<svg
165+
xmlns="http://www.w3.org/2000/svg"
166+
class="chair-icon"
167+
fill="none"
168+
viewBox="0 0 24 24"
169+
stroke="currentColor"
170+
>
171+
<path
172+
stroke-linecap="round"
173+
stroke-linejoin="round"
174+
stroke-width="2"
175+
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
176+
/>
177+
</svg>
90178
<span>Vegan leather</span>
91179
</li>
92180
<li>
181+
<svg
182+
xmlns="http://www.w3.org/2000/svg"
183+
class="chair-icon"
184+
fill="none"
185+
viewBox="0 0 24 24"
186+
stroke="currentColor"
187+
>
188+
<path
189+
stroke-linecap="round"
190+
stroke-linejoin="round"
191+
stroke-width="2"
192+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
193+
/>
194+
</svg>
93195
<span>Weighs 16 kg</span>
94196
</li>
95197
</ul>
@@ -106,15 +208,71 @@ <h3>The Laid Back</h3>
106208
<h3>The Worker Bee</h3>
107209
<ul class="chair-details">
108210
<li>
211+
<svg
212+
xmlns="http://www.w3.org/2000/svg"
213+
class="chair-icon"
214+
fill="none"
215+
viewBox="0 0 24 24"
216+
stroke="currentColor"
217+
>
218+
<path
219+
stroke-linecap="round"
220+
stroke-linejoin="round"
221+
stroke-width="2"
222+
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
223+
/>
224+
</svg>
109225
<span>Work</span>
110226
</li>
111227
<li>
228+
<svg
229+
xmlns="http://www.w3.org/2000/svg"
230+
class="chair-icon"
231+
fill="none"
232+
viewBox="0 0 24 24"
233+
stroke="currentColor"
234+
>
235+
<path
236+
stroke-linecap="round"
237+
stroke-linejoin="round"
238+
stroke-width="2"
239+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
240+
/>
241+
</svg>
112242
<span>Comfortable for 8h</span>
113243
</li>
114244
<li>
245+
<svg
246+
xmlns="http://www.w3.org/2000/svg"
247+
class="chair-icon"
248+
fill="none"
249+
viewBox="0 0 24 24"
250+
stroke="currentColor"
251+
>
252+
<path
253+
stroke-linecap="round"
254+
stroke-linejoin="round"
255+
stroke-width="2"
256+
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
257+
/>
258+
</svg>
115259
<span>Vegan leather</span>
116260
</li>
117261
<li>
262+
<svg
263+
xmlns="http://www.w3.org/2000/svg"
264+
class="chair-icon"
265+
fill="none"
266+
viewBox="0 0 24 24"
267+
stroke="currentColor"
268+
>
269+
<path
270+
stroke-linecap="round"
271+
stroke-linejoin="round"
272+
stroke-width="2"
273+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
274+
/>
275+
</svg>
118276
<span>Weighs 22 kg</span>
119277
</li>
120278
</ul>
@@ -131,15 +289,71 @@ <h3>The Worker Bee</h3>
131289
<h3>The Chair 4/2</h3>
132290
<ul class="chair-details">
133291
<li>
292+
<svg
293+
xmlns="http://www.w3.org/2000/svg"
294+
class="chair-icon"
295+
fill="none"
296+
viewBox="0 0 24 24"
297+
stroke="currentColor"
298+
>
299+
<path
300+
stroke-linecap="round"
301+
stroke-linejoin="round"
302+
stroke-width="2"
303+
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
304+
/>
305+
</svg>
134306
<span>Leisure and relaxing</span>
135307
</li>
136308
<li>
309+
<svg
310+
xmlns="http://www.w3.org/2000/svg"
311+
class="chair-icon"
312+
fill="none"
313+
viewBox="0 0 24 24"
314+
stroke="currentColor"
315+
>
316+
<path
317+
stroke-linecap="round"
318+
stroke-linejoin="round"
319+
stroke-width="2"
320+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
321+
/>
322+
</svg>
137323
<span>Comfortable all day!</span>
138324
</li>
139325
<li>
326+
<svg
327+
xmlns="http://www.w3.org/2000/svg"
328+
class="chair-icon"
329+
fill="none"
330+
viewBox="0 0 24 24"
331+
stroke="currentColor"
332+
>
333+
<path
334+
stroke-linecap="round"
335+
stroke-linejoin="round"
336+
stroke-width="2"
337+
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
338+
/>
339+
</svg>
140340
<span>Organic cotton</span>
141341
</li>
142342
<li>
343+
<svg
344+
xmlns="http://www.w3.org/2000/svg"
345+
class="chair-icon"
346+
fill="none"
347+
viewBox="0 0 24 24"
348+
stroke="currentColor"
349+
>
350+
<path
351+
stroke-linecap="round"
352+
stroke-linejoin="round"
353+
stroke-width="2"
354+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
355+
/>
356+
</svg>
143357
<span>Weighs 80 kg</span>
144358
</li>
145359
</ul>
@@ -153,9 +367,8 @@ <h3>The Chair 4/2</h3>
153367
</section>
154368

155369
<footer>
156-
Copyright &copy; 2027 by Jonas Schmedtmann. Part of "Build Responsive
157-
Real-World Websites with HTML and CSS" online course. Use for learning
158-
purposes only.
370+
Copyright &copy; 2027 by Jonas Schmedtmann. Part of "Build Responsive Real-World Websites with HTML
371+
and CSS" online course. Use for learning purposes only.
159372
</footer>
160373
</div>
161374
</body>

0 commit comments

Comments
 (0)