Skip to content

Commit a81e15b

Browse files
zangeronimozangeronimo
committed
feat: building the how-it-works section
1 parent 8429082 commit a81e15b

File tree

3 files changed

+292
-112
lines changed

3 files changed

+292
-112
lines changed

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

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

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

Lines changed: 56 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,3 @@
1-
/*
2-
3-
--- 01 TYPOGRAPHY SYSTEM
4-
5-
- Font sizes (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 height:
15-
Default: 1
16-
Small: 1.05
17-
Paragraph default: 1.6
18-
19-
--- 02 COLORS
20-
21-
- Primary: #e67e22
22-
- Tints: #fdf2e9
23-
- Shades:
24-
- Accents:
25-
- Greys
26-
#555
27-
#333
28-
29-
--- 03 SHADOWS
30-
31-
--- 04 BORDER-RADIUS
32-
Default 9px
33-
34-
--- 05 WHITESPACE
35-
36-
- Spacing system (px)
37-
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
38-
39-
*/
40-
41-
* {
42-
margin: 0;
43-
padding: 0;
44-
box-sizing: border-box;
45-
}
46-
47-
html {
48-
font-size: 62.5%;
49-
}
50-
51-
body {
52-
font-family: "Rubik", sans-serif;
53-
line-height: 1;
54-
font-weight: 400;
55-
color: #555;
56-
}
57-
58-
/*************************************/
59-
/* GENERAL REUSABLE COMPONENTS */
60-
/*************************************/
61-
62-
.heading-primary {
63-
font-size: 5.2rem;
64-
line-height: 1.05;
65-
font-weight: 700;
66-
color: #333;
67-
letter-spacing: -0.5px;
68-
margin-bottom: 3.2rem;
69-
}
70-
71-
.btn:link,
72-
.btn:visited {
73-
display: inline-block;
74-
text-decoration: none;
75-
font-size: 2rem;
76-
font-weight: 600;
77-
padding: 1.6rem 2.3rem;
78-
border-radius: 9px;
79-
80-
transition: all 0.3s;
81-
}
82-
83-
.btn--full:link,
84-
.btn--full:visited {
85-
background-color: #e67e22;
86-
color: #fff;
87-
}
88-
89-
.btn--full:hover,
90-
.btn--full:active {
91-
background-color: #cf711f;
92-
}
93-
94-
.btn--outline:link,
95-
.btn--outline:visited {
96-
background-color: #fff;
97-
color: #555;
98-
}
99-
100-
.btn--outline:hover,
101-
.btn--outline:active {
102-
background-color: #fdf2e9;
103-
box-shadow: inset 0 0 0 3px #fff;
104-
}
105-
106-
.margin-right-sm {
107-
margin-right: 1.6rem !important;
108-
}
109-
1101
/*************************************/
1112
/* HEADER */
1123
/*************************************/
@@ -129,9 +20,6 @@ body {
12920
/* NAVIGATION */
13021
/*************************************/
13122

132-
.main-nav {
133-
}
134-
13523
.main-nav-list {
13624
list-style: none;
13725
display: flex;
@@ -236,3 +124,59 @@ body {
236124
color: #cf711f;
237125
font-weight: 700;
238126
}
127+
128+
/*************************************/
129+
/* HOW IT WORKS SECTION */
130+
/*************************************/
131+
132+
.section-how {
133+
padding: 9.6rem 0;
134+
}
135+
136+
.step-number {
137+
font-size: 8.6rem;
138+
font-weight: 600;
139+
color: #ddd;
140+
margin-bottom: 1.2rem;
141+
}
142+
143+
.step-description {
144+
font-size: 1.8rem;
145+
line-height: 1.8;
146+
}
147+
148+
.step-img-box {
149+
display: flex;
150+
align-items: center;
151+
justify-content: center;
152+
position: relative;
153+
}
154+
155+
.step-img-box::before,
156+
.step-img-box::after {
157+
content: "";
158+
display: block;
159+
border-radius: 50%;
160+
position: absolute;
161+
top: 50%;
162+
left: 50%;
163+
transform: translate(-50%, -50%);
164+
}
165+
166+
.step-img-box::before {
167+
width: 60%;
168+
padding-bottom: 60%;
169+
background-color: #fdf2e9;
170+
z-index: -2;
171+
}
172+
173+
.step-img-box::after {
174+
width: 45%;
175+
padding-bottom: 45%;
176+
background-color: #fae5d3;
177+
z-index: -1;
178+
}
179+
180+
.step-img {
181+
width: 35%;
182+
}

0 commit comments

Comments
 (0)