Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9083a37

Browse files
Foody Landing Page
1 parent eef9ef3 commit 9083a37

File tree

5 files changed

+397
-0
lines changed

5 files changed

+397
-0
lines changed
600 KB
Loading[フレーム]
11.3 MB
Loading[フレーム]
12.6 MB
Loading[フレーム]

‎91. Foody Landing Page/index.html‎

Lines changed: 107 additions & 0 deletions
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">webdevacademy6@gmail.com</a>
104+
</div>
105+
</footer>
106+
</body>
107+
</html>

‎91. Foody Landing Page/style.css‎

Lines changed: 290 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /