-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (191 loc) · 12.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hellofresh Redesign App Challenge</title>
<link rel="icon" href="">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body class="page">
<header class="header">
<div class="header__menu">
<a class="header__link" href="#"><img class="header__icon" src="./images/Hello_Fresh_Lockup.png" alt="Hello fresh"></a>
<nav class="menu">
<li class="menu__items"><a class="menu__links" href="#">Our Plans</a></li>
<li class="menu__items"><a class="menu__links" href="#">How It Works</a></li>
<li class="menu__items"><a class="menu__links" href="#">Our Menus</a></li>
<li class="menu__items"><a class="menu__links" href="#">Gift Cards</a></li>
<li class="menu__items"><a class="menu__links" href="#">Sustainability</a></li>
<li class="menu__items"><a class="menu__links" href="#">Thanksgiving Box</a></li>
</nav>
</div>
<button class="header__button">Log in</button>
</header>
<main>
<section class="section1 aligning">
<h1 class="section1__title verdana-normal">Take the stress out of mealtime</h1>
<p class="section1__description">America's Most Popular Meal Kit</p>
<button class="button button_section1">View our plans</button>
<div class="circle-button"></div>
</section>
<section class="section2 aligning">
<h3 class="section2_title inter-normal">Why HelloFresh?</h3>
<ul class="cards cards_section2">
<li class="cards__card cards__card_section2">
<img class="cards__image cards__image_section2" src="./images/why-hellofresh-icn1.png" alt="meal">
<h4 class="cards__title cards__title_section2">No skimpin’ on the chicken!</h4>
<p class="cards__description">Or steak, or fish, or plant protein.</p>
</li>
<li class="cards__card cards__card_section2">
<img class="cards__image cards__image_section2" src="./images/why-hellofresh-icn2.png" alt="meal">
<h4 class="cards__title cards__title_section2">No commitment whatsoever</h4>
<p class="cards__description">Skipping weeks or cancelling is super easy.</p>
</li>
<li class="cards__card cards__card_section2">
<img class="cards__image cards__image_section2" src="./images/why-hellofresh-icn3.png" alt="meal">
<h4 class="cards__title cards__title_section2">The most 5-star reviews</h4>
<p class="cards__description">Our huge recipe selection wows week after week.</p>
</li>
<li class="cards__card cards__card_section2">
<img class="cards__image cards__image_section2" src="./images/why-hellofresh-icn4.png" alt="meal">
<h4 class="cards__title cards__title_section2">Fresh and affordable</h4>
<p class="cards__description">Chef-created deliciousness from $7.49 per meal.</p>
</li>
</ul>
<button class="button button_section2">Get started</button>
</section>
<section class="section3">
<div class="section3__imagebox">
<img class="section3__image" src="./images/boxes.png" alt="good food">
</div>
<div class="section3__block">
<h4 class="section3__title inter-normal">What’s inside each box?</h4>
<ul class="section3__list">
<li class="section3__row">✔ Easy-to-follow recipes with clear nutritional info</li>
<li class="section3__row">✔ High-quality ingredients sourced straight from the farm</li>
<li class="section3__row">✔ Convenient meal kits that fit perfectly in the fridge</li>
<li class="section3__row">✔ A fun cooking experience that makes you feel unstoppable</li>
<li class="section3__row">✔ <span class="section3__row-green">Innovative packaging designed to reduce waste</span></li>
</ul>
<button class="button button_section3">View our plans</button>
</div>
</section>
<section class="section4 aligning">
<h3 class="section4__title inter-normal">Over 30+ fresh recipes every week</h3>
<p class="section4__subtitle">Easy meals designed by professional chefs and nutritionists</p>
<ul class="section4__caroosel">
<div class="circle-button circle-button_left"></div>
<li class="section4__item"><h4 class="section4__item-name">Meat & Veggies</h4><div class="section4__item-box"><p class="section4__item-description">Our most popular plan</p></div></li>
<li class="section4__item"><h4 class="section4__item-name">VEGGIE</h4><div class="section4__item-box"><p class="section4__item-description">& PLANT-BASED MEALS</p></div></li>
<li class="section4__item"><h4 class="section4__item-name">FAMILY FRIENDLY</h4><div class="section4__item-box"><p class="section4__item-description">KID-TESTED RECIPES</p></div></li>
<li class="section4__item"><h4 class="section4__item-name">FIT & WHOLESOME</h4><div class="section4__item-box"><p class="section4__item-description">FOR A BALANCED LIFESTYLE</p></div></li>
<div class="circle-button circle-button_right"></div>
</ul>
<button class="utton button_section4">View our menus</button>
</section>
<section class="section5 aligning">
<h3 class="section5__title inter-normal">Cook it. Love it. Tag it <span class="hashtag">#HelloFreshPics</span></h3>
<p class="section5__subtitle">Follow us on Instagram <span class="hashtag">@hellofresh</span></p>
<ul class="cards cards_section5">
<li class="cards__card cards__card_section5">
<img class="cards__image cards__image_section5" src="./images/InstagramPeople.jpeg" alt="meal">
<h4 class="cards__title cards__title_section5">bdanielle1285</h4>
<p class="cards__description">My little chef helping me make dinner tonight and trying out some of his new kitchen utensils I got him!</p>
</li>
<li class="cards__card cards__card_section5">
<img class="cards__image cards__image_section5" src="./images/dog.jpeg" alt="meal">
<h4 class="cards__title cards__title_section5">blilpepthekelpie</h4>
<p class="cards__description">I’m helping out 🧑🏽🍳 #masterchef #bestboy</p>
</li>
<li class="cards__card cards__card_section5">
<img class="cards__image cards__image_section5" src="./images/IgramFamilyDinner.jpeg" alt="meal">
<h4 class="cards__title cards__title_section5">mandi14eid</h4>
<p class="cards__description">Drew and the kids made mom dinner tonight! Drew and I had our doubts but WOW was it tasty!</p>
</li>
<li class="cards__card cards__card_section5">
<img class="cards__image cards__image_section5" src="./images/kidscookingedited.jpg" alt="meal">
<h4 class="cards__title cards__title_section5">our_lovely_stride</h4>
<p class="cards__description">We had a cooking class yesterday and we had such an amazing time. 😁 They had such a great time working as a team and I can’t wait for our weekly cooking class 🙌🏻😁</p>
</li>
</ul>
</section>
<section class="section6 aligning">
<h3 class="section6__title verdana-normal">Flexible Plans</h3>
<p class="section5__subtitle">to meet your household's needs</p>
<button class="button button_section6">View our plans</button>
</section>
<section class="section7 aligning">
<h2 class="section7__title verdana-normal">More questions?</h2>
<ul class="section7__list">
<li class="section7__row">How does HelloFresh’s meal kit delivery service work?</li>
<li class="section7__row">Which food meal plans & recipes does HelloFresh offer?</li>
<li class="section7__row">How many times a week does HelloFresh deliver?</li>
<li class="section7__row">Does HelloFresh give nutrition & calorie information?</li>
<li class="section7__row">How do I recycle my HelloFresh box?</li>
<li class="section7__row">Why should I choose HelloFresh as my meal kit service?</li>
<li class="section7__row">How much does HelloFresh cost?</li>
<li class="section7__row">Does HelloFresh support a healthy lifestyle?</li>
<li class="section7__row">Can I skip a week of delivery?</li>
</ul>
</section>
</main>
<footer class="footer">
<div class="footer__div">
<ul class="footer__list">
<ul class="footer__column">
<li class="footer__row">HelloFresh</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
</ul>
<ul class="footer__column">
<li class="footer__row">Our company</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
</ul>
<ul class="footer__column">
<li class="footer__row">Work with us</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
</ul>
<ul class="footer__column">
<li class="footer__row">Contact us</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum</li>
<li class="footer__row">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ul>
</ul>
<div class="footer__box">
<a class="footer__link" href="#" target="_blank">Download our app</a>
<p class="footer__text">Manage your deliveries from anywhere, anytime.</p>
</div>
</div>
<div class="footer__bottom">
<div class="footer__left-div">
<p class="footer__name">© HelloFresh 2022</p>
<ul class="list list_left">
<li class="list__row">Terms and Conditions</li>
<li class="list__row">Privacy</li>
<li class="list__row">Accessibility</li>
</ul>
</div>
<ul class="list list_right">
<li class="list__row list__row_link"><img class="list__image" src="./images/ig.png" alt="FB"></li>
<li class="list__row list__row_link"><img class="list__image" src="./images/tw.png" alt="FB"></li>
<li class="list__row list__row_link"><img class="list__image" src="./images/fb.png" alt="FB"></li>
</ul>
</div>
</footer>
</body>
</html>