-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
275 lines (275 loc) · 15.8 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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coffee Shop Website</title>
<link rel="stylesheet" href="style.css">
<link
href="https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"
rel="stylesheet" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.css'
integrity='sha512-U9Y1sGB3sLIpZm3ePcrKbXVhXlnQNcuwGQJ2WjPjnp6XHqVTdgIlbaDzJXJIAuCTp3y22t+nhI4B88F/5ldjFA=='
crossorigin='anonymous' />
</head>
<body>
<div class="main-container">
<header class="header-section">
<div class="header-section__top-bar responsive-container">
<ul class="header-section__top-bar-text">
<li>
<p>Mon-Fri: 8am to 2pm</p>
</li>
<li>
<p>Sat-Sun: 11am to 4pm</p>
</li>
<li>
<p>1234-567-890</p>
</li>
</ul>
</div>
<nav class="header-section__nav responsive-container">
<div class="navbar__logo-div">
<img class="navbar__logo" src="./Images/Coffee-logo.png" alt="Coffee Logo">
</div>
<div class="navbar__links-div">
<ul class="navbar__links">
<li><a href="#section-1" class="white-clr">HOME</a></li>
<li><a href="#section-2" class="white-clr">ABOUT</a></li>
<li><a href="#section-3" class="white-clr">COFFEE</a></li>
<li><a href="#section-5" class="white-clr">REVIEW</a></li>
<li><a href="#section-6" class="white-clr">BLOG</a></li>
</ul>
</div>
</nav>
<nav class="header-section__nav-mobile responsive-container">
<div class="navbar__logo-div">
<img class="navbar__logo" src="./Images/Coffee-logo.png" alt="Coffee Logo">
</div>
<i class="fa-solid fa-bars"></i>
<div class="navbar__links-div">
<ul class="navbar__links-mobile">
<li><a href="#section-1" class="white-clr">HOME</a></li>
<li><a href="#section-2" class="white-clr">ABOUT</a></li>
<li><a href="#section-3" class="white-clr">COFFEE</a></li>
<li><a href="#section-5" class="white-clr">REVIEW</a></li>
<li><a href="#section-6" class="white-clr">BLOG</a></li>
</ul>
</div>
</nav>
</header>
<main class="main-section">
<section class="section-1" id="section-1">
<div class="section-1-div responsive-container">
<span class="section-1__span-text">NOW YOU CAN FEEL THE ENERGY</span>
<h1 class="section-1__main-heading">Start your day with <br> a black Coffee</h1>
<button class="section-1__button-white">BUY NOW</button>
</div>
</section>
<section class="section-2 responsive-container" id="section-2">
<div class="section-2-left">
<video src="./Videos/Coffee-video.mp4" autoplay muted></video>
</div>
<div class="section-2-right">
<span class="section-2-right__span">LIVE COFFEE MAKING PROCESS.</span>
<h2 class="section-2-right__h2 black-clr">We Telecast our Coffee Making Live</h2>
<h4 class="section-2-right__h4 black-clr">We are here to listen from you deliver exellence</h4>
<p class="section-2-right__p black-clr">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do
eiusmod temp or incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
<button class="section-2-right__button-secondary">LEARN MORE</button>
</div>
</section>
<section class="section-3 responsive-container common-padding" id="section-3">
<h2 class="section-3__h2 black-clr text-center">What kind of Coffee we serve for you</h2>
<p class="section-3__p black-clr text-center">Who are in extremely love with eco friendly system.</p>
<div class="section-3__card-main-div">
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Cappuccino</h3>
<p>$90</p>
</div>
<p>Creamy espresso topped with frothed milk, served hot in a cup.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Americano</h3>
<p>$69</p>
</div>
<p>Strong espresso diluted with hot water, delivering a bold flavor profile.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Espresso</h3>
<p>$49</p>
</div>
<p>Robust, concentrated coffee brewed by forcing hot water through fine grounds.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Macchiato</h3>
<p>$87</p>
</div>
<p>Espresso with a splash of steamed milk; bold yet balanced.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Mocha</h3>
<p>$62</p>
</div>
<p>Espresso with chocolate and steamed milk; rich and indulgent.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Coffee Latte</h3>
<p>$26</p>
</div>
<p>Espresso with creamy steamed milk; smooth and comforting.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Piccolo Latte</h3>
<p>$59</p>
</div>
<p>Small latte with a strong espresso base, topped with a dollop.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Ristretto</h3>
<p>$79</p>
</div>
<p>Intensely flavored espresso shot with less water, offering a concentrated brew.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Affogato</h3>
<p>$99</p>
</div>
<p>Espresso poured over vanilla ice cream, creating a delightful coffee dessert.</p>
</div>
</div>
</section>
<section class="section-4 responsive-container common-padding" id="section-4">
<h2 class="section-4__h2 black-clr text-center">Discover Your Perfect Cup of Coffee Today!</h2>
<p class="section-4__p black-clr text-center">Savor rich aromas for your ultimate coffee experience.</p>
<div class="section-4__img-div">
<img src="./Images/Section-4-Images/section-4-img-1.webp" alt="Section 4 Image 1">
<img src="./Images/Section-4-Images/section-4-img-2.webp" alt="Section 4 Image 2">
<img src="./Images/Section-4-Images/section-4-img-3.webp" alt="Section 4 Image 3">
<img src="./Images/Section-4-Images/section-4-img-4.webp" alt="Section 4 Image 4">
<img src="./Images/Section-4-Images/section-4-img-5.webp" alt="Section 4 Image 5">
</div>
</section>
<section class="section-5" id="section-5">
<div class="responsive-container">
<h2 class="section-5__h2 text-center">Indulge in Rich Aromas: Your Perfect Coffee Fix</h2>
<p class="section-5__p text-center">Embark on a journey to find your perfect cup.</p>
<div class="section-5__testimonial-div">
<div class="section-5__testimonial">
<img src="./Images/Section-5-Images/Testimonial-logo-1.webp" alt="Testimonial-logo-1">
<p>Absolutely divine! <i class="fa-solid fa-star yellow-clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i class="fa-solid fa-star white-clr"></i>
</p>
<p>Exquisite flavor, bold aroma, and unparalleled richness. This coffee is a daily
indulgence,
elevating my mornings and setting the standard for a perfect cup. Truly exceptional in
every
sip.</p>
</div>
<div class="section-5__testimonial">
<img src="./Images/Section-5-Images/Testimonial-logo-2.webp" alt="Testimonial-logo-2">
<p>Incredibly satisfying! <i class="fa-solid fa-star yellow-clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i class="fa-solid fa-star yellow-clr"></i>
</p>
<p>Rich, robust, and utterly satisfying. This coffee is my daily ritual, fueling my day with
its
unparalleled flavor and energizing aroma. A true delight for the senses, it never
disappoints.</p>
</div>
</div>
<div class="section-5__counter-div">
<div class="section-5__counter">
<span class="section-5__counter-number" data-val="500">0</span>
<p>Happy Client</p>
</div>
<div class="section-5__counter">
<span class="section-5__counter-number" data-val="462">0</span>
<p class="text-center">Total Projects</p>
</div>
<div class="section-5__counter">
<span class="section-5__counter-number" data-val="313">0</span>
<p class="text-center">Cups Coffee</p>
</div>
<div class="section-5__counter">
<span class="section-5__counter-number" data-val="536">0</span>
<p class="text-center">Total Submitted</p>
</div>
</div>
</div>
</section>
<section class="section-6 responsive-container" id="section-6">
<h2 class="section-6__h2 black-clr text-center">Exploring Coffee Culture: A Journey of Aromas</h2>
<p class="section-6__p black-clr text-center">Embark on a flavorful journey through diverse coffee
cultures.</p>
<div class="section-6__blog-div">
<div class="section-6__blog">
<img src="./Images/Section-6-Images/Blog-image-1.webp" alt="Blog-image-1">
<div class="section-6__blog-category">
<a href="#">Travel</a>
<a href="#">Lifestyle</a>
</div>
<h5 class="section-6__blog-title black-clr">The Art of Coffee: A Guide</h5>
<p class="section-6__blog-descp black-clr">Discover the intricate craft of coffee brewing, from
bean
selection to the perfect pour, in this comprehensive guide</p>
<p class="section-6__blog-date black-clr">31st January, 2023</p>
</div>
<div class="section-6__blog">
<img src="./Images/Section-6-Images/Blog-image-2.webp" alt="Blog-image-2">
<div class="section-6__blog-category">
<a href="#">Travel</a>
<a href="#">Lifestyle</a>
</div>
<h5 class="section-6__blog-title black-clr">Exploring Espresso: A Connoisseur's Perspective</h5>
<p class="section-6__blog-descp black-clr">Immerse yourself in the world of espresso, exploring
its
origins, flavors, and techniques with expert insights.</p>
<p class="section-6__blog-date black-clr">16th May, 2023</p>
</div>
</div>
</section>
<footer class="footer common-padding">
<div class="responsive-container">
<div class="footer__about-div">
<h4>About Us</h4>
<p>Explore our passion-perfected coffee blends and savor the journey with every rich, flavorful cup. Welcome to our coffee family.</p>
<p class="footer_copyright-text">Copyright ©2024 <span>Techie Andrew</span> | All rights reserved</p>
</div>
<div class="footer__newsletter">
<h4>Newsletter</h4>
<p>Stay updates with our latest news</p>
<div class="footer__search-div">
<input type="search" placeholder="Enter Email">
<button><i class="fa-solid fa-arrow-right"></i></button>
</div>
</div>
<div class="footer__follow-us">
<h4>Follow Us</h4>
<p>Let us be social</p>
<div class="footer__social-links">
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
</div>
</footer>
</main>
</div>
<script src="app.js" type="module"></script>
</body>
</html>