There are what you're going to see on this website design
1. Navigation Bar
2. Head Section which has text slides
3. Collection Section
which contains many flowers and we also can choose any type of items
4. Highlight Section
contains 4 special items
5. About us Section
contains a shop logo and its description
6. And the last thing is the Website Footer Section
You might like
2. Create a Login Form with Bootstrap
Don't only just copy the below code, but we have to type directly to understand how it works
Source code
Download image: Google Drive
Starter Template
Firstly, we need to create a file name mainDashboard.html and paste the below code
<!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>The Flowers</title>
<link rel="stylesheet" href="./CSS/mainDashboard.css">
<!-- Favicon -->
<link rel="shortcut icon" href="./Image/logo-image.png" type="image/x-icon">
<!-- Link with Bootstrap --><!-- CSS only -->
<!-- In this tuturial I used Bootstrap CDN instead -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
</head>
<body>
<!-- jquery -->
<script src="./JS/jquery-3.6.1.min.js"></script>
<!-- Isotop link -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="./JS/main.js"></script>
<!-- JavaScript Bundle with tropicalper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
HTML and Bootstrap
And then you can paste the below HTML and Bootstrap between <body> tag and <!--jquery--> comment.
<!-- Let's started -->
<!-- In this website coding, we use internet to run the web because I use Bootrap CDN instead files
Or you can update this CDN turn to Bootstrap's files where its files are in the project folders-->
<!-- Making website navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top py-3">
<div class="container">
<a href="mainDashboard.html" class="navbar-brand align-items-center d-flex justify-content-between order-lg-0">
<img src="./Image/logo-image.png" alt="logo" class="image text-dark">
<span class="text-upercase fw-lighter ms-2 brand-text">The Flowers</span>
</a>
<div class="dropdown-center order-lg-2 nav-btns">
<a href="#" class="nav-link text-uppercase text-dark">
<i class="bi bi-bag-heart">
<span class="translate-middle badge rounded-pill bg-danger">3</span>
</i>
</a>
</div>
<div class="dropdown-center order-lg-2 nav-btns">
<a href="#" class="nav-link text-uppercase text-dark">
<i class="bi bi-cart">
<span class="translate-middle badge rounded-pill bg-danger">1</span>
</i>
</a>
</div>
<div class="dropdown-center order-lg-2 nav-btns">
<a href="#" class="nav-link text-uppercase text-dark">
<i class="bi bi-gear"></i>
</a>
</div>
<button class="navbar-toggler order-0" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
<i class="bi bi-list"></i>
</button>
<div class="collapse navbar-collapse order-lg-1 float-end" id="navMenu">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item px-2 py-2 border-0">
<a href="#collection" class="nav-link text-uppercase text-dark">Products</a>
</li>
<li class="nav-item px-2 py-2 border-0">
<a href="#highlight" class="nav-link text-uppercase text-dark">Highlight</a>
</li>
<li class="nav-item px-2 py-2 border-0">
<a href="#about" class="nav-link text-uppercase text-dark">About</a>
</li>
<li class="nav-item px-2 py-2 border-0">
<a href="#contact" class="nav-link text-uppercase text-dark">Contact us</a>
</li>
<li class="nav-item px-2 py-2 border-0 justify-content-center">
<a href="#" class="nav-link text-uppercase text-dark">
<input type="text" class="form-control text-center py-0" placeholder="Search here...">
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero section with background image -->
<header id="header" class="vh-100 carousel slide" data-bs-ride="carousel">
<div class="container vh-100 d-flex align-items-center carousel-inner">
<div class="text-center carousel-item active">
<h2 class="text-capitalize text-white">Products</h2>
<h1 class="text-uppercase py-2 fw-bold text-white">Collection</h1>
<a href="#collection" class="btn mt-3 btn-light text-uppercase">See option</a>
</div>
<div class="text-center carousel-item">
<h2 class="text-capitalize text-white">highlight</h2>
<h1 class="text-uppercase py-2 fw-bold text-white">Highlight</h1>
<a href="#highlight" class="btn mt-3 btn-light text-uppercase">See now</a>
</div>
<div class="text-center carousel-item">
<h2 class="text-capitalize text-white">Learn more</h2>
<h1 class="text-uppercase py-2 fw-bold text-white">About us</h1>
<a href="#collection" class="btn mt-3 btn-light text-uppercase">See now</a>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#header" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#header" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</header>
<!-- collection list block -->
<section id="collection" class="py-5">
<div class="container">
<div class="title text-center">
<h2 class="position-relative d-inline-block">Collection</h2>
</div>
<div class="row g-0">
<div class="d-flex justify-content-center mt-5 filter-button-group flex-wrap">
<button class="btn m-2 active-filter-btn text-white" data-filter="*">All</button>
<button class="btn m-2 text-dark" data-filter=".rose">Rose</button>
<button class="btn m-2 text-dark" data-filter=".tropical">Tropical</button>
<button class="btn m-2 text-dark" data-filter=".sunflower">Sunflower</button>
<button class="btn m-2 text-dark" data-filter=".plant">Plant</button>
</div>
<div class="collection-list mt-4 row gx-0 gy-2" id="collection-list">
<div class="col-md-6 col-lg-4 col-xl-3 p-2 sunflower">
<div class="collection-img position-relative">
<img src="./Image/lily-1.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Buy Now</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 p-2 rose">
<div class="collection-img position-relative">
<img src="./Image/rose-2.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Buy now</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 p-2 plant">
<div class="collection-img position-relative">
<img src="./Image/plant-7.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Buy now</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 p-2 sunflower">
<div class="collection-img position-relative">
<img src="./Image/sunflower-1.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Buy now</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 p-2 tropical">
<div class="collection-img position-relative">
<img src="./Image/tropical-3.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Buy now</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 p-2 plant">
<div class="collection-img position-relative">
<img src="./Image/plant-1.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Buy now</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 p-2 sunflower">
<div class="collection-img position-relative">
<img src="./Image/sunflower-4.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Buy now</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 p-2 rose">
<div class="collection-img position-relative">
<img src="./Image/rose-8.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Buy now</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- highlight block -->
<section id="highlight" class="py-5">
<div class="container">
<div class="title text-center">
<h2 class="position-relative d-inline-block">Highlight</h2>
</div>
<div class="row g-0">
<div class=" mt-4 row gx-0 gy-2">
<div class="col-md-6 col-lg-4 col-xl-3 p-2">
<div class="collection-img position-relative">
<img src="./Image/lily-1.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Add to favourite</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 p-2">
<div class="collection-img position-relative">
<img src="./Image/rose-2.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Add to favourite</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 p-2">
<div class="collection-img position-relative">
<img src="./Image/plant-7.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Add to favourite</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 p-2">
<div class="collection-img position-relative">
<img src="./Image/sunflower-1.png" alt="" class="w-100">
<span class="position-absolute bg-primary d-flex text-white align-items-center justify-content-center">Sale</span>
</div>
<div class="text-center">
<div class="rating mt-3">
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-fill"></i>
</span>
<span class="text-primary">
<i class="bi bi-star-half"></i>
</span>
</div>
<p class="text-capitalize mt-1">Flower 1</p>
<span class="fw-bold">$ 99</span>
<div class="text-center">
<button type="button" class="btn m-2 text-dark text-uppercase">Add to favourite</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About us section block -->
<section class="py-5" id="about">
<div class="container">
<div class="row gy-lg-5 aligne-item-center">
<div class="col-lg-6 text-center text-lg-start order-lg-1">
<div class="title pt-3 pb-5">
<h2 class="position-relative d-inline-block ms3xamp">About us</h2>
</div>
<p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="fs-5">
Assumenda asperiores quam eveniet rerum suscipit hic eos sapiente deleniti error dolore quo veritatis repellendus quos, commodi blanditiis veniam id quia maxime.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam porro fugiat facilis illo necessitatibus quam cum aspernatur delectus, nesciunt, magni et harum blanditiis illum suscipit qui ipsa! Nisi, hic quasi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, asperiores libero aperiam tempora, est incidunt unde voluptatibus, iste assumenda voluptatum dolores quaerat nemo. Illo doloribus eos quasi accusantium, consequuntur quam?
</p>
</div>
<div class="col-lg-6 order-lg-0 text-center">
<img src="./Image/logo-image.png" alt="about-us-logo" class="img-fluid">
</div>
</div>
</div>
</section>
<!--Footer section-->
<footer class="footer bg-dark position-relative py-5" id="contact">
<div class="position-absolute top-0 start-0 w-100 h-100"></div>
<div class="container position-relative zindex-2 pb-xl-2 pt-2 pt-sm-3 pt-xl-4 pt-xxl-5">
<div class="col-lg-6 text-center text-lg-start order-lg-1">
<div class="title pt-3 pb-5">
<h2 class="position-relative d-inline-block ms-3xamp text-white">Our Information</h2>
</div>
</div>
<div class="row pb-0 pt-md-3 pt-lg-4 mb-md-3 mb-lg-4 pb-5">
<div class="col-md-6 col-xxl-5 pb-3 pb-md-0 mb-2 mb-sm-3 mb-md-0 text-white">
<div class="h2 pb-3 text-white">
<span class="span-1">The Flowers</span> privides quality to you.
</div>
<div class="d-flex flex-wrap pb-4 pb-xl-5 mb-md-2 mb-lg-3">
<div class="d-flex pe-3 me-3 mb-2">
<i class="bi bi-check text-white fs-4 mt-n1 me-2"></i>
<span class="text-white mt-1">Stands No.2 in local flower shop</span>
</div>
<div class="d-flex pe-3 me-3 mb-2">
<i class="bi bi-check text-white fs-4 mt-n1 me-2"></i>
<span class="text-white mt-1">Got the best flowers shop of the year</span>
</div>
<div class="d-flex pe-3 me-3 mb-2">
<i class="bi bi-check text-white fs-4 mt-n1 me-2"></i>
<span class="text-white mt-1">Got praise from customers</span>
</div>
<div class="d-flex pe-3 me-3 mb-2">
<i class="bi bi-check text-white fs-4 mt-n1 me-2"></i>
<span class="text-white mt-1">Got the truth award of the year</span>
</div>
</div>
</div>
<div class="col-md-5 col-xl-4 offset-md-1 offset-xl-2 offset-xxl-3">
<div class="col foot-col">
<ul class="nav flex-column">
<li class="nav-item mt-1"><a class="nav-link py-1 px-0" href="mailto:email@example.com">theflowers@admin.com</a></li>
<li class="nav-item mt-1"><a class="nav-link py-1 px-0" href="tel:+84 123456789">+84 123456789</a></li>
<li class="nav-item mt-1"><a class="nav-link py-1 px-0" href="tel:+84 987654321">+84 987654321</a></li>
</ul>
</div>
<br>
<div class="d-flex social-medias">
<a class="btn-secondary rounded-circle me-3 fs-3" href="https://www.facebook.com/reanfullstack" target="_blank"><i class="bi bi-facebook"></i></a>
<a class="btn-secondary rounded-circle me-3 fs-3" href="https://www.youtube.com/@reanfullstack" target="_blank"><i class="bi bi-youtube"></i></a>
<a class="btn-secondary rounded-circle me-3 fs-3" href="https://t.me/reanfullstack" target="_blank"><i class="bi bi-telegram"></i></a>
</div>
</div>
</div>
<p class="fs-sm mb-0 text-white mt-2"><span class="opacity-70">© All rights reserved. Made by </span>Rean Fullstack</a></p>
</div>
</footer>
CSS
Ok, after completing mainDashboard.html. Now We need to paste the below CSS code into mainDashboard.css that we created before we reach JavaScript.
@import url('https://fonts.googleapis.com/css2?family=Battambang:wght@100;300;400;700;900&family=Lobster&display=swap');
:root{
--pink: #e5345b;
--lg-font: font-family: 'Time New Roman', Times, serif;
--lg-font-lob: font-family: 'Lobster', cursive;
--font: #fff;
}
body{
font-family: var(--lg-font);
}
.navbar-brand .brand-text{
font-family: var(--lg-font-lob);
}
.bg-primary{
background-color: var(--pink);
}
.btn:not(.nav-btns button){
background-origin: var(--font);
color: rgb(85, 85, 85);
padding: 10px 28px;
border-radius: 25px;
border: 1px solid rgb(85, 85, 85);
}
.btn:not(.nav-btns button):hover{
background-color: var(--pink);
color: var(--font);
border-color: var(--pink);
}
.text-primary{
color: var(--pink) !important;
}
.navbar{
box-shadow: 0 2px 9px 3px rgba(0, 0, 0, .1);
}
.navbar-brand img{
width: 50px;
height: 50px;
}
.navbar-brand span{
letter-spacing: 1.5px;
font-family: var(--lg-font);
}
.nav-item{
border-bottom: .5px solid rgba(0, 0, 0, .1);
}
#header{
background: url(../Image/background.jpg) top/cover no-repeat;
}
.carousel-inner h1{
font-size: 60px;
font-family: var(--lg-font);
}
.carousel-item .btn{
border-color: var(--font) !important;
}
.carousel-item .btn:hover{
border-color: var(--pink);
}
.title h2::before{
position: absolute;
content: '';
width: 4px;
height: 50px;
background-color: var(--pink);
left: -20%;
top: 50%;
transform: translateY(-50%);
}
.active-filter-btn{
background-color: var(--pink) !important;
border-color: var(--pink);
}
.collection-img{
object-fit: cover;
border-radius: 10px;
}
.collection-img:hover{
transform: scale(105%);
transition: .5s;
}
.collection-img span{
top: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
}
/* Multiple item per carousel */
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
/* Reposition the controls slightly */
.carousel-control {
left: -12px;
}
.carousel-control.right {
right: -12px;
}
/* Changes the position of the indicators */
.carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.carousel-indicators li {
background: #c0c0c0;
}
.carousel-indicators .active {
background: #333333;
}
.special-img span{
top: 10px;
right: 10px;
}
.special-list .btn{
padding: 8px 20px !important;
}
.special-img img{
transition: all .5s ease;
}
.special-img img:hover{
transform: scale(1.1);
}
footer{
background-color: rgba(255, 255, 255, .02);
}
footer .span-1{
color: var(--pink);
}
footer .foot-col a{
color: var(--font);
}
footer .foot-col a:hover{
color: var(--pink);
}
footer .social-medias a:hover{
color: var(--font);
}
@media(min-width: 610px){
.nav-item{
border-bottom: none;
}
}
@media screen and (max-width: 400px){
.up-to-top{
position: absolute;
float: right;
bottom: 0;
}
}
JavaScript
This JavaScript is going to make your website look awesome with the Items Collection block.
//Collection list selection
var $grid = $('.collection-list').isotope({
});
// filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
