-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (135 loc) · 6.11 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
<!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">
<meta property="og:image" content="./asssets/images/demi.png">
<title>Bankia Listening Party</title>
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<!-- Fontawesome Icons CDN link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
<!-- My style -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container flex-row">
<div id="logo">
<a href="index.html">
<img src="./assets/images/logo.png" alt="Picture of Logo">
</a>
</div>
<button type="button" class="toggle-menu">
<i class="bi bi-list"></i>
</button>
<button type="button" class="close-menu d-none">
<i class="fa-solid fa-xmark"></i>
</button>
<nav id="navbar">
<ul class="flex-column center-align">
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="#">Program</a>
</li>
<li>
<a href="#">Sponsor</a>
</li>
<li>
<a href="#">News</a>
</li>
<li class="last-child">
<a href="#">CC Campaign</a>
</li>
</ul>
</nav>
</div>
</header>
<main>
<section id="headline" class="wrapper flex-column">
<div class="container">
<div class="intro color1 capitalize regular medium-text">"Hello! Music World"</div>
<h1 class="color1 big-text bold upper">DEMIGODD listening party 2022</h1>
<p class="regular regular-text desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias quo dicta nobis excepturi quaerat quas animi quam non ex aspernatur. Quam ipsam delectus repellat, architecto sint aut quo ea nobis.</p>
<h3 class="medium-text bold upper">2022.05.14(Sat)</h3>
<p class="regular regular-text capitalize">@ the golden bide gardens and suites</p>
</div>
<i class="bi bi-vinyl bg-icon c"></i>
<i class="bi bi-music-note bg-icon bc"></i>
<i class="fa-solid fa-headphones-simple bg-icon rc"></i>
<i class="fa-brands fa-napster bg-icon tr"></i>
<i class="fa-brands fa-soundcloud bg-icon tl"></i>
</section>
<section id="program" class="wrapper flex-column center-align">
<h2 class="capitalize semi-bold section-title medium-text center-text">Main Program</h2>
<div class="grid container">
<div class="grid-item flex-row center-align">
<i class="fa-solid fa-microphone-lines"></i>
<h4 class="program-title color1 regular-text">Musical Performances</h4>
<p class="program-desc">Lorem ipsum dolor sitamet, consectetur adipisicing elit. Saepe deleniti inventore repelle</p>
</div>
<div class="grid-item flex-row center-align">
<i class="bi bi-music-note-list"></i>
<h4 class="program-title color1 regular-text">Lyrics breakdown</h4>
<p class="program-desc">Lorem ipsum dolor sitamet, consectetur adipisicing elit. Saepe deleniti inventore repelle</p>
</div>
<div class="grid-item flex-row center-align">
<i class="fa-solid fa-handshake"></i>
<h4 class="program-title color1 regular-text">Meet and Greet</h4>
<p class="program-desc">Lorem ipsum dolor sitamet, consectetur adipisicing elit. Saepe deleniti inventore repelle</p>
</div>
<div class="grid-item flex-row center-align">
<i class="fa-solid fa-utensils"></i>
<h4 class="program-title color1 regular-text">Food and Drinks</h4>
<p class="program-desc">Lorem ipsum dolor sitamet, consectetur adipisicing elit. Saepe deleniti inventore repelle</p>
</div>
<div class="grid-item flex-row center-align">
<i class="bi bi-trophy"></i>
<h4 class="program-title color1 regular-text">Raffle prizes</h4>
<p class="program-desc">Lorem ipsum dolor sitamet, consectetur adipisicing elit. Saepe deleniti inventore repelle</p>
</div>
</div>
<button type="button" class="btn1 capitalize regular">
Join the party
</button>
<a href="#" class="see-more capitalize medium-text">See more programs</a>
</section>
<section id="features" class="wrapper flex-column center-align">
<h2 class="capitalize semi-bold section-title medium-text center-text">Featured artists</h2>
<div class="grid container">
</div>
<button type="button" class="btn2 upper d-block">
more <i class="bi bi-arrow-down-circle-fill color1"></i>
</button>
<button type="button" class="btn2 upper d-none">
more <i class="bi bi-arrow-up-circle-fill color1"></i>
</button>
</section>
<section id="partners" class="wrapper flex-column center-align">
<h2 class="capitalize semi-bold section-title medium-text center-text">Partners</h2>
<div class="flex-row center-align container">
<img src="./assets/images/image2vector.svg" alt="Picture of partner logo">
<img src="./assets/images/google.svg" alt="Picture of partner logo">
<img src="./assets/images/naver.svg" alt="Picture of partner logo">
<img src="./assets/images/tokopedia.png" alt="Picture of partner logo">
<img src="./assets/images/airbnb.svg" alt="Picture of partner logo">
</div>
</section>
</main>
<footer class="wrapper">
<div class="container flex-column center-align">
<figure>
<img src="./assets/images/logo.png" alt="Picture of logo">
</figure>
<div class="flex-column footer-desc">
<h4 class="regular-text semi-bold capitalize">2022 Demigodd listening Party</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut dolor ipsum totam cupiditate, sunt praesentium est odit.</p>
</div>
</div>
</footer>
<script src="main.js"></script>
</body>
</html>