-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
306 lines (292 loc) · 18.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
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
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html>
<head>
<title> CoffeCup </title>
<link rel="stylesheet" href="./assets/css/style.css">
<meta charset="utf-8">
<meta name="author" content="Diether Marcelo">
<meta name="description" content="CoffeeCup products">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="follow">
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png">
</head>
<body>
<div class="burger-container absolute md-none relative">
<div class="burger-icon fixed">
<button>
<img src="./assets/images/Burger-menu.png" alt="">
</button>
</div>
<div class="burger-navs opacity-0 md-none relative important-index-negative-1">
<div class="close absolute">
<button>
<img src="./assets/images/Close.png" alt="">
</button>
</div>
<nav class="flex flex-align-center">
<a href="#" class="nav-items active">Home</a>
<a href="#" class="nav-items">About</a>
<a href="#" class="nav-items">Menu</a>
<a href="#" class="nav-items">Blog</a>
<a href="#" class="nav-items">Shop</a>
<a href="#" class="nav-items">Contact</a>
</nav>
</div>
</div>
<div class="absolute landing-img">
</div>
<header class="w-100 absolute none md-block" id="main-nav">
<div class="container">
<div class="flex flex-between" id="nav-container">
<nav class="flex flex-align-center">
<a href="#" class="nav-items active">Home</a>
<a href="#" class="nav-items">About</a>
<a href="#" class="nav-items">Menu</a>
<a href="#" class="nav-items">Blog</a>
<a href="#" class="nav-items">Shop</a>
<a href="#" class="nav-items">Contact</a>
</nav>
<div class="logo flex flex-align-center">
<img src="./assets/images/Logo.png" alt="CoffeCup Logo">
<span> CoffeeCup </span>
</div>
</div>
</div>
</header>
<section class="main-sections" id="landing">
<div class="container">
<div class="row">
<div class="content col-sm-6">
<h1 class="section-title font-weight-normal"> Coffee </h1>
<span class="inline-block font-md"> Everything you love about coffee </span>
<p class="mt-0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
<button class="order-now"> Order Now </button>
</div>
</div>
</div>
</section>
<section class="main-sections relative coffee-blue-right right blue-coffees" id="first-coffee">
<div class="background absolute right"></div>
<div class="container">
<div class="row">
<div class="col-12 col-md-4 px-2 py-2">
<h1 class="section-title"> Dark Coffees</h1>
<button class="order-now"> Order Now </button>
</div>
<div class="col-12 col-md-4 px-2 center-coffee-main-images">
<img src="./assets/images/Coffee-1.png" class="img-responsive coffee" alt="">
</div>
<div class="col-12 col-md-4 px-2 content">
<p class="text-white"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ea commodo consequat. Duis aut dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
</div>
</div>
</div>
</section>
<section class="main-sections relative coffee-blue-left left blue-coffees" id="second-coffee">
<div class="background absolute left"></div>
<div class="container">
<div class="row">
<div class="col-12 col-md-4 px-2 content">
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ea commodo consequat. Duis aut dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
<div class="col-12 col-md-4 px-2 center-coffee-main-images">
<img src="./assets/images/Coffee-2.png" alt="" class="img-responsive coffee">
</div>
<div class="col-12 col-md-4 px-2">
<h1 class="section-title"> Cold Coffees </h1>
<button class="order-now"> Order Now </button>
</div>
</div>
</div>
</section>
<section class="main-sections relative coffee-blue-bottom right blue-coffees" id="third-coffee">
<div class="background absolute right"></div>
<div class="container">
<div class="row">
<div class="col-12 col-md-4 px-2 py-2">
<h1 class="section-title"> Hot Coffees </h1>
<button class="order-now"> Order Now </button>
</div>
<div class="col-12 col-md-4 px-2">
<img src="./assets/images/Coffee-3.png" alt="" class="img-responsive coffee">
</div>
<div class="col-12 col-md-4 px-2 content">
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ea commodo consequat. Duis aut dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
</div>
</section>
<!-- Vouchers -->
<section class="main-sections" id="voucher">
<div class="container">
<div class="row flex-align-center p-3 bg-white">
<div class="col-lg-6 px-3 images relative">
<img src="./assets/images/Free-Voucher.png" alt="" class="img-responsive voucher-circle">
<img src="./assets/images/Voucher-leaf.png" alt="" class="leaf absolute">
</div>
<div class="col-lg-5 offset-lg-1 md-px-4 content text-center">
<h1 class="section-title light-italic-garamond font-weight-normal py-2"> Gift Voucher </h1>
<span class="sub-content px-3 py-1 bold-roboto"> 1 Cup of Coffee </span>
<p class="py-3 font-rg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
</div>
</section>
<section class="main-sections bg-white" id="about">
<div class="container px-3">
<h1 class="section-title text-center py-3"> About Us </h1>
<p class="text-center my-3 font-md"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident. </p>
<p class="text-center my-3 font-md"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
</div>
</section>
<section class="main-sections" id="reviews">
<div class="container">
<h1 class="section-title text-center"> Customer Reviews </h1>
<div class="row reviews-row flex-align-center px-3">
<div class="reviews-container">
<div class="col-lg-6">
<div class="box review my-3 flex flex-wrap">
<div class="">
<img src="./assets/images/Review-2.jpg" alt="" class="img-responsive h-100">
</div>
<div class=" px-2 content py-3">
<p class="flex flex-align-center text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<h3 class="font-md-lg text-right"> Ella Thomson </h3>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="box review my-3 flex flex-wrap">
<div class="px-2 content py-3">
<p class="flex flex-align-center text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<h3 class="font-md-lg"> John Peter </h3>
</div>
<div class="">
<img src="./assets/images/Review-1.jpg" alt="" class="img-responsive h-100">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-sections bg-white" id="open-hours">
<div class="container">
<div class="row flex-align-center flex-evenly">
<div class="col-lg-6">
<h1 class="section-title inline-block pb-3 border-bottom-blue"> We Are Open </h1>
</div>
<div class="col-lg-6 px-2">
<div class="box-container text-white p-3 my-3">
<span> Monday - Thursday </span>
<span> 8:00 AM - 9:30 PM </span>
</div>
<div class="box-container text-white p-3 my-3">
<span> Friday </span>
<span> 8:00 AM - 11:00 PM </span>
</div>
<div class="box-container text-white p-3 my-3">
<span> Saturday - Sunday </span>
<span> 9:00 AM - 10:30 PM </span>
</div>
</div>
</div>
</div>
</section>
<section class="main-sections" id="branches">
<div class="container">
<h1 class="section-title text-center pb-3"> Our Branches </h1>
<div class="row branches-container flex-center">
<div class="col-lg-4 col-md-6 px-3 py-3 col-12">
<div class="box relative">
<div class="thumbnail">
<img src="./assets/images/Branch-1.jpg" class="img-responsive" alt="">
</div>
<div class="relative">
<div class="place px-3 py-1 absolute">
<h2 class="font-md-lg"> New York </h2>
</div>
<div class="py-3 content font-rg pt-8 px-2 text-center">
Lorem ipsum dolor sit amet, consecteturadipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 px-3 py-3 col-12">
<div class="box relative">
<div class="thumbnail">
<img src="./assets/images/Branch-2.jpg" class="img-responsive" alt="">
</div>
<div class="relative">
<div class="place px-3 py-1 absolute">
<h2 class="font-md-lg"> Texas </h2>
</div>
<div class="py-3 content font-rg pt-8 px-2 text-center">
Lorem ipsum dolor sit amet, consecteturadipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 px-3 py-3 col-12">
<div class="box relative">
<div class="thumbnail">
<img src="./assets/images/Branch-3.jpg" class="img-responsive" alt="">
</div>
<div class="relative">
<div class="place px-3 py-1 absolute">
<h2 class="font-md-lg"> New Jersey </h2>
</div>
<div class="py-3 content font-rg pt-8 px-2 text-center">
Lorem ipsum dolor sit amet, consecteturadipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="">
<div class="container">
<div class="row md-max-only-flex-align-center text-center">
<div class="col-12 col-md-3 footer-logo">
<div class="flex flex-align-center flex-center md-max-only-py-3">
<img src="./assets/images/Logo-Footer.png" alt="">
<span> CoffeeCup </span>
</div>
</div>
<div class="col-12 col-md-3 md-text-left">
<h4 class="font-md-lg"> Main Menu </h4>
<ul class="nav-items">
<li><a href="" class="nav-item"> Home </a></li>
<li><a href="" class="nav-item"> Shop </a></li>
<li><a href="" class="nav-item"> Blog </a></li>
</ul>
</div>
<div class="col-12 col-md-3 md-text-left">
<h4 class="font-md-lg"> Information </h4>
<ul class="nav-items">
<li><a href="" class="nav-item"> About Us </a></li>
<li><a href="" class="nav-item"> Branches </a></li>
<li><a href="" class="nav-item"> Sitemap </a></li>
<li><a href="" class="nav-item"> Contact </a></li>
<li><a href="./README.md" class="nav-item"> Credits </a></li>
</ul>
</div>
<div class="col-12 col-md-3 text-center md-text-left md-max-only-py-3">
<h4 class="font-md-lg"> Social Media</h4>
<ul class="nav-items flex flex-align-center social-media md-flex-start flex-center">
<li><a href="" class="nav-item"><img src="./assets/images/facebook.png" alt=""></a></li>
<li><a href="" class="nav-item"><img src="./assets/images/instagram.png" alt=""></a></li>
<li><a href="" class="nav-item"><img src="./assets/images/twitter.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="./assets/js/script.js"></script>
</body>
</html>