Skip to content

Commit 43ef4ca

Browse files
cndoit18cndoit18
committed
finish design
1 parent 2d7137c commit 43ef4ca

File tree

2 files changed

+306
-8
lines changed

2 files changed

+306
-8
lines changed

‎starter/05-Design/index.html‎

Lines changed: 221 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
11+
rel="stylesheet"
12+
/>
813
<link rel="stylesheet" href="style.css" />
914
<title>Lisbon Chair Shop</title>
1015
</head>
@@ -27,6 +32,21 @@ <h1>We design and build better chairs, for a better life</h1>
2732
<h2>What makes our chairs special</h2>
2833
<div class="grid-3-cols">
2934
<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 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.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 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 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+
3050
<p class="features-title"><strong>Science meets design</strong></p>
3151
<p class="features-text">
3252
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
@@ -35,6 +55,21 @@ <h2>What makes our chairs special</h2>
3555
</div>
3656

3757
<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 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 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+
3873
<p class="features-title">
3974
<strong>Maximal comfort</strong>
4075
</p>
@@ -45,6 +80,21 @@ <h2>What makes our chairs special</h2>
4580
</div>
4681

4782
<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+
4898
<p class="features-title">
4999
<strong>Ethical and sustainable</strong>
50100
</p>
@@ -80,16 +130,74 @@ <h2>Our bestselling chairs</h2>
80130
<h3>The Laid Back</h3>
81131
<ul class="chair-details">
82132
<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.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
145+
/>
146+
</svg>
83147
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
84148
<span>Leisure and relaxing</span>
85149
</li>
86150
<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 11-18 0 9 9 0 0118 0z"
163+
/>
164+
</svg>
165+
87166
<span>Comfortable for 4h</span>
88167
</li>
89168
<li>
169+
<svg
170+
xmlns="http://www.w3.org/2000/svg"
171+
fill="none"
172+
viewBox="0 0 24 24"
173+
stroke-width="1.5"
174+
stroke="currentColor"
175+
class="chair-icon"
176+
>
177+
<path
178+
stroke-linecap="round"
179+
stroke-linejoin="round"
180+
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 01-1.161.886l-.143.048a1.107 1.107 0 00-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 01-1.652.928l-.679-.906a1.125 1.125 0 00-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 00-8.862 12.872M12.75 3.031a9 9 0 016.69 14.036m0 0l-.177-.529A2.25 2.25 0 0017.128 15H16.5l-.324-.324a1.453 1.453 0 00-2.328.377l-.036.073a1.586 1.586 0 01-.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 01-5.276 3.67m0 0a9 9 0 01-10.275-4.835M15.75 9c0 .896-.393 1.7-1.016 2.25"
181+
/>
182+
</svg>
183+
90184
<span>Vegan leather</span>
91185
</li>
92186
<li>
187+
<svg
188+
xmlns="http://www.w3.org/2000/svg"
189+
fill="none"
190+
viewBox="0 0 24 24"
191+
stroke-width="1.5"
192+
stroke="currentColor"
193+
class="chair-icon"
194+
>
195+
<path
196+
stroke-linecap="round"
197+
stroke-linejoin="round"
198+
d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
199+
/>
200+
</svg>
93201
<span>Weighs 16 kg</span>
94202
</li>
95203
</ul>
@@ -106,15 +214,71 @@ <h3>The Laid Back</h3>
106214
<h3>The Worker Bee</h3>
107215
<ul class="chair-details">
108216
<li>
217+
<svg
218+
xmlns="http://www.w3.org/2000/svg"
219+
fill="none"
220+
viewBox="0 0 24 24"
221+
stroke-width="1.5"
222+
stroke="currentColor"
223+
class="chair-icon"
224+
>
225+
<path
226+
stroke-linecap="round"
227+
stroke-linejoin="round"
228+
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
229+
/>
230+
</svg>
109231
<span>Work</span>
110232
</li>
111233
<li>
234+
<svg
235+
xmlns="http://www.w3.org/2000/svg"
236+
fill="none"
237+
viewBox="0 0 24 24"
238+
stroke-width="1.5"
239+
stroke="currentColor"
240+
class="chair-icon"
241+
>
242+
<path
243+
stroke-linecap="round"
244+
stroke-linejoin="round"
245+
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
246+
/>
247+
</svg>
112248
<span>Comfortable for 8h</span>
113249
</li>
114250
<li>
251+
<svg
252+
xmlns="http://www.w3.org/2000/svg"
253+
fill="none"
254+
viewBox="0 0 24 24"
255+
stroke-width="1.5"
256+
stroke="currentColor"
257+
class="chair-icon"
258+
>
259+
<path
260+
stroke-linecap="round"
261+
stroke-linejoin="round"
262+
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 01-1.161.886l-.143.048a1.107 1.107 0 00-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 01-1.652.928l-.679-.906a1.125 1.125 0 00-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 00-8.862 12.872M12.75 3.031a9 9 0 016.69 14.036m0 0l-.177-.529A2.25 2.25 0 0017.128 15H16.5l-.324-.324a1.453 1.453 0 00-2.328.377l-.036.073a1.586 1.586 0 01-.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 01-5.276 3.67m0 0a9 9 0 01-10.275-4.835M15.75 9c0 .896-.393 1.7-1.016 2.25"
263+
/>
264+
</svg>
115265
<span>Vegan leather</span>
116266
</li>
117267
<li>
268+
<svg
269+
xmlns="http://www.w3.org/2000/svg"
270+
fill="none"
271+
viewBox="0 0 24 24"
272+
stroke-width="1.5"
273+
stroke="currentColor"
274+
class="chair-icon"
275+
>
276+
<path
277+
stroke-linecap="round"
278+
stroke-linejoin="round"
279+
d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
280+
/>
281+
</svg>
118282
<span>Weighs 22 kg</span>
119283
</li>
120284
</ul>
@@ -131,15 +295,71 @@ <h3>The Worker Bee</h3>
131295
<h3>The Chair 4/2</h3>
132296
<ul class="chair-details">
133297
<li>
298+
<svg
299+
xmlns="http://www.w3.org/2000/svg"
300+
fill="none"
301+
viewBox="0 0 24 24"
302+
stroke-width="1.5"
303+
stroke="currentColor"
304+
class="chair-icon"
305+
>
306+
<path
307+
stroke-linecap="round"
308+
stroke-linejoin="round"
309+
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
310+
/>
311+
</svg>
134312
<span>Leisure and relaxing</span>
135313
</li>
136314
<li>
315+
<svg
316+
xmlns="http://www.w3.org/2000/svg"
317+
fill="none"
318+
viewBox="0 0 24 24"
319+
stroke-width="1.5"
320+
stroke="currentColor"
321+
class="chair-icon"
322+
>
323+
<path
324+
stroke-linecap="round"
325+
stroke-linejoin="round"
326+
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
327+
/>
328+
</svg>
137329
<span>Comfortable all day!</span>
138330
</li>
139331
<li>
332+
<svg
333+
xmlns="http://www.w3.org/2000/svg"
334+
fill="none"
335+
viewBox="0 0 24 24"
336+
stroke-width="1.5"
337+
stroke="currentColor"
338+
class="chair-icon"
339+
>
340+
<path
341+
stroke-linecap="round"
342+
stroke-linejoin="round"
343+
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 01-1.161.886l-.143.048a1.107 1.107 0 00-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 01-1.652.928l-.679-.906a1.125 1.125 0 00-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 00-8.862 12.872M12.75 3.031a9 9 0 016.69 14.036m0 0l-.177-.529A2.25 2.25 0 0017.128 15H16.5l-.324-.324a1.453 1.453 0 00-2.328.377l-.036.073a1.586 1.586 0 01-.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 01-5.276 3.67m0 0a9 9 0 01-10.275-4.835M15.75 9c0 .896-.393 1.7-1.016 2.25"
344+
/>
345+
</svg>
140346
<span>Organic cotton</span>
141347
</li>
142348
<li>
349+
<svg
350+
xmlns="http://www.w3.org/2000/svg"
351+
fill="none"
352+
viewBox="0 0 24 24"
353+
stroke-width="1.5"
354+
stroke="currentColor"
355+
class="chair-icon"
356+
>
357+
<path
358+
stroke-linecap="round"
359+
stroke-linejoin="round"
360+
d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
361+
/>
362+
</svg>
143363
<span>Weighs 80 kg</span>
144364
</li>
145365
</ul>

0 commit comments

Comments
 (0)