generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcakes.html
248 lines (234 loc) · 9.22 KB
/
cakes.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Cakes | Epic Cakes</title>
</head>
<body>
<header>
<!-- Logo and NavBar -->
<nav class="navbar navbar-expand-lg container-fluid">
<!--Logo-->
<a href="cakes.html" class="col-md-2 logo"></a>
<button class="navbar-toggler navbar-light bg-light" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- NavBar Links -->
<div class="collapse navbar-collapse justify-content-md-between justify-content-sm-center"
id="navbarNavAltMarkup">
<ul class="navbar-nav mr-auto list-inline menucontainer">
<li class="nav-item ui-menu-color-home list-inline-item menuitem">
<a href="index.html" class="hvr-sweep-to-bottom"><span>Home</span></a>
</li>
<li class="nav-item ui-menu-color-gallery list-inline-item menuitem">
<a href="index.html#gallery" class="hvr-sweep-to-bottom"><span>Gallery</span></a>
</li>
<li class="nav-item active ui-menu-color-cake list-inline-item menuitem">
<a href="cakes.html" class="hvr-sweep-to-bottom"><span>Cakes</span></a>
</li>
<li class="nav-item ui-menu-color-customer list-inline-item menuitem">
<a href="index.html#customer-favourites"
class="hvr-sweep-to-bottom"><span>Customer Favourites</span></a>
</li>
<li class="nav-item ui-menu-color-shop list-inline-item menuitem">
<a href="index.html#shop" class="hvr-sweep-to-bottom"><span>Shop</span></a>
</li>
</ul>
<!-- Search Bar -->
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search..." aria-label="Search">
</form>
</div>
</nav>
</header>
<!-- Cake Image And Description -->
<section id="first-cake">
<div id="first-cake-text">
<h2>Cakes</h2>
<hr>
</div>
<div id="cake-image1" class="container">
<div class="row">
<div class="col-md-6">
<!-- Cake Image From Unsplash As Credited In The README -->
<img src="assets/images/gallery/cake1.jpg" class="image-fluid" alt="first cake">
</div>
<div class="cake-text col-md-6">
<!-- Cake Description -->
<h3>Naked 2-Tier</h3>
<p>This cake appeals to those who prefer sophisticated simplicity with a touch of flair!</p>
<!-- Order Button -->
<a href="orders.html" class="a btn btn-sm btn-danger">Order Cake</a>
</div>
</div>
<hr>
</div>
<div id="cake-image2" class="container">
<div class="row">
<div class="col-md-6">
<!-- Cake Image From Unsplash As Credited In The README -->
<img src="assets/images/gallery/cake2.jpg" class="image-fluid" alt="second cake">
</div>
<div class="cake-text col-md-6">
<!-- Cake Description -->
<h3>Buttercream Birthday</h3>
<p>All your buttercream and sprinkle dreams come true in pastel perfection!</p>
<!-- Order Button -->
<a href="orders.html" class="a btn btn-sm btn-danger">Order Cake</a>
</div>
</div>
<hr>
</div>
<div id="cake-image3" class="container">
<div class="row">
<div class="col-md-6">
<!-- Cake Image From Unsplash As Credited In The README -->
<img src="assets/images/gallery/cake3.jpg" class="image-fluid" alt="third cake">
</div>
<div class="cake-text col-md-6">
<!-- Cake Description -->
<h3>Pretty In Pink</h3>
<p>Dripping in chocolate and adorned with a crown of macaroons, this cake is fit for
royalty!</p>
<!-- Order Button -->
<a href="orders.html" class="a btn btn-sm btn-danger">Order Cake</a>
</div>
</div>
<hr>
</div>
<div id="cake-image4" class="container">
<div class="row">
<div class="col-md-6">
<!-- Cake Image From Unsplash As Credited In The README-->
<img src="assets/images/gallery/cake4.jpg" class="image-fluid" alt="fourth cake">
</div>
<div class="cake-text col-md-6">
<!-- Cake Description -->
<h3>Chocolate Lovers Dream</h3>
<p>Rich, moist and decadent, this cake will definitely satisfy those chocolate
cravings!</p>
<!-- Order Button -->
<a href="orders.html" class="a btn btn-sm btn-danger">Order Cake</a>
</div>
</div>
<hr>
</div>
<div id="cake-image5" class="container">
<div class="row">
<div class="col-md-6">
<!-- Cake Image From Unsplash As Credited In The README -->
<img src="assets/images/gallery/cake5.jpg" class="image-fluid" alt="fifth cake">
</div>
<div class="cake-text col-md-6">
<!-- Cake Description -->
<h3>Sophisticated Sweet</h3>
<p>Classy and creamy, the perfect dessert for every occasion!</p>
<!-- Order Button -->
<a href="orders.html" class="a btn btn-sm btn-danger">Order Cake</a>
</div>
</div>
<hr>
</div>
<div id="cake-image6" class="container">
<div class="row">
<div class="col-md-6">
<!-- Cake Image From Unsplash As Credited In The README -->
<img src="assets/images/gallery/cake6.jpg" class="image-fluid" alt="sixth cake">
</div>
<div class="cake-text col-md-6">
<!-- Cake Description -->
<h3>Smooth Sensation</h3>
<p>Stunning and luscious - almost looks too good to eat! (Almost!)</p>
<!-- Order Button -->
<a href="orders.html" class="a btn btn-sm btn-danger">Order Cake</a>
</div>
</div>
<hr>
</div>
</section>
<!-- Footer -->
<footer class="container-fluid">
<div id="footer-details" class="row no-gutters">
<div class="col-sm-2 ">
<!-- NavBar Links-->
<a href="index.html" class="hvr-sweep-to-bottom menuitem footer-padding general-sub"><h5>Home</h5></a>
</div>
<div class="col-sm-2">
<a href="index.html#gallery"
class="hvr-sweep-to-bottom menuitem footer-padding general-sub"><h5>Gallery</h5></a>
</div>
<div class="col-sm-2">
<a href="cakes.html" class="hvr-sweep-to-bottom menuitem footer-padding general-sub"><h5>Cakes</h5></a>
</div>
<div class="col-sm-2">
<a href="index.html#shop"
class="hvr-sweep-to-bottom menuitem footer-padding general-sub"><h5>Shop</h5></a>
</div>
<!-- Social Links (Icons) -->
<div class="col-sm-2">
<ul class="list-inline social-links">
<li class="list-inline-item">
<a href="https://facebook.com/" target="_blank">
<i class="fa fa-facebook" aria-hidden="true"></i>
<span class="sr-only">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://twitter.com/" target="_blank">
<i class="fa fa-twitter" aria-hidden="true"></i>
<span class="sr-only">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://pinterest.com/" target="_blank">
<i class="fa fa-pinterest" aria-hidden="true"></i>
<span class="sr-only">Pinterest</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.instagram.com/" target="_blank">
<i class="fa fa-instagram" aria-hidden="true"></i>
<span class="sr-only">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://youtube.com/" target="_blank">
<i class="fa fa-youtube" aria-hidden="true"></i>
<span class="sr-only">YouTube</span>
</a>
</li>
</ul>
</div>
<div class="col-sm-2">
<!-- Logo -->
<nav class="footer-navbar">
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo/footer-logo.png" class="rounded-circle" alt="logo" width="130" height="130" loading="lazy">
</a>
</nav>
</div>
</div>
<div class="row no-gutters">
<div id="footer-about" class="col">
<!-- About Description -->
<h5 class="general-sub">About Us</h5>
<p>At Epic Cakes, we strive for the highest standards, only the best will do!</p>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
</script>
</body>
</html>