Skip to content

Commit 382fcb8

Browse files
Nadix92Nadix92
committed
responsive design finished
1 parent 88e2d45 commit 382fcb8

File tree

4 files changed

+325
-2
lines changed

4 files changed

+325
-2
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,11 @@ Medium: 11px
5656
box-sizing: border-box;
5757
}
5858

59+
html,
60+
body {
61+
overflow-x: hidden;
62+
}
63+
5964
html {
6065
/* font-size: 10px; */
6166
/* 10px / 16px = 0.625 = 62.5% */
@@ -69,6 +74,9 @@ body {
6974
line-height: 1;
7075
font-weight: 400;
7176
color: #555;
77+
position: relative;
78+
79+
/* Only works if there is nothing absolutely positioned in relation to body */
7280
}
7381

7482
/****************************/
@@ -225,6 +233,7 @@ body {
225233
display: flex;
226234
flex-direction: column;
227235
gap: 1.6rem;
236+
line-height: 1.2;
228237
}
229238

230239
.list-item {

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

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

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

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
list-style: none;
2626
display: flex;
2727
align-items: center;
28-
gap: 3.2rem;
28+
gap: 4.8rem;
2929
}
3030

3131
.main-nav-link:link,
@@ -56,6 +56,28 @@
5656
background-color: #cf711f;
5757
}
5858

59+
/* MOBILE */
60+
.btn-mobile-nav {
61+
border: none;
62+
background: none;
63+
cursor: pointer;
64+
65+
display: none;
66+
}
67+
68+
.icon-mobile-nav {
69+
height: 4.8rem;
70+
width: 4.8rem;
71+
color: #333;
72+
}
73+
74+
.icon-mobile-nav[name='close-outline'] {
75+
display: none;
76+
}
77+
78+
.icon-mobile-nav[name='menu-outline'] {
79+
}
80+
5981
/****************************/
6082
/* HERO SECTION */
6183
/****************************/
@@ -73,6 +95,8 @@
7395
grid-template-columns: 1fr 1fr;
7496
gap: 9.6rem;
7597
align-items: center;
98+
99+
position: relative;
76100
}
77101

78102
.hero-description {
@@ -480,7 +504,7 @@
480504
/****************************/
481505

482506
.section-cta {
483-
padding: 4.8rem 0 12.8rem;
507+
padding: 4.8rem 2.4rem 12.8rem;
484508
}
485509

486510
.cta {

‎starter/07-Omnifood-Desktop/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="stylesheet" href="css/general.css" />
88
<link rel="stylesheet" href="css/style.css" />
9+
<link rel="stylesheet" href="css/queries.css" />
910
<title>Omnifood</title>
1011
</head>
1112
<body>
@@ -20,6 +21,11 @@
2021
<li><a class="main-nav-link nav-cta" href="#signup">Try for free</a></li>
2122
</ul>
2223
</nav>
24+
25+
<button class="btn-mobile-nav">
26+
<ion-icon name="menu-outline" class="icon-mobile-nav"></ion-icon>
27+
<ion-icon name="close-outline" class="icon-mobile-nav"></ion-icon>
28+
</button>
2329
</header>
2430

2531
<main>

0 commit comments

Comments
 (0)