-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
294 lines (273 loc) · 13.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
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
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- For Responsive behaviour -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coffee King</title>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=Pacifico&display=swap" rel="stylesheet">
<!-- Materialize icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Materialize css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- This section is for navigation -->
<section class="fnavbar">
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">CoffeeKing</a>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a class="modal-trigger" href="#modal1">Home</a></li>
<li><a class="modal-trigger" href="#modal1">Coffee</a></li>
<li><a class="modal-trigger" href="#modal1">About</a></li>
<li><a class="modal-trigger" href="#modal1">Surprise!</a></li>
<li><a class="modal-trigger" href="#modal1">Contact</a></li>
</ul>
</div>
</nav>
</div>
<ul id="slide-out" class="sidenav">
<li><a class="modal-trigger" href="#modal1">Home</a></li>
<li><a class="modal-trigger" href="#modal1">About</a></li>
<li><a class="modal-trigger" href="#modal1">Coffee</a></li>
<li><a class="modal-trigger" href="#modal1">Surprise!</a></li>
<li><a class="modal-trigger" href="#modal1">Contact</a></li>
</ul>
</section>
<!-- This section is for sliders -->
<section class="fslider">
<div class="slider">
<ul class="slides">
<li>
<img src="images/banner1.png" alt="image one">
<div class="caption center-align white-text">
<h3>CoffeeKing - Quality Coffee</h3>
<h5 class="slider-msg">We serve one of the best coffee around</h5>
</div>
</li>
<li>
<img src="images/banner2.png" alt="image two">
<div class="caption center-align white-text">
<h3>Exceptional Service at Your Door!</h3>
<h5 class="slider-msg">We deliver Quality And We're doing this for years!</h5>
</div>
</li>
</ul>
</div>
</section>
<!-- This section is for description -->
<section class="descrip">
<div class="section white center">
<h2 class="header">
CoffeeKing - Ultimate quality coffee
</h2>
<div class="row container center">
<div class="col center l8 s12 description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ea molestiae, ipsa, tenetur itaque dicta libero delectus incidunt fuga repudiandae est rerum expedita quia debitis quam illo vero laboriosam numquam eius molestias! Quas
reprehenderit voluptatem nemo, fugiat modi atque illo earum ea tenetur sed ipsam repellat minus quibusdam doloremque aliquid odio dolorum reiciendis quisquam eum nobis. Laboriosam officia aut, laudantium tempora, voluptates doloremque,
quia, reiciendis voluptas voluptatum recusandae ipsam! Illo aliquid possimus porro reiciendis eveniet consectetur eligendi amet. Voluptate officia provident recusandae eum minus aut nam asperiores beatae sit repellat odio maiores quisquam
reprehenderit vel sapiente, voluptas facilis harum dolor hic doloribus, dolores. Non quo magni modi consequatur cumque maiores illum veniam quaerat magnam cum nemo harum, veritatis iure possimus, architecto aperiam quas enim reprehenderit
voluptates neque corporis perspiciatis. Nihil soluta, sed nisi, et aliquid facere sequi consectetur quaerat quidem voluptatem numquam magnam animi consequatur tempore ipsum iusto veritatis ea!
</div>
<div class="col center l4 s12">
<img class="descrip-img" src="images/coffee.png" alt="description image">
</div>
</div>
</div>
</section>
<!-- This is cards section -->
<section class="fcards">
<div class="row fcards-row">
<div class="col s12 m12 l4 fcards-col">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/item1.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Cappuccino<i class="material-icons right">more_vert</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Cappuccino<i class="material-icons right">close</i></span>
<p>A cappuccino is an espresso-based coffee drink that originated in Italy, and is traditionally prepared with steamed milk foam. Variations of the drink involve the use of cream instead of milk, and flavoring with cinnamon or chocolate powder.</p>
</div>
</div>
</div>
<div class="col s12 m12 l4 fcards-col">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/item2.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Latte<i class="material-icons right">more_vert</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Latte<i class="material-icons right">close</i></span>
<p>Caffe latte is a coffee drink made with espresso and steamed milk. The word comes from the Italian caffè e latte, caffelatte or caffellatte, which means "coffee & milk".</p>
</div>
</div>
</div>
<div class="col s12 m12 l4 fcards-col">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/item3.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Espresso<i class="material-icons right">more_vert</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Espresso<i class="material-icons right">close</i></span>
<p>Espresso is a coffee-making method of Italian origin, in which a small amount of nearly boiling water is forced under pressure through finely-ground coffee beans. Espresso coffee can be made with a wide variety of coffee beans and roasts.</p>
</div>
</div>
</div>
</div>
</section>
<!-- This section is for Parallax -->
<section class="fparallax">
<div class="parallax-container">
<div class="parallax"><img src="images/caro2.jpg" alt="This is a location for user"></div>
</div>
</section>
<!-- This section is for About -->
<section class="fabout">
<div class="section white center">
<div class="row container">
<h2 class="header">About Us</h2>
<p class="grey-text text-darken-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam optio deserunt labore impedit maiores non consequuntur fugiat, nostrum animi dolor illum, distinctio veniam dicta, reiciendis voluptatum voluptas modi ad sequi assumenda! Eum beatae voluptatum quod labore voluptas quis sint dolorum, architecto autem at. Atque esse, adipisci similique consequuntur cupiditate unde recusandae consequatur accusantium culpa voluptate. Est, mollitia, debitis. Molestiae odio cupiditate odit, illo culpa mollitia sint possimus commodi nemo aperiam quia, harum nulla repellendus iusto. Eligendi nulla laudantium ratione deleniti nostrum. Commodi deleniti temporibus culpa consequatur perspiciatis quae quis, at non molestias dolores dolor quos, illum quidem nulla velit. Architecto, voluptate, id nobis, beatae quisquam omnis minima officia ab voluptas ipsa quia debitis, nemo error! Facilis, ullam. Laboriosam distinctio incidunt optio, impedit maiores eius asperiores amet totam facilis eaque in minus, repellat, architecto iure odio quod possimus. Quam, tempora hic. Ratione nihil eos tenetur vel veniam molestiae, enim maxime deserunt.
</p>
<a href="#modal1" class="btn waves-effect waves-light fabout-btn modal-trigger">Read More</a>
</div>
</div>
</section>
<!-- This section is for services -->
<section class="fservices">
<div class="row fservices-row">
<div class="col s12 l4 center fservices-col">
<i class="large material-icons icon-coffee">local_dining</i>
<h5>Variety of Coffee</h5>
</div>
<div class="col s12 l4 center fservices-col">
<i class="large material-icons icon-coffee">watch_later</i>
<h5>24x7 Open Cafe</h5>
</div>
<div class="col s12 l4 center fservices-col">
<i class="large material-icons icon-coffee">favorite</i>
<h5>Excellent Quality</h5>
</div>
</div>
</section>
<hr>
<!-- This section is for reviews -->
<section class="freviews">
<div class="section white center">
<h3 class="header">What our customers say</h3>
<div class="carousel myreviews">
<a class="carousel-item">
<div class="row">
<div class="card-panel teal freviews-row">
<span class="white-text">"This is the best Coffee ever!"<br>-<br><strong>Samprit</strong></span>
</div>
</div>
</a>
<a class="carousel-item">
<div class="row">
<div class="card-panel freviews-row">
<span class="white-text">"I Love The Vanilla Latte of here!"<br>-<br> <strong>Raushan</strong></span>
</div>
</div>
</a>
<a class="carousel-item">
<div class="row">
<div class="card-panel freviews-row">
<span class="white-text">"This Cafe is having the best environment!"<br>-<br> <strong>Anirudh</strong></span>
</div>
</div>
</a>
<a class="carousel-item">
<div class="row">
<div class="card-panel freviews-row">
<span class="white-text">">"I love this Cafe very much and their coffees!"<br>-<br> <strong>Farhan</strong></span>
</div>
</div>
</a>
<a class="carousel-item">
<div class="row">
<div class="card-panel freviews-row">
<span class="white-text">"Wow! So nice coffees in so much cheap prices!"<br>-<br> <strong>Riya</strong></span>
</div>
</div>
</a>
<a class="carousel-item">
<div class="row">
<div class="card-panel freviews-row">
<span class="white-text">"Awesome cafe in our area! Love it!"<br>-<br> <strong>Jasmine</strong></span>
</div>
</div>
</a>
<a class="carousel-item">
<div class="row">
<div class="card-panel freviews-row">
<span class="white-text">"This is the best coffee I ever had in my life!"<br>-<br> <strong>Natasha</strong></span>
</div>
</div>
</a>
</div>
</div>
</section>
<!-- This section is for footer -->
<section class="footer">
<footer class="footer-one">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h4 class="white-text">Contact Us</h4>
<p class="grey-text">ABCD07,Delhi, India</p>
<p class="grey-text">+910000000000</p>
</div>
<div class="col l6 s12">
<h4 class="white-text">Social Media Links</h4>
<p class="grey-text">Facebook</p>
<p class="grey-text">Instagram</p>
<p class="grey-text">Tweeter</p>
</div>
</div>
</div>
<div class="footer-two">
<div class="row container">
<div class="col l6 s12">
<p class="white-text">©: CafeKing</p>
</div>
<div class="col l6 s12">
<p class="white-text">Designed by Aayush</p>
</div>
</div>
</div>
</footer>
</section>
<!-- Modal Structure -->
<section class="infomodal">
<div id="modal1" class="modal">
<div class="modal-content">
<h4 id="info-modal-heading">Link Disabled</h4>
<p id="info-modal-content">Sorry all links are disabled as of now</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
</section>
<!-- jQuery cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Materialize js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Custom js -->
<script src="js/index.js" charset="utf-8"></script>
</body>
</html>