Skip to content

Commit 2facd4a

Browse files
Nadix92Nadix92
committed
how it works section finished
1 parent fccfcfc commit 2facd4a

File tree

3 files changed

+303
-126
lines changed

3 files changed

+303
-126
lines changed

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

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
/*
2+
--- 01 TYPOGRAPHY SYSTEM
3+
- Font sizes (px)
4+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
5+
6+
- Font weights
7+
Default: 400
8+
Medium: 500
9+
Semi-bold: 600
10+
Bold: 700
11+
12+
- Line heights
13+
Default: 1
14+
Small: 1.05
15+
Medium: 1.2
16+
Paragraph default: 1.6
17+
18+
- Letter spacing
19+
-0.5px
20+
0.75px
21+
22+
--- 02 COLORS
23+
- Primary: #e67e22
24+
- Tints:
25+
#fdf2e9
26+
#fae5d3
27+
#eb984e
28+
- Shades:
29+
#cf711f
30+
#45260a
31+
- Accents:
32+
- Greys
33+
#888
34+
#767676 (lightest grey allowed on #fff)
35+
#6f6f6f (lightest grey allowed on #fdf2e9)
36+
#555
37+
#333
38+
39+
--- 05 SHADOWS
40+
0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
41+
42+
--- 06 BORDER-RADIUS
43+
Default: 9px
44+
Medium: 11px
45+
46+
--- 07 WHITESPACE
47+
- Spacing system (px)
48+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
49+
*/
50+
51+
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');
52+
53+
* {
54+
margin: 0;
55+
padding: 0;
56+
box-sizing: border-box;
57+
}
58+
59+
html {
60+
/* font-size: 10px; */
61+
/* 10px / 16px = 0.625 = 62.5% */
62+
/* Percenteage of user's browser font-size settings */
63+
font-size: 62.5%;
64+
}
65+
66+
body {
67+
font-family: 'Rubik', sans-serif;
68+
line-height: 1;
69+
font-weight: 400;
70+
color: #555;
71+
}
72+
73+
/****************************/
74+
/* GENERAL REUSEABLE COMPONENTS */
75+
/****************************/
76+
77+
.container {
78+
/* 1140px also alot used */
79+
max-width: 120rem;
80+
margin: 0 auto;
81+
}
82+
83+
.grid {
84+
display: grid;
85+
row-gap: 9.6rem;
86+
column-gap: 6.4rem;
87+
padding: 0 3.2rem;
88+
}
89+
90+
.grid--2-cols {
91+
grid-template-columns: repeat(2, 1fr);
92+
}
93+
94+
.grid--3-cols {
95+
grid-template-columns: repeat(3, 1fr);
96+
}
97+
98+
.grid--4-cols {
99+
grid-template-columns: repeat(4, 1fr);
100+
}
101+
102+
.grid--center-v {
103+
align-items: center;
104+
}
105+
106+
.heading-primary,
107+
.heading-secondary,
108+
.heading-tertiary {
109+
color: #333;
110+
font-weight: 700;
111+
letter-spacing: -0.5px;
112+
}
113+
114+
.heading-primary {
115+
font-size: 5.2rem;
116+
line-height: 1.05;
117+
margin-bottom: 3.2rem;
118+
}
119+
120+
.heading-secondary {
121+
font-size: 4.4rem;
122+
line-height: 1.2;
123+
margin-bottom: 9.6rem;
124+
}
125+
126+
.heading-tertiary {
127+
font-size: 3rem;
128+
line-height: 1.2;
129+
margin-bottom: 3.2rem;
130+
}
131+
132+
.subheading {
133+
display: block;
134+
font-size: 1.6rem;
135+
font-weight: 500;
136+
color: #cf711f;
137+
text-transform: uppercase;
138+
margin-bottom: 1.6rem;
139+
letter-spacing: 0.75px;
140+
}
141+
142+
.btn:link,
143+
.btn:visited {
144+
display: inline-block;
145+
text-decoration: none;
146+
font-size: 2rem;
147+
font-weight: 600;
148+
padding: 1.6rem 3.2rem;
149+
border-radius: 9px;
150+
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+
/* Trick to add border inside button (avoid padding whole site) */
176+
box-shadow: inset 0 0 0 3px #fff;
177+
}
178+
179+
.margin-right-sm {
180+
margin-right: 1.6rem !important;
181+
}

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

Lines changed: 62 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,3 @@
1-
/*
2-
--- 01 TYPOGRAPHY SYSTEM
3-
- Font sizes (px)
4-
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
5-
6-
- Font weights
7-
Default: 400
8-
Medium: 500
9-
Semi-bold: 600
10-
Bold: 700
11-
12-
- Line heights
13-
Default: 1
14-
Small: 1.05
15-
Medium: 1.2
16-
Paragraph default: 1.6
17-
18-
- Letter spacing
19-
-0.5px
20-
0.75px
21-
22-
--- 02 COLORS
23-
- Primary: #e67e22
24-
- Tints:
25-
#fdf2e9
26-
#fae5d3
27-
#eb984e
28-
- Shades:
29-
#cf711f
30-
#45260a
31-
- Accents:
32-
- Greys
33-
#888
34-
#767676 (lightest grey allowed on #fff)
35-
#6f6f6f (lightest grey allowed on #fdf2e9)
36-
#555
37-
#333
38-
39-
--- 05 SHADOWS
40-
0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
41-
42-
--- 06 BORDER-RADIUS
43-
Default: 9px
44-
Medium: 11px
45-
46-
--- 07 WHITESPACE
47-
- Spacing system (px)
48-
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
49-
*/
50-
51-
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');
52-
53-
* {
54-
margin: 0;
55-
padding: 0;
56-
box-sizing: border-box;
57-
}
58-
59-
html {
60-
/* font-size: 10px; */
61-
/* 10px / 16px = 0.625 = 62.5% */
62-
/* Percenteage of user's browser font-size settings */
63-
font-size: 62.5%;
64-
}
65-
66-
body {
67-
font-family: 'Rubik', sans-serif;
68-
line-height: 1;
69-
font-weight: 400;
70-
color: #555;
71-
}
72-
73-
/****************************/
74-
/* GENERAL REUSEABLE COMPONENTS */
75-
/****************************/
76-
77-
.heading-primary {
78-
font-size: 5.2rem;
79-
font-weight: 700;
80-
line-height: 1.05;
81-
color: #333;
82-
letter-spacing: -0.5px;
83-
margin-bottom: 3.2rem;
84-
}
85-
86-
.btn:link,
87-
.btn:visited {
88-
display: inline-block;
89-
text-decoration: none;
90-
font-size: 2rem;
91-
font-weight: 600;
92-
padding: 1.6rem 3.2rem;
93-
border-radius: 9px;
94-
95-
transition: background-color 0.3s;
96-
}
97-
98-
.btn--full:link,
99-
.btn--full:visited {
100-
background-color: #e67e22;
101-
color: #fff;
102-
}
103-
104-
.btn--full:hover,
105-
.btn--full:active {
106-
background-color: #cf711f;
107-
}
108-
109-
.btn--outline:link,
110-
.btn--outline:visited {
111-
background-color: #fff;
112-
color: #555;
113-
}
114-
115-
.btn--outline:hover,
116-
.btn--outline:active {
117-
background-color: #fdf2e9;
118-
119-
/* Trick to add border inside button (avoid padding whole site) */
120-
box-shadow: inset 0 0 0 3px #fff;
121-
}
122-
123-
.margin-right-sm {
124-
margin-right: 1.6rem !important;
125-
}
126-
1271
/****************************/
1282
/* HEADER */
1293
/****************************/
@@ -243,3 +117,65 @@ body {
243117
color: #cf711f;
244118
font-weight: 700;
245119
}
120+
121+
/****************************/
122+
/* HOW IT WORKS SECTION */
123+
/****************************/
124+
125+
.section-how {
126+
padding: 9.6rem 0;
127+
}
128+
129+
.step-text-box {
130+
}
131+
132+
.stem-number {
133+
font-size: 8.6rem;
134+
font-weight: 600;
135+
color: #ddd;
136+
margin-bottom: 1.2rem;
137+
}
138+
139+
.step-description {
140+
font-size: 1.8rem;
141+
line-height: 1.8;
142+
}
143+
144+
.step-img-box {
145+
display: flex;
146+
align-items: center;
147+
justify-content: center;
148+
149+
position: relative;
150+
}
151+
152+
.step-img-box::after,
153+
.step-img-box::before {
154+
content: '';
155+
display: block;
156+
border-radius: 50%;
157+
position: absolute;
158+
top: 50%;
159+
left: 50%;
160+
transform: translate(-50%, -50%);
161+
}
162+
163+
.step-img-box::before {
164+
width: 60%;
165+
/* height: 60%; */
166+
/* 60% of parents width */
167+
padding-bottom: 60%;
168+
background-color: #fdf2e9;
169+
z-index: -2;
170+
}
171+
172+
.step-img-box::after {
173+
width: 45%;
174+
padding-bottom: 45%;
175+
background-color: #fae5d3;
176+
z-index: -1;
177+
}
178+
179+
.step-img {
180+
width: 35%;
181+
}

0 commit comments

Comments
 (0)