-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
218 lines (218 loc) · 8.95 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
208
209
210
211
212
213
214
215
216
217
218
<!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="shortcut icon" href="img/favicon_io/favicon.ico" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<script
src="https://kit.fontawesome.com/cdc6c51dd6.js"
crossorigin="anonymous"
></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Unicorn Con 2023 | Homepage</title>
</head>
<body>
<header class="header">
<ul class="nav justify-content-end nav-top bg-dark d-none d-md-flex px-5">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#"
><i class="fa-brands fa-facebook"></i
></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa-brands fa-mastodon"></i></a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
<li class="nav-item"><a class="nav-link" href="#">English</a></li>
<li class="nav-item"><a class="nav-link" href="#">My Page</a></li>
</ul>
<nav
class="navbar navbar-expand-md bg-light navbar-custom sticky-top px-5"
>
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarToggler"
aria-controls="navbarToggler"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-between"
id="navbarToggler"
>
<a class="navbar-brand" href="index.html"
><img
src="img/logo/kohai-high-resolution-logo-black-on-transparent-background.png"
alt="logo"
class="logo"
/></a>
<ul class="navbar-nav me-0 mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" href="pages/about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#program">Program</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#guest">Guests</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sponsor">Sponsors</a>
</li>
<li>
<button type="button" class="btn btn-outline-danger">
Claim your badge
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="headline min-vh-100 w-100 z-n1"></div>
<div class="headline-text d-flex flex-column w-75 mx-auto">
<q class="fs-5 fw-semibold"
>Hi nakama! You don't want to miss this one!</q
>
<h1 class="fw-bold text-uppercase">🦄Unicorn Con 2023🧚</h1>
<p
class="p-3 bg-light fw-bolder opacity-75 text-dark order border-white border-opacity-10"
>
<span class="fw-bold fs-5">Kohai</span> inc. just surpassed itself
this time. An event without precedence will take place this year in
West Blue, Ohara of all places. Put on your favorite cosplay costume,
because we will bazinga like it is our last day.
</p>
<p class="fs-1 fw-bold text-dark">Mon 29 - Wen 31 May</p>
<p class="text-dark fw-semibold">@Colosseum Ohara West Blue</p>
</div>
</header>
<main>
<section id="program" class="d-flex flex-column align-items-center pb-3">
<h2 class="text-center fw-bolder pt-5 text-light">Main Program</h2>
<span class="line-primary mb-4"></span>
<ul
class="d-flex flex-column flex-md-row flex-wrap justify-content-md-center list-unstyled"
>
<li
class="d-flex flex-md-column justify-content-start justify-content-md-center align-items-center bg-dark opacity-75 rounded-1 ms-1 my-1 col-md-2 program-item p-1 text-center"
>
<i class="fa-solid fa-masks-theater fs-1 text-primary"></i>
<h3 class="fw-semibold mx-2 text-primary fs-6">Perfomances</h3>
<p class="text-light">
A lot of performers will join us at that time to blow our mind.
</p>
</li>
<li
class="d-flex flex-md-column justify-content-start justify-content-md-center align-items-center bg-dark opacity-75 rounded-1 ms-1 my-1 col-md-2 program-item p-1 text-center"
>
<i class="fa-solid fa-pen-to-square fs-1 text-primary"></i>
<h3 class="fw-semibold mx-2 text-primary fs-6">Autographs</h3>
<p class="text-light">
All your favorite authors will gather to make your dream a
reality.
</p>
</li>
<li
class="d-flex flex-md-column justify-content-start justify-content-md-center align-items-center bg-dark opacity-75 rounded-1 ms-1 my-1 col-md-2 program-item p-1 text-center"
>
<i class="fa-solid fa-handshake fs-1 text-primary"></i>
<h3 class="fw-semibold mx-2 text-primary fs-6">
Cosplayer meet&greet
</h3>
<p class="text-light">
Every big cosplayers from all over the world will be there.
</p>
</li>
<li
class="d-flex flex-md-column justify-content-start justify-content-md-center align-items-center bg-dark opacity-75 rounded-1 ms-1 my-1 col-md-2 program-item p-1 text-center"
>
<i class="fa-sharp fa-solid fa-microphone fs-1 text-primary"></i>
<h3 class="fw-semibold mx-2 text-primary fs-6">Voice acting</h3>
<p class="text-light">
There will be a live voice acting in the main hall.
</p>
</li>
<li
class="d-flex flex-md-column justify-content-start justify-content-md-center align-items-center bg-dark opacity-75 rounded-1 ms-1 my-1 col-md-2 program-item p-1 text-center"
>
<i class="fa-sharp fa-solid fa-star fs-1 text-primary"></i>
<h3 class="fw-semibold mx-2 text-primary fs-6">Special events</h3>
<p class="text-light">
The "gear fourth" show will be the wild card but more special
events will also take place.
</p>
</li>
</ul>
<button
type="button"
class="btn btn-danger p-3 rounded-0 text-white fw-bold mx-auto text-uppercase mt-5"
>
Claim your badge
</button>
</section>
<section id="guest" class="d-flex flex-column align-items-center pb-3">
<h2 class="text-center fw-bolder pt-5 mb-3">Our virtual guests</h2>
<span class="line-primary"></span>
<ul class="row mt-5 list-unstyled p-3 justify-content-center"></ul>
<button
type="button"
class="btn btn-outline-dark p-3 rounded-0 fw-bold mx-auto text-uppercase d-md-none more-or-less w-50"
>
Load more <i class="fas fa-angle-down"></i>
</button>
</section>
<section
id="sponsor"
class="d-none d-md-flex flex-column align-items-center pb-3"
>
<h2 class="text-center fw-bolder pt-5 mb-3 text-light">Sponsors</h2>
<span class="line-primary"></span>
<div class="brand w-75 d-flex justify-content-between my-5">
<i class="fab fa-xbox fs-1"></i>
<i class="fab fa-steam fs-1"></i>
<i class="fab fa-playstation fs-1"></i>
<i class="fab fa-imdb fs-1"></i>
<i class="fab fa-vimeo-v fs-1"></i>
<i class="fab fa-weibo fs-1"></i>
</div>
</section>
</main>
<footer
class="d-none d-md-flex justify-content-around align-items-center my-4 w-50 mx-auto"
>
<img
src="img/logo/kohai-logo-transparent-bg.png"
alt="kohai logo"
class="logo"
/>
<small class="fw-semibold">
2023 Unicorn Con <br />
Some rights Reserved</small
>
</footer>
<script src="js/script.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>