-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (154 loc) · 8.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BandSite | Biography</title>
<link rel="stylesheet" type="text/css" href="./styles/bio.css">
<script src="./scripts/band-site-api.js" type="text/javascript" defer></script>
<script src="./scripts/index-page.js" type="text/javascript" defer></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- NAVBAR -->
<header class="header">
<nav class="navbar">
<div class="navbar__brand">
<a class="navbar__link--brand" href="/"><img class="navbar__logo" src="./assets/logos/Logo-bandsite.svg" alt="bandsite" /></a>
</div>
<div class="navbar__menu">
<ul class="navbar__list">
<li class="navbar__item"><a class="navbar__link navbar__link--active" href="/">biography</a></li>
<li class="navbar__item"><a class="navbar__link" href="/pages/shows.html">shows</a></li>
</ul>
</div>
</nav>
</header>
<main>
<!-- HERO -->
<section class="hero hero--bio">
<div class="hero__container hero__container--bio">
<h1 class="hero__header">the bees knees</h1>
</div>
</section>
<!-- ABOUT -->
<section class="about">
<div class="about__container">
<h2 class="about__header">about the musicians</h2>
<figure class="about__figure">
<img class="about__image" src="./assets/images/band.jpg" alt="band"/>
<figcaption class="about__caption">
<span class="about__caption--header">“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’”</span>
<br/>
<span class="about__caption--subheader">- Lead vocalist of The Bees Knees</span>
</figcaption>
</figure>
<article class="about__content">
<h3 class="about__subheader">the bees knees</h3>
<div class="about__text-wrapper">
<p class="about__text">The Bees Knees is a pop rock band originating from San Francisco, California. The band consists a dynamic lineup featuring two lead vocalists, two guitarists, a bassist, a keyboardist and a drummer. The band achieved its first commercial success as an unsigned act, drawing attention from their future manager. Having extensive experience working with both new and seasoned acts, the manager was confident the band could succeed even further with more support, pushing The Bees Knees to sign with a well known record label.</p>
<p class="about__text">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. The Bees Knees are currently recording their second studio album, looking to be released in early 2024.</p>
</div>
</article>
</div>
</section>
<!-- GALLERY -->
<section class="gallery">
<h2 class="gallery__header">photo gallery</h2>
<div class="gallery__images">
<img class="gallery__image" src="./assets/images/Photo-gallery-1.jpg" alt="Photo-1"/>
<img class="gallery__image" src="./assets/images/Photo-gallery-2.jpg" alt="Photo-2"/>
<img class="gallery__image" src="./assets/images/Photo-gallery-3.jpg" alt="Photo-3"/>
<img class="gallery__image" src="./assets/images/Photo-gallery-4.jpg" alt="Photo-4"/>
<img class="gallery__image" src="./assets/images/Photo-gallery-5.jpg" alt="Photo-5"/>
<img class="gallery__image" src="./assets/images/Photo-gallery-6.jpg" alt="Photo-6"/>
<img class="gallery__image" src="./assets/images/Photo-gallery-7.jpg" alt="Photo-7"/>
<img class="gallery__image" src="./assets/images/Photo-gallery-8.jpg" alt="Photo-8"/>
<img class="gallery__image" src="./assets/images/Photo-gallery-9.jpg" alt="Photo-9"/>
</div>
</section>
<!-- COMMENTS SECTION -->
<section class="comments">
<h2 class="comments__header">Join the Conversation</h2>
<div class="comments__form-wrapper">
<div class="comments__left">
<img class="comments__image" src="./assets/images/Mohan-muruge.jpg" alt="user image"/>
</div>
<div class="comments__right">
<form class="comment-form" id="comment-form">
<label class="comment-form__label" for="name">name</label>
<input class="comment-form__input-name" id="name" type="text" name="name" placeholder="Enter your name" />
<br>
<label class="comment-form__label" for="comment">comment</label>
<textarea class="comment-form__textarea" id="comment" type="text" name="comment" placeholder="Add a new comment" rows="4"></textarea>
<br>
<button class="comment-form__button" id="form-button" disabled>comment</button>
</form>
</div>
</div>
<div class="coments__feed" id="feed"></div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<!-- MOBILE ONLY -->
<section class="footer__section--mobile">
<div class="footer-section__item--socials">
<h2 class="footer-section__header">get in touch</h2>
<div class="footer-section__icons">
<a href="https://www.instagram.com"><img class="footer-section__icon" src="./assets/icons/Icon-instagram.svg" alt="instagram"/></a>
<a href="https://www.facebook.com"><img class="footer-section__icon" src="./assets/icons/Icon-facebook.svg" alt="facebook"/></a>
<a href="https://www.twitter.com"><img class="footer-section__icon" src="./assets/icons/Icon-twitter.svg" alt="twitter"/></a>
</div>
</div>
</section>
<!-- SECTION: INFORMATION -->
<section class="footer__section">
<div class="footer-section__item">
<div class="footer-section__wrapper">
<h2 class="footer-section__header--tablet-desktop">get in touch</h2>
</div>
<div class="footer-section__wrapper">
<h3 class="footer-section__subheader">the bees knees management</h3>
<p class="footer-section__text">503 Broadway Penthouse,</p>
<p class="footer-section__text">New York, NY 10012, USA</p>
<a class="footer-section__link" href="mailto:info@thebeesknees.com">info@thebeesknees.com </a>
</div>
</div>
<div class="footer-section__item">
<div class="footer-section__wrapper">
<div class="footer-section__icons--tablet-desktop">
<a class="footer-section__link--icon" href="https://www.instagram.com"><img class="footer-section__icon" src="./assets/icons/Icon-instagram.svg" alt="instagram"/></a>
<a class="footer-section__link--icon" href="https://www.facebook.com"><img class="footer-section__icon" src="./assets/icons/Icon-facebook.svg" alt="facebook"/></a>
<a class="footer-section__link--icon" href="https://www.twitter.com"><img class="footer-section__icon" src="./assets/icons/Icon-twitter.svg" alt="twitter"/></a>
</div>
</div>
<div class="footer-section__wrapper">
<h3 class="footer-section__subheader">limitless artist group</h3>
<p class="footer-section__text">Booking Agent for</p>
<p class="footer-section__text">US / South America / Japan</p>
<a class="footer-section__link" href="mailto:bookings@limitlessag.com">bookings@limitlessag.com</a>
</div>
</div>
<div class="footer-section__item footer-section__item--right">
<div class="footer-section__wrapper">
<img class="footer-section__logo--tablet-desktop" src="./assets/logos/Logo-bandsite.svg" alt="bandsite"/>
</div>
<div class="footer-section__wrapper">
<h3 class="footer-section__subheader">ARCH Entertainment</h3>
<p class="footer-section__text">Booking Agent for</p>
<p class="footer-section__text">UK / EU / AU</p>
<a class="footer-section__link" href="mailto:bookings@archentertainment.com">bookings@archentertainment.com</a>
</div>
</div>
</section>
<!-- SECTION: COPYRIGHT -->
<section class="footer__section">
<div class="footer-section__item">
<a href="/"><img class="footer-section__logo--mobile" src="./assets/logos/Logo-bandsite.svg" alt="bandsite" /></a>
<p class="footer-section__text">copyright the bees knees © 2023 all rights reserved</p>
</div>
</section>
</footer>
</body>
</html>