Skip to content

Commit 9083a37

Browse files
HuXn-WebDevHuXn-WebDev
committed
Foody Landing Page
1 parent eef9ef3 commit 9083a37

File tree

5 files changed

+397
-0
lines changed

5 files changed

+397
-0
lines changed

‎91. Foody Landing Page/assets/Images/ian-dooley-d1UPkiFd04A-unsplash.jpg

600 KB
Loading

‎91. Foody Landing Page/assets/Images/img-1.png

11.3 MB
Loading

‎91. Foody Landing Page/assets/Images/img-2.png

12.6 MB
Loading

‎91. Foody Landing Page/index.html

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Foody</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<!-- HEADER -->
12+
<header class="top-header">
13+
<h1 class="logo">F<span class="highlight">oo</span>dy</h1>
14+
<section class="top-header__content">
15+
<div class="content">
16+
<h1 class="main-headings">A Chef In Every Tasty Meal Box</h1>
17+
<div class="btns">
18+
<a href="#" class="main-btn-fill btn-animation">Select Program</a>
19+
<a href="#" class="main-btn btn-animation">View Menu</a>
20+
</div>
21+
</div>
22+
<img src="assets/Images/img-1.png" class="main-img" />
23+
</section>
24+
</header>
25+
26+
<section class="delivery">
27+
<div class="delivery__img"></div>
28+
<div class="delivery__content">
29+
<div class="delivery__headings">We Deliver Anywhere</div>
30+
<p class="delivery__sub-headings">
31+
Each fresh meal is perfectly sized for 1 person to enjoy at 1
32+
sittings. <br />
33+
Our fully-prepared meals are delivered freash, & to eat in 3 minutes.
34+
</p>
35+
<div class="btns">
36+
<a href="#" class="main-btn-fill btn-animation">Select Program</a>
37+
<a href="#" class="main-btn btn-animation delivery-btn">View Menu</a>
38+
</div>
39+
</div>
40+
</section>
41+
42+
<section class="why-foody">
43+
<h1 class="main-headings foody-headings">Why Foody Meal</h1>
44+
<div class="why-foody__cards">
45+
<div class="cards__card">
46+
<h1 class="card__title">Variety</h1>
47+
<div class="card__img img-one"></div>
48+
<p class="card-info">60+ recipes a week, cooked from 10 mins</p>
49+
<p class="card-info">
50+
Family classics, global cuisines plus Joe Wickss health rang
51+
</p>
52+
<p class="card-info">Tasty plant based and gluten free options too</p>
53+
</div>
54+
<div class="cards__card">
55+
<h1 class="card__title">Quality</h1>
56+
<div class="card__img img-one"></div>
57+
<p class="card-info">Fresh ingredients from trusted suppliers</p>
58+
<p class="card-info">100% British fresh meat</p>
59+
<p class="card-info">
60+
All recipes tried, tasted and loved by our chefs and customers
61+
</p>
62+
</div>
63+
<div class="cards__card">
64+
<h1 class="card__title">Simplicity</h1>
65+
<div class="card__img img-one"></div>
66+
<p class="card-info">Easy-to follow recipe cards</p>
67+
<p class="card-info">Precise ingredients with zero food waste</p>
68+
<p class="card-info">Precise ingredients with zero food waste</p>
69+
</div>
70+
</div>
71+
<div class="btns btn-container">
72+
<a href="#" class="main-btn btn-lg btn-animation">Get Started</a>
73+
</div>
74+
</section>
75+
76+
<section class="testimonial">
77+
<div class="user-img"></div>
78+
<div class="user-rating-info">
79+
<p>
80+
"I love coming home to a foody with four different ban ging recipes
81+
each week. With so many dishes to choose from there's always something
82+
new to try!"
83+
</p>
84+
<h1 class="user-name">
85+
<span class="highlight">Joe Wicks</span> | The Body Coach
86+
</h1>
87+
</div>
88+
</section>
89+
90+
<footer class="footer">
91+
<div class="footer-card">
92+
<h1 class="footer-title">Location</h1>
93+
<p class="footer-info">Start With Our Fresh Shrimps</p>
94+
<p class="footer-info">4213 Somewhere On Earth</p>
95+
</div>
96+
<div class="footer-card">
97+
<h1 class="footer-title">Working Hours</h1>
98+
<p class="footer-info">Monday Thursday Friday</p>
99+
<p class="footer-info">Saturday Sunday</p>
100+
</div>
101+
<div class="footer-card">
102+
<h1 class="footer-title">Contact Us</h1>
103+
<a href="#" class="footer-info">[email protected]</a>
104+
</div>
105+
</footer>
106+
</body>
107+
</html>

‎91. Foody Landing Page/style.css

+290
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&family=Roboto&display=swap");
2+
3+
* {
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
:root {
10+
--main-color: #d41b27;
11+
--black-color: #050505;
12+
--main-font: "Playfair Display";
13+
--secondary-font: Roboto;
14+
}
15+
16+
.logo {
17+
color: #000;
18+
font-family: var(--main-font);
19+
margin-left: 4rem;
20+
}
21+
22+
.highlight {
23+
color: var(--main-color);
24+
}
25+
26+
.main-btn-fill {
27+
background: var(--main-color);
28+
text-decoration: none;
29+
color: #fff;
30+
padding: 10px 20px;
31+
border-radius: 50px;
32+
font-family: var(--secondary-font);
33+
margin: 10px;
34+
}
35+
36+
.main-btn {
37+
background: #000;
38+
text-decoration: none;
39+
color: #fff;
40+
padding: 10px 20px;
41+
border-radius: 50px;
42+
font-family: var(--secondary-font);
43+
margin: 10px;
44+
}
45+
46+
.btn-animation:hover {
47+
background: #fff;
48+
color: #000;
49+
border: 1px solid #000;
50+
transition: 0.5s ease;
51+
}
52+
53+
/* HEADER */
54+
.top-header {
55+
height: 80vh;
56+
}
57+
58+
.top-header__content {
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
margin-top: 2rem;
63+
text-align: center;
64+
}
65+
66+
.main-headings {
67+
color: var(--black-color);
68+
font-family: var(--main-font);
69+
font-size: 400%;
70+
margin: 3rem;
71+
}
72+
73+
.main-img {
74+
margin-right: 20px;
75+
width: 40%;
76+
height: 40%;
77+
display: flex;
78+
flex-direction: column;
79+
justify-content: center;
80+
align-items: center;
81+
}
82+
83+
/* SECTION 2 */
84+
.delivery {
85+
display: flex;
86+
flex-wrap: wrap;
87+
justify-content: center;
88+
align-items: center;
89+
background: #000;
90+
color: #fff;
91+
padding-top: 10rem;
92+
padding-bottom: 5rem;
93+
}
94+
95+
.delivery__img {
96+
width: 250px;
97+
height: 250px;
98+
background-image: url(assets/Images/img-2.png);
99+
background-position: center;
100+
background-size: cover;
101+
margin-right: 3rem;
102+
}
103+
104+
.delivery__content {
105+
width: 30rem;
106+
}
107+
108+
.delivery__headings {
109+
font-family: var(--secondary-font);
110+
margin-bottom: 10px;
111+
font-size: 3rem;
112+
font-weight: normal;
113+
}
114+
115+
.delivery__sub-headings {
116+
font-family: var(--secondary-font);
117+
margin-bottom: 2rem;
118+
}
119+
120+
.delivery-btn {
121+
border: 1px solid #fff;
122+
}
123+
124+
/* SECTION 3 */
125+
.why-foody {
126+
height: 110vh;
127+
background: #fff;
128+
color: #000;
129+
}
130+
131+
.foody-headings {
132+
text-align: center;
133+
margin-top: 10rem;
134+
padding-top: 2rem;
135+
}
136+
137+
.why-foody__cards {
138+
display: flex;
139+
justify-content: center;
140+
align-items: center;
141+
}
142+
143+
.cards__card {
144+
width: 30%;
145+
margin: 0 auto;
146+
}
147+
148+
.card__title {
149+
font-family: var(--main-font);
150+
font-size: 2rem;
151+
text-align: center;
152+
margin-bottom: 20px;
153+
}
154+
155+
.card__img {
156+
width: 120px;
157+
height: 120px;
158+
background-size: cover;
159+
background-position: center;
160+
margin: 20px;
161+
margin: 0 auto;
162+
}
163+
164+
.img-one {
165+
background-image: url("assets/Images/img-2.png");
166+
}
167+
168+
.card-info {
169+
margin: 20px;
170+
font-family: var(--secondary-font);
171+
text-align: center;
172+
line-height: 20px;
173+
}
174+
175+
.btn-container {
176+
text-align: center;
177+
margin-top: 10px;
178+
}
179+
180+
/* SECTION 4 */
181+
.testimonial {
182+
height: 100vh;
183+
display: flex;
184+
flex-wrap: wrap;
185+
justify-content: center;
186+
align-items: center;
187+
background: #000;
188+
color: #fff;
189+
}
190+
191+
.user-img {
192+
background-image: url("assets/Images/ian-dooley-d1UPkiFd04A-unsplash.jpg");
193+
background-size: cover;
194+
background-position: center;
195+
width: 26%;
196+
height: 30rem;
197+
box-shadow: 20px 20px 2px 2px #fff;
198+
}
199+
200+
.user-rating-info {
201+
width: 20rem;
202+
height: 20px;
203+
margin-left: 40px;
204+
font-size: 20px;
205+
}
206+
207+
.user-name {
208+
font-size: 20px;
209+
margin-top: 20px;
210+
font-family: var(--main-font);
211+
}
212+
213+
/* FOOTER */
214+
.footer {
215+
display: flex;
216+
flex-wrap: wrap;
217+
justify-content: center;
218+
align-items: center;
219+
background: #fff;
220+
color: #000;
221+
height: 40vh;
222+
}
223+
224+
.footer-card {
225+
margin: 0 auto;
226+
font-family: var(--secondary-font);
227+
font-weight: normal;
228+
}
229+
230+
.footer-title {
231+
margin-bottom: 20px;
232+
}
233+
234+
.footer-info {
235+
margin-bottom: 10px;
236+
}
237+
238+
@media only screen and (max-width: 600px) {
239+
.main-headings {
240+
font-size: 2rem;
241+
}
242+
243+
.btns {
244+
display: flex;
245+
justify-content: center;
246+
align-items: center;
247+
}
248+
249+
.delivery {
250+
text-align: center;
251+
}
252+
.delivery__img {
253+
margin: 0 auto;
254+
margin-bottom: 2rem;
255+
}
256+
257+
.delivery__headings {
258+
font-size: 2rem;
259+
}
260+
.delivery__sub-headings {
261+
font-size: 12px;
262+
}
263+
264+
.why-foody {
265+
height: 120vh;
266+
}
267+
268+
.card__title {
269+
font-size: 1.4rem;
270+
}
271+
272+
.user-img {
273+
width: 50%;
274+
height: 50%;
275+
}
276+
277+
.user-rating-info {
278+
margin-bottom: 8rem;
279+
text-align: center;
280+
}
281+
.user-name {
282+
font-size: 20px;
283+
margin-top: 20px;
284+
font-family: var(--main-font);
285+
}
286+
287+
.footer {
288+
margin-top: 10rem;
289+
}
290+
}

0 commit comments

Comments
 (0)