generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgallery.html
135 lines (132 loc) · 6.25 KB
/
gallery.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta data -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Webpage description -->
<meta name="description"
content="See a selection of cakes available to purchase at Vikki Sponge Patisserie bakery and café and some of the custom cakes created for other customer's special occasions.">
<!-- Keywords used by search engines -->
<meta name="keywords" content="vikki sponge patisserie, patisserie, bakery, café, cakes">
<!-- Link to stylesheet -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Page title for browser tab -->
<title>Gallery | Vikki Sponge Patisserie</title>
</head>
<body>
<header>
<!-- Logo and cover text -->
<div id="logo">
<div class="logo-background">
<a href="index.html">
<h1>Vikki Sponge</h1>
<h2>Patisserie</h2>
</a>
<div class="cover-text">
<div class="decor"></div>
<p>Delicious fresh cakes handmade by our expert bakers</p>
</div>
</div>
</div>
<!-- Navigation menu -->
<nav id="navigation">
<ul>
<li class="nav-index">
<a href="index.html">Home</a>
</li>
<li class="nav-gallery">
<a href="gallery.html" class="active">Gallery</a>
</li>
<li class="nav-contact">
<a href="contact.html">Contact Us</a>
</li>
<li class="nav-find">
<a href="find.html">Find Us</a>
</li>
</ul>
</nav>
<!-- Hero image -->
<div id="hero">
<div id="gallery-hero-image"></div>
</div>
</header>
<!-- Photo gallery -->
<section id="gallery">
<h3 class="heading">Enjoy Our Gallery</h3>
<p>View a selction of what we offer for your temptation</p>
<div id="photos">
<img src="assets/images/caramel-cake.webp" alt="Caramel cake slice" class="corners top-4 top-3 top-2 top-1">
<img src="assets/images/choc-cupcake.webp" alt="Chocolate cupcake" class="corners">
<img src="assets/images/wedding-cake-1.webp" alt="Wedding cake with roses" class="corners">
<img src="assets/images/pink-cake-slice.webp" alt="Pink cake slice" class="corners top-4">
<img src="assets/images/christmas-house-cake.webp" alt="House shaped cakes for christmas"
class="corners top-3">
<img src="assets/images/celebration-cake-3.webp" alt="Black and red tiered cake" class="corners">
<img src="assets/images/strawberry-tart.webp" alt="Strawberry tart" class="corners top-4 top-2">
<img src="assets/images/choc-valentine-cake.webp" alt="Chocolate cake decorated for valentines day"
class="corners">
<img src="assets/images/wedding-cake-2.webp" alt="Wedding cake with ruffles" class="corners top-3">
<img src="assets/images/blackcurrant-tart.webp" alt="Blackcurrant tart" class="corners top-4">
<img src="assets/images/birthday-cake-1.webp" alt="Colourful birthday cake" class="corners">
<img src="assets/images/celebration-cake-4.webp" alt="Cake with gingerbread decoration" class="corners">
</div>
</section>
<!-- Demonstration video -->
<section id="video">
<h3 class="heading">
See one of our Bakers in Action
</h3>
<div class="video-container corners">
<iframe class="video-cake" src="https://www.youtube.com/embed/2ywY5ySm6s0" title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</section>
<footer>
<!-- Newsletter sign up form -->
<section id="newsletter">
<div class="container">
<form action="newsletter-thank-you.html" method="GET" class="sign-up-form">
<div class="decor"></div>
<div class="nl-header">
<h3>Sign up for our Newsletter</h3>
<p>to recieve updates and special offers</p>
</div>
<input type="text" id="name-newsletter" name="name" placeholder="Enter name"
aria-label="Enter your name here" class="nl-input border" required>
<input type="email" id="email-newsletter" name="email_address" placeholder="Enter email address"
aria-label="Enter your email address here" class="nl-input border" required>
<div class="container">
<input type="submit" value="Sign Up" class="sign-up-button corners">
</div>
<div class="decor invert"></div>
</form>
</div>
</section>
<!-- Social media links -->
<div id="social-media">
<ul class="social-media-links">
<li>
<a href="https://facebook.com" target="_blank" rel="noopener"
aria-label="Visit our Facebook page (opens in a new tab)"><i
class="fab fa-facebook-square"></i></a>
</li>
<li>
<a href="https://twitter.com" target="_blank" rel="noopener"
aria-label="Visit our Twitter page (opens in a new tab)"><i
class="fab fa-twitter-square"></i></a>
</li>
<li>
<a href="https://instagram.com" target="_blank" rel="noopener"
aria-label="Visit our Instagram page (opens in a new tab)"><i
class="fab fa-instagram-square"></i></a>
</li>
</ul>
</div>
</footer>
<!-- Font Awesome embed code -->
<script src="https://kit.fontawesome.com/8e292ce701.js" crossorigin="anonymous"></script>
</body>
</html>