Skip to content

Commit 4a87235

Browse files
kalpshah485kalpshah485
committed
omnifood-desktop
1 parent b952ad7 commit 4a87235

40 files changed

+1552
-1
lines changed

‎07-Omnifood-Desktop/content/content.md renamed to ‎07-Omnifood-Desktop/content.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ Starter: $399 per month
8585

8686
Complete: $649 per month
8787

88-
- 2 meal2 per day
88+
- 2 meals per day
8989
- Order 24/7
9090
- Delivery is free
9191
- Get access to latest recipes
@@ -119,10 +119,26 @@ 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
131+
132+
######
133+
134+
## Sections
135+
136+
- Logo + Navigation
137+
- Hero
138+
- Featured in
139+
- How it works
140+
- Meals (and list of diets)
141+
- Testimonials + gallery
142+
- Pricing + features
143+
- CTA
144+
- Footer

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

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

0 commit comments

Comments
 (0)