Skip to content

Commit 8f585ae

Browse files
rameskumrameskum
committed
how it works section
1 parent 96a058c commit 8f585ae

File tree

3 files changed

+271
-96
lines changed

3 files changed

+271
-96
lines changed

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

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
/*
2+
-- 01 TYPOGRAPHY
3+
4+
- FONT SIZE SYSTEM (px)
5+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
6+
7+
- Font Weight:
8+
Default: 400
9+
Medium 500
10+
Semi Bold 600
11+
Bold 700
12+
13+
- Line Heights:
14+
Defaults: 1
15+
Small: 1.05
16+
medium: 1.2
17+
Paragraph Default: 1.6
18+
- letter spacing
19+
-0.5px
20+
0.75px
21+
22+
-- 02 COLORS
23+
24+
- Primary: #e67e22
25+
- Tints:
26+
#fdf2e9
27+
#fae5d3
28+
- Shades: #cf711f
29+
- Accents:
30+
- Greys:
31+
#555
32+
#333
33+
34+
-- 05 SHADOWS
35+
36+
-- 06 BORDER RADIUS
37+
38+
Default: 9px
39+
40+
-- 07 WHITESPACE
41+
42+
- SPACING SYSTEM (px)
43+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
44+
*/
45+
46+
/**************************************/
47+
/* GENERAL REUSABLE COMPONENTS */
48+
/**************************************/
49+
.container {
50+
max-width: 120rem;
51+
margin: 0 auto;
52+
padding: 0 3.2rem;
53+
}
54+
55+
.grid {
56+
display: grid;
57+
column-gap: 6.4rem;
58+
row-gap: 9.6rem;
59+
}
60+
61+
.grid:not(:last-child) {
62+
margin-bottom: 9.6rem;
63+
}
64+
65+
.grid--2-cols {
66+
grid-template-columns: repeat(2, 1fr);
67+
}
68+
69+
.grid--3-cols {
70+
grid-template-columns: repeat(3, 1fr);
71+
}
72+
73+
.grid--4-cols {
74+
grid-template-columns: repeat(4, 1fr);
75+
}
76+
77+
.grid--center-v {
78+
align-items: center;
79+
}
80+
81+
.heading-primary,
82+
.heading-secondary,
83+
.heading-tertiary {
84+
font-weight: 700;
85+
color: #333;
86+
letter-spacing: -0.5px;
87+
}
88+
89+
.heading-primary {
90+
font-size: 5.2rem;
91+
line-height: 1.05;
92+
margin-bottom: 3.2rem;
93+
}
94+
95+
.heading-secondary {
96+
font-size: 4.4rem;
97+
line-height: 1.2;
98+
margin-bottom: 9.6rem;
99+
}
100+
101+
.heading-tertiary {
102+
font-size: 3rem;
103+
line-height: 1.2;
104+
margin-bottom: 3.2rem;
105+
}
106+
107+
.subheading {
108+
display: block;
109+
font-size: 1.6rem;
110+
font-weight: 500;
111+
color: #cf711f;
112+
text-transform: uppercase;
113+
margin-bottom: 1.6rem;
114+
letter-spacing: 0.75px;
115+
}
116+
117+
.btn:link,
118+
.btn:visited {
119+
display: inline-block;
120+
121+
color: #fff;
122+
text-decoration: none;
123+
font-size: 2rem;
124+
font-weight: 600;
125+
padding: 1.6rem 3.2rem;
126+
border-radius: 9px;
127+
128+
transition: background-color 0.3s;
129+
}
130+
131+
.btn--full:link,
132+
.btn--full:visited {
133+
background-color: #e67e22;
134+
color: #fff;
135+
}
136+
137+
.btn--full:hover,
138+
.btn--full:active {
139+
background-color: #cf711f;
140+
}
141+
142+
.btn--outline:link,
143+
.btn--outline:visited {
144+
background-color: #fff;
145+
color: #555;
146+
}
147+
148+
.btn--outline:hover,
149+
.btn--outline:active {
150+
background-color: #fdf2e9;
151+
/*border: 3px solid #fff;*/
152+
153+
/* Trick to add border inside */
154+
box-shadow: inset 0 0 0 3px #fff;
155+
}
156+
157+
.margin-right-sm {
158+
margin-right: 1.6rem !important;
159+
}

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

Lines changed: 61 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,3 @@
1-
/*
2-
-- 01 TYPOGRAPHY
3-
4-
- FONT SIZE SYSTEM (px)
5-
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
6-
7-
- Font Weight:
8-
Default: 400
9-
Medium 500
10-
Semi Bold 600
11-
Bold 700
12-
13-
- Line Heights:
14-
Defaults: 1
15-
Small: 1.05
16-
Paragraph Default: 1.6
17-
18-
19-
-- 02 COLORS
20-
21-
- Primary: #e67e22
22-
- Tints: #fdf2e9
23-
- Shades: #cf711f
24-
- Accents:
25-
- Greys:
26-
#555
27-
#333
28-
29-
-- 05 SHADOWS
30-
31-
-- 06 BORDER RADIUS
32-
33-
Default: 9px
34-
35-
-- 07 WHITESPACE
36-
37-
- SPACING SYSTEM (px)
38-
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
39-
*/
40-
411
*,
422
*::before,
433
*::after {
@@ -57,62 +17,6 @@ body {
5717
color: #555;
5818
}
5919

60-
/**************************************/
61-
/* GENERAL REUSABLE COMPONENTS */
62-
/**************************************/
63-
64-
.heading-primary {
65-
font-size: 5.2rem;
66-
line-height: 1.05;
67-
color: #333;
68-
font-weight: 700;
69-
letter-spacing: -0.5px;
70-
margin-bottom: 3.2rem;
71-
}
72-
73-
.btn:link,
74-
.btn:visited {
75-
display: inline-block;
76-
77-
color: #fff;
78-
text-decoration: none;
79-
font-size: 2rem;
80-
font-weight: 600;
81-
padding: 1.6rem 3.2rem;
82-
border-radius: 9px;
83-
84-
transition: background-color 0.3s;
85-
}
86-
87-
.btn--full:link,
88-
.btn--full:visited {
89-
background-color: #e67e22;
90-
color: #fff;
91-
}
92-
93-
.btn--full:hover,
94-
.btn--full:active {
95-
background-color: #cf711f;
96-
}
97-
98-
.btn--outline:link,
99-
.btn--outline:visited {
100-
background-color: #fff;
101-
color: #555;
102-
}
103-
104-
.btn--outline:hover,
105-
.btn--outline:active {
106-
background-color: #fdf2e9;
107-
/*border: 3px solid #fff;*/
108-
109-
/* Trick to add border inside */
110-
box-shadow: inset 0 0 0 3px #fff;
111-
}
112-
113-
.margin-right-sm {
114-
margin-right: 1.6rem !important;
115-
}
11620

11721
/**************************************/
11822
/* HEADER */
@@ -232,4 +136,65 @@ body {
232136
.delivered-text {
233137
font-size: 1.8rem;
234138
font-weight: 600;
139+
}
140+
141+
/**************************************/
142+
/* SECTION HOW IT WORKS */
143+
/**************************************/
144+
.section-how {
145+
padding: 9.6rem 0;
146+
}
147+
148+
.step-number {
149+
font-size: 8.6rem;
150+
font-weight: 600;
151+
color: #ddd;
152+
margin-bottom: 1.2rem;
153+
}
154+
155+
.step-description {
156+
font-size: 1.8rem;
157+
line-height: 1.8;
158+
}
159+
160+
.step-img-box {
161+
display: flex;
162+
align-items: center;
163+
justify-content: center;
164+
position: relative;
165+
}
166+
167+
.step-img-box::before,
168+
.step-img-box::after {
169+
content: '';
170+
display: block;
171+
172+
border-radius: 50%;
173+
174+
position: absolute;
175+
top: 50%;
176+
left: 50%;
177+
transform: translate(-50%, -50%);
178+
}
179+
180+
.step-img-box::before {
181+
width: 60%;
182+
183+
/*height: 60%;*/
184+
185+
/* 60% of parent width */
186+
padding-bottom: 60%;
187+
background-color: #fdf2e9;
188+
z-index: -2;
189+
}
190+
191+
.step-img-box::after {
192+
width: 45%;
193+
padding-bottom: 45%;
194+
background-color: #fae5d3;
195+
z-index: -1;
196+
}
197+
198+
.step-img {
199+
width: 35%;
235200
}

0 commit comments

Comments
 (0)