Skip to content

Commit 9185657

Browse files
kfoolablekfoolable
committed
Separated reusable CSS in another file: general.css
1 parent 6f1dd9b commit 9185657

File tree

3 files changed

+499
-29
lines changed

3 files changed

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

3-
--- 01 TYPOGRAPHY SYSTEM ---
5+
.header {
6+
display: flex;
7+
justify-content: space-between;
8+
align-items: center;
9+
background-color: #fdf2e9;
410

5-
- Font sizes (px)
6-
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
11+
height: 9.6rem;
12+
padding: 0 9.6rem;
13+
}
14+
15+
.logo {
16+
height: 2.2rem;
17+
}
18+
19+
/**************************/
20+
/* NAVIGATION SECTION */
21+
/**************************/
22+
23+
.main-nav-list {
24+
list-style: none;
25+
display: flex;
26+
align-items: center;
27+
gap: 3.2rem;
28+
}
29+
30+
.main-nav-link:link,
31+
.main-nav-link:visited {
32+
display: inline-block;
33+
text-decoration: none;
34+
color: #333;
35+
font-weight: 500;
36+
font-size: 1.8rem;
37+
transition: all 0.3s;
38+
}
39+
40+
.main-nav-link:hover,
41+
.main-nav-link:active {
42+
color: #cf711f;
43+
}
44+
45+
.main-nav-link.nav-cta:link,
46+
.main-nav-link.nav-cta:visited {
47+
padding: 1.2rem 2.4rem;
48+
border-radius: 9px;
49+
color: #fff;
50+
background-color: #e67e22;
51+
}
752

8-
- Font weights:
9-
Default: 400
53+
.main-nav-link.nav-cta:hover,
54+
.main-nav-link.nav-cta:active {
55+
background-color: #cf711f;
56+
}
1057

11-
- Line heights:
12-
Default: 1
58+
/**************************/
59+
/* HERO SECTION */
60+
/**************************/
1361

14-
--- 02 COLORS ---
62+
.section-hero {
63+
background-color: #fdf2e9;
64+
padding: 4.8rem 0 9.6rem 0;
65+
}
1566

16-
Primary: #e67e22
67+
.hero {
68+
max-width: 130rem;
69+
margin: 0 auto;
70+
padding: 0 3.2rem;
71+
display: grid;
72+
grid-template-columns: 1fr 1fr;
73+
gap: 9.6rem;
74+
align-items: center;
75+
}
1776

18-
Tints:
19-
Shades:
20-
Accents:
21-
Greys: #555,
77+
.hero-description {
78+
font-size: 2rem;
79+
line-height: 1.5;
80+
margin-bottom: 4.8rem;
81+
}
2282

23-
--- 03 SHADOWS ---
83+
.hero-img {
84+
width: 100%;
85+
}
2486

25-
--- 04 BORDER-RADIUS ---
87+
.delivered-meals {
88+
display: flex;
89+
align-items: center;
90+
gap: 1.6rem;
91+
margin-top: 8rem;
92+
}
2693

27-
--- 05 WHITE SPACE ---
94+
.delivered-imgs {
95+
display: flex;
96+
}
2897

29-
SPACING SYSTEM (px)
30-
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
31-
*/
98+
.delivered-imgs img {
99+
height: 4.8rem;
100+
width: 4.8rem;
101+
border-radius: 50%;
102+
margin-right: -1.6rem;
103+
border: 3px solid #fdf2e9;
104+
}
32105

33-
* {
34-
padding: 0;
106+
.delivered-imgs img:last-child {
35107
margin: 0;
36-
box-sizing: border-box;
37108
}
38109

39-
body {
40-
font-family: sans-serif;
41-
line-height: 1;
42-
font-weight: 400;
43-
color: #555;
110+
.delivered-text {
111+
font-size: 1.8rem;
112+
font-weight: 600;
113+
}
114+
115+
.delivered-text span {
116+
color: #cf711f;
117+
font-weight: 700;
118+
}
119+
120+
/**************************/
121+
/* FEATURED IN SECTION */
122+
/**************************/
123+
124+
.section-featured {
125+
padding: 4.6rem 0 3.2rem 0;
126+
}
127+
128+
.heading-featured-in {
129+
font-size: 1.4rem;
130+
text-transform: uppercase;
131+
letter-spacing: 0.75px;
132+
font-weight: 500;
133+
text-align: center;
134+
margin-bottom: 2.4rem;
135+
color: #999;
136+
}
137+
138+
.logos {
139+
display: flex;
140+
justify-content: space-around;
141+
}
142+
143+
.logos img {
144+
height: 3.2rem;
145+
filter: brightness(0);
146+
opacity: 50%;
147+
}
148+
149+
/**************************/
150+
/* HOW IT WORKS SECTION */
151+
/**************************/
152+
153+
.section-how {
154+
padding: 9.6rem 0;
155+
}
156+
157+
.step-number {
158+
font-size: 8.6rem;
159+
font-weight: 600;
160+
color: #ddd;
161+
margin-bottom: 1.2rem;
162+
}
163+
164+
.step-description {
165+
font-size: 1.8rem;
166+
line-height: 1.8;
167+
}
168+
169+
.step-img-box {
170+
display: flex;
171+
align-items: center;
172+
justify-content: center;
173+
position: relative;
174+
}
175+
176+
.step-img-box::before,
177+
.step-img-box::after {
178+
content: "";
179+
display: block;
180+
width: 60%;
181+
border-radius: 50%;
182+
position: absolute;
183+
top: 50%;
184+
left: 50%;
185+
transform: translate(-50%, -50%);
186+
z-index: -1;
187+
}
188+
189+
.step-img-box::before {
190+
width: 60%;
191+
padding-bottom: 60%;
192+
background-color: #fdf2e9;
193+
}
194+
195+
.step-img-box::after {
196+
width: 45%;
197+
padding-bottom: 45%;
198+
background-color: #fae5d3;
199+
}
200+
201+
.step-img {
202+
width: 35%;
44203
}

0 commit comments

Comments
 (0)