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>Nature's Nest Soap</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 pb-5 bg-secondary">
<div class="container border-bottom border-dark px-0">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid px-0">
<a href="#" class="navbar-brand bungee-regular text-charcoal">NNS</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 me-lg-5">
<a href="#" class="nav-link active roboto-regular text-charcoal">Home</a>
</li>
<li class="nav-item me-lg-5">
<a href="#" class="nav-link roboto-regular text-charcoal">Shop</a>
</li>
<li class="nav-item me-lg-5">
<a href="#" class="nav-link roboto-regular text-charcoal">About</a>
</li>
<li class="nav-item me-lg-5">
<a href="#" class="nav-link roboto-regular text-charcoal">Contact</a>
</li>
<li class="nav-item me-lg-5">
<a href="#"
class="nav-link btn border border-dark px-4 roboto-regular text-charcoal">Sign
In</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link btn border border-dark px-4 roboto-regular text-charcoal">Sign
Up</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex justify-content-center align-items-center">
<h1 class="mb-0 bungee-regular text-charcoal">Discover the beauty of Nature'sNest Soap</h1>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex justify-content-center align-items-center">
<img src="https://images.unsplash.com/photo-1584305574647-0cc949a2bb9f?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 1" class="w-100">
</div>
</div>
</div>
<div class="container mt-4">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex justify-content-center align-items-center">
<div class="row">
<div class="col-5 col-sm-5 col-md-5 col-lg-5 my-4">
<img src="https://images.unsplash.com/photo-1607006411185-9ad3bcee0369?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 2" class="w-100 rounded-pill">
</div>
<div class="col-5 col-sm-5 col-md-5 col-lg-5 my-4">
<img src="https://images.unsplash.com/photo-1607006411185-9ad3bcee0369?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 3" class="w-100 rounded-pill">
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex justify-content-center align-items-center">
<div class="row">
<div class="col-4 col-sm-4 col-md-4 col-lg-4 my-4">
<h4 class="mb-3 bungee-regular text-charcoal">Natural Ingredients</h4>
<p class="mb-0 roboto-regular text-charcoal">Discover the power of nature's finest
ingredients, carefully selected for their soothing & nourishing properties.</p>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 my-4">
<h4 class="mb-3 bungee-regular text-charcoal">Gentle on Skin</h4>
<p class="mb-0 roboto-regular text-charcoal">Experience luxurious cleansing with our gentle
formulas, perfect for even the most sensitive skin types.</p>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 my-4">
<h4 class="mb-3 bungee-regular text-charcoal">Unmatched Quality</h4>
<p class="mb-0 roboto-regular text-charcoal">Crafted with care & attention to detail, our
soaps deliver unparalleled quality & performance, leaving your skin refreshed &
revitalized.</p>
</div>
</div>
</div>
</div>
</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">
<img src="https://images.unsplash.com/photo-1600857544200-b2f666a9a2ec?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 4" class="w-100">
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex justify-content-center flex-column">
<h3 class="mb-4 bungee-regular text-charcoal">Discover the secret to radiant skin</h3>
<p class="mb-4 roboto-regular text-charcoal">Unlock the natural beauty of your skin with our
luxurious soaps. Experience the difference with our carefully crafted formulas designed to
nourish & rejuvenate your skin.</p>
<div>
<a href="#" class="btn btn-outline-dark px-5 roboto-regular text-charcoal">Shop Now</a>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid py-5 bg-secondary">
<div class="container">
<h2 class="mb-5 text-center bungee-regular text-charcoal">Join our workshop</h2>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-4 my-4">
<div class="card bg-transparent border-0">
<img src="https://images.unsplash.com/photo-1595121574471-5e57fec127df?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 5" class="w-100 mb-4">
<h5 class="card-title mb-4 bungee-regular text-charcoal">Workshop 1</h5>
<a href="#" class="btn btn-outline-dark roboto-regular text-charcoal">Book Now</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4 my-4">
<div class="card bg-transparent border-0">
<img src="https://images.unsplash.com/photo-1595121574471-5e57fec127df?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 6" class="w-100 mb-4">
<h5 class="card-title mb-4 bungee-regular text-charcoal">Workshop 2</h5>
<a href="#" class="btn btn-outline-dark roboto-regular text-charcoal">Book Now</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4 my-4">
<div class="card bg-transparent border-0">
<img src="https://images.unsplash.com/photo-1595121574471-5e57fec127df?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 7" class="w-100 mb-4">
<h5 class="card-title mb-4 bungee-regular text-charcoal">Workshop 3</h5>
<a href="#" class="btn btn-outline-dark roboto-regular text-charcoal">Book Now</a>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid py-5">
<div class="container">
<h2 class="mb-5 text-center bungee-regular text-charcoal">Our product gallery</h2>
<div class="accordion accordion-flush w-75 mx-auto" id="accordionFlush">
<div class="accordion-item border-top">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapse1" aria-expanded="false" aria-controls="flush-collapse1">
<h3 class="w-75 bungee-regular text-charcoal">Product 1</h3>
<img src="https://images.unsplash.com/photo-1607006483224-73ce0729e22a?q=80&w=2846&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 8" class="ms-auto h-10vw w-10vw">
</button>
</h2>
<div id="flush-collapse1" class="accordion-collapse collapse show" data-bs-parent="#accordionFlush">
<div class="accordion-body roboto-regular text-charcoal">Discover the exceptional features &
craftsmanship of Prdocut Name 1. From its innovative design to its unparalleled performance,
its engineered to exceed your expectation.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapse2" aria-expanded="false" aria-controls="flush-collapse2">
<h3 class="w-75 bungee-regular text-charcoal">Product 2</h3>
<img src="https://images.unsplash.com/photo-1607006555318-a9f8a1aa0a9a?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 9" class="ms-auto h-10vw w-10vw">
</button>
</h2>
<div id="flush-collapse2" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
<div class="accordion-body roboto-regular text-charcoal">Experience the elegance &
sophistication of Product Name 2. With its sleek design & cutting-edge technology, it
redefines the standard of excellence.</div>
</div>
</div>
<div class="accordion-item border-bottom">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapse3" aria-expanded="false" aria-controls="flush-collapse3">
<h3 class="w-75 bungee-regular text-charcoal">Product 3</h3>
<img src="https://images.unsplash.com/photo-1607006555271-0939bf0333eb?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 10" class="ms-auto h-10vw w-10vw">
</button>
</h2>
<div id="flush-collapse3" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
<div class="accordion-body roboto-regular text-charcoal">Indulge in the luxury & versatility of
Product Name 3. From its timeless design to its advance features, its crafted to elevate
your lifestyle.</div>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid py-5 bg-secondary">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
<img src="https://images.unsplash.com/photo-1610935591451-8a456e1b1d41?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 11" class="w-100">
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex flex-column justify-content-center">
<h3 class="mb-4 bungee-regular text-charcoal">Discover our exclusive collection</h3>
<p class="mb-4 roboto-regular text-charcoal">Indulge in the finest selection of handcrafted soaps,
meticulously curated for ultimate skincare experience. Each soap is infused with natural
ingredients to nourish & rejuvenate your skin, leaving it feeling refreshed & revitalized.</p>
<div>
<a href="#" class="btn btn-outline-dark px-5 roboto-regular text-charcoal">Learn More</a>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid py-5 bg-dark">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-3 my-4">
<h1 class="mb-4 bungee-regular text-light">NNS</h1>
<p class="mb-0 roboto-regular text-light">Discover the beauty of nature with our exquisite
collection of handmade soaps. Crafted with care & enriched with natural ingredients, our soaps
offer a luxurious experience for your skin. Let us accompany you on your journey to radiant &
nourished skin.</p>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-3 my-4">
<h4 class="bungee-regular text-light">About Us</h4>
<ul class="list-group list-group-flush roboto-regular">
<li class="list-group-item bg-transparent border-0 px-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">About</a>
</li>
<li class="list-group-item bg-transparent border-0 px-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Blogs</a>
</li>
<li class="list-group-item bg-transparent border-0 px-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Careers</a>
</li>
<li class="list-group-item bg-transparent border-0 px-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Contact Us</a>
</li>
</ul>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-3 my-4">
<h4 class="bungee-regular text-light">Quick Link</h4>
<ul class="list-group list-group-flush roboto-regular">
<li class="list-group-item bg-transparent border-0 px-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Products</a>
</li>
<li class="list-group-item bg-transparent border-0 px-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Case Studies</a>
</li>
<li class="list-group-item bg-transparent border-0 px-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Privacy
Policy</a>
</li>
<li class="list-group-item bg-transparent border-0 px-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Terms &
Conditions</a>
</li>
</ul>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-3 my-4">
<h4 class="bungee-regular text-light">Contact Us</h4>
<ul class="list-group list-group-flush roboto-regular">
<li class="list-group-item bg-transparent border-0 px-0">
<a href="#"
class="link-secondary link-underline link-underline-opacity-0">info@domain.com</a>
</li>
<li class="list-group-item bg-transparent border-0 px-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">(+91)
9999999999</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container text-light pt-5">
<p class="text-center mb-0 roboto-regular text-light">Copyright © 2024 Nature'sNest Soaps. 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
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
.bungee-regular {
font-family: "Bungee", sans-serif;
font-weight: 400;
font-style: normal;
}
.roboto-regular {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
background-color: #fdfdfd;
}
.h-10vw {
height: 10vw;
}
.w-10vw {
width: 10vw;
}
.bg-transparent {
background: transparent;
}
.text-charcoal {
color: #333333;
}
.accordion-button:not(.collapsed) {
color: #333333;
background-color: transparent;
box-shadow: none;
}
.bg-secondary {
background-color: #ffd1dc !important;
}
.bg-dark {
background-color: #222222 !important;
}Thanks for visiting