Skip to content

Commit 31a9709

Browse files
owen-webbowen-webb
committed
section-7: How it works.
1 parent 85166b1 commit 31a9709

File tree

3 files changed

+253
-134
lines changed

3 files changed

+253
-134
lines changed

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

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

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

Lines changed: 47 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,3 @@
1-
/*
2-
3-
--- 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-
Paragraph default: 1.6
18-
19-
--- COLORS
20-
21-
Primary: #e67e22
22-
Tints: #fdf2e9
23-
Shades: #cf711f
24-
Accents:
25-
Greys: #555, #333
26-
27-
28-
--- SHADOWS
29-
30-
31-
-- BORDER RADIUS
32-
Default: 0.9rem
33-
34-
--- WHITE SPACE
35-
36-
SPACING SYSTEM (px)
37-
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
38-
39-
*/
40-
41-
/*** GENERAL ***/
42-
43-
* {
44-
box-sizing: border-box;
45-
padding: 0;
46-
margin: 0;
47-
}
48-
49-
html {
50-
font-size: 62.5%;
51-
}
52-
53-
body {
54-
color: #555;
55-
font-family: "Rubik", sans-serif;
56-
font-weight: 400;
57-
line-height: 1;
58-
}
59-
60-
.btn:link, .btn:visited {
61-
border-radius: .9rem;
62-
color: #fff;
63-
display: inline-block;
64-
font-size: 2rem;
65-
padding: 1.6rem 3.2rem;
66-
text-decoration: none;
67-
transition: background-color 300ms;
68-
}
69-
70-
.btn--full:link, .btn--full:visited {
71-
background-color: #e67e22;
72-
color: #fff;
73-
}
74-
75-
.btn--full:hover, .btn--full:active {
76-
background-color: #cf711f;
77-
}
78-
79-
.btn--outline:link, .btn--outline:visited {
80-
background-color: #fff;
81-
color: #555;
82-
}
83-
84-
.btn--outline:hover, .btn--outline:active {
85-
background-color: #fdf2e9;
86-
box-shadow: inset 0 0 0 .3rem #fff;
87-
}
88-
89-
.container {
90-
margin: 0 auto;
91-
max-width: 120rem;
92-
padding: 0 3.2rem;
93-
}
94-
95-
.grid {
96-
display: grid;
97-
gap: 9.6rem;
98-
}
99-
100-
.grid--2-cols {
101-
grid-template-columns: repeat(2, 1fr);
102-
}
103-
104-
.grid--3-cols {
105-
grid-template-columns: repeat(3, 1fr);
106-
}
107-
108-
.grid--4-cols {
109-
grid-template-columns: repeat(4, 1fr);
110-
}
111-
112-
.heading-primary {
113-
color: #333;
114-
font-size: 5.2rem;
115-
font-weight: 600;
116-
letter-spacing: -0.5px;
117-
line-height: 1.05;
118-
margin-bottom: 3.2rem;
119-
}
120-
121-
.margin-right-sm {
122-
margin-right: 1.6rem !important;
123-
}
124-
125-
1261
/*** HEADER ***/
1272

1283
.header {
@@ -236,6 +111,53 @@ body {
236111

237112
/*** HOW ***/
238113

114+
.step-description {
115+
font-size: 1.8rem;
116+
line-height: 1.8;
117+
}
118+
239119
.section-how {
240120
padding: 9.6rem 0;
241121
}
122+
123+
.step-img {
124+
width: 35%;
125+
}
126+
127+
.step-img-box {
128+
align-items: center;
129+
display: flex;
130+
justify-content: center;
131+
position: relative;
132+
}
133+
134+
.step-img-box::after, .step-img-box::before {
135+
border-radius: 50%;
136+
content: "";
137+
display: block;
138+
left: 50%;
139+
position: absolute;
140+
top: 50%;
141+
transform: translate(-50%, -50%);
142+
}
143+
144+
.step-img-box::after {
145+
background-color: #fae5d3;
146+
padding-bottom: 50%;
147+
width: 50%;
148+
z-index: -1;
149+
}
150+
151+
.step-img-box::before {
152+
background-color: #fdf2e9;
153+
padding-bottom: 60%;
154+
width: 60%;
155+
z-index: -2;
156+
}
157+
158+
.step-number {
159+
color: #ddd;
160+
font-size: 8.6rem;
161+
font-weight: 600;
162+
margin-bottom: 1.2rem;
163+
}

0 commit comments

Comments
 (0)