Skip to content

Commit 1e1c34b

Browse files
thomascweithomascwei
committed
.
1 parent e0711a1 commit 1e1c34b

File tree

4 files changed

+272
-0
lines changed

4 files changed

+272
-0
lines changed

‎assets/choose-color.png

221 KB
Loading

‎design.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,12 @@ SPACING SYSTEM (px)
5454
FONT SIZE SYSTEM (px)
5555
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
5656
```
57+
58+
## Choose color
59+
60+
![](./assets/choose-color.png)
61+
62+
[open color 挑選顏色](https://yeun.github.io/open-color/)
63+
64+
[背景與文字顏色對比](https://coolors.co)
65+
使用`contrast-checker`

‎starter/05-Design/index.html

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,21 @@ <h1>We design and build better chairs, for a better life</h1>
3333
<h2>What makes our chairs special</h2>
3434
<div class="grid-3-cols">
3535
<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+
3651
<p class="features-title"><strong>Science meets design</strong></p>
3752
<p class="features-text">
3853
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
@@ -41,6 +56,21 @@ <h2>What makes our chairs special</h2>
4156
</div>
4257

4358
<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="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"
71+
/>
72+
</svg>
73+
4474
<p class="features-title">
4575
<strong>Maximal comfort</strong>
4676
</p>
@@ -51,6 +81,21 @@ <h2>What makes our chairs special</h2>
5181
</div>
5282

5383
<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="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"
96+
/>
97+
</svg>
98+
5499
<p class="features-title">
55100
<strong>Ethical and sustainable</strong>
56101
</p>
@@ -86,16 +131,76 @@ <h2>Our bestselling chairs</h2>
86131
<h3>The Laid Back</h3>
87132
<ul class="chair-details">
88133
<li>
134+
<svg
135+
xmlns="http://www.w3.org/2000/svg"
136+
fill="none"
137+
viewBox="0 0 24 24"
138+
stroke-width="1.5"
139+
stroke="currentColor"
140+
class="chair-icon"
141+
>
142+
<path
143+
stroke-linecap="round"
144+
stroke-linejoin="round"
145+
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"
146+
/>
147+
</svg>
148+
89149
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
90150
<span>Leisure and relaxing</span>
91151
</li>
92152
<li>
153+
<svg
154+
xmlns="http://www.w3.org/2000/svg"
155+
fill="none"
156+
viewBox="0 0 24 24"
157+
stroke-width="1.5"
158+
stroke="currentColor"
159+
class="chair-icon"
160+
>
161+
<path
162+
stroke-linecap="round"
163+
stroke-linejoin="round"
164+
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
165+
/>
166+
</svg>
167+
93168
<span>Comfortable for 4h</span>
94169
</li>
95170
<li>
171+
<svg
172+
xmlns="http://www.w3.org/2000/svg"
173+
fill="none"
174+
viewBox="0 0 24 24"
175+
stroke-width="1.5"
176+
stroke="currentColor"
177+
class="chair-icon"
178+
>
179+
<path
180+
stroke-linecap="round"
181+
stroke-linejoin="round"
182+
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"
183+
/>
184+
</svg>
185+
96186
<span>Vegan leather</span>
97187
</li>
98188
<li>
189+
<svg
190+
xmlns="http://www.w3.org/2000/svg"
191+
fill="none"
192+
viewBox="0 0 24 24"
193+
stroke-width="1.5"
194+
stroke="currentColor"
195+
class="chair-icon"
196+
>
197+
<path
198+
stroke-linecap="round"
199+
stroke-linejoin="round"
200+
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"
201+
/>
202+
</svg>
203+
99204
<span>Weighs 16 kg</span>
100205
</li>
101206
</ul>
@@ -112,15 +217,73 @@ <h3>The Laid Back</h3>
112217
<h3>The Worker Bee</h3>
113218
<ul class="chair-details">
114219
<li>
220+
<svg
221+
<svg
222+
xmlns="http://www.w3.org/2000/svg"
223+
fill="none"
224+
viewBox="0 0 24 24"
225+
stroke-width="1.5"
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>
115235
<span>Work</span>
116236
</li>
117237
<li>
238+
<svg
239+
xmlns="http://www.w3.org/2000/svg"
240+
fill="none"
241+
viewBox="0 0 24 24"
242+
stroke-width="1.5"
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>
252+
118253
<span>Comfortable for 8h</span>
119254
</li>
120255
<li>
256+
<svg
257+
xmlns="http://www.w3.org/2000/svg"
258+
fill="none"
259+
viewBox="0 0 24 24"
260+
stroke-width="1.5"
261+
stroke="currentColor"
262+
class="chair-icon"
263+
>
264+
<path
265+
stroke-linecap="round"
266+
stroke-linejoin="round"
267+
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"
268+
/>
269+
</svg>
121270
<span>Vegan leather</span>
122271
</li>
123272
<li>
273+
<svg
274+
xmlns="http://www.w3.org/2000/svg"
275+
fill="none"
276+
viewBox="0 0 24 24"
277+
stroke-width="1.5"
278+
stroke="currentColor"
279+
class="chair-icon"
280+
>
281+
<path
282+
stroke-linecap="round"
283+
stroke-linejoin="round"
284+
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"
285+
/>
286+
</svg>
124287
<span>Weighs 22 kg</span>
125288
</li>
126289
</ul>
@@ -137,15 +300,71 @@ <h3>The Worker Bee</h3>
137300
<h3>The Chair 4/2</h3>
138301
<ul class="chair-details">
139302
<li>
303+
<svg
304+
xmlns="http://www.w3.org/2000/svg"
305+
fill="none"
306+
viewBox="0 0 24 24"
307+
stroke-width="1.5"
308+
stroke="currentColor"
309+
class="chair-icon"
310+
>
311+
<path
312+
stroke-linecap="round"
313+
stroke-linejoin="round"
314+
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"
315+
/>
316+
</svg>
140317
<span>Leisure and relaxing</span>
141318
</li>
142319
<li>
320+
<svg
321+
xmlns="http://www.w3.org/2000/svg"
322+
fill="none"
323+
viewBox="0 0 24 24"
324+
stroke-width="1.5"
325+
stroke="currentColor"
326+
class="chair-icon"
327+
>
328+
<path
329+
stroke-linecap="round"
330+
stroke-linejoin="round"
331+
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
332+
/>
333+
</svg>
143334
<span>Comfortable all day!</span>
144335
</li>
145336
<li>
337+
<svg
338+
xmlns="http://www.w3.org/2000/svg"
339+
fill="none"
340+
viewBox="0 0 24 24"
341+
stroke-width="1.5"
342+
stroke="currentColor"
343+
class="chair-icon"
344+
>
345+
<path
346+
stroke-linecap="round"
347+
stroke-linejoin="round"
348+
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"
349+
/>
350+
</svg>
146351
<span>Organic cotton</span>
147352
</li>
148353
<li>
354+
<svg
355+
xmlns="http://www.w3.org/2000/svg"
356+
fill="none"
357+
viewBox="0 0 24 24"
358+
stroke-width="1.5"
359+
stroke="currentColor"
360+
class="chair-icon"
361+
>
362+
<path
363+
stroke-linecap="round"
364+
stroke-linejoin="round"
365+
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"
366+
/>
367+
</svg>
149368
<span>Weighs 80 kg</span>
150369
</li>
151370
</ul>

0 commit comments

Comments
 (0)