-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
134 lines (131 loc) · 6.75 KB
/
index.html
File metadata and controls
134 lines (131 loc) · 6.75 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clapham Watch</title>
<meta name="description" content="Soulful pop band having fun making music.">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Raleway:200,400,700' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="normalise.css">
<link rel="stylesheet" href="styles.css">
<script src="main.js"></script>
</head>
<body>
<header>
<img src="img/logo_claphamwatch.webp" height=133 width=328 alt="clapham watch logo">
<nav class="nav-bar">
<a href="#home" class="nav-bar-link">
<h2 class="nav-bar-link-label">Home</h2>
</a>
<a href="#music" class="nav-bar-link">
<h2 class="nav-bar-link-label">Music</h2>
</a>
<a href="https://www.youtube.com/channel/UCnyw0TSruQPRd_PPJmp0Ryw" class="nav-bar-link">
<h2 class="nav-bar-link-label">Videos</h2>
</a>
<a href="#sign-up" class="nav-bar-link">
<h2 class="nav-bar-link-label">Sign Up</h2>
</a>
</nav>
<i class="fa-solid fa-bars fa-2xl mobile-nav-open" onclick="showMobileModal()"></i>
<div class="mobile-nav mobile-nav-modal" onclick="closeMobileModal()">
<nav class="mobile-nav-bar">
<a href="#home" class="nav-bar-link" onclick="mobileNav(this)">
<h2 class="mobile-nav-bar-link-label">Home</h2>
</a>
<a href="#music" class="nav-bar-link" onclick="mobileNav(this)">
<h2 class="mobile-nav-bar-link-label">Music</h2>
</a>
<a href="https://www.youtube.com/channel/UCnyw0TSruQPRd_PPJmp0Ryw" class="nav-bar-link">
<h2 class="mobile-nav-bar-link-label">Videos</h2>
</a>
<a href="#sign-up" class="nav-bar-link" onclick="mobileNav(this)">
<h2 class="mobile-nav-bar-link-label">Sign Up</h2>
</a>
</nav>
</div>
</header>
<main>
<section id="home" class="page">
<h2><i>OUT NOW: 'DAY AFTER DAY' EP</i></h2>
<a href="https://distrokid.com/hyperfollow/claphamwatch/day-after-day"
aria-label="listen to our day after day EP">
<img id="home-coverart" src="img/coverart_day_after_day.webp"
alt="day after day cover art">
</a>
</section>
<section id="music" class="page">
<div id="gallery">
<a href="https://distrokid.com/hyperfollow/claphamwatch/day-after-day"
aria-label="listen to our day after day EP">
<img class="coverart" src="img/coverart_day_after_day.webp" loading="lazy" height=300 width=300
alt="day after day EP cover art">
</a>
<a href="https://distrokid.com/hyperfollow/claphamwatch/count-you-2"
aria-label="listen to our count you single">
<img class="coverart" src="img/coverart_count_you.webp" loading="lazy" height=300 width=300
alt="count you single cover art">
</a>
<a href="https://distrokid.com/hyperfollow/claphamwatch/ok" aria-label="listen to our ok single">
<img class="coverart" src="img/coverart_ok.webp" loading="lazy" height=300 width=300
alt="ok single cover art">
</a>
<a href="https://distrokid.com/hyperfollow/claphamwatch/live-living-room-sessions"
aria-label="listen to our live living room sessions EP">
<img class="coverart" src="img/coverart_live_sessions.webp" loading="lazy" height=300 width=300
alt="live living room sessions EP">
</a>
</div>
</section>
<section id="sign-up" class="page">
<div id="mailing-list">
<h2>Mailing List</h2>
<form onsubmit="alert('Sorry, the mailing list isn\'t connected yet, please try again later.')">
<input class="text-input" type="text" id="first-name" name="first-name" placeholder="First Name*"
autocomplete="given-name" required><br>
<input class="text-input" type="text" id="last-name" name="last-name" placeholder="Last Name*"
autocomplete="family-name" required><br>
<input class="text-input" type="email" id="email" name="email" placeholder="Email*"
autocomplete="email" required><br>
<label id="privacy">
<input type="checkbox" id="privacy-checkbox" name="privacy" required>
I accept the <a href="/privacy.html"><u>privacy policy</u></a>
</label>
<input id="submit" type="submit" value="Subscribe">
</form>
</div>
</section>
<section id="404" class="page">
<h1>404 Not Found</h1>
</section>
</main>
<footer>
<a id="contact-email" href="mailto:clapham.watch@gmail.com">clapham.watch@gmail.com</a>
<div class="external-links">
<a href="https://open.spotify.com/artist/03gwa1Lj4nIZDP2RTkw3vm" class="external-link" aria-label="spotify">
<i class="fa-brands fa-spotify fa-xl"></i>
</a>
<a href="https://music.apple.com/us/artist/clapham-watch/1513447348" class="external-link"
aria-label="apple music">
<i class="fa-brands fa-apple fa-xl"></i>
</a>
<a href="https://www.youtube.com/channel/UCnyw0TSruQPRd_PPJmp0Ryw" class="external-link"
aria-label="youtube">
<i class="fa-brands fa-youtube fa-xl"></i>
</a>
<a href="https://www.instagram.com/clapham.watch/" class="external-link" aria-label="instagram">
<i class="fa-brands fa-instagram fa-xl"></i>
</a>
<a href="https://www.facebook.com/ClaphamWatch" class="external-link" aria-label="facebook">
<i class="fa-brands fa-facebook-f fa-xl"></i>
</a>
<a href="https://soundcloud.com/clapham-watch/" class="external-link" aria-label="soundcloud">
<i class="fa-brands fa-soundcloud fa-xl"></i>
</a>
</div>
<div id="copyright">© Clapham Watch 2024</div>
</footer>
</body>
</html>