Skip to content

Commit fa8f12a

Browse files
author
Jim Aho
committed
Some changes
1 parent 10de6bc commit fa8f12a

File tree

2 files changed

+320
-8
lines changed

2 files changed

+320
-8
lines changed

‎starter/05-Design/index.html

Lines changed: 228 additions & 1 deletion
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,21 @@ <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+
fill="none"
39+
viewBox="0 0 24 24"
40+
stroke-width="1.5"
41+
stroke="currentColor"
42+
class="features-icon"
43+
>
44+
<path
45+
stroke-linecap="round"
46+
stroke-linejoin="round"
47+
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"
48+
/>
49+
</svg>
50+
3051
<p class="features-title"><strong>Science meets design</strong></p>
3152
<p class="features-text">
3253
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
@@ -35,6 +56,21 @@ <h2>What makes our chairs special</h2>
3556
</div>
3657

3758
<div>
59+
<svg
60+
xmlns="http://www.w3.org/2000/svg"
61+
fill="none"
62+
viewBox="0 0 24 24"
63+
stroke-width="1.5"
64+
stroke="currentColor"
65+
class="features-icon"
66+
>
67+
<path
68+
stroke-linecap="round"
69+
stroke-linejoin="round"
70+
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"
71+
/>
72+
</svg>
73+
3874
<p class="features-title">
3975
<strong>Maximal comfort</strong>
4076
</p>
@@ -45,6 +81,21 @@ <h2>What makes our chairs special</h2>
4581
</div>
4682

4783
<div>
84+
<svg
85+
xmlns="http://www.w3.org/2000/svg"
86+
fill="none"
87+
viewBox="0 0 24 24"
88+
stroke-width="1.5"
89+
stroke="currentColor"
90+
class="features-icon"
91+
>
92+
<path
93+
stroke-linecap="round"
94+
stroke-linejoin="round"
95+
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"
96+
/>
97+
</svg>
98+
4899
<p class="features-title">
49100
<strong>Ethical and sustainable</strong>
50101
</p>
@@ -58,7 +109,11 @@ <h2>What makes our chairs special</h2>
58109

59110
<section class="testimonial-section">
60111
<div class="grid-3-cols">
61-
<img src="customers.jpg" alt="People sitting on chairs" />
112+
<img
113+
class="testimonial-img"
114+
src="customers.jpg"
115+
alt="People sitting on chairs"
116+
/>
62117
<div class="testimonial-box">
63118
<h2>"We couldn't live without these chairs anymore"</h2>
64119
<blockquote class="testimonial-text">
@@ -80,16 +135,76 @@ <h2>Our bestselling chairs</h2>
80135
<h3>The Laid Back</h3>
81136
<ul class="chair-details">
82137
<li>
138+
<svg
139+
xmlns="http://www.w3.org/2000/svg"
140+
fill="none"
141+
viewBox="0 0 24 24"
142+
stroke-width="1.5"
143+
stroke="currentColor"
144+
class="chair-icon"
145+
>
146+
<path
147+
stroke-linecap="round"
148+
stroke-linejoin="round"
149+
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"
150+
/>
151+
</svg>
152+
83153
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
84154
<span>Leisure and relaxing</span>
85155
</li>
86156
<li>
157+
<svg
158+
xmlns="http://www.w3.org/2000/svg"
159+
fill="none"
160+
viewBox="0 0 24 24"
161+
stroke-width="1.5"
162+
stroke="currentColor"
163+
class="chair-icon"
164+
>
165+
<path
166+
stroke-linecap="round"
167+
stroke-linejoin="round"
168+
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
169+
/>
170+
</svg>
171+
87172
<span>Comfortable for 4h</span>
88173
</li>
89174
<li>
175+
<svg
176+
xmlns="http://www.w3.org/2000/svg"
177+
fill="none"
178+
viewBox="0 0 24 24"
179+
stroke-width="1.5"
180+
stroke="currentColor"
181+
class="chair-icon"
182+
>
183+
<path
184+
stroke-linecap="round"
185+
stroke-linejoin="round"
186+
d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
187+
/>
188+
</svg>
189+
90190
<span>Vegan leather</span>
91191
</li>
92192
<li>
193+
<svg
194+
xmlns="http://www.w3.org/2000/svg"
195+
fill="none"
196+
viewBox="0 0 24 24"
197+
stroke-width="1.5"
198+
stroke="currentColor"
199+
class="chair-icon"
200+
>
201+
<path
202+
stroke-linecap="round"
203+
stroke-linejoin="round"
204+
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"
205+
/>
206+
</svg>
207+
93208
<span>Weighs 16 kg</span>
94209
</li>
95210
</ul>
@@ -106,15 +221,71 @@ <h3>The Laid Back</h3>
106221
<h3>The Worker Bee</h3>
107222
<ul class="chair-details">
108223
<li>
224+
<svg
225+
xmlns="http://www.w3.org/2000/svg"
226+
fill="none"
227+
viewBox="0 0 24 24"
228+
stroke-width="1.5"
229+
stroke="currentColor"
230+
class="chair-icon"
231+
>
232+
<path
233+
stroke-linecap="round"
234+
stroke-linejoin="round"
235+
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"
236+
/>
237+
</svg>
109238
<span>Work</span>
110239
</li>
111240
<li>
241+
<svg
242+
xmlns="http://www.w3.org/2000/svg"
243+
fill="none"
244+
viewBox="0 0 24 24"
245+
stroke-width="1.5"
246+
stroke="currentColor"
247+
class="chair-icon"
248+
>
249+
<path
250+
stroke-linecap="round"
251+
stroke-linejoin="round"
252+
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
253+
/>
254+
</svg>
112255
<span>Comfortable for 8h</span>
113256
</li>
114257
<li>
258+
<svg
259+
xmlns="http://www.w3.org/2000/svg"
260+
fill="none"
261+
viewBox="0 0 24 24"
262+
stroke-width="1.5"
263+
stroke="currentColor"
264+
class="chair-icon"
265+
>
266+
<path
267+
stroke-linecap="round"
268+
stroke-linejoin="round"
269+
d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
270+
/>
271+
</svg>
115272
<span>Vegan leather</span>
116273
</li>
117274
<li>
275+
<svg
276+
xmlns="http://www.w3.org/2000/svg"
277+
fill="none"
278+
viewBox="0 0 24 24"
279+
stroke-width="1.5"
280+
stroke="currentColor"
281+
class="chair-icon"
282+
>
283+
<path
284+
stroke-linecap="round"
285+
stroke-linejoin="round"
286+
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"
287+
/>
288+
</svg>
118289
<span>Weighs 22 kg</span>
119290
</li>
120291
</ul>
@@ -131,15 +302,71 @@ <h3>The Worker Bee</h3>
131302
<h3>The Chair 4/2</h3>
132303
<ul class="chair-details">
133304
<li>
305+
<svg
306+
xmlns="http://www.w3.org/2000/svg"
307+
fill="none"
308+
viewBox="0 0 24 24"
309+
stroke-width="1.5"
310+
stroke="currentColor"
311+
class="chair-icon"
312+
>
313+
<path
314+
stroke-linecap="round"
315+
stroke-linejoin="round"
316+
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"
317+
/>
318+
</svg>
134319
<span>Leisure and relaxing</span>
135320
</li>
136321
<li>
322+
<svg
323+
xmlns="http://www.w3.org/2000/svg"
324+
fill="none"
325+
viewBox="0 0 24 24"
326+
stroke-width="1.5"
327+
stroke="currentColor"
328+
class="chair-icon"
329+
>
330+
<path
331+
stroke-linecap="round"
332+
stroke-linejoin="round"
333+
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
334+
/>
335+
</svg>
137336
<span>Comfortable all day!</span>
138337
</li>
139338
<li>
339+
<svg
340+
xmlns="http://www.w3.org/2000/svg"
341+
fill="none"
342+
viewBox="0 0 24 24"
343+
stroke-width="1.5"
344+
stroke="currentColor"
345+
class="chair-icon"
346+
>
347+
<path
348+
stroke-linecap="round"
349+
stroke-linejoin="round"
350+
d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
351+
/>
352+
</svg>
140353
<span>Organic cotton</span>
141354
</li>
142355
<li>
356+
<svg
357+
xmlns="http://www.w3.org/2000/svg"
358+
fill="none"
359+
viewBox="0 0 24 24"
360+
stroke-width="1.5"
361+
stroke="currentColor"
362+
class="chair-icon"
363+
>
364+
<path
365+
stroke-linecap="round"
366+
stroke-linejoin="round"
367+
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"
368+
/>
369+
</svg>
143370
<span>Weighs 80 kg</span>
144371
</li>
145372
</ul>

0 commit comments

Comments
 (0)