<!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" />
<title>Convention Center</title>
<script
src="https://kit.fontawesome.com/e4809e0f23.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<!-- Bootstrap Css -->
<link
href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- style.css -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- header -->
<header>
<nav class="navbar d-flex navbar-expand-lg navbar-light bg-light p-3">
<div class="container-fluid">
<div class="convention-name">
<h2>Abacus Convention Center</h2>
</div>
<div class="navbar-nav d-flex">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About Us</a>
<a class="nav-link" href="#">contact</a>
<a class="nav-link" href="#">Subscribe</a>
</div>
</div>
</nav>
<div class="container w-100">
<section class="image-slider">
<div
id="carouselExampleCaptions"
class="carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/banner.png" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block my-5">
<h1 class="banner-name">
The perfect venue for your <br />
next event
</h1>
<p>
Amet minim mollit non deserunt ullamco est sit aliqua dolor
<br />
do amet sint. Velit officia consequat duis enim velit
</p>
<button class="button" type="button">
<a href="">Book Now</a>
</button>
</div>
</div>
<div class="carousel-item">
<img src="images/banner.png " class="w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>
Some representative placeholder content for the second
slide.
</p>
<button class="button" type="button">
<a href="">Book Now</a>
</button>
</div>
</div>
<div class="carousel-item">
<img src="images/banner.png" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>
Some representative placeholder content for the third slide.
</p>
<button class="button" type="button">
<a href="">Book Now</a>
</button>
</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>
</section>
</div>
</header>
<!-- main -->
<main>
<div class="d-flex justify-content-center my-5">
<div class="card mb-3 m-5 p-3 w-75">
<div class="row g-0">
<div class="col-md-4">
<img
src="images/wedding.png"
class="img-fluid rounded-start"
alt="..."
/>
</div>
<div class="col-md-8">
<div class="card-body">
<h1 class="card-title">Every moment is Precious</h1>
<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>
<button class="btn btn-primary btn-lg" type="button">
<a class="text-white" href="">Explore our album</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- package -->
<div>
<div>
<h1 class="text-center m-3">Our Package</h1>
</div>
<section class="pricing py-5 m-5">
<div class="container">
<div class="row">
<!-- Business fair -->
<div class="col-lg-3 p-3">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h1 class="fs-1">$300</h1>
<h2 class="fs-2">Business fair</h2>
<p>For most businesses event like book fair, craft fair.</p>
<hr />
<ul class="fa-ul">
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>limited space access
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>Security facility
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>event support
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>Decoration design
</li>
<li class="">
<span class="fa-li"><i class="fas fa-check"></i></span
>per day bill
</li>
<li class="">
<span class="fa-li"><i class="fas fa-check"></i></span
>Dedicated Phone Support
</li>
</ul>
<div class="d-grid">
<a href="#" class="btn btn-primary text-uppercase"
>Button</a
>
</div>
</div>
</div>
</div>
<!-- wedding basic-->
<div class="col-lg-3 p-3">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h1 class="fs-1">$500</h1>
<h3 class="fs-2">wedding basic</h3>
<p>For wedding with basic plan and limited item</p>
<hr />
<ul class="fa-ul">
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>Full space access
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>Food arrangement
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>event support
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>mangement support
</li>
<li class="">
<span class="fa-li"><i class="fas fa-check"></i></span
>Decoration design
</li>
<li class="">
<span class="fa-li"><i class="fas fa-check"></i></span
>Dedicated Phone Support
</li>
</ul>
<div class="d-grid">
<a href="#" class="btn btn-primary text-uppercase"
>Button</a
>
</div>
</div>
</div>
</div>
<!-- wedding plus -->
<div class="col-lg-3">
<div
class="card mb-5 mb-lg-0 bg-primary text-white shadow-lg p-3 mb-5 rounded"
>
<div class="card-body">
<h1 class="fs-1 p-3">$800</h1>
<h3 class="fs-2">wedding plus</h3>
<p>For most wedding with premium plans</p>
<hr />
<ul class="fa-ul">
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>Full space access
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>Food arrangement
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>Dedicated team
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>Buffet Food
</li>
<li class="">
<span class="fa-li"><i class="fas fa-check"></i></span
>Premium decoration
</li>
<li class="">
<span class="fa-li"><i class="fas fa-check"></i></span
>pay as plan
</li>
</ul>
<div class="d-grid">
<a href="#" class="btn bg-light">Choose plan</a>
</div>
</div>
</div>
<!-- toast -->
</div>
<!-- corporate event -->
<div class="col-lg-3 p-3">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h1 class="fs-1">$1200</h1>
<h3 class="fs-2">Corporate event</h3>
<p>For most corporate business event</p>
<hr />
<ul class="fa-ul">
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>Full space access
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>Food arrangement
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>event support
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span
>mangement support
</li>
<li class="">
<span class="fa-li"><i class="fas fa-check"></i></span
>Decoration design
</li>
<li class="">
<span class="fa-li"><i class="fas fa-check"></i></span
>Dedicated Phone Support
</li>
</ul>
<div class="d-grid">
<a href="#" class="btn btn-primary text-uppercase"
>Button</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- FAQ -->
<!-- Frequently Ask question -->
<section id="questions" class="py-5">
<div class="row">
<div class="col mb-4">
<h2 class="fw-bold text-center">
Frequently Asked <span class="text-danger">Questions</span>
</h2>
</div>
</div>
<div class="gap-4 gap-md-0 row align-items-center">
<div class="col-lg-6 col-md-12 faq ps-5">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
class="fw-medium accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="false"
aria-controls="collapseOne"
>
What are the most important things I should know about riding
a bike?
</button>
</h2>
<div
id="collapseOne"
class="accordion-collapse collapse"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample"
style=""
>
<div class="accordion-body fw-light">
Safety First! Always obey the rules of the road. Obey all
traffic signals, signs, and laws. Get in the mindset of
“driving” your bike—not just “riding” your bike. This will
help you be a more focused and legally compliant bike rider.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button
class="fw-medium accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
How can I tell if my helmet is old and I need a new one?
</button>
</h2>
<div
id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample"
>
<div class="accordion-body fw-light">
Safety First! Always obey the rules of the road. Obey all
traffic signals, signs, and laws. Get in the mindset of
“driving” your bike—not just “riding” your bike. This will
help you be a more focused and legally compliant bike rider.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button
class="fw-medium accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
My bike has been in storage is it safe to ride?
</button>
</h2>
<div
id="collapseThree"
class="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#accordionExample"
>
<div class="accordion-body fw-light">
Safety First! Always obey the rules of the road. Obey all
traffic signals, signs, and laws. Get in the mindset of
“driving” your bike—not just “riding” your bike. This will
help you be a more focused and legally compliant bike rider.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button
class="fw-medium accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
What rules should I follow when riding my bike?
</button>
</h2>
<div
id="collapseThree"
class="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#accordionExample"
>
<div class="accordion-body fw-light">
Safety First! Always obey the rules of the road. Obey all
traffic signals, signs, and laws. Get in the mindset of
“driving” your bike—not just “riding” your bike. This will
help you be a more focused and legally compliant bike rider.
</div>
</div>
</div>
</div>
</div>
<div
class="col-lg-6 col-md-12 img p-md-5 d-flex justify-content-center"
>
<img
width="75%"
class="img-fluid img pe-5"
src="images/people.png"
alt=""
/>
</div>
</div>
</section>
<!-- Subscribe email -->
<section id="contact" class="py-5 bg-danger text-light">
<div class="row align-items-center justify-content-center">
<div
class="col-md-12 col-lg-12 d-flex justify-content-center justify-content-md-start"
>
<img class="img-fluid w-50" src="images/confusion.svg" alt="" />
</div>
<div class="col-md-12 col-lg-6 px-4 px-lg-0">
<form action="" class="text-center">
<h2>Are You Confused?</h2>
<p>Ask anything at anytime</p>
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="Feel free to ask anything"
/>
<button class="btn btn-primary">Ask Question</button>
</div>
</form>
</div>
</div>
</section>
<!-- ----------------footer --------------------->
<footer>
<div class="page-content page-container">
<div class="padding">
<div class="row container d-flex justify-content-center">
<div class="template-demo mt-2">
<button class="btn btn-outline-dark btn-icon-text">
<i class="fa fa-apple btn-icon-prepend mdi-36px"></i>
<span class="d-inline-block text-left">
<small class="font-weight-light d-block"
>Available on the</small
>
App Store
</span>
</button>
<button class="btn btn-outline-dark btn-icon-text">
<i class="fa fa-android btn-icon-prepend mdi-36px"></i>
<span class="d-inline-block text-left">
<small class="font-weight-light d-block">Get it on the</small>
Google Play
</span>
</button>
</div>
</div>
</div>
</div>
</footer>
<!-- js Script -->
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>