Skip to content

Commit c02df26

Browse files
zJiaJunzJiaJun
committed
how works section p2
1 parent ee43a04 commit c02df26

File tree

3 files changed

+224
-166
lines changed

3 files changed

+224
-166
lines changed

‎starter/07-Omnifood-Desktop/css/general.css

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
/*
2+
3+
--- 01 Typography System
4+
5+
- FONT SIZE SYSTEM (px)
6+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7+
8+
- Font weights:
9+
Default: 400
10+
Medium: 500
11+
Semi-bold: 600
12+
Bold: 700
13+
14+
- Line heights:
15+
Default: 1
16+
Small: 1.05
17+
Medium: 1.2
18+
Paragraph default: 1.6
19+
20+
-- Letter spacing
21+
-0.5px
22+
0.75px
23+
24+
--- 02 Colors System
25+
26+
- Primary: #e67e22
27+
- Tints:
28+
#fdf2e9
29+
#fae5d3
30+
31+
- Shades: #cf711f
32+
- Accents:
33+
- Greys:
34+
#555
35+
#333
36+
37+
38+
--- 05 Shadows
39+
40+
41+
--- 06 Border Radius
42+
43+
Default: 9px
44+
45+
--- 07 Whitespace
46+
47+
- Spacing System (px)
48+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
49+
*/
50+
51+
* {
52+
padding: 0;
53+
margin: 0;
54+
box-sizing: border-box;
55+
}
56+
57+
html {
58+
font-size: 62.5%;
59+
}
60+
61+
body {
62+
font-family: "Rubik", sans-serif;
63+
line-height: 1;
64+
font-weight: 400;
65+
color: #555;
66+
}
67+
68+
/**************************/
69+
/* Genral Reusable Components */
70+
/**************************/
71+
72+
.container {
73+
/* 1140px */
74+
max-width: 120rem;
75+
padding: 0 3.2rem;
76+
margin: 0 auto;
77+
}
78+
79+
.grid {
80+
display: grid;
81+
row-gap: 9.6rem;
82+
column-gap: 6.4rem;
83+
}
84+
85+
.grid--2-cols {
86+
grid-template-columns: repeat(2, 1fr);
87+
}
88+
89+
.grid--3-cols {
90+
grid-template-columns: repeat(3, 1fr);
91+
}
92+
.grid--4-cols {
93+
grid-template-columns: repeat(4, 1fr);
94+
}
95+
96+
.grid--center-v {
97+
align-items: center;
98+
}
99+
100+
.heading-primary,
101+
.heading-secondary {
102+
font-weight: 700;
103+
color: #333;
104+
letter-spacing: -0.5px;
105+
}
106+
.heading-primary {
107+
font-size: 5.2rem;
108+
line-height: 1.05;
109+
margin-bottom: 3.2rem;
110+
}
111+
112+
.heading-secondary {
113+
font-size: 4.4rem;
114+
line-height: 1.2;
115+
margin-bottom: 9.6rem;
116+
}
117+
118+
.heading-terrtiary {
119+
font-size: 3rem;
120+
line-height: 1.2;
121+
margin-bottom: 3.2rem;
122+
}
123+
124+
.subheading {
125+
display: block;
126+
font-size: 1.6rem;
127+
font-weight: 500;
128+
color: #cf711f;
129+
text-transform: uppercase;
130+
margin-bottom: 1.6rem;
131+
letter-spacing: 0.75px;
132+
}
133+
134+
.btn:link,
135+
.btn:visited {
136+
display: inline-block;
137+
font-size: 2rem;
138+
font-weight: 600;
139+
text-decoration: none;
140+
padding: 1.6rem 3.2rem;
141+
border-radius: 9px;
142+
/* Put transition on original "state" */
143+
transition: background-color 0.3s;
144+
}
145+
146+
.btn--full:link,
147+
.btn--full:visited {
148+
background-color: #e67e22;
149+
color: #fff;
150+
}
151+
152+
.btn--full:hover,
153+
.btn--full:active {
154+
background-color: #cf711f;
155+
}
156+
157+
.btn--outline:link,
158+
.btn--outline:visited {
159+
background-color: #fff;
160+
color: #555;
161+
}
162+
163+
.btn--outline:hover,
164+
.btn--outline:active {
165+
background-color: #fdf2e9;
166+
/* border: 3px solid #fff; */
167+
168+
/* Trick to add border inside */
169+
box-shadow: inset 0 0 3px #fff;
170+
}
171+
172+
.margin-right-sm {
173+
margin-right: 1.6rem !important;
174+
}

‎starter/07-Omnifood-Desktop/css/style.css

Lines changed: 48 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -1,167 +1,3 @@
1-
/*
2-
3-
--- 01 Typography System
4-
5-
- FONT SIZE SYSTEM (px)
6-
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7-
8-
- Font weights:
9-
Default: 400
10-
Medium: 500
11-
Semi-bold: 600
12-
Bold: 700
13-
14-
- Line heights:
15-
Default: 1
16-
Small: 1.05
17-
Medium: 1.2
18-
Paragraph default: 1.6
19-
20-
-- Letter spacing
21-
-0.5px
22-
0.75px
23-
24-
--- 02 Colors System
25-
26-
- Primary: #e67e22
27-
- Tints: #fdf2e9
28-
- Shades: #cf711f
29-
- Accents:
30-
- Greys:
31-
#555
32-
#333
33-
34-
35-
--- 05 Shadows
36-
37-
38-
--- 06 Border Radius
39-
40-
Default: 9px
41-
42-
--- 07 Whitespace
43-
44-
- Spacing System (px)
45-
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
46-
*/
47-
48-
* {
49-
padding: 0;
50-
margin: 0;
51-
box-sizing: border-box;
52-
}
53-
54-
html {
55-
font-size: 62.5%;
56-
}
57-
58-
body {
59-
font-family: "Rubik", sans-serif;
60-
line-height: 1;
61-
font-weight: 400;
62-
color: #555;
63-
}
64-
65-
/**************************/
66-
/* Genral Reusable Components */
67-
/**************************/
68-
69-
.container {
70-
/* 1140px */
71-
max-width: 120rem;
72-
padding: 0 3.2rem;
73-
margin: 0 auto;
74-
}
75-
76-
.grid {
77-
display: grid;
78-
gap: 9.6rem;
79-
}
80-
81-
.grid--2-cols {
82-
grid-template-columns: repeat(2, 1fr);
83-
}
84-
85-
.grid--3-cols {
86-
grid-template-columns: repeat(3, 1fr);
87-
}
88-
.grid--4-cols {
89-
grid-template-columns: repeat(4, 1fr);
90-
}
91-
92-
.heading-primary,
93-
.heading-secondary {
94-
font-weight: 700;
95-
color: #333;
96-
letter-spacing: -0.5px;
97-
}
98-
.heading-primary {
99-
font-size: 5.2rem;
100-
line-height: 1.05;
101-
margin-bottom: 3.2rem;
102-
}
103-
104-
.heading-secondary {
105-
font-size: 4.4rem;
106-
line-height: 1.2;
107-
margin-bottom: 9.6rem;
108-
}
109-
110-
.subheading {
111-
display: block;
112-
font-size: 1.6rem;
113-
font-weight: 500;
114-
color: #cf711f;
115-
text-transform: uppercase;
116-
margin-bottom: 1.6rem;
117-
letter-spacing: 0.75px;
118-
}
119-
120-
.heading-terrtiary {
121-
}
122-
123-
.btn:link,
124-
.btn:visited {
125-
display: inline-block;
126-
font-size: 2rem;
127-
font-weight: 600;
128-
text-decoration: none;
129-
padding: 1.6rem 3.2rem;
130-
border-radius: 9px;
131-
/* Put transition on original "state" */
132-
transition: background-color 0.3s;
133-
}
134-
135-
.btn--full:link,
136-
.btn--full:visited {
137-
background-color: #e67e22;
138-
color: #fff;
139-
}
140-
141-
.btn--full:hover,
142-
.btn--full:active {
143-
background-color: #cf711f;
144-
}
145-
146-
.btn--outline:link,
147-
.btn--outline:visited {
148-
background-color: #fff;
149-
color: #555;
150-
}
151-
152-
.btn--outline:hover,
153-
.btn--outline:active {
154-
background-color: #fdf2e9;
155-
/* border: 3px solid #fff; */
156-
157-
/* Trick to add border inside */
158-
box-shadow: inset 0 0 3px #fff;
159-
}
160-
161-
.margin-right-sm {
162-
margin-right: 1.6rem !important;
163-
}
164-
1651
/**************************/
1662
/* Header */
1673
/**************************/
@@ -283,6 +119,53 @@ body {
283119
padding: 9.6rem 0;
284120
}
285121

122+
.step-number {
123+
font-size: 8.6rem;
124+
font-weight: 600;
125+
color: #ddd;
126+
margin-bottom: 1.2rem;
127+
}
128+
129+
.step-description {
130+
font-size: 1.8rem;
131+
line-height: 1.8;
132+
}
133+
134+
.step-img-box {
135+
display: flex;
136+
align-items: center;
137+
justify-content: center;
138+
position: relative;
139+
}
140+
141+
.step-img-box::before,
142+
.step-img-box::after {
143+
content: "";
144+
display: block;
145+
width: 60%;
146+
border-radius: 50%;
147+
position: absolute;
148+
top: 50%;
149+
left: 50%;
150+
transform: translate(-50%, -50%);
151+
}
152+
153+
.step-img-box::before {
154+
width: 60%;
155+
/* height: 60%; */
156+
/* 60% of parent's width */
157+
padding-bottom: 60%;
158+
background-color: #fdf2e9;
159+
z-index: -2;
160+
}
161+
162+
.step-img-box::after {
163+
width: 45%;
164+
padding-bottom: 45%;
165+
background-color: #fae5d3;
166+
z-index: -1;
167+
}
168+
286169
.step-img {
287-
width: 50%;
170+
width: 35%;
288171
}

0 commit comments

Comments
 (0)