Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Luxury Tourism</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="container-fluid bg-success pb-5">
<div class="container">
<nav class="navbar navbar-expand-lg mb-5">
<div class="container-fluid">
<a href="#" class="navbar-brand text-light">LT</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a href="#" class="nav-link active text-light">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link text-secondary">Destinations</a></li>
<li class="nav-item"><a href="#" class="nav-link text-secondary">Products</a></li>
<li class="nav-item"><a href="#" class="nav-link text-secondary">Events</a></li>
<li class="nav-item"><a href="#" class="nav-link text-secondary">About</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a href="#"
class="nav-link text-light border border-light rounded-0 px-3">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<div class="w-100 pt-5">
<div class="row">
<div
class="col-12 col-sm-12 col-md-6 col-lg-5 my-4 d-flex justify-content-center align-items-center">
<h1 class="text-light mb-0">Nemo corporis consectetur nihil reprehenderit aperiam vero.</h1>
</div>
<div class="col-12 col-sm-12 col-md-2 col-lg-2"></div>
<div
class="col-12 col-sm-12 col-md-4 col-lg-5 my-4 d-flex justify-content-center align-items-center flex-column">
<p class="mb-0 text-secondary">Debitis quam eos quas perspiciatis! Nulla dolore veniam officia
sed eligendi, quasi minima ut totam blanditiis quisquam a non consequuntur labore</p>
<div class="w-100 mt-5 d-flex align-items-center">
<button class="btn btn-warning rounded-0 me-5">Go Explore</button>
<a href="#" class="link-underline link-underline-opacity-0 ms-5 text-light">Watch Video</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid bg-l-g-g-w py-5">
<div class="container">
<img src="https://images.unsplash.com/photo-1603011896955-a124af26df07?q=80&w=2914&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 1" class="w-100 max-h-84vh">
</div>
</section>
<section class="container-fluid py-5">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
<div class="d-flex flex-column justify-content-center">
<h2>Our best destinations</h2>
<p class="mb-0 text-secondary">Iure soluta dolor tempore atque maiores tempora</p>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
<div class="d-flex justify-content-end h-100 align-items-center w-100">
<button class="btn btn-warning rounded-0">See all destinations</button>
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-4">
<div class="card rounded-0 border-0">
<img src="https://images.unsplash.com/photo-1582774475827-9814e8005fb5?q=80&w=2835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 2" class="w-100">
<h5 class="card-title pt-5">Place 1</h5>
<p class="card-text mb-0 text-secondary">Some details... <strong>Read More</strong></p>
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-4">
<div class="card rounded-0 border-0">
<h5 class="card-title">Place 2</h5>
<p class="card-text mb-0 text-secondary">Some details... <strong>Read More</strong></p>
<img src="https://images.unsplash.com/photo-1536289444758-1a89cd14499e?q=80&w=2208&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 3" class="w-100 pt-5">
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-4">
<div class="card rounded-0 border-0">
<img src="https://images.unsplash.com/photo-1609670289875-590e8ec05c88?q=80&w=2834&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 4" class="w-100">
<h5 class="card-title pt-5">Place 3</h5>
<p class="card-text mb-0 text-secondary">Some details... <strong>Read More</strong></p>
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-4">
<div class="card rounded-0 border-0">
<h5 class="card-title">Place 4</h5>
<p class="card-text mb-0 text-secondary">Some details... <strong>Read More</strong></p>
<img src="https://images.unsplash.com/photo-1639576997800-254302cd020f?q=80&w=2836&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 5" class="w-100 pt-5">
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid py-5 bg-l-g-g-w">
<div class="container">
<h2 class="text-center text-light">Products</h2>
<p class="text-center mb-0 w-50 mx-auto text-secondary">Dolorem repellendus labore expedita</p>
<div class="row mt-5">
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-4">
<div class="card rounded-0 border-0 bx-shdw">
<img src="https://images.unsplash.com/photo-1486548730767-5c679e8eda6b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 6" class="w-100">
<div class="card-body">
<h5 class="card-title">Product 1</h5>
<p class="card-text mb-0 text-secondary">Some Details...</p>
<div class="d-flex w-100 justify-content-between align-items-center mt-3">
<span>₹ <strong>199</strong></span>
<a href="#" class="btn btn-dark rounded-circle">+</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-4">
<div class="card rounded-0 border-0 bx-shdw">
<img src="https://images.unsplash.com/photo-1589463349208-95817c91f971?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 7" class="w-100">
<div class="card-body">
<h5 class="card-title">Product 2</h5>
<p class="card-text mb-0 text-secondary">Some Details...</p>
<div class="d-flex w-100 justify-content-between align-items-center mt-3">
<span>₹ <strong>299</strong></span>
<a href="#" class="btn btn-dark rounded-circle">+</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-4">
<div class="card rounded-0 border-0 bx-shdw">
<img src="https://images.unsplash.com/photo-1458322493962-69c5a4ef7ddf?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 8" class="w-100">
<div class="card-body">
<h5 class="card-title">Product 3</h5>
<p class="card-text mb-0 text-secondary">Some Details...</p>
<div class="d-flex w-100 justify-content-between align-items-center mt-3">
<span>₹ <strong>399</strong></span>
<a href="#" class="btn btn-dark rounded-circle">+</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-4">
<div class="card rounded-0 border-0 bx-shdw">
<img src="https://images.unsplash.com/photo-1526234252162-ce107695b0fc?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 9" class="w-100">
<div class="card-body">
<h5 class="card-title">Product 4</h5>
<p class="card-text mb-0 text-secondary">Some Details...</p>
<div class="d-flex w-100 justify-content-between align-items-center mt-3">
<span>₹ <strong>499</strong></span>
<a href="#" class="btn btn-dark rounded-circle">+</a>
</div>
</div>
</div>
</div>
</div>
<div class="w-100 d-flex mt-5">
<a href="#" class="btn btn-warning mx-auto rounded-0">See all products</a>
</div>
</div>
</section>
<section class="container-fluid py-5">
<div class="container">
<div class="row">
<div
class="col-12 col-sm-12 col-md-12 col-lg-3 my-4 d-flex flex-column align-items-center justify-content-center">
<h2 class="text-start w-100">Upcoming events</h2>
<p class="mb-0 text-secondary">Ex saepe tempora eum quasi eos facilis fugit mollitia ratione labore
doloremque nihil deserunt consectetur, sit vitae voluptatum</p>
<div class="w-100 mt-4">
<a href="#" class="btn btn-warning rounded-0">See all events</a>
</div>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-3 my-4 d-flex align-items-center justify-content-center">
<div class="card rounded-0 border-0 bx-shdw">
<img src="https://images.unsplash.com/photo-1463592177119-bab2a00f3ccb?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 10" class="w-100">
<div class="card-body">
<h5 class="card-title">Event 1</h5>
<p class="card-text mb-0 text-secondary">Date:______</p>
</div>
</div>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-3 my-4 d-flex align-items-center justify-content-center">
<div class="card rounded-0 border-0 bx-shdw">
<img src="https://images.unsplash.com/photo-1489993360877-883980cc7333?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 11" class="w-100">
<div class="card-body">
<h5 class="card-title">Event 2</h5>
<p class="card-text mb-0 text-secondary">Date:______</p>
</div>
</div>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-3 my-4 d-flex align-items-center justify-content-center">
<div class="card rounded-0 border-0 bx-shdw">
<img src="https://images.unsplash.com/photo-1668083929205-980ae0ca2d1e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image 12" class="w-100">
<div class="card-body">
<h5 class="card-title">Event 3</h5>
<p class="card-text mb-0 text-secondary">Date:______</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid py-5 bg-success">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 my-4">
<h2 class="text-light">Luxury Tourism</h2>
<p class="mb-0 text-secondary">Aliquam ut ullam, accusantium excepturi omnis dolorem magnam.</p>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-2 my-4">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-clear px-0 border-0 text-light">Profile</li>
<li class="list-group-item bg-clear px-0 border-0">
<a href="#" class="link-underline link-underline-opacity-0 text-secondary">About</a>
</li>
<li class="list-group-item bg-clear px-0 border-0">
<a href="#" class="link-underline link-underline-opacity-0 text-secondary">Team</a>
</li>
<li class="list-group-item bg-clear px-0 border-0">
<a href="#" class="link-underline link-underline-opacity-0 text-secondary">Map</a>
</li>
</ul>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-2 my-4">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-clear px-0 border-0 text-light">Attractions</li>
<li class="list-group-item bg-clear px-0 border-0">
<a href="#" class="link-underline link-underline-opacity-0 text-secondary">Destinations</a>
</li>
<li class="list-group-item bg-clear px-0 border-0">
<a href="#" class="link-underline link-underline-opacity-0 text-secondary">Products</a>
</li>
<li class="list-group-item bg-clear px-0 border-0">
<a href="#" class="link-underline link-underline-opacity-0 text-secondary">Events</a>
</li>
</ul>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-2 my-4">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-clear px-0 border-0 text-light">Others</li>
<li class="list-group-item bg-clear px-0 border-0">
<a href="#" class="link-underline link-underline-opacity-0 text-secondary">Blog</a>
</li>
<li class="list-group-item bg-clear px-0 border-0">
<a href="#" class="link-underline link-underline-opacity-0 text-secondary">Reviews</a>
</li>
<li class="list-group-item bg-clear px-0 border-0">
<a href="#" class="link-underline link-underline-opacity-0 text-secondary">Spons.</a>
</li>
</ul>
</div>
</div>
<hr class="border-light">
<p class="text-center mb-0 text-light pt-3">Copyright © 2024 LT. All rights reserved.</p>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>Below is the css code for this video.
style.css
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
}
.bg-success {
background-color: #013220 !important;
}
.btn-warning {
background-color: #ff6700 !important;
border-color: #ff6700 !important;
color: #ffffff;
}
.bg-l-g-g-w {
background-image: linear-gradient(to bottom, #013220 0%, #013220 50%, #ffffff 50%, #ffffff 100%);
}
.max-h-84vh {
max-height: 84vh;
}
.bx-shdw {
box-shadow: 0 4px 16px #00000040;
}
.bg-clear {
background: transparent;
}Thanks for visiting