-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
225 lines (211 loc) · 11.4 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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Le Dejeuner</title>
<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;500;700;800&family=Noto+Serif+Display:wght@400;500;600;700;800;900&family=Rubik:wght@400;500;600;700&display=swap"-->
<!-- rel="stylesheet">-->
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;600;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="header">
<a href="#">
<img class="logo" src="resources/logo.png"/>
</a>
<nav class="nav">
<ul class="nav-lists">
<li><a class="nav-list-item" href="#specialties">Specialties</a></li>
<li><a class="nav-list-item" href="#testimonial">Testimonial</a></li>
<li><a class="nav-list-item" href="#sign up">Sign Up</a></li>
<li><a class="nav-list-item" href="#">Learn More</a></li>
<li><a class="nav-list-item nav-cta" href="#">Order Now</a></li>
</ul>
</nav>
</div>
</header>
<layout>
<div class="section-hero">
<div class="hero-text">
<h1 class="primary-heading margin-bottom__md">Bakery with Love.</h1>
<p class="hero-description">Enjoy our baking that make with fresh and lovely ingredients.</p>
<p class="hero-description margin-bottom__md">Lovely & Leisurely.</p>
<a href="#" class="btn btn-important">Order Now</a>
</div>
</div>
<div class="section-feature margin-bottom__lg">
<div class="container">
<div class="logos">
<div class="feature">
<ion-icon class="feature-icon" name="heart-outline"></ion-icon>
<p class="feature-text"><strong>The freshest and highest quality </strong>ingredients</p>
<a href="#" class="feature-learn">learn more</a>
</div>
<div class="feature">
<ion-icon class="feature-icon " name="gift-outline"></ion-icon>
<p class="feature-text"><strong>Free island wide delivery </strong>to your door steps!</p>
<a href="#" class="feature-learn">learn more</a>
</div>
<div class="feature">
<ion-icon class="feature-icon" name="leaf-outline"></ion-icon>
<p class="feature-text"><strong>Eco friendly packaging </strong>to reduce waste to earth</p>
<a href="#" class="feature-learn">learn more</a>
</div>
</div>
</div>
<!-- <ion-icon name="leaf-outline"></ion-icon>-->
</div>
<div class="section-specialties" id="specialties">
<div class="container">
<span class="subheading">What to order</span>
<h2 class="heading-secondary specialties-heading">Our Specialities!</h2>
</div>
<div class="container grid grid--2-cols grid--s-2-cols grid--center">
<div class="special-text-box">
<h3 class="heading-tertiary special-heading">SourDoughs</h3>
<p class="step-description">Sourdough is a bread made by the fermentation of dough using wild
lactobacillaceae and yeast. Lactic
acid from fermentation imparts a sour taste and improves keeping qualities</p>
</div>
<div class="special-img-box">
<img src="/resources/specialties/1.jpg" class="special-img"/>
</div>
<div class="special-img-box">
<img src="/resources/specialties/2.jpg" class="special-img"/>
</div>
<div class="special-text-box">
<h3 class="heading-tertiary special-heading">CupCakes</h3>
<p class="step-description">A cupcake is a small cake designed to serve one person, which may be baked
in a small thin paper or aluminum cup. As with larger cakes, frosting and other cake decorations
such as fruit and candy may be applied</p>
</div>
<div class="special-text-box">
<h3 class="heading-tertiary special-heading">Macarons</h3>
<p class="step-description">A macaron or French macaroon is a sweet meringue-based confection made with
egg white, icing sugar, granulated sugar, almond meal, and food colouring. The macaron is
traditionally held to have been introduced in France by the Italian chef of queen Catherine de
Medici during the Renaissance</p>
</div>
<div class="special-img-box">
<img src="/resources/specialties/3.jpg" class="special-img"/>
</div>
</div>
</div>
<div class="section-testimonials" id="testimonial" >
<div class="container">
<span class="subheading">How customers think</span>
<h2 class="heading-secondary specialties-heading margin-bottom__md">Customer Testimonial</h2>
<div class="testimonials-cards grid grid--3-cols grid--center" >
<div class="testimonials-card">
<div class="testimonials-icons">
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star"></ion-icon>
</div>
<h2 class="heading-quaternary">"Best Macarons I had"</h2>
<p class="testimonials-text">Thanks Le Dejeuner Bakery ! One of the best Macarons I had and your service is wonderful</p>
<div class="testimonials-footer">
<img class="testimonials-image" src="/resources/customers/customer-2.jpg"/>
<p class="testimonials-user">Josiah Clark</p>
</div>
</div>
<div class="testimonials-card">
<div class="testimonials-icons">
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star-outline"></ion-icon>
</div>
<h2 class="heading-quaternary">"My favourite shop"</h2>
<p class="testimonials-text">Le Dejeuner Bakery is absolutely my favourite shop! I can always find something I love!</p>
<div class="testimonials-footer">
<img class="testimonials-image" src="/resources/customers/customer-4.jpg"/>
<p class="testimonials-user">Luke Ramirez</p>
</div>
</div>
<div class="testimonials-card">
<div class="testimonials-icons">
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star"></ion-icon>
<ion-icon class="testimonials-icon" name="star-half"></ion-icon>
</div>
<h2 class="heading-quaternary">"Great service, great cakes"</h2>
<p class="testimonials-text">I can come to Le Dejeuner Bakery, get great service, great cakes.</p>
<div class="testimonials-footer">
<img class="testimonials-image" src="/resources/customers/customer-3.jpg"/>
<p class="testimonials-user">Ella Wilson</p>
</div>
</div>
</div>
</div>
</div>
</layout>
<footer>
<div class="footer">
<div class="footer-form" id="sign up">
<h3>Get the latest from Le Dejeuner </h3>
<form class="cta-form" action="#">
<div>
<!-- <label for="first-name">Fist name</label>-->
<input id="fist-name" type="text" placeholder="First name*" required/>
</div>
<div>
<!-- <label for="last-name">Full Name</label>-->
<input id="last-name" type="text" placeholder="Last name*" required/>
</div>
<div>
<!-- <label for="email">Email address</label>-->
<input id="email" type="email" placeholder="Email*" required/>
</div>
<div>
<!-- <label for="zipcode">ZIP code</label>-->
<input id="zipcode" type="text" placeholder="ZIP Code*" required/>
</div>
<button class="cta-form-btn">Sign Up</button>
<div></div>
</form>
<div class="cta-agreements">By clicking Sign Up you agree to receive emails from Le Dejeuner and accept our Terms of Use and Privacy Policy.</div>
</div>
<div class="footer-footers">
<div class="footer-links">
<div><a href="#" class="footer-link">MEMBERSHIP</a></div>
<div><a href="#" class="footer-link">PRODUCE</a></div>
<div><a href="#" class="footer-link">OUR STORY</a></div>
<div><a href="#" class="footer-link">CONTACT</a></div>
<div><a href="#" class="footer-link">MENU</a></div>
<div><a href="#" class="footer-link">TERMS OF USE</a></div>
<div><a href="#" class="footer-link">LOCATION</a></div>
<div><a href="#" class="footer-link">FAQS</a></div>
<div><a href="#" class="footer-link">PRIVACY POLICY</a></div>
</div>
<div class="footer-social-text">CONNECT WITH US ON SOCIAL</div>
<div class="footer-logos">
<ul class="social-links">
<li><a class="social-link" href="#">
<ion-icon class="footer-logo" name="logo-facebook"></ion-icon>
</a></li>
<li><a class="social-link" href="#">
<ion-icon class="footer-logo" name="logo-twitter"></ion-icon>
</a></li>
<li><a class="social-link" href="#">
<ion-icon class="footer-logo" name="logo-instagram"></ion-icon>
</a></li>
</ul>
</div>
<div class="cta-agreements">© 2022 Le Dejeuner,Pte Ltd.All rights reserved.</div>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>