Skip to content

Commit 34cca21

Browse files
quechauquechau
committed
Add the How it works section.
1 parent fc31932 commit 34cca21

File tree

3 files changed

+300
-147
lines changed

3 files changed

+300
-147
lines changed

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

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
/*
2+
3+
4+
--- 01 TYPOGRAPHY SYSTEM
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
25+
26+
- Primary color: #e67e22
27+
- Tints:
28+
#fdf2e9
29+
#fae5d3
30+
31+
- Shades: #cf711f
32+
- Accents:
33+
- Greys:
34+
#555
35+
#333
36+
37+
--- 05 SHADOWS
38+
39+
--- 06 BORDER-RADIUS
40+
41+
Default: 9px
42+
43+
--- 07 WHITESPACE
44+
SPACING SYSTEM (px)
45+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
46+
47+
*/
48+
49+
* {
50+
padding: 0;
51+
margin: 0;
52+
box-sizing: border-box;
53+
}
54+
55+
html {
56+
/* font-size: 10px; */
57+
/* 10px / 16px = 0.625 = 62.5% */
58+
/* Percentage of user's browser font-size setting */
59+
font-size: 62.5%;
60+
}
61+
62+
body {
63+
font-family: "Rubik", sans-serif;
64+
line-height: 1;
65+
font-weight: 400;
66+
color: #555;
67+
}
68+
69+
/***************************/
70+
/* GENERAL REUSABLE COMPONENTS */
71+
/***************************/
72+
73+
.container {
74+
/* 1140px */
75+
max-width: 120rem;
76+
padding: 0 3.2rem;
77+
margin: 0 auto;
78+
}
79+
80+
.grid {
81+
display: grid;
82+
column-gap: 6.4rem;
83+
row-gap: 9.6rem;
84+
}
85+
86+
.grid--2-cols {
87+
grid-template-columns: repeat(2, 1fr);
88+
}
89+
90+
.grid--3-cols {
91+
grid-template-columns: repeat(3, 1fr);
92+
}
93+
94+
.grid--4-cols {
95+
grid-template-columns: repeat(4, 1fr);
96+
}
97+
98+
.grid--center-v {
99+
align-items: center;
100+
}
101+
102+
.heading-primary,
103+
.heading-secondary,
104+
.heading-tertiary {
105+
font-weight: 700;
106+
color: #333;
107+
/* color: #45260a; */
108+
/* color: #343a40; */
109+
letter-spacing: -0.5px;
110+
}
111+
112+
.heading-primary {
113+
font-size: 5.2rem;
114+
line-height: 1.05;
115+
margin-bottom: 3.2rem;
116+
}
117+
118+
.heading-secondary {
119+
font-size: 4.4rem;
120+
line-height: 1.2;
121+
margin-bottom: 9.6rem;
122+
}
123+
124+
.heading-tertiary {
125+
font-size: 3rem;
126+
line-height: 1.2;
127+
margin-bottom: 3.2rem;
128+
}
129+
130+
.subheading {
131+
display: block;
132+
font-size: 1.6rem;
133+
font-weight: 500;
134+
color: #cf711f;
135+
text-transform: uppercase;
136+
margin-bottom: 1.6rem;
137+
letter-spacing: 0.75px;
138+
}
139+
140+
.btn:link,
141+
.btn:visited {
142+
display: inline-block;
143+
background-color: #e67e22;
144+
text-decoration: none;
145+
font-size: 2rem;
146+
font-weight: 600;
147+
padding: 1.6rem 3.2rem;
148+
border-radius: 9px;
149+
150+
/* Put transition on original "state" */
151+
transition: background-color 0.3s;
152+
}
153+
154+
.btn--full:link,
155+
.btn--full:visited {
156+
background-color: #e67e22;
157+
color: #fff;
158+
}
159+
160+
.btn--full:hover,
161+
.btn--full:active {
162+
background-color: #cf711f;
163+
}
164+
165+
.btn--outline:link,
166+
.btn--outline:visited {
167+
background-color: #fff;
168+
color: #555;
169+
}
170+
171+
.btn--outline:hover,
172+
.btn--outline:active {
173+
background-color: #fdf2e9;
174+
175+
/* border: 3px solid #fff; */
176+
177+
/* Trick to add border inside */
178+
box-shadow: inset 0 0 0 3px #fff;
179+
}
180+
181+
.margin-right-sm {
182+
margin-right: 1.6rem !important;
183+
}

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

Lines changed: 52 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,3 @@
1-
/*
2-
3-
4-
--- 01 TYPOGRAPHY SYSTEM
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-
Paragraph default: 1.6
18-
19-
--- 02 COLORS
20-
21-
- Primary color: #e67e22
22-
- Tints: #fdf2e9
23-
- Shades: #cf711f
24-
- Accents:
25-
- Greys:
26-
#555
27-
#333
28-
29-
--- 05 SHADOWS
30-
31-
--- 06 BORDER-RADIUS
32-
33-
Default: 9px
34-
35-
--- 07 WHITESPACE
36-
SPACING SYSTEM (px)
37-
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
38-
39-
*/
40-
41-
* {
42-
padding: 0;
43-
margin: 0;
44-
box-sizing: border-box;
45-
}
46-
47-
html {
48-
/* font-size: 10px; */
49-
/* 10px / 16px = 0.625 = 62.5% */
50-
/* Percentage of user's browser font-size setting */
51-
font-size: 62.5%;
52-
}
53-
54-
body {
55-
font-family: "Rubik", sans-serif;
56-
line-height: 1;
57-
font-weight: 400;
58-
color: #555;
59-
}
60-
61-
/***************************/
62-
/* GENERAL REUSABLE COMPONENTS */
63-
/***************************/
64-
65-
.container {
66-
/* 1140px */
67-
max-width: 120rem;
68-
padding: 0 3.2rem;
69-
margin: 0 auto;
70-
}
71-
72-
.grid {
73-
display: grid;
74-
gap: 9.6rem;
75-
}
76-
77-
.grid--2-cols {
78-
grid-template-columns: repeat(2, 1fr);
79-
}
80-
81-
.grid--3-cols {
82-
grid-template-columns: repeat(3, 1fr);
83-
}
84-
85-
.grid--4-cols {
86-
grid-template-columns: repeat(4, 1fr);
87-
}
88-
89-
.heading-primary {
90-
font-size: 5.2rem;
91-
font-weight: 600;
92-
line-height: 1.05;
93-
color: #333;
94-
margin-bottom: 3.2rem;
95-
}
96-
97-
.btn:link,
98-
.btn:visited {
99-
display: inline-block;
100-
background-color: #e67e22;
101-
text-decoration: none;
102-
font-size: 2rem;
103-
font-weight: 600;
104-
padding: 1.6rem 3.2rem;
105-
border-radius: 9px;
106-
107-
/* Put transition on original "state" */
108-
transition: background-color 0.3s;
109-
}
110-
111-
.btn--full:link,
112-
.btn--full:visited {
113-
background-color: #e67e22;
114-
color: #fff;
115-
}
116-
117-
.btn--full:hover,
118-
.btn--full:active {
119-
background-color: #cf711f;
120-
}
121-
122-
.btn--outline:link,
123-
.btn--outline:visited {
124-
background-color: #fff;
125-
color: #555;
126-
}
127-
128-
.btn--outline:hover,
129-
.btn--outline:active {
130-
background-color: #fdf2e9;
131-
132-
/* border: 3px solid #fff; */
133-
134-
/* Trick to add border inside */
135-
box-shadow: inset 0 0 0 3px #fff;
136-
}
137-
138-
.margin-right-sm {
139-
margin-right: 1.6rem !important;
140-
}
141-
1421
/***************************/
1432
/* HEADER */
1443
/***************************/
@@ -263,5 +122,56 @@ body {
263122
/***************************/
264123
.section-how {
265124
padding: 9.6rem 0;
266-
background-color: orangered;
125+
}
126+
127+
.step-number {
128+
font-size: 8.6rem;
129+
font-weight: 600;
130+
color: #eee;
131+
margin-bottom: 1.2rem;
132+
}
133+
134+
.step-description {
135+
font-size: 1.8rem;
136+
line-height: 1.8;
137+
}
138+
139+
.step-img-box {
140+
position: relative;
141+
display: flex;
142+
align-items: center;
143+
justify-content: center;
144+
}
145+
146+
.step-img-box::before,
147+
.step-img-box::after {
148+
content: "";
149+
display: block;
150+
border-radius: 50%;
151+
position: absolute;
152+
top: 50%;
153+
left: 50%;
154+
transform: translate(-50%, -50%);
155+
}
156+
.step-img-box::before {
157+
width: 60%;
158+
/* height: 60%; */
159+
160+
/* 60% of parent's width */
161+
padding-bottom: 60%;
162+
163+
background-color: #fdf2e9;
164+
z-index: -2;
165+
}
166+
167+
.step-img-box::after {
168+
width: 45%;
169+
padding-bottom: 45%;
170+
background-color: #fae5d3;
171+
z-index: -1;
172+
}
173+
174+
.step-img {
175+
width: 35%;
176+
/* z-index: 10; */
267177
}

0 commit comments

Comments
 (0)