Skip to content

Commit 90152cd

Browse files
kalpshah485kalpshah485
authored
Merge pull request #5 from kalpshah485/feat/omnifood-responsive
feat:responsive design added
2 parents ae6e5bc + d609aa7 commit 90152cd

File tree

4 files changed

+290
-7
lines changed

4 files changed

+290
-7
lines changed

‎08-Omnifood-Responsive/css/general.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,15 @@ html {
6767
/* 10px / 16px = 0.625 = 62.5% */
6868
/* Percentage of user's browser font-size setting */
6969
font-size: 62.5%;
70+
overflow-x: hidden;
7071
}
7172

7273
body {
7374
font-family: "Rubik", sans-serif;
7475
line-height: 1;
7576
font-weight: 400;
7677
color: #555;
78+
overflow-x: hidden;
7779
}
7880

7981
/**************************/
@@ -249,6 +251,7 @@ body {
249251
display: flex;
250252
align-items: center;
251253
gap: 1.6rem;
254+
line-height: 1.2;
252255
}
253256

254257
.list-icon {

‎08-Omnifood-Responsive/css/queries.css

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
@media (max-width: 84em) {
2+
.hero {
3+
max-width: 120rem;
4+
}
5+
6+
.heading-primary {
7+
font-size: 4.4rem;
8+
}
9+
10+
.gallery {
11+
grid-template-columns: repeat(2, 1fr);
12+
}
13+
}
14+
15+
@media (max-width: 75em) {
16+
html {
17+
font-size: 56.25%;
18+
}
19+
20+
.grid {
21+
column-gap: 4.8rem;
22+
row-gap: 6.4rem;
23+
}
24+
25+
.heading-secondary {
26+
font-size: 3.6rem;
27+
}
28+
29+
.heading-tertiary {
30+
font-size: 2.4rem;
31+
}
32+
33+
.header {
34+
padding: 0 3.2rem;
35+
}
36+
.main-nav-list {
37+
gap: 3.2rem;
38+
}
39+
40+
.hero {
41+
gap: 4.8rem;
42+
}
43+
44+
.testimonials-container {
45+
padding: 9.6rem 3.2rem;
46+
}
47+
}
48+
49+
@media (max-width: 59em) {
50+
html {
51+
font-size: 50%;
52+
}
53+
54+
.hero {
55+
grid-template-columns: 1fr;
56+
padding: 0 8rem;
57+
gap: 6.4rem;
58+
}
59+
60+
.hero-img {
61+
width: 60%;
62+
}
63+
64+
.hero-text-box,
65+
.hero-img-box {
66+
text-align: center;
67+
}
68+
69+
.delivered-meals {
70+
justify-content: center;
71+
margin-top: 3.2rem;
72+
}
73+
74+
.logos img {
75+
height: 2.4rem;
76+
}
77+
78+
.step-number {
79+
font-size: 7rem;
80+
}
81+
82+
.meal-content {
83+
padding: 2.4rem 3.2rem 3.2rem 3.2rem;
84+
}
85+
86+
.section-testimonials {
87+
grid-template-columns: 1fr;
88+
}
89+
90+
.gallery {
91+
grid-template-columns: repeat(6, 1fr);
92+
}
93+
94+
.cta {
95+
grid-template-columns: 3fr 2fr;
96+
}
97+
98+
.cta-form {
99+
grid-template-columns: 1fr;
100+
}
101+
102+
.btn--form {
103+
margin-top: 1.2rem;
104+
}
105+
106+
.btn-mobile-nav {
107+
display: block;
108+
}
109+
110+
.main-nav {
111+
background-color: rgba(255, 255, 255, 0.97);
112+
position: absolute;
113+
top: 0;
114+
left: 0;
115+
width: 100%;
116+
height: 100vh;
117+
transform: translateX(100%);
118+
119+
display: flex;
120+
align-items: center;
121+
justify-content: center;
122+
transition: all 0.5s ease-in;
123+
124+
/* display: none; */
125+
opacity: 0;
126+
pointer-events: none;
127+
visibility: hidden;
128+
}
129+
130+
.nav-open .main-nav {
131+
opacity: 1;
132+
pointer-events: auto;
133+
visibility: visible;
134+
transform: translateX(0%);
135+
}
136+
137+
.nav-open .icon-mobile-nav[name="menu-outline"] {
138+
display: none;
139+
}
140+
141+
.nav-open .icon-mobile-nav[name="close-outline"] {
142+
display: block;
143+
}
144+
145+
.main-nav-list {
146+
flex-direction: column;
147+
gap: 4.8rem;
148+
}
149+
150+
.main-nav-link:link,
151+
.main-nav-link:visited {
152+
font-size: 3rem;
153+
}
154+
}
155+
156+
@media (max-width: 44em) {
157+
.grid--3-cols,
158+
.grid--4-cols {
159+
grid-template-columns: repeat(2, 1fr);
160+
}
161+
162+
.diets {
163+
grid-column: 1/-1;
164+
justify-self: center;
165+
}
166+
167+
.heading-secondary {
168+
margin-bottom: 4.8rem;
169+
}
170+
171+
.pricing-plan {
172+
width: 100%;
173+
}
174+
175+
.grid--footer {
176+
grid-template-columns: repeat(6, 1fr);
177+
}
178+
179+
.logo-col,
180+
.address-col {
181+
grid-column: span 3;
182+
}
183+
184+
.nav-col {
185+
grid-row: 1;
186+
grid-column: span 2;
187+
margin-bottom: 3.2rem;
188+
}
189+
}
190+
191+
@media (max-width: 34em) {
192+
.grid {
193+
row-gap: 4.8rem;
194+
}
195+
196+
.grid--2-cols,
197+
.grid--3-cols,
198+
.grid--4-cols {
199+
grid-template-columns: 1fr;
200+
}
201+
202+
.btn,
203+
.btn:link,
204+
.btn:visited {
205+
padding: 2.4rem 1.6rem;
206+
}
207+
208+
.section-hero {
209+
padding: 2.4rem 0 6.4rem 0;
210+
}
211+
212+
.hero {
213+
padding: 0 3.2rem;
214+
}
215+
216+
.hero-img {
217+
width: 80%;
218+
}
219+
220+
.logos img {
221+
height: 1.2rem;
222+
}
223+
224+
.step-img-box:nth-child(2) {
225+
grid-row: 1;
226+
}
227+
228+
.step-img-box:nth-child(5) {
229+
grid-row: 1;
230+
}
231+
232+
.step-img-box {
233+
transform: translateY(2.4rem);
234+
}
235+
236+
.testimonials {
237+
grid-template-columns: 1fr;
238+
}
239+
240+
.gallery {
241+
grid-template-columns: repeat(4, 1fr);
242+
}
243+
244+
.cta {
245+
grid-template-columns: 1fr;
246+
}
247+
248+
.cta-text-box {
249+
padding: 3.2rem;
250+
}
251+
252+
.cta-img-box {
253+
height: 32rem;
254+
grid-row: 1;
255+
}
256+
}

‎08-Omnifood-Responsive/css/style.css

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
/**************************/
44

55
.header {
6+
position: relative;
67
display: flex;
78
justify-content: space-between;
89
align-items: center;
@@ -25,7 +26,7 @@
2526
list-style: none;
2627
display: flex;
2728
align-items: center;
28-
gap: 3.2rem;
29+
gap: 4.8rem;
2930
}
3031

3132
.main-nav-link:link,
@@ -56,6 +57,23 @@
5657
background-color: #cf711f;
5758
}
5859

60+
.btn-mobile-nav {
61+
border: none;
62+
background: none;
63+
cursor: pointer;
64+
display: none;
65+
}
66+
67+
.icon-mobile-nav {
68+
height: 4.8rem;
69+
width: 4.8rem;
70+
color: #333;
71+
}
72+
73+
.icon-mobile-nav[name="close-outline"] {
74+
display: none;
75+
}
76+
5977
/**************************/
6078
/* HERO SECTION */
6179
/**************************/
@@ -363,26 +381,26 @@
363381
padding: 9.6rem 0;
364382
}
365383

366-
.princing-plan {
384+
.pricing-plan {
367385
border-radius: 11px;
368386

369387
width: 75%;
370388
}
371389

372-
.princing-plan--starter {
390+
.pricing-plan--starter {
373391
justify-self: end;
374392
border: 2px solid #fdf2e9;
375393
padding: 4.6rem;
376394
}
377395

378-
.princing-plan--complete {
396+
.pricing-plan--complete {
379397
background-color: #fdf2e9;
380398
padding: 4.8rem;
381399
position: relative;
382400
overflow: hidden;
383401
}
384402

385-
.princing-plan--complete::after {
403+
.pricing-plan--complete::after {
386404
content: "Best value";
387405
position: absolute;
388406
top: 6%;

‎08-Omnifood-Responsive/index.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
<link rel="stylesheet" href="css/general.css" />
1515
<link rel="stylesheet" href="css/style.css" />
16+
<link rel="stylesheet" href="css/queries.css" />
1617

1718
<script
1819
type="module"
@@ -39,6 +40,11 @@
3940
<li><a class="main-nav-link nav-cta" href="#">Try for free</a></li>
4041
</ul>
4142
</nav>
43+
44+
<button class="btn-mobile-nav">
45+
<ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
46+
<ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
47+
</button>
4248
</header>
4349

4450
<main>
@@ -449,7 +455,7 @@ <h2 class="heading-secondary">
449455
</div>
450456

451457
<div class="container grid grid--2-cols margin-bottom-md">
452-
<div class="princing-plan princing-plan--starter">
458+
<div class="pricing-plan pricing-plan--starter">
453459
<header class="plan-header">
454460
<p class="plan-name">Starter</p>
455461
<p class="plan-price"><span>$</span>399</p>
@@ -477,7 +483,7 @@ <h2 class="heading-secondary">
477483
</div>
478484
</div>
479485

480-
<div class="princing-plan princing-plan--complete">
486+
<div class="pricing-plan pricing-plan--complete">
481487
<header class="plan-header">
482488
<p class="plan-name">Complete</p>
483489
<p class="plan-price"><span>$</span>649</p>

0 commit comments

Comments
 (0)