Loading . . .

Create 3D Cubes Spin into New Year using HTML, CSS & JavaScript

Create a Mental Wellness Partner Website using HTML, CSS & JavaScript

Create a Mesmerizing Marquee Text using HTML & CSS

Create a QR Code Login Template using HTML, CSS & JavaScript

Create a Stunning Matrix Like Rain Effect using HTML, CSS & JavaScript

Create Spectacular Diwali Animation using HTML, CSS & JavaScript

Create a Trippy Loader using HTML & CSS

Create Super Smooth Gradient Animation using HTML, CSS & JavaScript

Create a Whimsical Snow Ball Loader using HTML & CSS

Create a Minimalist Web Developer Portfolio using HTML, CSS & JavaScript

Create a Dizzying Text Spirals using HTML, CSS & JavaScript

Create an Advertisement Brand Website using HTML & CSS

Create a Bouncing Responsive Menu using HTML & CSS

Create Barrel Effect using HTML, CSS & JavaScript

Create Dazzling Neon Loops & Orbs using HTML & CSS

Create Incredible 3d Cube Animation using HTML & CSS

Create Sublime Shiva Animation using HTML & CSS

Create Hypnotic and Colourful Magical Rings using HTML & CSS

Create a 3d Spinning Rings Animation using HTML & CSS

Create a Beautiful Background Animation using HTML & CSS

Create a 7 Segment Neon Digital Clock using HTML, CSS & JavaScript

Create a Satisfying Abacus Clock using HTML, CSS & JavaScript

Create a 3d Loading Text Animation using HTML & CSS

Create a 3d Effect Loading Spinner using HTML & CSS

Create a Fireworks Typing Effect using HTML, CSS & JavaScript

Create Hypnotic Ellipses and Springs using HTML & CSS

Create a Visual Symphony using HTML & CSS

Create a Glowing Blue Tinted Button using HTML & CSS

Create a Modern Team Page using HTML & CSS

Create Animated Rings Login Form using HTML & CSS

Create Bubble Adventure using HTML, CSS & JavaScript

Spectral Spin Circles using HTML & CSS

3D Room 404 Errorverse using HTML & CSS

Team Spotlight using HTML & CSS

Fireflower Fiery Flourish using HTML & CSS

Luxury Tourism Website using HTML & CSS

Company Website Template using HTML & CSS

Nature's Nest Soap using HTML & CSS

Pawfect Wellness using HTML & CSS

Account Creation Hub using HTML & CSS

Accelerate Login Form using HTML & CSS

Valentine Art Love Pixels using HTML, CSS & JavaScript

Animated Valentine's Delight using HTML & CSS

A Tapestry of Eternal Love using HTML & CSS

Gleaming Moments Wedding Invitation using HTML & CSS

Elevate your Login Experience using HTML & CSS

Snowy New Year Celebration using HTML, CSS & JavaScript

Frosty Interactive Christmas Delight using HTML, CSS & JavaScript

Quest Search Page Template using HTML, CSS & JavaScript

Creative Button Artistry using HTML, CSS & JavaScript

Elevate Search Horizon Template using HTML, CSS & JavaScript

Joyful Cake & Balloon Animation using HTML, CSS & JavaScript

Explore Search Page Template using HTML, CSS & JavaScript

Minimal Search Page Template using HTML & CSS

Soothing Gradient Elegance using HTML & CSS

Interactive Profile Card using HTML & CSS

Chic Navbar Navigation using HTML & CSS

Search Page Template using HTML, CSS & JavaScript

Evolving Abstract Art using HTML, CSS & JavaScript

Happy Diya-Lit Diwali using HTML & CSS

Interactive Text Split Effect using HTML & CSS

Artistic Triangle Symphony using HTML & CSS

Button Burst Visual Delight using HTML, CSS & JavaScript

Elegance Animated Typing using HTML, CSS & JavaScript

Journey of Lord Rama using HTML, CSS & JavaScript

Divine Goddesses Gallery using HTML, CSS & JavaScript

Morphing Transition Menu using HTML & CSS

Sticky Smooth Slider Nav using HTML, CSS & JavaScript

Dazzling Neon Typography using HTML & CSS

Glowing Backlight Effect using HTML & CSS

Order Process Steps using HTML & CSS

Text with Gradient Border using HTML & CSS

Login Signup Form Transition using HTML, CSS & JavaScript

A Flower Shower of Blessings using HTML, CSS & JavaScript

Water Waves using HTML, CSS & JavaScript

Flying Origami Bird using HTML & CSS

Glowing Meteor using HTML & CSS

Crafting a World Beyond The Sky using HTML & CSS

Floral Tribute to Flag using HTML, CSS & JavaScript

Tri Hexa Loader using HTML & CSS

Zephyr the Husky using HTML & CSS

Sculpting Shivling Typography using HTML & CSS

Multiple Parallax Effect using HTML, CSS & JavaScript

Scroll Micro Animation using HTML & CSS

Shrink Expand Menu using HTML & CSS

Slideshow Ken Burns Effect using HTML & CSS

Sleek Hamburger Fold Out using HTML & CSS

3d Card using HTML & CSS

Yoga Pose using HTML & CSS

Father's Day Wish Card using HTML, CSS & JavaScript

Flip Opening Modal Button using HTML, CSS & JavaScript

Multiple Scroll Button using HTML & CSS

Glass Keyboard using HTML & CSS

Animated Vertical Tabs using HTML, CSS & JavaScript

Full Page Parallax Scroll Effect using HTML, CSS & JavaScript

Social Buttons using HTML & CSS

Image Accordion using HTML, CSS & JavaScript

Blog Cards using HTML & CSS

Accordions using HTML & CSS

Flowers on Cake using HTML & CSS

Wedding Invitation with Timer using HTML, CSS & JavaScript

Wedding Invitation using HTML & CSS

Couple Name Text Animation using HTML & CSS

Minimal Toggles using HTML & CSS

Revolving Mesmerizing Semi Circles using HTML & CSS

Day Night Toggle using HTML & CSS

Particles Form Neon Hexagons using HTML, CSS & JavaScript

Elastic Text using HTML & CSS

Custom Checkboxes using HTML & CSS

Tic Tac Toe Game using HTML & CSS

3d Text Animation using HTML & CSS

Hamburger Animation using HTML, CSS and JavaScript

Balkan Style Image Gallery using HTML, CSS and JavaScript

Minimalist Loading Page using HTML and CSS

Glitch Clock using HTML, CSS and JavaScript

Digital Clock using HTML, CSS and JavaScript

Round Blob Music Visualizer using HTML, CSS and JavaScript

Cursor Splashing Colours using HTML, CSS and JavaScript

Music Player Visualizer using HTML, CSS and JavaScript

Adjustable Audio Waveform using HTML, CSS and JavaScript

Random Sound Bars using HTML and CSS

Jiggle Wiggle Waveform using HTML and CSS

Heart Eyes using HTML and CSS

Popping Hearts using HTML, CSS and JavaScript

Chaotic Lines Heart using HTML, CSS and JavaScript

Envelope with Letter using HTML & CSS

Moving Particles Animation using HTML, CSS and JavaScript

Interactive Text Masking using HTML, CSS and Javascript

Tri-Colour Flying Balloons using HTML, CSS & JavaScript

Responsive Tabs using HTML & CSS

Mouse Following Box using HTML, CSS & JavaScript

Circular Menu using HTML, CSS & JavaScript

Kite & Cloud Flying Animation using HTML & CSS

Mars Landing using HTML & CSS

Custom Animation Inputs using HTML & CSS

New Year with Snow Falling using HTML, CSS & JavaScript

Skewed 3d Navbar Menu using HTML & CSS

Christmas Animations using HTML & CSS

Sliding Menu using HTML, CSS & JavaScript

Navbar Menu using HTML, CSS & JavaScript

Text Revealing on Hover using HTML & CSS

MacBook revolves in Air using HTML & CSS

Confetti follows the curser using HTML, CSS & JavaScript

Circular Form using HTML, CSS & JavaScript

Rotating Rings Around Text using HTML & CSS

Seconds Counter using HTML, CSS & JavaScript

Baby Animation using HTML & CSS

Simple Loading Page using HTML & CSS

Typewriter using HTML & CSS

Rolling Cube 404 Page using HTML & CSS

Neon Light 404 Page using HTML & CSS

Bookshelf 404 Page using HTML & CSS

Scary 404 Page using HTML & CSS

Diwali Diya & Firework Animation using HTML, CSS & JavaScript

Blinking 404 Page using HTML & CSS

Burger 404 Page using HTML & CSS

Terminal Style 404 Page using HTML & CSS

Image Gallery using HTML, CSS & JavaScript

Gandhi & Shastri Jayanti Wish using HTML & CSS

Happy Navaratri Wish using HTML, CSS & JavaScript

Vertical Image Carousel #4 using HTML, CSS & JavaScript

Vertical Image Carousel #3 using HTML, CSS & JavaScript

Vertical Image Carousel #2 using HTML & CSS

Vertical Image Carousel #1 using HTML & CSS

Horizontal Image Carousel #11 using HTML, CSS & JavaScript

Teachers Day Wish Chat Animation using HTML, CSS & JavaScript

SVG Drawing & BG Animation & using HTML, CSS & JavaScript

Horizontal Image Carousel #10 using HTML, CSS & JavaScript

Horizontal Image Carousel #9 using HTML & CSS

Flag Hosting with Flying Flag using HTML, CSS & JavaScript

Horizontal Image Carousel #8 using HTML & CSS

Greeting follows Mouse Movement using HTML, CSS & JavaScript

Horizontal Image Carousel #7 using HTML & CSS

Horizontal Image Carousel #6 using HTML & CSS

Horizontal Image Carousel #5 using HTML & CSS

Horizontal Image Carousel #4 using HTML & CSS

Horizontal Image Carousel #3 using HTML & CSS

Horizontal Image Carousel #2 using HTML & CSS

Horizontal Image Carousel #1 using HTML, CSS & JavaScript

Image Popup on Hover using HTML & CSS

Infinite Pencil Loader using HTML & CSS

Lappy - A Laptop using HTML & CSS

Eco Theme Button Popup using HTML & CSS

Buttons with Gradient Animation using HTML & CSS

Gradient Buttons Animation on Hover using HTML & CSS

Father's Day Wish using HTML & CSS

Modal Popup on Button Click using HTML & CSS

Button Glow Animation on Hover using HTML & CSS

Button Shines Animation on Hover using HTML & CSS

Jumping Text Animation with Reflection using HTML & CSS

CyberPunk Inspired 404 Page using HTML & CSS

Jumping Letters Animation using HTML & CSS

Holi Wishes using HTML & CSS

Rotating Border Animation using HTML & CSS

Women Typography using HTML & CSS

Sliced Text Animation Using HTML & CSS

Text Shadow Animation using HTML & CSS

Create Fading Hearts Animation using HTML, CSS & JavaScript

Create Tetris Heart Animation using HTML & CSS

Create the Flying Indian Flag Animation using HTML & CSS

Create Makar Sankranti Wishes using HTML, CSS & JavaScript

Create New Year Wishes using HTML & CSS

Create Merry Christmas Wishes using HTML, CSS & JavaScript

Create Ganesh Chaturthi Wishes using HTML & CSS

Create the Indian Flag using HTML & CSS

Create a Password Generator using HTML, CSS & JavaScript

Create a Custom Alert Box using HTML, CSS & JavaScript

Disclaimer: Educational Purposes Only

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.

Explore Search Page Template using HTML, CSS & JavaScript

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>Explore Search Page Template</title>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container-fluid px-0 hero">
        <nav class="navbar navbar-expand-lg bg-dark mb-5" data-bs-theme="dark">
            <div class="container">
                <a href="#" class="navbar-brand d-flex justify-content-center align-items-center">branD</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-lg-5 ms-0">
                        <li class="nav-item d-flex justify-content-center align-items-center">
                            <a href="#" class="nav-link d-flex justify-content-center align-items-center text-light">
                                <span class="material-symbols-outlined me-2">chat</span> Chat</a>
                        </li>
                        <li class="nav-item ms-lg-3 d-flex justify-content-center align-items-center">
                            <a href="#"
                                class="nav-link d-flex justify-content-center align-items-center text-light">Images</a>
                        </li>
                        <li class="nav-item ms-lg-3 d-flex justify-content-center align-items-center">
                            <a href="#"
                                class="nav-link d-flex justify-content-center align-items-center text-light">Videos</a>
                        </li>
                        <li class="nav-item ms-lg-3 d-flex justify-content-center align-items-center">
                            <a href="#"
                                class="nav-link d-flex justify-content-center align-items-center text-light">Maps</a>
                        </li>
                        <li class="nav-item ms-lg-3 d-flex justify-content-center align-items-center">
                            <a href="#"
                                class="nav-link d-flex justify-content-center align-items-center text-light">News</a>
                        </li>
                        <li class="nav-item dropdown ms-3">
                            <a href="#"
                                class="nav-link dropdown-toggle d-flex justify-content-center align-items-center text-light"
                                role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="material-symbols-outlined">more_horiz</span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#" class="dropdown-item text-light">Link 1</a></li>
                                <li><a href="#" class="dropdown-item text-light">Link 2</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a href="#" class="dropdown-item text-light">Link 3</a></li>
                                <li><a href="#" class="dropdown-item text-light">Link 4</a></li>
                                <li><a href="#" class="dropdown-item text-light">Link 5</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item text-light d-flex justify-content-center align-items-center">
                            Sign In <span class="material-symbols-outlined ms-2">person</span>
                        </li>
                        <li class="nav-item text-light d-flex justify-content-center align-items-center">
                            <a href="#" class="nav-link d-flex justify-content-center align-items-center text-light"
                                data-bs-toggle="tooltip" data-bs-placement="bottom"
                                data-bs-custom-class="custom-tooltip" data-bs-title="Rewards">10
                                <span class="material-symbols-outlined ms-2">trophy</span></a>
                        </li>
                        <li class="nav-item text-light d-flex justify-content-center align-items-center">
                            Mobile <span class="material-symbols-outlined ms-2">smartphone</span>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container-fluid mt-5 pt-5">
            <div class="row mt-5 pt-5 mb-4">
                <div class="col"></div>
                <div class="col-10 col-sm-10 col-md-8 col-lg-5 d-flex">
                    <div class="d-flex w-100 search-container">
                        <span class="material-symbols-outlined" data-bs-toggle="tooltip" data-bs-placement="bottom"
                            data-bs-custom-class="custom-tooltip" data-bs-title="Search the web">search</span>
                        <input type="search" id="search-area" class="w-100 search-area">
                        <span class="material-symbols-outlined ms-auto me-2" data-bs-toggle="tooltip"
                            data-bs-placement="bottom" data-bs-custom-class="custom-tooltip"
                            data-bs-title="Search using voice" id="voice-icon">keyboard_voice</span>
                        <span class="material-symbols-outlined" data-bs-toggle="tooltip" data-bs-placement="bottom"
                            data-bs-custom-class="custom-tooltip" data-bs-title="Search using an image"
                            id="camera-icon">filter_center_focus</span>
                    </div>
                    <div class="ms-2 bubble">D</div>
                </div>
                <div class="col"></div>
            </div>
            <div class="row">
                <div class="col"></div>
                <div class="col-10 col-sm-10 col-md-8 col-lg-5">
                    <p class="text-center d-flex justify-content-evenly">
                        <span class="text-light">Languages:</span>
                        <span><a href="#"
                                class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-light">L1</a></span>
                        <span><a href="#"
                                class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-light">L2</a></span>
                        <span><a href="#"
                                class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-light">L3</a></span>
                        <span><a href="#"
                                class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-light">L4</a></span>
                        <span><a href="#"
                                class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-light">L5</a></span>
                        <span><a href="#"
                                class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-light">L6</a></span>
                        <span><a href="#"
                                class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-light">L7</a></span>
                        <span><a href="#"
                                class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-light">L8</a></span>
                        <span><a href="#"
                                class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-light">L9</a></span>
                        <span><a href="#"
                                class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-light">L10</a></span>
                    </p>
                </div>
                <div class="col"></div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-5 overlay">
        <div class="container py-5">
            <div class="row py-5">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-8 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-8 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-12 my-3">
                    <div class="card text-light">
                        <div class="card-body pt-5 mt-5">
                            <h4 class="card-title pt-5">Card Title</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta voluptas
                                accusamus velit quasi quam explicabo nulla dignissimos! Ipsa eligendi commodi sit animi
                                quis voluptatem omnis dicta deserunt, ut laudantium quae.</p>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_up</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">thumb_down</span></a>
                            <a href="#" class="card-link text-light">
                                <span class="material-symbols-outlined">chat_bubble</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid footer">
        <div class="row">
            <div class="col">
                <ul class="list-group list-group-horizontal justify-content-center">
                    <li class="list-group-item text-light">Privacy</li>
                    <li class="list-group-item text-light">Legal</li>
                    <li class="list-group-item text-light">Advertise</li>
                    <li class="list-group-item text-light">About</li>
                    <li class="list-group-item text-light">Help</li>
                    <li class="list-group-item text-light">Feedback</li>
                </ul>
            </div>
            <div class="col">
                <p class="d-flex justify-content-center align-items-center m-0 h-100 text-light">&copy; year branD</p>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>
    <script src="index.js"></script>
</body>

</html>

Below is the css code for this video.

style.css


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100%;
    background-image: radial-gradient(circle, #000000bf, transparent), url(https://images.unsplash.com/photo-1545858908-bc6fee2bd44d);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL'0, 'wght'400, 'GRAD'0, 'opsz'24;
}

.bg-dark {
    background: #313131 !important;
}

@media (min-width:992px) {
    .bg-dark {
        background: transparent !important;
    }
}

a.text-light {
    color: #d4d4d4 !important;
    text-decoration: none;
}

a.text-light:hover {
    color: #ffffff !important;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    background: #313131;
}

.dropdown-menu.show {
    background: #313131;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-divider {
    border-top: 1px solid #555555;
}

.dropdown-item:focus, .dropdown-item:hover {
    background: #777777;
}

.custom-tooltip {
    --bs-tooltip-bg: #777777;
}

.hero {
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to bottom, transparent 50%, #404040bf 100%);
}

.search-container {
    background: #ffffff;
    border-radius: 24px;
    padding: 12px;
    box-shadow: 0 2px 4px #00000040;
}

.search-area {
    background: #ffffff;
    border: none;
    padding: 0 10px;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: inline-block;
    height: 12px;
    width: 12px;
    background: linear-gradient(45deg, transparent 0%, transparent 43%, #707579 45%, #707579 55%, transparent 57%, transparent 100%),
        linear-gradient(135deg, transparent 0%, transparent 43%, #707579 45%, #707579 55%, transparent 57%, transparent 100%);
    margin-left: 10px;
}

.search-area:focus-visible {
    padding: 0 10px;
    outline: none;
}

#voice-icon, #camera-icon {
    color: #172ad4;
}

.bubble {
    position: relative;
    display: flex;
    height: 50px;
    width: 50px;
    background: #ffffff;
    color: #000000;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.bubble::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    width: 0;
    transform: rotate(10deg);
    border-top: 10px solid #ffffff;
    border-left: 10px solid #ffffff;
    border-bottom: 10px solid transparent;
    border-right: 10px solid transparent;
    z-index: -1;
}

.overlay {
    height: auto;
    width: 100%;
    background: #404040bf;
}

.card {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
}

.row .col-12:nth-of-type(1) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1518873890627-d4b177c06e51);
}

.row .col-12:nth-of-type(2) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1461407665364-25b173b7ffe2);
}

.row .col-12:nth-of-type(3) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1480497490787-505ec076689f);
}

.row .col-12:nth-of-type(4) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1476547002920-44591fb77f59);
}

.row .col-12:nth-of-type(5) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1483737946376-7c6c89443adb);
}

.row .col-12:nth-of-type(6) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1545586860-95d2040c1680);
}

.row .col-12:nth-of-type(7) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1420585269105-d908ec316eb3);
}

.row .col-12:nth-of-type(8) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1455156218388-5e61b526818b);
}

.row .col-12:nth-of-type(9) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1519863436079-8436f74be632);
}

.row .col-12:nth-of-type(10) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1491466424936-e304919aada7);
}

.row .col-12:nth-of-type(11) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1483309830935-35efd1b07946);
}

.row .col-12:nth-of-type(12) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1483664852095-d6cc6870702d);
}

.row .col-12:nth-of-type(13) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1454923077067-323a62ed11e1);
}

.row .col-12:nth-of-type(14) .card {
    background-image: linear-gradient(to bottom, transparent, #000000bf), url(https://images.unsplash.com/photo-1484313544071-4d67c88b99be);
}

.footer {
    color: #d4d4d4;
    background: #777777;
}

.list-group-horizontal>.list-group-item:first-child:not(:last-child), .list-group-horizontal>.list-group-item+.list-group-item {
    background: transparent;
    border: none;
}

Below is the javascript code for this video.

index.js


const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]'),
    tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)),
    searcharea = document.getElementById("search-area"), voiceicon = document.getElementById("voice-icon"),
    cameraicon = document.getElementById("camera-icon");
searcharea.addEventListener("focusin", () => { voiceicon.style.display = cameraicon.style.display = "none"; });
searcharea.addEventListener("focusout", () => { voiceicon.style.display = cameraicon.style.display = searcharea.value !== "" ? "none" : "block"; });

Thanks for visiting