generated from Code-Institute-Org/gitpod-database-config
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy paththe-band.html
237 lines (236 loc) · 15 KB
/
the-band.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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Load Fontawesome & Stylesheet-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./assets/css/style.css" />
<title>Yellow Lemon | The Band</title>
</head>
<body>
<!-- Header/ Navbar Start-->
<header id="navbar" class="band-layout">
<div class="menu-logo band-layout">
<a href="./">
<h1 id="navlogo">
Yellow<br />
Lemon <i class="fas fa-lemon red-lemon" aria-hidden="true"></i>
</h1>
</a>
</div>
<!-- Desktop Nav -->
<nav class="nav-container">
<div id="menudesktop" class="nav-menu-desktop">
<ul class="nav-items-desktop">
<li><a href="./">Home</a></li>
<li><a href="./the-band.html">The Band</a></li>
<li><a href="./#news">News</a></li>
<li><a href="./#events">Events</a></li>
<li><a href="./sessions.html">Sessions</a></li>
<li><a href="./#follow">Follow</a></li>
<li><a href="./merchandise.html">Merch</a></li>
<li>
<a href="./bag-some-lemons.html"><span>Get in touch</span></a>
</li>
<li><i onclick="spotifyOverlay()" id="headphones" class="fas fa-headphones-alt spotify-headphones" title="Spotify Open"></i></li>
</ul>
</div>
<i onclick="spotifyOverlay()" id="headphones-sm" class="fas fa-headphones-alt spotify-headphones small" title="Spotify Open"></i>
<div class="nav-menu">
<button id="mobilemenu" onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened')), menuOverlay()" aria-label="Main Menu">
<!-- SVG for mobile menu toggle-->
<svg width="100%" height="100%" viewBox="0 0 100 100">
<path
class="line line1"
d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"
/>
<path class="line line2" d="M 20,50 H 80" />
<path
class="line line3"
d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"
/>
</svg>
</button>
</div>
</nav>
<!-- Header End -->
</header>
<!-- Mobile Nav -->
<div id="menuunderlay" onclick="menuUnderlay()" class="nav-menu-underlay nav-display container-animate"></div>
<div id="menuoverlay" class="nav-menu-overlay nav-display container-animate">
<ul class="nav-items">
<li><a href="./">Home</a></li>
<li><a href="./the-band.html">The Band</a></li>
<li><a href="./#news">News</a></li>
<li><a href="./#events">Events</a></li>
<li><a href="./sessions.html">Sessions</a></li>
<li><a href="./#follow">Follow</a></li>
<li><a href="./merchandise.html">Merch</a></li>
</ul>
<ul class="nav-items-small">
<li>
<a href="./bag-some-lemons.html"><span>Private & Corporate Events</span></a>
</li>
</ul>
</div>
<!-- Spotify Popup -->
<div id="spotify" class="spotify-overlay container-animate">
<div onclick="spotifyOverlay()" class="spotify-close-background"><i id="spotify-close" class="fas fa-times"></i></div>
<iframe src="https://open.spotify.com/embed/playlist/5a2OuIJ1kEttA8X3PaewlI" allow="encrypted-media"></iframe>
</div>
<div class="the-band-grid-container band-layout">
<div class="the-band-hero">
<img class="display-mobile" src="./assets/svg/the-band.svg" alt="The Band - Yellow Lemon" />
<img class="display-desktop" src="./assets/svg/yellow-lemon-logo.svg" alt="Yellow lemon Logo" />
</div>
<!-- Main Content Layout -->
<section class="the-band band-about-layout">
<div class="section-container black-container the-band-container">
<h2 class="section-title invert-dark">
<span>The Band</span>
</h2>
<div class="page-content the-band-content">
<p class="invert-dark">
<span>Meet yellow lemon</span><br />
We’ve put together the most relevant and favourite pieces of information on each band members.
</p>
<p class="invert-dark">
With everyone having their own colourful Past. We have also included links to each of Their respective wikipedia pages if you would like to Discover more about each band member.
</p>
</div>
<div class="band-content-layout band-layout">
<div class="band-content-group">
<span class="invert-dark">Meet the band</span>
<div class="band-content-item">
<div class="band-content-container">
<div class="band-content-image">
<img src="./assets/images/django_reinhardt.png" alt="Django Reinhardt - Yellow lemon" />
</div>
<div class="band-content-text">
<h2>Django Reinhardt</h2>
<span>Guitar, violin, banjo</span>
<p class="invert-dark band-layout">
Django was born in Belgium. Spending much of his life travelling Throughout France. Now spends a lot of his time In Fontainebleau, Paris.
</p>
<p class="invert-dark band-layout">
With violinist Stéphane Grappelli, Reinhardt formed the Paris-based Quintette du Hot Club de France in 1934.
</p>
</div>
<div class="band-content-link">
<a class="red-text-link band-layout" href="https://en.wikipedia.org/wiki/Django_Reinhardt" target="_blank">More information ></a>
</div>
</div>
</div>
<div class="band-content-divider-upper">
<hr class="white-divider" />
</div>
<div class="band-content-item">
<div class="band-content-container">
<div class="band-content-image">
<img src="./assets/images/david_bowie.png" alt="David Bowie - Yellow lemon" />
</div>
<div class="band-content-text">
<h2>David Robert Jones</h2>
<span>Vocals, guitar, keyboards</span>
<p class="invert-dark band-layout">
Born in Brixton, South London, Bowie developed an interest in music as a child. He studied art,
music and design before embarking on a professional career as a musician in 1963. "Space Oddity",
released in 1969, was his first top-five entry on the UK Singles Chart.
</p>
</div>
<div class="band-content-link">
<a class="red-text-link band-layout" href="https://en.wikipedia.org/wiki/David_Bowie" target="_blank">More information ></a>
</div>
</div>
</div>
<div class="band-content-divider-upper">
<hr class="white-divider" />
</div>
<div class="band-content-item">
<div class="band-content-container">
<div class="band-content-image">
<img src="./assets/images/buddy_holly.png" alt="Buddy Holly - Yellow lemon" />
</div>
<div class="band-content-text">
<h2>Buddy Holly</h2>
<span>Guitar, vocals</span>
<p class="invert-dark band-layout">
Buddy had his first appearance on local television in 1952, and the following year he formed the group "Buddy and Bob" with his friend Bob Montgomery. In 1955, after opening for Elvis Presley, he
decided to pursue a career in music. In October that year, when he opened for Bill Haley & His Comets, he was spotted by Nashville scout Eddie Crandall, who helped him get a contract with Decca
Records.
</p>
</div>
<div class="band-content-link">
<a class="red-text-link band-layout" href="https://en.wikipedia.org/wiki/Buddy_Holly" target="_blank">More information ></a>
</div>
</div>
</div>
<div class="band-content-divider-upper">
<hr class="white-divider" />
</div>
<div class="band-content-item">
<div class="band-content-container">
<div class="band-content-image">
<img src="./assets/images/nina_simone.png" alt="Nina Simone - Yellow lemon" />
</div>
<div class="band-content-text">
<h2>Nina Simone</h2>
<span>Vocals</span>
<p class="invert-dark band-layout">
Nina was an American singer, songwriter, musician, arranger, and civil rights activist. Her music spanned a broad range of musical styles including classical, jazz, blues, folk, R&B, gospel, and
pop. Her musical style fused gospel and pop with classical music, in particular Johann Sebastian Bach, and accompanied expressive, jazz-like singing in her contralto voice.
</p>
</div>
<div class="band-content-link">
<a class="red-text-link band-layout" href="https://en.wikipedia.org/wiki/Nina_Simone" target="_blank">More information ></a>
</div>
</div>
</div>
</div>
</div>
<div class="page-content the-band-content-lower band-layout">
<p class="invert-dark">
<span>BAND HISTORY</span><br />
Formed in Manchester in 1983. One of the pioneering groups of the Madchester movement in the late 1980s and early 1990s, the band's classic and most prominent lineup consisted of vocalist Ian Brown, guitarist
John Squire, bassist Mani and drummer Reni.
</p>
<div class="linked-footer band-layout">
<a class="section-footer-link invert-dark" href="https://en.wikipedia.org/wiki/The_Stone_Roses" target="_blank">Read more <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</section>
<!-- Footer Start -->
<footer class="page-footer">
<div class="section-container footer-container">
<div class="footer-content">
<span>Getting in touch</span>
<p class="invert-dark">
For coprorate & private events please
<a href="./bag-some-lemons.html">visit here.</a>
</p>
</div>
<div class="copyright-footer invert-dark">
<i class="fas fa-lemon yellow-lemon black-lemon" aria-hidden="true"></i>
<div class="copyright-footer-inner">
<span>Copyright 2020. All rights reserved</span>
<div class="copyright-links-container">
<a href="https://wikiedu.org/terms-of-service/" target="_blank">Terms of Service | </a>
<a href="https://wikiedu.org/privacy-policy/" target="_blank"> Privacy Policy</a>
</div>
</div>
</div>
</div>
<!-- Footer End -->
</footer>
</div>
<script src="./assets/js/menubar.js"></script>
<script src="./assets/js/menuoverlay.js"></script>
</body>
</html>