-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (160 loc) · 8.74 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
<!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>BandSite</title>
<link rel="stylesheet" href="./styles/scss/bio.css">
</head>
<body>
<header class="header">
<div class="header__container">
<a class="header__link" href="./index.html">
<img class="header__logo" src="./assets/Logo/Logo-bandsite.svg" alt="band-site header logo">
</a>
</div>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a href="./index.html" class="nav__link"> Biography </a>
</li>
<li class="nav__item">
<a href="./pages/shows.html" class="nav__link"> Shows </a>
</li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<div class="hero__overlay">
<h1 class="hero__heading">The Bees Knees</h1>
</div>
</section>
<section class="about">
<h2 class="about__title">About the Musicians</h2>
<div class="about__container">
<img class="about__img" src="./assets/Images/band.jpg" alt="">
</div>
<div class="about__box">
<q class="about__quote">
We push each other to be the best. It’s not
uncommon for one of us to say ‘this needs
to be better, back to the drawing board‘
</q>
<p class="about__quote-author">- Bryan Teddy, lead vocalist of The Bees Knees</p>
</div>
<div class="band-description">
<h3 class="band-description__title">The Bees Knees</h3>
<div class="band-description__container">
<p class="band-description__content">
The Bees Knees is a pop rock band
originating from San Francisco, California.
The band consists of lead vocalist Bryan
Teddy, guitarist Mack Tolkens, guitarist
Andrew Green, bassist Kent Zulkee and
drummer Freddie Fischer. The band
achieved its first commercial success as an
unsigned act, drawing attention from
manager Cam Adams. Having worked with
other popular acts (The Elephant In The
Room, One Trick Pony, The Cat’s Meow),
Adams was confident the band could
succeed even further, pushing them to sign
with Magenta Records. </p>
<p class="band-description__content">
From there, the band has soared, gaining
international recognition and ranking in the
top 10 on the Poster Charts. New fans
immediately fell in love with the band’s
original and organic attitude, solidifying
their place as one of the hottest and fastest
up and coming acts of this century. Fans
affectionately refer to themselves as “The
Hive” and are drawn to their candid and
authentic performances on stage. Looking
forward to touring in the future, The Bees
Knees are currently recording their second
studio album, looking to be released in late
2021.
</p>
</div>
</div>
</section>
<section class="gallery">
<h2 class="gallery__title">Photo Gallery</h2>
<div class="gallery__container">
<img src="./assets/Images/Photo-gallery-1.jpg" alt="concert image" class="gallery__item">
<img src="./assets/Images/Photo-gallery-2.jpg" alt="a woman dancing" class="gallery__item">
<img src="./assets/Images/Photo-gallery-3.jpg" alt="band concert photo with people's hands in the ambient light" class="gallery__item">
<img src="./assets/Images/Photo-gallery-4.jpg" alt="stature of a woman in the concert lights" class="gallery__item">
<img src="./assets/Images/Photo-gallery-5.jpg" alt="crowd in neon lights" class="gallery__item">
<img src="./assets/Images/Photo-gallery-6.jpg" alt="picture of a singer taken during a performance" class="gallery__item">
<img src="./assets/Images/Photo-gallery-7.jpg" alt="stadium crowd in neon lights" class="gallery__item">
<img src="./assets/Images/Photo-gallery-8.jpg" alt="hands over the dj deck" class="gallery__item">
<img src="./assets/Images/Photo-gallery-9.jpg" alt="confetti falling over the crowd at a concert" class="gallery__item">
</div>
</section>
<section class="comment-section">
<h2 class="comment-section__header">Join the Conversation</h2>
<div class="comment-section__form-container">
<div class="comment-section__avi">
<img class="comment-section__avi-img" src="./assets/Images/Mohan-muruge.jpg" alt="comment section avi">
</div>
<form class="comment-section__form" autocomplete="off" id="form">
<label class="comment-section__form--name-title"> NAME </label>
<input class="comment-section__form--name-field" type="text" id="formName" name="formName" placeholder="Enter your name" required />
<label class="comment-section__form--comment-title">COMMENT</label>
<input class="comment-section__form--comment-field" type="text" id="formComment" name="formComment" placeholder="Add new comment" required> </input>
<div class="comment-section__btn-container">
<button id="commentBtn" class="comment-section__btn" type="submit"> COMMENT</button>
</div>
</form>
</div>
<div class="comment-section__list-container"></div>
</section>
</main>
<footer class="footer">
<div class="footer__title-container">
<h2 class="footer__title">Get in Touch</h2>
<div class="footer__socials">
<a class="footer__socials-link" href="http://www.instagram.com">
<img class="footer__socials-icon" src="./assets/Icons/SVG/Icon-instagram.svg" alt="instagram">
</a>
<a class="footer__socials-link" href="http://www.facebook.com">
<img class="footer__socials-icon" src="./assets/Icons/SVG/Icon-facebook.svg" alt="facebook">
</a>
<a class="footer__socials-link" href="http://www.twitter.com">
<img class="footer__socials-icon" src="./assets/Icons/SVG/Icon-twitter.svg" alt="twitter">
</a>
</div>
</div>
<div class="footer__contact-container">
<div class="footer__contact-info">
<h4>Cam Adams <br> The Bees Knees Management</h4>
<p>503 Broadway Penthouse,<br>
New York, NY 10012, USA</p>
<p>[email protected]</p>
</div>
<div class="footer__contact-info">
<h4>Pearl Gregg <br>Limitless Artist Group</h4>
<p>Booking Agent for<br>
US / South America / Japan</p>
<p>[email protected]</p>
</div>
<div class="footer__contact-info">
<h4>Carson Whyte <br>ARCH Entertainment</h4>
<p>Booking Agent for<br>
UK / EU / AU</p>
<p>[email protected]</p>
</div>
</div>
<a class="footer__link" href="./index.html">
<img class="footer__logo" src="./assets/Logo/Logo-bandsite.svg" alt="band-site header logo">
</a>
<p class="footer__copyright">Copyright The Bees Knees © 2021 All Rights Reserved</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="./scripts/indexPage.js"></script>
</body>
</html>