-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (138 loc) · 6.48 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
<!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>Global grooves concert</title>
<link rel="stylesheet" href="home.css">
<script src="https://kit.fontawesome.com/198fcc7e17.js" crossorigin="anonymous"></script>
</head>
<body class="body">
<section id="top-section">
<header>
<div class="bars-container">
<i class="fa-solid fa-bars"></i>
</div>
<nav>
<ul class="top-nav">
<li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#">English</a></li>
<li><a href="#">My page</a></li>
<li><a href="#">Log out</a></li>
</ul>
<div class="bottom-nav-container">
<li id="logo"><a href="index.html"><img src="./images/GG logo.png" alt="Global Groove logo"
width="70px"></a></li>
<ul class="bottom-nav">
<li><a href="about.html">About</a></li>
<li><a href="#main-program">Program</a></li>
<li><a href="#">Join</a></li>
<li><a href="#partners">sponsor</a></li>
<li><a id="campaign" href="#footer">GG concert</a></li>
</ul>
</div>
</nav>
<div class="menu-toggle">
<i class="fa-solid fa-x"></i>
<ul class="toggle-nav">
<li><a href="about.html">About</a></li>
<li><a href="#main-program">Program</a></li>
<li><a href="#">Join</a></li>
<li><a href="#partners">sponsor</a></li>
<li><a href="#footer">GG concert</a></li>
</ul>
</div>
</header>
<section id="introduction">
<div class="intro-content">
<p class="intro-p">"Hello people"</p>
<h1 class="intro-h1">Global groove concert 2023</h1>
<p class="description">
Join us for an unforgettable night of music as we bring together some of the biggest names in the
industry for a once-in-a-lifetime concert experience!
The event will take place in November in Kenya.
</p>
<p class="event-date">2023.11.29(fri) ~ 30(sat)</p>
<p class="event-location">@ Slims restaurant , Valley Rd (Ralph Bunche Rd) Nairobi</p>
</div>
</section>
</section>
<section id="main-program">
<div class="main-program">
<div class="main-program-title">
<h2>Main Program</h2>
<hr class="divider">
</div>
<div class="programs-container">
<div class="program">
<i class="fa-solid fa-person-chalkboard"></i>
<h3 class="program-title">Intro speech by MC</h3>
<p class="program-description">Trevoh Noah gives introduction on the program to the audience</p>
</div>
<div class="program">
<i class="fa-solid fa-drum"></i>
<h3 class="program-title">Swahili Love</h3>
<p class="program-description">We will begin the event with a good presentation of swahili songs</p>
</div>
<div class="program">
<i class="fa-solid fa-guitar"></i>
<h3 class="program-title">Pop music</h3>
<p class="program-description">The term "pop music" is short for "popular music" and refers to music
that is widely appealing and has mass commercial appeal.</p>
</div>
<div class="program">
<i class="fa-brands fa-soundcloud"></i>
<h3 class="program-title">Rap</h3>
<p class="program-description">Rap music is known for its dynamic rhythms, catchy hooks, and witty,
insightful lyrics.</p>
</div>
<div class="program">
<i class="fa-solid fa-earth-africa"></i>
<h3 class="program-title">Afro music</h3>
<p class="program-description">Musical styles and genres that originate from the African continent,
or
are influenced by African musical traditions</p>
</div>
<div class="program">
<i class="fa-solid fa-cannabis"></i>
<h3 class="program-title">Reggae</h3>
<p class="program-description">Reggae music is known for its focus on themes of peace, love, and
unity,
as well as its critique of political and social issues.</p>
</div>
</div>
<div class="see-program">
<h2 class="see-program-h2">See the whole program</h2>
</div>
</div>
<button class="join" type="button">Join Global Groove concert 2023</button>
</section>
<section id="ft-speakers">
</section>
<section id="partners">
<div class="partners-container">
<div class="partners-title">
<h2>Partners</h2>
<hr class="divider">
</div>
<div class="partners">
<i class="fa-brands fa-spotify"><span class="brand-span">Sportify</span></i>
<i class="fa-brands fa-airbnb"><span class="brand-span">Airbnb</span></i>
<i class="fa-brands fa-soundcloud"><span class="brand-span">Sound cloud</span></i>
<i class="fa-brands fa-untappd"><span class="brand-span">Untappd</span></i>
<i class="fa-brands fa-studiovinari"><span class="brand-span">Studiovinari</span></i>
</div>
</div>
</section>
<footer id="footer">
<img src="./images/GG logo.png" alt="Global groove logo" width="100px">
<div class="footer-details">
<p>2023 Global Groove concerts</p>
<p>© All rights served</p>
</div>
</footer>
<script src="index.js"></script>
</body>
</html>