<!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>