Skip to content

Commit 61a36fb

Browse files
larry-xuelarry-xue
committed
web design part 1
1 parent 738b1c6 commit 61a36fb

File tree

3 files changed

+174
-4
lines changed

3 files changed

+174
-4
lines changed

‎starter/05-Design/index.html

Lines changed: 75 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
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 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
810
<link rel="stylesheet" href="style.css" />
911
<title>Lisbon Chair Shop</title>
1012
</head>
@@ -27,6 +29,11 @@ <h1>We design and build better chairs, for a better life</h1>
2729
<h2>What makes our chairs special</h2>
2830
<div class="grid-3-cols">
2931
<div>
32+
<svg xmlns="http://www.w3.org/2000/svg" class="features-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
33+
stroke-width="2">
34+
<path stroke-linecap="round" stroke-linejoin="round"
35+
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" />
36+
</svg>
3037
<p class="features-title"><strong>Science meets design</strong></p>
3138
<p class="features-text">
3239
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
@@ -35,6 +42,11 @@ <h2>What makes our chairs special</h2>
3542
</div>
3643

3744
<div>
45+
<svg xmlns="http://www.w3.org/2000/svg" class="features-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
46+
stroke-width="2">
47+
<path stroke-linecap="round" stroke-linejoin="round"
48+
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" />
49+
</svg>
3850
<p class="features-title">
3951
<strong>Maximal comfort</strong>
4052
</p>
@@ -45,6 +57,11 @@ <h2>What makes our chairs special</h2>
4557
</div>
4658

4759
<div>
60+
<svg xmlns="http://www.w3.org/2000/svg" class="features-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
61+
stroke-width="2">
62+
<path stroke-linecap="round" stroke-linejoin="round"
63+
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" />
64+
</svg>
4865
<p class="features-title">
4966
<strong>Ethical and sustainable</strong>
5067
</p>
@@ -80,16 +97,34 @@ <h2>Our bestselling chairs</h2>
8097
<h3>The Laid Back</h3>
8198
<ul class="chair-details">
8299
<li>
83-
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
100+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
101+
stroke-width="2">
102+
<path stroke-linecap="round" stroke-linejoin="round"
103+
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" />
104+
</svg>
84105
<span>Leisure and relaxing</span>
85106
</li>
86107
<li>
108+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
109+
stroke-width="2">
110+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
111+
</svg>
87112
<span>Comfortable for 4h</span>
88113
</li>
89114
<li>
115+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
116+
stroke-width="2">
117+
<path stroke-linecap="round" stroke-linejoin="round"
118+
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" />
119+
</svg>
90120
<span>Vegan leather</span>
91121
</li>
92122
<li>
123+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
124+
stroke-width="2">
125+
<path stroke-linecap="round" stroke-linejoin="round"
126+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
127+
</svg>
93128
<span>Weighs 16 kg</span>
94129
</li>
95130
</ul>
@@ -106,15 +141,34 @@ <h3>The Laid Back</h3>
106141
<h3>The Worker Bee</h3>
107142
<ul class="chair-details">
108143
<li>
144+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
145+
stroke-width="2">
146+
<path stroke-linecap="round" stroke-linejoin="round"
147+
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" />
148+
</svg>
109149
<span>Work</span>
110150
</li>
111151
<li>
152+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
153+
stroke-width="2">
154+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
155+
</svg>
112156
<span>Comfortable for 8h</span>
113157
</li>
114158
<li>
159+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
160+
stroke-width="2">
161+
<path stroke-linecap="round" stroke-linejoin="round"
162+
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" />
163+
</svg>
115164
<span>Vegan leather</span>
116165
</li>
117166
<li>
167+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
168+
stroke-width="2">
169+
<path stroke-linecap="round" stroke-linejoin="round"
170+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
171+
</svg>
118172
<span>Weighs 22 kg</span>
119173
</li>
120174
</ul>
@@ -131,15 +185,34 @@ <h3>The Worker Bee</h3>
131185
<h3>The Chair 4/2</h3>
132186
<ul class="chair-details">
133187
<li>
188+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
189+
stroke-width="2">
190+
<path stroke-linecap="round" stroke-linejoin="round"
191+
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" />
192+
</svg>
134193
<span>Leisure and relaxing</span>
135194
</li>
136195
<li>
196+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
197+
stroke-width="2">
198+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
199+
</svg>
137200
<span>Comfortable all day!</span>
138201
</li>
139202
<li>
203+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
204+
stroke-width="2">
205+
<path stroke-linecap="round" stroke-linejoin="round"
206+
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" />
207+
</svg>
140208
<span>Organic cotton</span>
141209
</li>
142210
<li>
211+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"
212+
stroke-width="2">
213+
<path stroke-linecap="round" stroke-linejoin="round"
214+
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
215+
</svg>
143216
<span>Weighs 80 kg</span>
144217
</li>
145218
</ul>

‎starter/05-Design/review.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# web design
2+
3+
## what is web design
4+
5+
web designers create the overall `look and fell` of a website
6+
7+
## how to learn web design
8+
9+
you don't need to be an artist
10+
11+
And the only thing you need to do is to learn some `rules`
12+
13+
## web design ingredient
14+
15+
- Typography
16+
- Colors
17+
- Images / Ilustrations
18+
- Icons
19+
- Shadows
20+
- Border-radius
21+
- Whitesapce
22+
- Visual Hierarchy
23+
- User Experience
24+
- Components / Layouts

‎starter/05-Design/style.css

Lines changed: 75 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ FONT SIZE SYSTEM (px)
66
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
77
*/
88

9+
/*
10+
MAIN COLOR: #087f5b
11+
GREY COLOR: #343a40
12+
*/
13+
914
* {
1015
margin: 0;
1116
padding: 0;
@@ -16,7 +21,10 @@ FONT SIZE SYSTEM (px)
1621
/* GENERAL STYLES */
1722
/* ------------------------ */
1823
body {
19-
font-family: sans-serif;
24+
/* font-family: sans-serif; */
25+
font-family: 'Inter', sans-serif;
26+
color: #343a40;
27+
border-bottom: 8px solid #087f5b;
2028
}
2129

2230
.container {
@@ -31,6 +39,9 @@ section {
3139

3240
h2 {
3341
margin-bottom: 48px;
42+
/* 24 / 30 / 36 / */
43+
font-size: 36px;
44+
letter-spacing: -0.5px;
3445
}
3546

3647
.grid-3-cols {
@@ -39,6 +50,31 @@ h2 {
3950
column-gap: 80px;
4051
}
4152

53+
.btn:link,
54+
.btn:visited {
55+
background-color: #087f5b;
56+
color: #fff;
57+
text-decoration: none;
58+
text-transform: uppercase;
59+
font-weight: 500;
60+
display: inline-block;
61+
}
62+
63+
.btn:hover,
64+
.btn:active {
65+
background-color: #099268;
66+
}
67+
68+
.btn--big {
69+
font-size: 18px;
70+
padding: 16px 32px;
71+
}
72+
73+
.btn--small {
74+
font-size: 14px;
75+
padding: 8px 12px;
76+
}
77+
4278
/* ------------------------ */
4379
/* COMPONENT STYLES */
4480
/* ------------------------ */
@@ -57,10 +93,18 @@ header {
5793

5894
h1 {
5995
margin-bottom: 24px;
96+
/* 44 / 52 / 62 */
97+
font-size: 44px;
98+
line-height: 1.1;
99+
letter-spacing: -1px;
100+
101+
text-shadow: 0 5px 5px rgba(0, 0, 0, 0.07);
60102
}
61103

62104
.header-text {
63105
margin-bottom: 24px;
106+
font-size: 18px;
107+
line-height: 1.7;
64108
}
65109

66110
img {
@@ -73,13 +117,26 @@ img {
73117

74118
.features-title {
75119
margin-bottom: 16px;
120+
font-size: 20px;
76121
}
77122

78123
.features-text {
124+
font-size: 18px;
125+
line-height: 1.7;
126+
}
127+
128+
.features-icon {
129+
stroke: #087f5b;
130+
width: 32px;
131+
height: 32px;
132+
margin-bottom: 16px;
79133
}
80134

81135
/* TESTIMONIAL */
82136
.testimonial-section {
137+
background-color: #087f5b;
138+
color: #fff;
139+
padding: 24px;
83140
}
84141

85142
.testimonial-box {
@@ -88,21 +145,31 @@ img {
88145
}
89146

90147
.testimonial-box h2 {
91-
margin-bottom: 24px;
148+
margin-bottom: 24px;
149+
/* 20 / 24 / 30 / */
150+
font-size: 24px;
92151
}
93152

94153
.testimonial-text {
95154
font-style: italic;
96155
margin-bottom: 24px;
156+
font-size: 18px;
157+
line-height: 1.7;
97158
}
98159

99160
/* CHAIRS */
161+
.chair {
162+
box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.07);
163+
}
164+
100165
.chair-box {
101166
padding: 24px;
102167
}
103168

104169
h3 {
105170
margin-bottom: 24px;
171+
/* 18 / 20 / 24 / 30 / */
172+
font-size: 20px;
106173
}
107174

108175
.chair-details {
@@ -122,13 +189,19 @@ h3 {
122189
}
123190

124191
.chair-icon {
192+
stroke: #087f5b;
193+
width: 24px;
194+
height: 24px;
125195
}
126196

127197
.chair-price {
128198
display: flex;
129199
justify-content: space-between;
200+
font-size: 20px;
130201
}
131202

132203
footer {
133204
margin-bottom: 48px;
205+
font-size: 14px;
206+
color: #495057;
134207
}

0 commit comments

Comments
 (0)