Skip to content

Commit ad04631

Browse files
author
Andy Chau
committed
Section 5 designs
1 parent 890e7fb commit ad04631

File tree

3 files changed

+318
-6
lines changed

3 files changed

+318
-6
lines changed

‎README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,18 @@ Use starter code to start each section, and **final code to compare it with your
5959
### Q13: Do you accept pull requests?
6060

6161
**A:** No, for the simple reason that I want this repository to contain the _exact_ same code that is shown in the videos. However, please feel free to add an issue if you found one.
62+
63+
# Resources
64+
65+
## Fonts
66+
67+
- https://fonts.google.com
68+
69+
## Color tools
70+
71+
- (Open Color)[https://yeun.github.io/open-color/]
72+
- (Coolors)[https://coolors.co/]
73+
74+
## Icons
75+
76+
- (Hero icons)[https://heroicons.com/]

‎starter/05-Design/index.html

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
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+
/>
814
<link rel="stylesheet" href="style.css" />
915
<title>Lisbon Chair Shop</title>
1016
</head>
@@ -27,6 +33,20 @@ <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+
stroke-width="2"
43+
>
44+
<path
45+
stroke-linecap="round"
46+
stroke-linejoin="round"
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">
3252
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
@@ -35,6 +55,20 @@ <h2>What makes our chairs special</h2>
3555
</div>
3656

3757
<div>
58+
<svg
59+
xmlns="http://www.w3.org/2000/svg"
60+
class="features-icon"
61+
fill="none"
62+
viewBox="0 0 24 24"
63+
stroke="currentColor"
64+
stroke-width="2"
65+
>
66+
<path
67+
stroke-linecap="round"
68+
stroke-linejoin="round"
69+
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"
70+
/>
71+
</svg>
3872
<p class="features-title">
3973
<strong>Maximal comfort</strong>
4074
</p>
@@ -45,6 +79,20 @@ <h2>What makes our chairs special</h2>
4579
</div>
4680

4781
<div>
82+
<svg
83+
xmlns="http://www.w3.org/2000/svg"
84+
class="features-icon"
85+
fill="none"
86+
viewBox="0 0 24 24"
87+
stroke="currentColor"
88+
stroke-width="2"
89+
>
90+
<path
91+
stroke-linecap="round"
92+
stroke-linejoin="round"
93+
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"
94+
/>
95+
</svg>
4896
<p class="features-title">
4997
<strong>Ethical and sustainable</strong>
5098
</p>
@@ -81,15 +129,71 @@ <h3>The Laid Back</h3>
81129
<ul class="chair-details">
82130
<li>
83131
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
132+
<svg
133+
xmlns="http://www.w3.org/2000/svg"
134+
class="chair-icon"
135+
fill="none"
136+
viewBox="0 0 24 24"
137+
stroke="currentColor"
138+
stroke-width="2"
139+
>
140+
<path
141+
stroke-linecap="round"
142+
stroke-linejoin="round"
143+
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"
144+
/>
145+
</svg>
84146
<span>Leisure and relaxing</span>
85147
</li>
86148
<li>
149+
<svg
150+
xmlns="http://www.w3.org/2000/svg"
151+
class="chair-icon"
152+
fill="none"
153+
viewBox="0 0 24 24"
154+
stroke="currentColor"
155+
stroke-width="2"
156+
>
157+
<path
158+
stroke-linecap="round"
159+
stroke-linejoin="round"
160+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
161+
/>
162+
</svg>
87163
<span>Comfortable for 4h</span>
88164
</li>
89165
<li>
166+
<svg
167+
xmlns="http://www.w3.org/2000/svg"
168+
class="chair-icon"
169+
fill="none"
170+
viewBox="0 0 24 24"
171+
stroke="currentColor"
172+
stroke-width="2"
173+
>
174+
<path
175+
stroke-linecap="round"
176+
stroke-linejoin="round"
177+
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"
178+
/>
179+
</svg>
90180
<span>Vegan leather</span>
91181
</li>
92182
<li>
183+
<svg
184+
xmlns="http://www.w3.org/2000/svg"
185+
class="chair-icon"
186+
fill="none"
187+
viewBox="0 0 24 24"
188+
stroke="currentColor"
189+
stroke-width="2"
190+
>
191+
<path
192+
stroke-linecap="round"
193+
stroke-linejoin="round"
194+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
195+
/>
196+
</svg>
93197
<span>Weighs 16 kg</span>
94198
</li>
95199
</ul>
@@ -106,15 +210,71 @@ <h3>The Laid Back</h3>
106210
<h3>The Worker Bee</h3>
107211
<ul class="chair-details">
108212
<li>
213+
<svg
214+
xmlns="http://www.w3.org/2000/svg"
215+
class="chair-icon"
216+
fill="none"
217+
viewBox="0 0 24 24"
218+
stroke="currentColor"
219+
stroke-width="2"
220+
>
221+
<path
222+
stroke-linecap="round"
223+
stroke-linejoin="round"
224+
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"
225+
/>
226+
</svg>
109227
<span>Work</span>
110228
</li>
111229
<li>
230+
<svg
231+
xmlns="http://www.w3.org/2000/svg"
232+
class="chair-icon"
233+
fill="none"
234+
viewBox="0 0 24 24"
235+
stroke="currentColor"
236+
stroke-width="2"
237+
>
238+
<path
239+
stroke-linecap="round"
240+
stroke-linejoin="round"
241+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
242+
/>
243+
</svg>
112244
<span>Comfortable for 8h</span>
113245
</li>
114246
<li>
247+
<svg
248+
xmlns="http://www.w3.org/2000/svg"
249+
class="chair-icon"
250+
fill="none"
251+
viewBox="0 0 24 24"
252+
stroke="currentColor"
253+
stroke-width="2"
254+
>
255+
<path
256+
stroke-linecap="round"
257+
stroke-linejoin="round"
258+
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"
259+
/>
260+
</svg>
115261
<span>Vegan leather</span>
116262
</li>
117263
<li>
264+
<svg
265+
xmlns="http://www.w3.org/2000/svg"
266+
class="chair-icon"
267+
fill="none"
268+
viewBox="0 0 24 24"
269+
stroke="currentColor"
270+
stroke-width="2"
271+
>
272+
<path
273+
stroke-linecap="round"
274+
stroke-linejoin="round"
275+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
276+
/>
277+
</svg>
118278
<span>Weighs 22 kg</span>
119279
</li>
120280
</ul>
@@ -131,15 +291,71 @@ <h3>The Worker Bee</h3>
131291
<h3>The Chair 4/2</h3>
132292
<ul class="chair-details">
133293
<li>
294+
<svg
295+
xmlns="http://www.w3.org/2000/svg"
296+
class="chair-icon"
297+
fill="none"
298+
viewBox="0 0 24 24"
299+
stroke="currentColor"
300+
stroke-width="2"
301+
>
302+
<path
303+
stroke-linecap="round"
304+
stroke-linejoin="round"
305+
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"
306+
/>
307+
</svg>
134308
<span>Leisure and relaxing</span>
135309
</li>
136310
<li>
311+
<svg
312+
xmlns="http://www.w3.org/2000/svg"
313+
class="chair-icon"
314+
fill="none"
315+
viewBox="0 0 24 24"
316+
stroke="currentColor"
317+
stroke-width="2"
318+
>
319+
<path
320+
stroke-linecap="round"
321+
stroke-linejoin="round"
322+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
323+
/>
324+
</svg>
137325
<span>Comfortable all day!</span>
138326
</li>
139327
<li>
328+
<svg
329+
xmlns="http://www.w3.org/2000/svg"
330+
class="chair-icon"
331+
fill="none"
332+
viewBox="0 0 24 24"
333+
stroke="currentColor"
334+
stroke-width="2"
335+
>
336+
<path
337+
stroke-linecap="round"
338+
stroke-linejoin="round"
339+
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"
340+
/>
341+
</svg>
140342
<span>Organic cotton</span>
141343
</li>
142344
<li>
345+
<svg
346+
xmlns="http://www.w3.org/2000/svg"
347+
class="chair-icon"
348+
fill="none"
349+
viewBox="0 0 24 24"
350+
stroke="currentColor"
351+
stroke-width="2"
352+
>
353+
<path
354+
stroke-linecap="round"
355+
stroke-linejoin="round"
356+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
357+
/>
358+
</svg>
143359
<span>Weighs 80 kg</span>
144360
</li>
145361
</ul>

0 commit comments

Comments
 (0)