Skip to content

Commit c6d1b64

Browse files
ricardoantonioricardoantonio
committed
Landscape tablets
1 parent 71de636 commit c6d1b64

File tree

4 files changed

+66
-7
lines changed

4 files changed

+66
-7
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ <h2 class="heading-secondary">
101101
<!-- STEP 1 -->
102102
<div class="step-text-box">
103103
<p class="step-number">01</p>
104-
<h3 class="heading--tertiary">
104+
<h3 class="heading-tertiary ">
105105
Tell us what you like (and what not)
106106
</h3>
107107
<p class="step-description">
@@ -130,7 +130,7 @@ <h3 class="heading--tertiary">
130130

131131
<div class="step-text-box">
132132
<p class="step-number">02</p>
133-
<h3 class="heading--tertiary">Approve your weekly meal plan</h3>
133+
<h3 class="heading-tertiary ">Approve your weekly meal plan</h3>
134134
<p class="step-description">
135135
Once per week, approve the meal plan generated for you by Omnifood
136136
AI. You can change ingredients, swap entire meals, or even add
@@ -141,7 +141,7 @@ <h3 class="heading--tertiary">Approve your weekly meal plan</h3>
141141
<!-- STEP 3 -->
142142
<div class="step-text-box">
143143
<p class="step-number">03</p>
144-
<h3 class="heading--tertiary">Receive meals at convenient time</h3>
144+
<h3 class="heading-tertiary ">Receive meals at convenient time</h3>
145145
<p class="step-description">
146146
Best chefs in town will cook your selected meal every day, and we
147147
will deliver it to your door whenever works best for you. You can

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */
2+
3+
/*****************************/
4+
/* BELOW 1344px (Smaller desktops) */
5+
/*****************************/
6+
7+
@media (max-width: 84em) {
8+
.hero {
9+
max-width: 120rem;
10+
}
11+
12+
.heading-primary {
13+
font-size: 4.4rem;
14+
}
15+
16+
.gallery {
17+
grid-template-columns: repeat(2, 1fr);
18+
}
19+
}
20+
21+
/*****************************/
22+
/* BELOW 1344px (Landscape Tablets) */
23+
/*****************************/
24+
25+
@media (max-width: 75em) {
26+
html {
27+
font-size: 56.25%;
28+
}
29+
30+
.grid {
31+
column-gap: 4.8rem;
32+
row-gap: 6.4rem;
33+
}
34+
35+
.heading-secondary {
36+
font-size: 3.6rem;
37+
}
38+
39+
.heading-tertiary {
40+
font-size: 2.4rem;
41+
}
42+
43+
.header {
44+
padding: 0 3.2rem;
45+
}
46+
47+
.main-nav-list {
48+
gap: 3.2rem;
49+
}
50+
51+
.hero {
52+
gap: 4.8rem;
53+
}
54+
55+
.testimonials-container {
56+
padding: 9.6rem 3.2rem;
57+
}
58+
}

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

Lines changed: 1 addition & 1 deletion
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,

‎myattempts/08-Omnifood-Responsive/index.html‎

Lines changed: 4 additions & 3 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
<title>Omnifood</title>
1718
</head>
1819
<body>
@@ -101,7 +102,7 @@ <h2 class="heading-secondary">
101102
<!-- STEP 1 -->
102103
<div class="step-text-box">
103104
<p class="step-number">01</p>
104-
<h3 class="heading--tertiary">
105+
<h3 class="heading-tertiary ">
105106
Tell us what you like (and what not)
106107
</h3>
107108
<p class="step-description">
@@ -130,7 +131,7 @@ <h3 class="heading--tertiary">
130131

131132
<div class="step-text-box">
132133
<p class="step-number">02</p>
133-
<h3 class="heading--tertiary">Approve your weekly meal plan</h3>
134+
<h3 class="heading-tertiary ">Approve your weekly meal plan</h3>
134135
<p class="step-description">
135136
Once per week, approve the meal plan generated for you by Omnifood
136137
AI. You can change ingredients, swap entire meals, or even add
@@ -141,7 +142,7 @@ <h3 class="heading--tertiary">Approve your weekly meal plan</h3>
141142
<!-- STEP 3 -->
142143
<div class="step-text-box">
143144
<p class="step-number">03</p>
144-
<h3 class="heading--tertiary">Receive meals at convenient time</h3>
145+
<h3 class="heading-tertiary ">Receive meals at convenient time</h3>
145146
<p class="step-description">
146147
Best chefs in town will cook your selected meal every day, and we
147148
will deliver it to your door whenever works best for you. You can

0 commit comments

Comments
 (0)