<!DOCTYPE html>
<html lang="th">
<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> Template + Bootstrap 5 | boychawin.com</title>
<!--Favicons-->
<link rel="apple-touch-icon" sizes="180x180" href="https://boychawin.com/B_images/logoboychawin.com.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://boychawin.com/B_images/logoboychawin.com.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://boychawin.com/B_images/logoboychawin.com.png" />
<link rel="shortcut icon" type="image/x-icon" href="https://boychawin.com/favicon.ico" />
<meta name="msapplication-TileImage" content="https://boychawin.com/B_images/logoboychawin.com.png" />
<meta name="theme-color" content="#1b2836" />
<!-- boychawin.com CSS -->
<link rel="stylesheet" href="https://boychawin.com/templates/bc.css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 ">
<a class="navbar-brand" href="#"><b>boychawin.com</b></a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link text-dark" href="#fat">About us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#mdo">Service</a>
</li>
<li class="nav-item dropdown text-dark">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
aria-expanded="false">Other</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#one">Features</a></li>
<li><a class="dropdown-item" href="#two">FAQ</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<a class="dropdown-item" href="#three">Follow the news</a>
</li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://boychawins.com/blogs/images/09297300_1607528925.jpg" class="d-block w-100"
alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>title</h5>
<p>Detail</p>
</div>
</div>
<div class="carousel-item">
<img src="https://boychawins.com/blogs/images/09297300_1607528925.jpg" class="d-block w-100"
alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>title</h5>
<p>Detail</p>
</div>
</div>
<div class="carousel-item">
<img src="https://boychawins.com/blogs/images/09297300_1607528925.jpg" class="d-block w-100"
alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>title</h5>
<p>Detail</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<h4 class="mt-5" id="fat">About us</h4>
<div class="card text-center">
<div class="card-header bg-white"><b>About boychawin.com</b></div>
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">
boychawin.com Have personal preferences Therefore...
</p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">
More
</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom"
aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">
boychawin.com Have personal preferences Therefore, it is
committed to help presenting articles and sharing useful
knowledge about tourism and technology to share with each
other.
</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<!-- <div class="offcanvas-body small">...</div> -->
</div>
</div>
</div>
<h4 class="mt-5" id="mdo">Service</h4>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://boychawins.com/blogs/images/09297300_1607528925.jpg" class="card-img-top"
alt="..." />
<div class="card-body">
<h5 class="card-title">title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer bg-white">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://boychawins.com/blogs/images/09297300_1607528925.jpg" class="card-img-top"
alt="..." />
<div class="card-body">
<h5 class="card-title">title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to
additional content.
</p>
</div>
<div class="card-footer bg-white">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://boychawins.com/blogs/images/09297300_1607528925.jpg" class="card-img-top"
alt="..." />
<div class="card-body">
<h5 class="card-title">title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This card has even longer
content than the first to show that equal height action.
</p>
</div>
<div class="card-footer bg-white">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
<h4 class="mt-5" id="one">Features</h4>
<p class="text-center">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button"
aria-expanded="false" aria-controls="multiCollapseExample1">Features <i class="fas fa-plus"></i></a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">
Features <i class="fas fa-plus"></i>
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse"
aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">
Features <i class="fas fa-plus"></i>
</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of
this multi-collapse example. This panel is hidden by default but
revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of
this multi-collapse example. This panel is hidden by default but
revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
<h4 class="mt-5" id="two">FAQ</h4>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
FAQ #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth
noting that just about any HTML can go within the
<code>.accordion-body</code>, though the transition does limit
overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
FAQ #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth
noting that just about any HTML can go within the
<code>.accordion-body</code>, though the transition does limit
overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
FAQ #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth
noting that just about any HTML can go within the
<code>.accordion-body</code>, though the transition does limit
overflow.
</div>
</div>
</div>
</div>
<h4 class="mt-5" id="three">Follow the news</h4>
<form action="https://boychawin.com">
<div class="card text-white">
<div class="p-5 bg-transparent"></div>
<div class="card-img-overlay">
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">E-mail</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername"
placeholder="E-mail" />
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<footer>
<div class="row">
<div class="text-center mt-5 mb-5 light">
<a target="_blank" href="https://www.facebook.com/boychawincom" class="link-primary me-2"><i
class="fab fa-facebook"></i></a>
<a target="_blank" href="https://lin.ee/r3rz6ms" class="link-success me-2">
<i class="fab fa-line"></i></a>
<a target="_blank"
href="https://www.youtube.com/channel/UC4JgG8eoenTbswfYwJ8Z6Gg?view_as=subscriber"
class="link-danger me-2">
<i class="fab fa-youtube"></i></a>
<a target="_blank" href="https://twitter.com/boychawin" class="link-info me-2">
<i class="fab fa-twitter"></i></a>
<a target="_blank" href="https://github.com/boychawin" class="link-dark me-2">
<i class="fab fa-github"></i></a>
<p class="mt-3">
Powered by
<a href="https://boychawin.com/" class="link-secondary" target="_blank">boychawin.com</a>
</p>
</div>
</div>
<!-- row -->
<!-- <div class="brdr-ash-1 opacty-2"></div> -->
</footer>
</div>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
</body>
</html>
