-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
214 lines (214 loc) · 10.6 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
212
213
214
<!DOCTYPE HTML>
<html>
<head>
<title>Bummer Status | Official Site</title>
<link rel="shortcut icon" href="images/favicon-16x16.png" type="image/png">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<div id="header">
<div class="top">
<div id="logo">
<span class="image avatar60"><img src="images/bummer-110x110.png" style="border-radius: 4px;" alt="Band logo" /></span>
<h1 id="title">Bummer Status</h1>
<p>Boston, MA</p>
</div>
<nav id="nav">
<ul>
<li><a href="#top" id="top-link"><span class="icon solid fa-home">Intro</span></a></li>
<li><a href="#whatsnew" id="whatsnew-link"><span class="icon solid fa-calendar">What's New</span></a></li>
<li><a href="#portfolio" id="portfolio-link"><span class="icon solid fa-th">Discography</span></a></li>
<li><a href="#about" id="about-link"><span class="icon solid fa-user">About Us</span></a></li>
<li><a href="#past" id="past-link"><span class="icon solid fa-music">Performances</span></a></li>
<li><a href="#gallery" id="gallery-link"><span class="icon solid fa-image">Gallery</span></a></li>
<li><a href="#contact" id="contact-link"><span class="icon solid fa-envelope">Get In Touch</span></a></li>
</ul>
</nav>
</div>
<div class="bottom">
<ul class="icons">
<li><a href="https://twitter.com/bummerstatus26" class="icon brands fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
<li><a href="https://www.instagram.com/bummerstatus/" class="icon brands fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
<li><a href="https://open.spotify.com/artist/0nT3SbubOPPXR38HQwJ8yC" class="icon brands fa-spotify" target="_blank"><span class="label">Spotify</span></a></li>
<li><a href="https://music.apple.com/us/artist/bummer-status/1571591835" class="icon brands fa-apple" target="_blank"><span class="label">Apple Music</span></a></li>
<li><a href="https://soundcloud.com/user-850762260" class="icon brands fa-soundcloud" target="_blank"><span class="label">SoundCloud</span></a></li>
</ul>
</div>
</div>
<div id="main">
<section id="links" class="main-links">
<div class="container">
<ul class="icons" style="margin-bottom: 0; font-size: 2rem;">
<li><a href="https://twitter.com/bummerstatus26" class="icon brands fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
<li><a href="https://www.instagram.com/bummerstatus/" class="icon brands fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
<li><a href="https://open.spotify.com/artist/0nT3SbubOPPXR38HQwJ8yC" class="icon brands fa-spotify" target="_blank"><span class="label">Spotify</span></a></li>
<li><a href="https://music.apple.com/us/artist/bummer-status/1571591835" class="icon brands fa-apple" target="_blank"><span class="label">Apple</span></a></li>
<li><a href="https://soundcloud.com/user-850762260" class="icon brands fa-soundcloud" target="_blank"><span class="label">SoundCloud</span></a></li>
<li><a href="https://bummerstatus.bandcamp.com/" class="icon brands fa-bandcamp" target="_blank"><span class="label">BandCamp</span></a></li>
<li><a href="https://www.youtube.com/channel/UCmTMPodGEv3FvWGUFlRKY9g" class="icon brands fa-youtube" target="_blank"><span class="label">YouTube</span></a></li>
</ul>
</div>
</section>
<section id="top" class="intro dark cover">
<div class="container">
<header>
<h2 class="alt">Hello and welcome! We are a Boston-based rock band known as <strong>Bummer Status.</strong></h2>
<p>Our debut album, Jamming In My Snowpants, is out now on all streaming platforms.</p>
</header>
<footer>
<a href="#whatsnew" class="button scrolly">Have a look around</a>
</footer>
</div>
</section>
<section id="whatsnew" class="whatsnew">
<div class="container">
<header>
<h2>What's New</h2>
</header>
<p>Check out our first ever music video: Pokemon Monopoly (For Perry)</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/YH9eLVq9W4M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<section id="portfolio" class="discography">
<div class="container">
<header>
<h2>Discography</h2>
</header>
<p>Here is our complete Bummer Status discography including full albums, single tracks, EPs, and live jams.</p>
<div class="row">
<div class="col-4 col-12-mobile">
<article class="item">
<a href="https://open.spotify.com/album/1pj23eMFAPRHnhUPah4QK9" target="_blank" class="image fit"><img src="images/jamming.webp" alt="April" /></a>
<header>
<h3>Jamming in my Snowpants</h3>
</header>
</article>
</div>
<div class="col-4 col-12-mobile">
<article class="item">
<a href="https://open.spotify.com/album/0wEOu5sYAChLdIbQpWSJF3" target="_blank" class="image fit"><img src="images/april.webp" alt="April" /></a>
<header>
<h3>April</h3>
</header>
</article>
</div>
<div class="col-4 col-12-mobile">
<article class="item">
<a href="https://open.spotify.com/album/71KGBilKMt9QuwfygHBUMi" target="_blank" class="image fit"><img src="images/colchester.webp" alt="Colchester" /></a>
<header>
<h3>Colchester Winter (Feat. Jesse the Tree)</h3>
</header>
</article>
</div>
<div class="col-4 col-12-mobile">
<article class="item">
<a href="https://open.spotify.com/album/6uOhEHZA7oONY9MvDInh68" target="_blank" class="image fit"><img src="images/nobodys.webp" alt="Nobodys" /></a>
<header>
<h3>Nobody's Ever Gonna Hear This Song</h3>
</header>
</article>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<header><h2>About the Band</h2></header>
<a href="#about" class="image featured"><img src="images/bummer-fullband-2.webp" alt="Full band picture" /></a>
<p>With roots tracing back to the underbelly of the Burlington, VT college scene, Bummer Status is comprised of four like-minded musicians with a passion for writing and performing incredibly tasteful jams.</p>
<p>The band members are guitarist/vocalist Nicholas Andrews, bassist Elliott Kenney, drummer/vocalist Doug Lane, and pianist/vocalist Mike McCarthy.</p>
</div>
</section>
<section id="past" class="performances">
<div class="container">
<header><h2>Upcoming Performances</h2></header>
<p>None currently</p>
<header><h2>Past Performances</h2></header>
<p>Union Tavern, Somerville, MA - 3/26/2022</p>
<p>Midway Cafe, Jamaica Plain, MA - 5/28/2022</p>
<p>Porch Fest, Somerville, MA - 5/14/2022</p>
<p>Union Tavern, Somerville, MA - 3/4/2022</p>
</div>
</section>
<section id="gallery" class="gallery">
<div class="container">
<header><h2>Gallery</h2></header>
<div class="container p-3">
<div class="fg-gallery">
<img src="images/prov-house-show.webp" alt="">
<img src="images/union-eli-mike-nick.webp" alt="">
<img src="images/union-crowd.webp" alt="">
<img src="images/union-doug.webp" alt="">
<img src="images/union-doug-2.webp" alt="">
<img src="images/union-eli.webp" alt="">
<img src="images/union-nick-2.webp" alt="">
<img src="images/union-mike.webp" alt="">
</div>
<div class="fg-gallery ns">
<img src="images/union-doug-mike.webp" alt="">
<img src="images/union-nick.webp" alt="">
<img src="images/union-board.webp" alt="">
<img src="images/union-keys.webp" alt="">
<img src="images/union-behind.webp" alt="">
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<header><h2>Get In Touch</h2></header>
<p>If you're interested in learning more about the Bummer Status experience or booking us for a show, please feel free to submit a message here.</p>
<form method="post" name="get-in-touch-form" id="get-in-touch-form" novalidate>
<div class="row">
<div class="col-6 col-12-mobile"><input type="text" name="name-input" id="name-input" placeholder="First name ..." required data-validation-required-message="Please enter your name" /></div>
<div class="col-6 col-12-mobile"><input type="text" name="email-input" id="email-input" placeholder="Email address..." required data-validation-required-message="Please enter your email address"/></div>
<div class="col-12">
<textarea name="description-input" id="description-input" placeholder="Your message ..." required data-validation-required-message="Please enter a message"></textarea>
</div>
<div id="success"></div>
<div class="col-12">
<input type="submit" value="Submit" onClick="submitToAPI(event)" />
</div>
</div>
</form>
</div>
</section>
</div>
<div id="footer">
<ul class="copyright">
<li>© 2024 Bummer Status, all rights reserved.</li><li>Design by <a href="https://github.com/michemcc" target="_blank">Michael Ernest McCarthy</a></li>
</ul>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/submitToAPI.js"></script>
<script src="assets/js/gallery.js"></script>
<script>
var a = new FgGallery('.fg-gallery', {
cols: 4,
style: {
border: '4px solid #fff',
height: '180px',
borderRadius: '3px',
boxShadow: '0 2px 8px -4px #858585',
}
})
var a = new FgGallery('.ns', {
cols: 3,
style: {
border: '0 solid #fff',
height: '240px',
borderRadius: '3px',
}
})
</script>
</body>
</html>