generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
121 lines (117 loc) · 5.06 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
<!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">
<meta name="description" content="A website that serves as an archive of photos and information about Curracloe, Co Wexford.">
<link rel="stylesheet" href="assets/css/style.css">
<link href="assets/images/favicon.ico" rel="icon" type="image/x-icon"/>
<title>Curracloe Chronicles</title>
</head>
<body>
<!-- navbar -->
<header class="header">
<ul id="menu">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</header>
<!-- hero image -->
<section class="hero">
<div id="cover-text">
<h1>Curracloe Chronicles</h1>
<h2>The past and the present of a seaside village</h2>
</div>
</section>
<!-- About us -->
<section class="about-us">
<div class="who">
<h2>Who We Are</h2>
<hr>
<p>Curracloe Chronicles, through the medium of photographs and documents, preserves and shares events, local history and people's life stories in and around the village of Curracloe. We first started with a Facebook page, and now are expanding due to popularity!</p>
</div>
</section>
<!-- carousel -->
<div class="caro-wrapper">
<div class="carousel-container">
<div class="carousel">
<div id="football" class="carousel__item">
<img src="./assets/images/football.jpeg" alt="Football team" class="carousel__image">
</div>
<div id="swings" class="carousel__item">
<img src="./assets/images/swings.jpeg" alt="Young people on funfair swings" class="carousel__image">
</div>
<div id="coast-guard" class="carousel__item">
<img src="./assets/images/coast-guard.jpeg" alt="Curracloe Coast Guard" class="carousel__image">
</div>
</div>
<div id="controls" class="controls">
<a href="#football" class="controls__dot">
<span class="visuallyhidden">Curracloe United Football Team</span>
</a>
<a href="#swings" class="controls__dot">
<span class="visuallyhidden">Young people on funfair swings</span>
</a>
<a href="#coast-guard" class="controls__dot">
<span class="visuallyhidden">Curracloe Coast Guard</span>
</a>
</div>
</div>
</div>
<div class="flex-container wrapper">
<!-- contribute -->
<section class="help">
<div class="contribute">
<h2>Want to Contribute?</h2>
<hr>
<p>Curracloe Chronicles is run voluntarily and can only provide content if people help. If you have old photos, documents or anything you think we'd like to see, please go to our contact page to contact us! We love finding hidden gems, whether it be forgotten in your attic or in a much loved photo album.</p>
</div>
</section>
<!-- where are we -->
<section class="where-we-are">
<div class="where">
<h2>Where We Are</h2>
<hr>
<p>Curracloe is a seaside area, popular with holidaymakers due to its fabulous beach. It is situated approximately 10kms from Wexford town, in the sunny south-east of Ireland.</p>
</div>
</section>
<!-- map -->
<aside class="sidebar">
<img src="assets/images/curracloeMap.jpeg" alt="map of Curracloe area">
<h2>Find us here!</h2>
</aside>
</div>
<!-- social media-->
<footer class="footer">
<div id="socials">
<ul>
<li>
<a href="https://facebook.com" target="_blank" rel="noopener" aria-label="Visit our Facebook page (opens in a new tab)"><i class="fa-brands fa-facebook"></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="fa-brands fa-twitter"></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="fa-brands fa-instagram"></i></a>
</li>
</ul>
</div>
<div class="copyright">
<p>Copyright ©2022 Grace McKenna</p>
</div>
<!-- footer menu -->
<div class="bottom-menu">
<ul id="footer-menu">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</footer>
<a href="#" class="top-button">Back to Top <i class="fa-solid fa-arrow-up"></i></a>
<!-- font awesome script -->
<script src="https://kit.fontawesome.com/11a128cecc.js" crossorigin="anonymous"></script>
</body>
</html>