-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
207 lines (187 loc) · 7.52 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
<!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" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
<title>Joshua Redman - World Tour 2023</title>
</head>
<body>
<header id="header">
<div class="grid bg-dark white" id="header__top-black-bar">
<div class="container" id="header__top-black-bar-container">
<ul class="f-row" id="header__top-black-bar-list">
<li><a href="#"><i class="bi bi-facebook lighter"></i></a></li>
<li><a href="#"><i class="bi bi-twitter lighter"></i></a></li>
<li><a class="fs-underline-hover" href="#">Español</a></li>
</ul>
</div>
</div>
<nav class="grid bg-white dark" id="header__navbar">
<div class="container f-row" id="header__navbar-container">
<a href="#"><img id="header__navbar-logo" src="./img/logos/logo__jrwt.png" /></a>
<ul class="f-row grey" id="header__navbar-menulist">
<li class="orange-hover"><a href="#">Home</a></li>
<li class="orange-hover"><a href="#global-dates">Dates</a></li>
<li class="orange-hover"><a href="#band-members">Band</a></li>
<li class="orange-hover"><a href="#">Music</a></li>
<li class="orange-hover"><a href="./about.html">About Us</a></li>
<li>
<button class="btn-orange">
<a href="#">Buy tickets</a>
</button>
</li>
</ul>
</div>
</nav>
</header>
<main>
<!-- /* Front page */ -->
<section class="grid" id="front-page">
<nav class="grid" id="menu--mobile-version">
<i class="bi bi-list" id="menu__btn--mobile-version"></i>
<ul class="container f-col" id="menu__menulist--mobile-version">
<li class="btn-grey"><a href=".#">Home</a></li>
<li class="btn-grey"><a href="#global-dates">Dates</a></li>
<li class="btn-grey"><a href="#band-members">Band</a></li>
<li class="btn-grey"><a href="#">Music</a></li>
<li class="btn-orange"><a href="#">Buy tickets</a></li>
<li class="btn-grey"><a href="./about.html">About Us</a></li>
</ul>
</nav>
<div class="container" id="front-page__container">
<div class="f-col orange" id="front-page__content">
<div class="f-col" id="front-page__title">
<h2 class="ff-1 fw-normal">"The Unforgettable Odyssey"</h2>
<h1 class="ff-2 fw-lighter">JOSHUA REDMAN <br />WORLD TOUR <br />2023
</h1>
</div>
<p class="fw-bold infobox-1 fw-normal">
Embark on a global musical journey with Joshua Redman and
experience the Legendary Saxophonist's Unforgettable Jazz Odyssey
across all Continents in 2023.
</p>
<div>
<h3 class="grey ff-2 fw-lighter">2023.05.25(NY) ~ 10.31(BER)</h2>
<h4 class="grey ff-1">
@ Lincoln Center for the Performing Arts, New York and much more
</h3>
</div>
</div>
</div>
</section>
<!-- /* Global Dates */ -->
<section class="grid bg-dark white" id="global-dates">
<div class="container f-col" id="global-dates__container">
<h2 class="ta-center">
Global Schedule<br />
<hr class="line-orange" />
</h2>
<div class="f-col" id="global-dates__boxes">
<a href="#">
<div class="global-dates__box">
<i class="bi bi-globe-americas"></i>
<h3 class="orange">Americas</h3>
<p class="fw-normal">
Featuring captivating performances in the United States,
Canada, Brazil, Argentina, and much more.
</p>
</div>
</a>
<a href="#">
<div class="global-dates__box">
<i class="bi bi-globe-europe-africa"></i>
<h3 class="orange">Africa & Europe</h3>
<p class="fw-normal">
Showcasing unforgettable concerts in France, South Africa,
Germany, Morocco, and much more.
</p>
</div>
</a>
<a href="#">
<div class="global-dates__box">
<i class="bi bi-globe-central-south-asia"></i>
<h3 class="orange">South Asia</h3>
<p class="fw-normal">
Unforgettable performances in India, Sri Lanka, Nepal, and much more.
</p>
</div>
</a>
<a href="#">
<div class="global-dates__box">
<i class="bi bi-globe-asia-australia"></i>
<h3 class="orange">Asia & Australia</h3>
<p class="fw-normal">
Thrilling performances in Japan, Australia, China, India, and
much more.
</p>
</div>
</a>
<a href="#">
<div class="global-dates__box">
<i class="bi bi-globe"></i>
<h3 class="orange">Globe</h3>
<p class="fw-normal">
Check the complete list of global concerts here!
</p>
</div>
</a>
<a class="btn-orange" href="#" id="global-dates__btn-buy">Buy tickets</a>
<a class="ta-center fs-underline-hover" href="#" id="global-dates__whole-program">SEE THE WHOLE PROGRAM</a>
</div>
</div>
</section>
<section class="grid bg-white dark" id="band-members">
<div class="container f-col" id="band-members__container">
<h2 class="ta-center">
Band Members<br />
<hr class="line-orange" />
</h2>
<div class="f-col" id="band-members__cards">
</div>
<button id="band-members__btn-more">
MORE
<i class="bi bi-chevron-down orange" id="btn-more__chevron-icon"></i>
</button>
</div>
</section>
</main>
<section class="grid bg-grey white ta-center" id="index-partner">
<div class="container f-col" id="index-partner__container">
<div id="index-partner__title">
<h2 class="fw-normal">
Partner<br />
<hr class="line-orange" />
</h2>
</div>
<div class="f-row f-wrap" id="partner__logos">
<a href="#"><img class="partner__logo" src="./img/logos/logo__jalc.png" /></a>
<a href="#"><img class="partner__logo" src="./img/logos/logo__berklee.png" /></a>
<a href="#"><img class="partner__logo" src="./img/logos/logo__sas.png" /></a>
<a href="#"><img class="partner__logo" src="./img/logos/logo__spotify.png" /></a>
<a href="#"><img class="partner__logo" src="./img/logos/logo__wmg.png" /></a>
</div>
</div>
</section>
<footer class="grid bg-white dark" id="index-footer">
<div class="container f-row" id="index-footer__container">
<a class="f-row" href="./index.html"><img id="footer__logo" src="./img/logos/logo__jrwt.png" /></a>
<div class="f-col">
<p>
Joshua Redman World Tour 2023. Some rights reserved. <br />
©Joshua Redman WT Team.
</p>
</div>
</div>
</footer>
<a href="#">
<div class="bg-orange jc-center white p-10 f-col ai-center ji-center" id="back-to-top-button">
<i class="bi bi-chevron-up"></i>
</div>
</a>
</main>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>