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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- PAGE settings -->
<link rel="icon" href="https://templates.pingendo.com/assets/Pingendo_favicon.ico">
<title>Conference Neon - Pingendo template</title>
<meta name="description" content="Free Bootstrap 4 Pingendo Neon template for unique events.">
<meta name="keywords" content="Pingendo conference event neon free template bootstrap 4">
<!-- CSS dependencies -->
<link rel="stylesheet" href="neon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<!-- Script: Make my navbar transparent when the document is scrolled to top -->
<script src="js/navbar-ontop.js"></script>
<!-- Script: Animated entrance -->
<script src="js/animate-in.js"></script>
</head>
<body class="text-center">
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-success">
<a class="p-2 text-secondary" href="#">
<img src="New folder/icon00.ico"> </a>
<a class="btn navbar-btn mx-2 text-white btn-outline-primary" href="one.html">Home</a>
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse justify-content-center" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item mx-2">
<a class="nav-link" href="#members">Members</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="#album">Album</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="#aboutThem">About them</a>
</li>
</ul>
</div>
<form class="form-inline m-0">
<input class="form-control mr-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</div>
</nav>
<div class="d-flex align-items-center py-5 cover section-fade-out" style="background-image: url('New folder/wannaone.jpg');"> </div>
<!-- Cover -->
<!-- Intro section -->
<div class="py-5 section-fade-in" style="background-image: url("New folder/bg1.jpg");" id="aboutThem">
<div class="container p-4 my-5">
<div class="row">
<div class="col-12">
<h1 class="mb-3">About them</h1>
<p class="">Label : YMC Entertainment </p>
<p>WANNA ONE debuted on Produce 101 Season 2 on Mnet. The top 11 winners debuted as the new boy group Wanna One, under the direction of YMC Entertainment and CJ E & amp; M Music, with a contract term ending in December 2018. Wanna One consists
of 11 members: Yoon Ji Sung, Ha Sung Woon, Hwang Min Hyun, Ong Seong Wu , Kim Jae Hwan, Kang Daniel, Park Ji Hoon , Park Woo Jin, Bae Jin Young, Lee Dae Hwi and Lai Kuan Lin. </p>
<p class="">Debut : 7 September 2017 </p>
<p class="">Fandom : Wannable </p>
<a href="#members" class="btn btn-lg m-2 btn-outline-success">Members</a>
<a class="btn btn-lg m-2 shadowed btn-success" href="#album">Album</a>
</div>
</div>
</div>
</div>
<!-- Speakers -->
<div class="py-5" id="members">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Members</h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-1">
<a href="#">
<img src="New folder/จีซอง9.jpg" class="center-block img-fluid my-3 shadowed" width="300">
<h3 class="mb-0"><b>Yoon Ji Sung</b></h3>
<p class="text-muted"> Leader, Sub Vocalist</p>
</a>
</div>
<div class="col-lg-4 col-md-1">
<a href="#">
<img src="New folder/ซองอุน9.jpg" class="center-block img-fluid my-3 shadowed" width="300">
<h3 class="mb-0"><b>Ha Sung Woon</b></h3>
<p class="text-muted">Main Vocalist</p>
</a>
</div>
<div class="col-lg-4 col-md-1">
<a href="#">
<img src="New folder/มินฮยอน9.jpg" class="center-block img-fluid my-3 shadowed" width="300">
<h3 class="mb-0"><b>Hwang Min Hyun </b></h3>
<p class="text-muted">Lead Vocalist</p>
</a>
</div>
<div class="col-lg-4 col-md-1">
<a href="#">
<img src="New folder/ซองอู9.jpg" class="center-block img-fluid my-3 shadowed" width="300">
<h3 class="mb-0"><b>Ong Seong Wu</b></h3>
<p class="text-muted">Main Dancer, Lead Vocalist</p>
</a>
</div>
<div class="col-lg-4 col-md-1">
<a href="#">
<img src="New folder/แจฮวาน9.jpg" class="center-block img-fluid my-3 shadowed" width="300">
<h3 class="mb-0"><b>Kim Jae Hwan</b></h3>
<p class="text-muted">Main Vocalist</p>
</a>
</div>
<div class="col-lg-4 col-md-1">
<a href="#">
<img src="New folder/เนียล9.jpg" class="center-block img-fluid my-3 shadowed" width="300">
<h3 class="mb-0"><b>Kang Daniel</b></h3>
<p class="text-muted">Center, Lead Dancer, Lead Rapper</p>
</a>
</div>
<div class="col-lg-4 col-md-1">
<a href="#">
<img src="New folder/จีฮุน9.jpg" class="center-block img-fluid my-3 shadowed" width="300">
<h3 class="mb-0"><b>Park Ji Hoon</b></h3>
<p class="text-muted">Main Dancer, Lead Rapper, Sub Vocalist</p>
</a>
</div>
<div class="col-lg-4 col-md-1">
<a href="#">
<img src="New folder/อูจิน9.jpg" class="center-block img-fluid my-3 shadowed" width="300">
<h3 class="mb-0"><b>Park Woo Jin</b></h3>
<p class="text-muted">Main Rapper, Main Dancer</p>
</a>
</div>
<div class="col-lg-4 col-md-1">
<a href="#">
<img src="New folder/จินยอง9.jpg" class="center-block img-fluid my-3 shadowed" width="300">
<h3 class="mb-0"><b>Bae Jin Young</b></h3>
<p class="text-muted">Lead Vocalist</p>
</a>
</div>
<div class="col-lg-4 col-md-1">
<a href="#">
<img src="New folder/แดฮวี9.jpg" class="center-block img-fluid my-3 shadowed" width="300">
<h3 class="mb-0"><b>Lee Dae Hwi</b></h3>
<p class="text-muted">Lead Vocalist</p>
</a>
</div>
<div class="col-lg-4 col-md-1">
<a href="#">
<img src="New folder/ควานลิน9.jpg" class="center-block img-fluid my-3 shadowed" width="300">
<h3 class="mb-0"><b>Lai Kuan Lin</b></h3>
<p class="text-muted">Lead Rapper, Maknae</p>
</a>
</div>
</div>
</div>
</div>
<!-- Schedule -->
<div class="py-5 section-fade-in-out" id="album" style="background-image: url("New folder/bg.jpg");">
<div class="container my-5">
<div class="row">
<div class="col-12">
<h1>Album</h1>
</div>
</div>
<div class="row text-left">
<div class="p-4 col-lg-4 col-md-6">
<div class="card shadowed">
<div class="card-block text-center card-primary p-2">
<h2>1st Mini Album</h2>
<p class="lead">1 X 1 = 1 </p>
<p class="lead">(To Be One)</p>
</div>
<br>
<img src="New folder/pinkVer.png" width="300" class="img-thumbnail">
<img src="New folder/skyVer.jpg" width="300" class="img-thumbnail"> </div>
</div>
<div class="p-4 col-lg-4 col-md-6">
<div class="card shadowed">
<div class="card-block text-center card-primary p-2">
<h2>Full Album 1</h2>
<p class="lead">1 - 1 = 0 </p>
<p class="lead">(NOTHING WITHOUT YOU)</p>
</div>
<br>
<img src="New folder/wanaVer.jpg" width="300" class="img-thumbnail">
<img src="New folder/oneVer.png" width="300" class="img-thumbnail"> </div>
</div>
<div class="p-4 col-lg-4">
<div class="card shadowed">
<div class="card-block text-center p-2">
<h2>2nd Mini Album </h2>
<p class="lead">0 + 1 = 1 </p>
<p class="lead">(I PROMISE YOU)</p>
</div>
<br>
<img src="New folder/3.jpg" width="300" class="img-thumbnail">
<br>
<br>
<center>
<h3>COMING SOON!! </h3>
</center>
<br>
<img src="New folder/BNVer.jpg" width="300" class="img-thumbnail"> </div>
</div>
</div>
</div>
</div>
<!-- Sponsor logos -->
<div class="py-5 section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="mb-4">Official Accounts</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 col-6">
<img class="center-block img-fluid d-block" src="New folder/YMC_Entertainment_logo.png"> </div>
<div class="col-md-2 col-6">
<img class="center-block img-fluid d-block" src="New folder/logo2.png"> </div>
<div class="col-md-2 col-6">
<img class="center-block img-fluid d-block" src="New folder/logo1.png"> </div>
<div class="col-md-2 col-6">
<img class="center-block img-fluid d-block" src="New folder/logo0.png"> </div>
<div class="col-md-2 col-6">
<img class="center-block img-fluid d-block" src="New folder/mwave-logo.jpg"> </div>
<div class="col-md-2 col-6">
<img class="center-block img-fluid d-block" src="New folder/ig.png"> </div>
</div>
</div>
</div>
<!-- Call to action -->
<!-- Footer -->
<footer class="text-md-left text-center p-1">
<div class="container">
<div class="row">
<div class="my-3 col-lg-12">
<h3>Follow</h3>
<a href="https://www.facebook.com" target="blank"><i class="fa fa-facebook-square text-muted fa-3x m-2"></i></a>
<a href="https://www.instagram.com" target="blank"><i class="fa fa-3x fa-instagram text-muted m-2"></i></a>
<a href="https://twitter.com" target="blank"><i class="fa fa-3x fa-twitter m-2 text-muted"></i></a>
<a href="https://plus.google.com" target="blank"><i class="fa fa-3x fa-google-plus-official text-muted m-2"></i></a>
<a href="https://www.youtube.com" target="blank"><i class="fa fa-3x text-muted fa-youtube-play m-2"></i></a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted">© 2018 Thank you everything - All rights reserved. </p>
</div>
</div>
</div>
</footer>
<!-- JavaScript dependencies -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Script: Smooth scrolling between anchors in a same page -->
<script src="js/smooth-scroll.js"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>