generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
211 lines (203 loc) · 11.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | Row Gallery</title>
<meta name="description" content="Row Gallery is the home of contemporary art in Dungeness, UK." />
<meta name="keywords" content="exhibitions, contemporary art, artists, Dungeness, things to do in Dungeness" />
<meta name="author" content="Row Gallery" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/e4ffee1eee.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
</head>
<body>
<!--Nav - Sourced From Bootstrap Library-->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container" id="page-top">
<a class="navbar-brand" href="index.html">
<span class="logo">Row Gallery</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="exhibitions.html">Exhibitions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="artists.html">Artists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--Jumbotron - Sourced From Bootstrap Library-->
<div class="jumbotron jumbotron-fluid">
<!--Wave SVG - Made using the Softr Wave Generator Tool-->
<img class="wave-background" src="assets/images/wave-7.svg" alt="wave background" />
</div>
<!--Homepage Hero Text-->
<div class="container lead-hero">
<h1 class="title">The Home of Contemporary Art in Dungeness, UK</h1>
<p class="lead">Free Exhibitions Open Daily</p>
</div>
<!--What's On Homepage Section-->
<section>
<div class="container-fluid page-section-color-bg">
<div class="container">
<div class="row row-section">
<div class="col-12 col-md-6 large-image">
<img src="assets/images/exhibition-section-homepage.jpg" alt="a woman viewing an exhibition" />
</div>
<div class="col-12 col-md-6 text-sm-right right-hand-text pr-lg-5">
<h2 class="title homepage-section-title">
See What's On
</h2>
<div class="d-flex justify-content-end">
<div class="set-width">
<p class="lead homepage-section-text">
View our current exhibitions of works by national and international artists.
</p>
</div>
</div>
<a role="button" class="btn btn-outline-light" href="exhibitions.html">See What's On <i class="fa-solid fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!--Artists Homepage Section-->
<section>
<div class="page-section-plain-bg">
<div class="container">
<div class="row row-section">
<div class="col-12 col-md-6 large-image order-sm-12">
<img src="assets/images/artists-section-homepage.jpg" alt="hand holding a paintbrush in an artist's studio" />
</div>
<div class="col-12 col-md-6 text-sm-left order-sm-1 left-hand-text pl-lg-5">
<h2 class="title homepage-section-title">
Meet Our Artists
</h2>
<div class="set-width">
<p class="lead homepage-section-text">
Discover the emerging talent and established artists that we represent.
</p>
</div>
<a role="button" class="btn btn-outline-dark" href="artists.html">Meet Our Artists <i class="fa-solid fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!--About Homepage Section-->
<section>
<div class="container-fluid page-section-color-bg">
<div class="container">
<div class="row row-section">
<div class="col-12 col-md-6 large-image">
<img src="assets/images/about-section-homepage.jpg" alt="grassy landscape with dark timber clad buildings" />
</div>
<div class="col-12 col-md-6 text-sm-right right-hand-text pr-lg-5">
<h2 class="title homepage-section-title">
About Row Gallery
</h2>
<div class="d-flex justify-content-end">
<div class="set-width">
<p class="lead homepage-section-text">
Learn more about us, view our opening times and plan your visit to Dungeness.
</p>
</div>
</div>
<a role="button" class="btn btn-outline-light" href="about.html">Plan Your Visit <i class="fa-solid fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!--Contact Homepage Section-->
<section>
<div class="page-section-plain-bg">
<div class="container">
<div class="row row-section">
<div class="col-12 col-md-6 large-image order-sm-12">
<img src="assets/images/contact-section-homepage.jpg" alt="work on an easel in an artist's studio" />
</div>
<div class="col-12 col-md-6 text-sm-left order-sm-1 left-hand-text pl-lg-5">
<h2 class="title homepage-section-title">
Get In Touch
</h2>
<div class="set-width">
<p class="lead homepage-section-text">
Our team of friendly staff are on hand to answer enquiries and provide consultations.
</p>
</div>
<a role="button" class="btn btn-outline-dark" href="contact.html">Contact Us <i class="fa-solid fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!--Footer-->
<!--social-links ul originally taken from Code Institute's CV project-->
<footer class="container-fluid">
<div class="container">
<div id="footer-details" class="row align-items-center">
<div class="col-sm-6 text-sm-left contact-details">
<h5 class="general-sub">Row Gallery</h5>
<p class="small">
Row Gallery, Dungeness Road, Romney Marsh, TN29 9NB<br />
Tel: <a href="tel:01234567890">012 3456 7890</a><br />
Email: <a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="col-sm-6 text-sm-right">
<ul class="list-inline social-links">
<li class="list-inline-item">
<a target="_blank" href="https://www.facebook.com">
<i class="fa-brands fa-facebook-square" aria-hidden="true"></i>
<span class="sr-only">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" href="https://twitter.com">
<i class="fa fa-twitter" aria-hidden="true"></i>
<span class="sr-only">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" href="https://www.instagram.com">
<i class="fa fa-instagram" aria-hidden="true"></i>
<span class="sr-only">Instagram</span>
</a>
</li>
</ul>
</div>
</div>
<hr />
<div class="col-12 d-flex justify-content-center">
<p class="small copyright">
Copyright © 2022 Row Gallery
</p>
</div>
</div>
</footer>
<!--Bootstrap JS Scripts-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
</body>
</html>