Skip to content

Commit 81e8ee2

Browse files
author
ChowSengFung
committed
section 7
1 parent 546c595 commit 81e8ee2

File tree

4 files changed

+1409
-125
lines changed

4 files changed

+1409
-125
lines changed

‎starter/07-Omnifood-Desktop/content.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,10 +119,12 @@ Create account
119119
Sign in
120120
iOS app
121121
Android app
122+
122123
About Omnifood
123124
For Business
124125
Cooking partners
125126
Careers
127+
126128
Recipe directory
127129
Help center
128130
Privacy & terms

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

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
/*
2+
---O1 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 heights:
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+
24+
25+
--- 02 COLORS
26+
27+
-Primary: #e67e22
28+
-Tints:
29+
#fdf2e9
30+
#fae5d3
31+
#ffd43b
32+
#eb984e
33+
-Shades:#cf711f#45260a
34+
-Accents:
35+
36+
#51cf66
37+
#94d82d
38+
-Greys
39+
#888
40+
#767676 lightest grey allowed on #fff
41+
#6f6f6f lightest grey allowed on #fdf2e9
42+
#555
43+
#333
44+
45+
46+
---05 SHADOWS
47+
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
48+
49+
50+
---06 BORDER-RADIUS
51+
Default: 9px
52+
Medium: 11px
53+
54+
---07 WHITESPACE
55+
56+
- Spacing system (px)
57+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
58+
59+
*/
60+
61+
* {
62+
margin: 0;
63+
padding: 0;
64+
box-sizing: border-box;
65+
}
66+
67+
html {
68+
/* 10px / 16px = 0.625 = 62.5% */
69+
/* Percentage of user's browser font-size setting */
70+
font-size: 62.5%;
71+
}
72+
73+
body {
74+
font-family: "Rubik", sans-serif;
75+
line-height: 1;
76+
font-weight: 400;
77+
color: #555;
78+
}
79+
80+
/*********************************/
81+
/* GENERAL REUSABLE COMPONENTS */
82+
/********************************/
83+
84+
.container {
85+
max-width: 120rem;
86+
margin: 0 auto;
87+
padding: 0 3.2rem;
88+
}
89+
90+
.grid {
91+
display: grid;
92+
column-gap: 6.4rem;
93+
row-gap: 9.6rem;
94+
/* margin-bottom: 9.6rem; */
95+
}
96+
97+
/* .grid:last-child {
98+
margin-bottom: 0;
99+
} */
100+
101+
/* if an element with .grid class is not last child in parent,
102+
add bottom margin */
103+
.grid:not(:last-child) {
104+
margin-bottom: 9.6rem;
105+
}
106+
107+
.grid--2-cols {
108+
grid-template-columns: repeat(2, 1fr);
109+
}
110+
111+
.grid--3-cols {
112+
grid-template-columns: repeat(3, 1fr);
113+
}
114+
115+
.grid--4-cols {
116+
grid-template-columns: repeat(4, 1fr);
117+
}
118+
119+
.grid--5-cols {
120+
grid-template-columns: repeat(5, 1fr);
121+
}
122+
123+
.grid--center-v {
124+
align-items: center;
125+
}
126+
127+
.heading-primary,
128+
.heading-secondary,
129+
.heading-tertiary {
130+
font-weight: 700;
131+
color: #333;
132+
letter-spacing: -0.5px;
133+
}
134+
135+
.heading-primary {
136+
font-size: 5.2rem;
137+
line-height: 1.05;
138+
margin-bottom: 3.2rem;
139+
}
140+
141+
.heading-secondary {
142+
font-size: 4.4rem;
143+
line-height: 1.2;
144+
margin-bottom: 9.6rem;
145+
}
146+
147+
.heading-tertiary {
148+
font-size: 3rem;
149+
line-height: 1.2;
150+
margin-bottom: 3.2rem;
151+
}
152+
153+
.subheading {
154+
display: block;
155+
font-size: 1.6rem;
156+
font-weight: 500;
157+
color: #cf711f;
158+
text-transform: uppercase;
159+
margin-bottom: 1.6rem;
160+
letter-spacing: 0.75px;
161+
}
162+
163+
.btn,
164+
.btn:link,
165+
.btn:visited {
166+
display: inline-block;
167+
text-decoration: none;
168+
font-size: 2rem;
169+
font-weight: 600;
170+
padding: 1.6rem 3.2rem;
171+
border-radius: 9px;
172+
173+
/*only necessary for .btn*/
174+
border: none;
175+
cursor: pointer;
176+
font-family: inherit;
177+
178+
/* put transition property on original state */
179+
transition: all 0.3s;
180+
}
181+
182+
.btn--full:link,
183+
.btn--full:visited {
184+
background-color: #e67e22;
185+
color: #fff;
186+
}
187+
188+
.btn--full:hover,
189+
.btn--full:active {
190+
background-color: #cf711f;
191+
}
192+
193+
.btn--outline:link,
194+
.btn--outline:visited {
195+
background-color: #fff;
196+
color: #555;
197+
}
198+
199+
.btn--outline:hover,
200+
.btn--outline:active {
201+
background-color: #fdf2e9;
202+
203+
/* border: 3px solid #fff; */
204+
205+
/* Trick to add border inside */
206+
box-shadow: inset 0 0 0 3px #fff;
207+
}
208+
209+
.btn--form {
210+
background-color: #45260a;
211+
color: #fdf2e9;
212+
align-self: end;
213+
padding: 1.2rem;
214+
}
215+
216+
.btn--form:hover {
217+
background-color: #fff;
218+
color: #555;
219+
}
220+
221+
.link:link,
222+
.link:visited {
223+
display: inline-block;
224+
color: #e67e22;
225+
text-decoration: none;
226+
border-bottom: 1px solid currentColor;
227+
padding-bottom: 0.2rem;
228+
transition: all 0.3s;
229+
}
230+
231+
.link:hover,
232+
.link:active {
233+
color: #cf711f;
234+
/*settting border bottom to none will
235+
create a wobbly effect as 1px is removed from the page*/
236+
/* border-bottom: none; */
237+
border-bottom: 1px solid transparent;
238+
}
239+
240+
strong {
241+
font-weight: 500;
242+
}
243+
244+
.list {
245+
list-style: none;
246+
display: flex;
247+
flex-direction: column;
248+
gap: 1.6rem;
249+
}
250+
251+
.list-item {
252+
font-size: 1.8rem;
253+
display: flex;
254+
align-items: center;
255+
gap: 1.6rem;
256+
}
257+
258+
.list-icon {
259+
width: 3rem;
260+
height: 3rem;
261+
color: #e67e22;
262+
}
263+
264+
/* for tab key */
265+
*:focus {
266+
outline: none;
267+
/* outline: 4px dotted #e67e22; */
268+
/* outline-offset: 8px; */
269+
box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5);
270+
}
271+
272+
/* Helper class */
273+
.margin-right-sm {
274+
margin-right: 1.6rem !important;
275+
}
276+
277+
/* Helper class */
278+
.margin-bottom-md {
279+
margin-bottom: 4.8rem !important;
280+
}
281+
282+
/* Helper class */
283+
.center-text {
284+
text-align: center;
285+
}

0 commit comments

Comments
 (0)