Skip to content

Commit 94a52e6

Browse files
andreituicuandreituicu
committed
Section 5 - Web Design Rules and Framework
1 parent 914d1a8 commit 94a52e6

11 files changed

+315
-7
lines changed

‎slides/05-Design/1-Web-Design-Ingredients.png

2.49 MB
Loading

‎slides/05-Design/2.1-Website Personality - Confident.png

2.69 MB
Loading

‎slides/05-Design/2.1-Website Personality - Elegant.png

1.67 MB
Loading

‎slides/05-Design/2.1-Website Personality - Minimalist.png

1.5 MB
Loading

‎slides/05-Design/2.1-Website Personality - Neutral.png

2.52 MB
Loading

‎slides/05-Design/2.1-Website Personality - Peaceful.png

1.01 MB
Loading

‎slides/05-Design/2.1-Website Personality - Playful.png

1.06 MB
Loading

‎slides/05-Design/2.1-Website Personality - Startup.png

965 KB
Loading

‎slides/05-Design/4. Color Significance.png

1.28 MB
Loading

‎starter/05-Design/index.html

Lines changed: 224 additions & 0 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>
@@ -27,6 +34,21 @@ <h1>We design and build better chairs, for a better life</h1>
2734
<h2>What makes our chairs special</h2>
2835
<div class="grid-3-cols">
2936
<div>
37+
<svg
38+
xmlns="http://www.w3.org/2000/svg"
39+
fill="none"
40+
viewBox="0 0 24 24"
41+
stroke-width="2"
42+
stroke="currentColor"
43+
class="features-icon"
44+
>
45+
<path
46+
stroke-linecap="round"
47+
stroke-linejoin="round"
48+
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"
49+
/>
50+
</svg>
51+
3052
<p class="features-title"><strong>Science meets design</strong></p>
3153
<p class="features-text">
3254
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
@@ -35,6 +57,21 @@ <h2>What makes our chairs special</h2>
3557
</div>
3658

3759
<div>
60+
<svg
61+
xmlns="http://www.w3.org/2000/svg"
62+
fill="none"
63+
viewBox="0 0 24 24"
64+
stroke-width="2"
65+
stroke="currentColor"
66+
class="features-icon"
67+
>
68+
<path
69+
stroke-linecap="round"
70+
stroke-linejoin="round"
71+
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"
72+
/>
73+
</svg>
74+
3875
<p class="features-title">
3976
<strong>Maximal comfort</strong>
4077
</p>
@@ -45,6 +82,21 @@ <h2>What makes our chairs special</h2>
4582
</div>
4683

4784
<div>
85+
<svg
86+
xmlns="http://www.w3.org/2000/svg"
87+
fill="none"
88+
viewBox="0 0 24 24"
89+
stroke-width="2"
90+
stroke="currentColor"
91+
class="features-icon"
92+
>
93+
<path
94+
stroke-linecap="round"
95+
stroke-linejoin="round"
96+
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"
97+
/>
98+
</svg>
99+
48100
<p class="features-title">
49101
<strong>Ethical and sustainable</strong>
50102
</p>
@@ -80,16 +132,76 @@ <h2>Our bestselling chairs</h2>
80132
<h3>The Laid Back</h3>
81133
<ul class="chair-details">
82134
<li>
135+
<svg
136+
xmlns="http://www.w3.org/2000/svg"
137+
fill="none"
138+
viewBox="0 0 24 24"
139+
stroke-width="2"
140+
stroke="currentColor"
141+
class="chair-icon"
142+
>
143+
<path
144+
stroke-linecap="round"
145+
stroke-linejoin="round"
146+
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"
147+
/>
148+
</svg>
149+
83150
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
84151
<span>Leisure and relaxing</span>
85152
</li>
86153
<li>
154+
<svg
155+
xmlns="http://www.w3.org/2000/svg"
156+
fill="none"
157+
viewBox="0 0 24 24"
158+
stroke-width="2"
159+
stroke="currentColor"
160+
class="chair-icon"
161+
>
162+
<path
163+
stroke-linecap="round"
164+
stroke-linejoin="round"
165+
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
166+
/>
167+
</svg>
168+
87169
<span>Comfortable for 4h</span>
88170
</li>
89171
<li>
172+
<svg
173+
xmlns="http://www.w3.org/2000/svg"
174+
fill="none"
175+
viewBox="0 0 24 24"
176+
stroke-width="2"
177+
stroke="currentColor"
178+
class="chair-icon"
179+
>
180+
<path
181+
stroke-linecap="round"
182+
stroke-linejoin="round"
183+
d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"
184+
/>
185+
</svg>
186+
90187
<span>Vegan leather</span>
91188
</li>
92189
<li>
190+
<svg
191+
xmlns="http://www.w3.org/2000/svg"
192+
fill="none"
193+
viewBox="0 0 24 24"
194+
stroke-width="2"
195+
stroke="currentColor"
196+
class="chair-icon"
197+
>
198+
<path
199+
stroke-linecap="round"
200+
stroke-linejoin="round"
201+
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"
202+
/>
203+
</svg>
204+
93205
<span>Weighs 16 kg</span>
94206
</li>
95207
</ul>
@@ -106,15 +218,71 @@ <h3>The Laid Back</h3>
106218
<h3>The Worker Bee</h3>
107219
<ul class="chair-details">
108220
<li>
221+
<svg
222+
xmlns="http://www.w3.org/2000/svg"
223+
fill="none"
224+
viewBox="0 0 24 24"
225+
stroke-width="2"
226+
stroke="currentColor"
227+
class="chair-icon"
228+
>
229+
<path
230+
stroke-linecap="round"
231+
stroke-linejoin="round"
232+
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"
233+
/>
234+
</svg>
109235
<span>Work</span>
110236
</li>
111237
<li>
238+
<svg
239+
xmlns="http://www.w3.org/2000/svg"
240+
fill="none"
241+
viewBox="0 0 24 24"
242+
stroke-width="2"
243+
stroke="currentColor"
244+
class="chair-icon"
245+
>
246+
<path
247+
stroke-linecap="round"
248+
stroke-linejoin="round"
249+
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
250+
/>
251+
</svg>
112252
<span>Comfortable for 8h</span>
113253
</li>
114254
<li>
255+
<svg
256+
xmlns="http://www.w3.org/2000/svg"
257+
fill="none"
258+
viewBox="0 0 24 24"
259+
stroke-width="2"
260+
stroke="currentColor"
261+
class="chair-icon"
262+
>
263+
<path
264+
stroke-linecap="round"
265+
stroke-linejoin="round"
266+
d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"
267+
/>
268+
</svg>
115269
<span>Vegan leather</span>
116270
</li>
117271
<li>
272+
<svg
273+
xmlns="http://www.w3.org/2000/svg"
274+
fill="none"
275+
viewBox="0 0 24 24"
276+
stroke-width="2"
277+
stroke="currentColor"
278+
class="chair-icon"
279+
>
280+
<path
281+
stroke-linecap="round"
282+
stroke-linejoin="round"
283+
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"
284+
/>
285+
</svg>
118286
<span>Weighs 22 kg</span>
119287
</li>
120288
</ul>
@@ -131,15 +299,71 @@ <h3>The Worker Bee</h3>
131299
<h3>The Chair 4/2</h3>
132300
<ul class="chair-details">
133301
<li>
302+
<svg
303+
xmlns="http://www.w3.org/2000/svg"
304+
fill="none"
305+
viewBox="0 0 24 24"
306+
stroke-width="2"
307+
stroke="currentColor"
308+
class="chair-icon"
309+
>
310+
<path
311+
stroke-linecap="round"
312+
stroke-linejoin="round"
313+
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"
314+
/>
315+
</svg>
134316
<span>Leisure and relaxing</span>
135317
</li>
136318
<li>
319+
<svg
320+
xmlns="http://www.w3.org/2000/svg"
321+
fill="none"
322+
viewBox="0 0 24 24"
323+
stroke-width="2"
324+
stroke="currentColor"
325+
class="chair-icon"
326+
>
327+
<path
328+
stroke-linecap="round"
329+
stroke-linejoin="round"
330+
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
331+
/>
332+
</svg>
137333
<span>Comfortable all day!</span>
138334
</li>
139335
<li>
336+
<svg
337+
xmlns="http://www.w3.org/2000/svg"
338+
fill="none"
339+
viewBox="0 0 24 24"
340+
stroke-width="2"
341+
stroke="currentColor"
342+
class="chair-icon"
343+
>
344+
<path
345+
stroke-linecap="round"
346+
stroke-linejoin="round"
347+
d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"
348+
/>
349+
</svg>
140350
<span>Organic cotton</span>
141351
</li>
142352
<li>
353+
<svg
354+
xmlns="http://www.w3.org/2000/svg"
355+
fill="none"
356+
viewBox="0 0 24 24"
357+
stroke-width="2"
358+
stroke="currentColor"
359+
class="chair-icon"
360+
>
361+
<path
362+
stroke-linecap="round"
363+
stroke-linejoin="round"
364+
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"
365+
/>
366+
</svg>
143367
<span>Weighs 80 kg</span>
144368
</li>
145369
</ul>

0 commit comments

Comments
 (0)