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.

Company Website Template using HTML & CSS

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>VD Company Template</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>
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a href="#" class="navbar-brand nova-round-regular ms-lg-5">VD</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 mt-2 mt-lg-0">
                        <a href="#"
                            class="nav-link btn bg-g-r rounded-pill px-3 text-uppercase text-light bg-dark nova-round-regular">
                            About Us</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <section class="container py-5">
        <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">
                    <h1 class="nova-round-regular mb-4 text-uppercase">Similique est, praesentium exercitationem
                        deleniti maxime libero voluptatibus</h1>
                    <p class="nova-round-regular mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, sed
                        nobis. Vero similique architecto dignissimos explicabo odio dicta, libero ipsam sequi illum
                        culpa ad commodi illo aperiam? Autem, expedita similique.</p>
                </div>
                <a href="#"
                    class="btn bg-g-r rounded-pill bg-dark px-3 text-uppercase text-light nova-round-regular border-0">
                    Contact Us</a>
            </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="bx-shdw-g-r bx-shdw-g-r-animate p-5 rounded-circle">
                    <svg id="logo-58" width="80" height="80" viewBox="0 0 50 50" fill="none" class="m-5"
                        xmlns="http://www.w3.org/2000/svg">
                        <path class="stroke" d="M25 43.94H14.06L10.86 38.39L8.28998 33.94L10.86 29.48" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M10.86 29.4801H5.7L3.13 25.0001L6.77 18.6901L8.27001 16.1001L10.87 11.6101L13.44 7.15006L14.06 6.06006H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M25 39.48H16.64L13.44 33.94L10.86 29.48L13.47 25H8.28003L11.95 18.63L13.44 16.06L16.01 11.61L16.64 10.52H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M25 15.01H19.23L13.47 25L19.23 34.99H25" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M8.28001 25L5.70001 29.48" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                        <path class="stroke" d="M44.3 29.48L41.72 25" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                        <path class="stroke" d="M25 43.94H35.94L39.14 38.39L41.71 33.94L39.14 29.48" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M39.14 29.4801L44.31 29.4401L46.87 25.0001L43.23 18.6901L41.73 16.1001L39.13 11.6101L36.56 7.15006L35.94 6.06006H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M25 39.48H33.36L36.56 33.94L39.14 29.48L36.53 25H41.72L38.05 18.63L36.56 16.06L33.99 11.61L33.36 10.52H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M25 15.01H30.77L36.53 25L30.77 34.99H25" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M19.23 15.01L16.64 10.52" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                        <path class="stroke" d="M30.77 15.01L33.36 10.52" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                    </svg>
                </div>
            </div>
        </div>
    </section>
    <section class="container py-5">
        <h2 class="text-center nova-round-regular text-uppercase mb-5">Our services</h2>
        <div class="row">
            <div class="col-12 col-sm-12 col-md-4 col-ld-4 my-4">
                <div class="card text-center border-0 bx-shdw-g-r bg-clear">
                    <div class="card-body">
                        <svg id="logo-58" width="80" height="80" viewBox="0 0 50 50" fill="none" class="m-5"
                            xmlns="http://www.w3.org/2000/svg">
                            <path class="stroke" d="M25 43.94H14.06L10.86 38.39L8.28998 33.94L10.86 29.48"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M10.86 29.4801H5.7L3.13 25.0001L6.77 18.6901L8.27001 16.1001L10.87 11.6101L13.44 7.15006L14.06 6.06006H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M25 39.48H16.64L13.44 33.94L10.86 29.48L13.47 25H8.28003L11.95 18.63L13.44 16.06L16.01 11.61L16.64 10.52H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M25 15.01H19.23L13.47 25L19.23 34.99H25" stroke="#231F20"
                                stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M8.28001 25L5.70001 29.48" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                            <path class="stroke" d="M44.3 29.48L41.72 25" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                            <path class="stroke" d="M25 43.94H35.94L39.14 38.39L41.71 33.94L39.14 29.48"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M39.14 29.4801L44.31 29.4401L46.87 25.0001L43.23 18.6901L41.73 16.1001L39.13 11.6101L36.56 7.15006L35.94 6.06006H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M25 39.48H33.36L36.56 33.94L39.14 29.48L36.53 25H41.72L38.05 18.63L36.56 16.06L33.99 11.61L33.36 10.52H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M25 15.01H30.77L36.53 25L30.77 34.99H25" stroke="#231F20"
                                stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M19.23 15.01L16.64 10.52" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                            <path class="stroke" d="M30.77 15.01L33.36 10.52" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                        </svg>
                        <h5 class="card-title nova-round-regular my-4">Title 1</h5>
                        <p class="card-text nova-round-regular text-green">Lorem ipsum dolor sit amet consectetur
                            adipisicing elit. Dolorem corrupti quis cupiditate perspiciatis. Aliquam, obcaecati?
                            Deserunt molestiae reprehenderit placeat possimus. Pariatur quasi vitae nobis enim culpa
                            odit! Asperiores.</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-ld-4 my-4">
                <div class="card text-center border-0 bx-shdw-g-r bg-clear">
                    <div class="card-body">
                        <svg id="logo-58" width="80" height="80" viewBox="0 0 50 50" fill="none" class="m-5"
                            xmlns="http://www.w3.org/2000/svg">
                            <path class="stroke" d="M25 43.94H14.06L10.86 38.39L8.28998 33.94L10.86 29.48"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M10.86 29.4801H5.7L3.13 25.0001L6.77 18.6901L8.27001 16.1001L10.87 11.6101L13.44 7.15006L14.06 6.06006H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M25 39.48H16.64L13.44 33.94L10.86 29.48L13.47 25H8.28003L11.95 18.63L13.44 16.06L16.01 11.61L16.64 10.52H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M25 15.01H19.23L13.47 25L19.23 34.99H25" stroke="#231F20"
                                stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M8.28001 25L5.70001 29.48" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                            <path class="stroke" d="M44.3 29.48L41.72 25" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                            <path class="stroke" d="M25 43.94H35.94L39.14 38.39L41.71 33.94L39.14 29.48"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M39.14 29.4801L44.31 29.4401L46.87 25.0001L43.23 18.6901L41.73 16.1001L39.13 11.6101L36.56 7.15006L35.94 6.06006H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M25 39.48H33.36L36.56 33.94L39.14 29.48L36.53 25H41.72L38.05 18.63L36.56 16.06L33.99 11.61L33.36 10.52H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M25 15.01H30.77L36.53 25L30.77 34.99H25" stroke="#231F20"
                                stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M19.23 15.01L16.64 10.52" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                            <path class="stroke" d="M30.77 15.01L33.36 10.52" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                        </svg>
                        <h5 class="card-title nova-round-regular my-4">Title 2</h5>
                        <p class="card-text nova-round-regular text-green">Lorem ipsum dolor sit amet consectetur,
                            adipisicing elit. Corrupti, error. Exercitationem laudantium itaque placeat suscipit
                            repudiandae ipsam deleniti necessitatibus? Sed, sint unde est dolore quisquam quas ullam
                            velit possimus harum.</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-ld-4 my-4">
                <div class="card text-center border-0 bx-shdw-g-r bg-clear">
                    <div class="card-body">
                        <svg id="logo-58" width="80" height="80" viewBox="0 0 50 50" fill="none" class="m-5"
                            xmlns="http://www.w3.org/2000/svg">
                            <path class="stroke" d="M25 43.94H14.06L10.86 38.39L8.28998 33.94L10.86 29.48"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M10.86 29.4801H5.7L3.13 25.0001L6.77 18.6901L8.27001 16.1001L10.87 11.6101L13.44 7.15006L14.06 6.06006H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M25 39.48H16.64L13.44 33.94L10.86 29.48L13.47 25H8.28003L11.95 18.63L13.44 16.06L16.01 11.61L16.64 10.52H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M25 15.01H19.23L13.47 25L19.23 34.99H25" stroke="#231F20"
                                stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M8.28001 25L5.70001 29.48" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                            <path class="stroke" d="M44.3 29.48L41.72 25" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                            <path class="stroke" d="M25 43.94H35.94L39.14 38.39L41.71 33.94L39.14 29.48"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M39.14 29.4801L44.31 29.4401L46.87 25.0001L43.23 18.6901L41.73 16.1001L39.13 11.6101L36.56 7.15006L35.94 6.06006H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke"
                                d="M25 39.48H33.36L36.56 33.94L39.14 29.48L36.53 25H41.72L38.05 18.63L36.56 16.06L33.99 11.61L33.36 10.52H25"
                                stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M25 15.01H30.77L36.53 25L30.77 34.99H25" stroke="#231F20"
                                stroke-width="0.5" stroke-miterlimit="10"></path>
                            <path class="stroke" d="M19.23 15.01L16.64 10.52" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                            <path class="stroke" d="M30.77 15.01L33.36 10.52" stroke="#231F20" stroke-width="0.5"
                                stroke-miterlimit="10"></path>
                        </svg>
                        <h5 class="card-title nova-round-regular my-4">Title 3</h5>
                        <p class="card-text nova-round-regular text-green">Lorem ipsum dolor sit amet consectetur
                            adipisicing elit. Similique, quas ullam numquam incidunt perferendis debitis mollitia
                            consequatur. Maxime illo dolores sunt ea. Hic reprehenderit quidem facere facilis nam.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="container py-5">
        <h2 class="text-center nova-round-regular text-uppercase mb-5">Projects we cherish</h2>
        <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">
                    <h3 class="nova-round-regular mb-4">Project 1</h3>
                    <p class="mb-4 text-green nova-round-regular">Lorem ipsum, dolor sit amet consectetur adipisicing
                        elit. At inventore assumenda veritatis eaque ipsum quaerat alias reiciendis? Harum obcaecati
                        numquam eaque et beatae sint ipsa? Voluptas minima facere eligendi asperiores!</p>
                </div>
                <a href="#"
                    class="btn bg-g-r rounded-pill bg-dark px-3 text-uppercase text-light nova-round-regular border-0">
                    Read More</a>
            </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="p-5 rounded-circle gradient-border gradient-border-animate">
                    <svg id="logo-58" width="80" height="80" viewBox="0 0 50 50" fill="none" class="m-5"
                        xmlns="http://www.w3.org/2000/svg">
                        <path class="stroke" d="M25 43.94H14.06L10.86 38.39L8.28998 33.94L10.86 29.48" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M10.86 29.4801H5.7L3.13 25.0001L6.77 18.6901L8.27001 16.1001L10.87 11.6101L13.44 7.15006L14.06 6.06006H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M25 39.48H16.64L13.44 33.94L10.86 29.48L13.47 25H8.28003L11.95 18.63L13.44 16.06L16.01 11.61L16.64 10.52H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M25 15.01H19.23L13.47 25L19.23 34.99H25" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M8.28001 25L5.70001 29.48" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                        <path class="stroke" d="M44.3 29.48L41.72 25" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                        <path class="stroke" d="M25 43.94H35.94L39.14 38.39L41.71 33.94L39.14 29.48" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M39.14 29.4801L44.31 29.4401L46.87 25.0001L43.23 18.6901L41.73 16.1001L39.13 11.6101L36.56 7.15006L35.94 6.06006H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M25 39.48H33.36L36.56 33.94L39.14 29.48L36.53 25H41.72L38.05 18.63L36.56 16.06L33.99 11.61L33.36 10.52H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M25 15.01H30.77L36.53 25L30.77 34.99H25" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M19.23 15.01L16.64 10.52" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                        <path class="stroke" d="M30.77 15.01L33.36 10.52" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                    </svg>
                </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="p-5 rounded-circle gradient-border gradient-border-animate">
                    <svg id="logo-58" width="80" height="80" viewBox="0 0 50 50" fill="none" class="m-5"
                        xmlns="http://www.w3.org/2000/svg">
                        <path class="stroke" d="M25 43.94H14.06L10.86 38.39L8.28998 33.94L10.86 29.48" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M10.86 29.4801H5.7L3.13 25.0001L6.77 18.6901L8.27001 16.1001L10.87 11.6101L13.44 7.15006L14.06 6.06006H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M25 39.48H16.64L13.44 33.94L10.86 29.48L13.47 25H8.28003L11.95 18.63L13.44 16.06L16.01 11.61L16.64 10.52H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M25 15.01H19.23L13.47 25L19.23 34.99H25" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M8.28001 25L5.70001 29.48" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                        <path class="stroke" d="M44.3 29.48L41.72 25" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                        <path class="stroke" d="M25 43.94H35.94L39.14 38.39L41.71 33.94L39.14 29.48" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M39.14 29.4801L44.31 29.4401L46.87 25.0001L43.23 18.6901L41.73 16.1001L39.13 11.6101L36.56 7.15006L35.94 6.06006H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke"
                            d="M25 39.48H33.36L36.56 33.94L39.14 29.48L36.53 25H41.72L38.05 18.63L36.56 16.06L33.99 11.61L33.36 10.52H25"
                            stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M25 15.01H30.77L36.53 25L30.77 34.99H25" stroke="#231F20"
                            stroke-width="0.5" stroke-miterlimit="10"></path>
                        <path class="stroke" d="M19.23 15.01L16.64 10.52" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                        <path class="stroke" d="M30.77 15.01L33.36 10.52" stroke="#231F20" stroke-width="0.5"
                            stroke-miterlimit="10"></path>
                    </svg>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                <div class="d-flex flex-column justify-content-center">
                    <h3 class="nova-round-regular mb-4">Project 2</h3>
                    <p class="mb-4 nova-round-regular text-green">Lorem, ipsum dolor sit amet consectetur adipisicing
                        elit. Accusantium tempore illo quod saepe, repellendus quos alias minus obcaecati, explicabo
                        vitae doloribus maiores quis modi hic, quibusdam aperiam quas quidem. Perferendis?</p>
                </div>
                <a href="#"
                    class="btn bg-g-r rounded-pill bg-dark px-3 text-uppercase text-light nova-round-regular border-0">
                    Read More</a>
            </div>
        </div>
    </section>
    <section class="container py-5">
        <h2 class="text-center nova-round-regular mb-4 text-uppercase">Our process</h2>
        <div class="row">
            <div class="col-1 col-sm-1 col-md-1 col-lg-3"></div>
            <div class="col-10 col-sm-10 col-md-10 col-lg-6">
                <p class="text-center nova-round-regular mb-5">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Dolorem quod accusantium dicta ex libero quia, obcaecati qui harum tempora vero assumenda sed
                    possimus iusto minima quis quae sit soluta aliquam!</p>
            </div>
            <div class="col-1 col-sm-1 col-md-1 col-lg-3"></div>
            <div class="col-4 col-sm-4 col-md-2 col-lg-2 my-4">
                <div
                    class="d-flex justify-content-center align-items-center py-5 gradient-border rounded-circle nova-round-regular">
                    <p class="mb-0 py-4">Step 1</p>
                </div>
            </div>
            <div class="col-4 col-sm-4 col-md-2 col-lg-2 my-4">
                <div
                    class="d-flex justify-content-center align-items-center py-5 bx-shdw-g-r rounded-circle nova-round-regular">
                    <p class="mb-0 py-4">Step 2</p>
                </div>
            </div>
            <div class="col-4 col-sm-4 col-md-2 col-lg-2 my-4">
                <div
                    class="d-flex justify-content-center align-items-center py-5 gradient-border rounded-circle nova-round-regular">
                    <p class="mb-0 py-4">Step 3</p>
                </div>
            </div>
            <div class="col-4 col-sm-4 col-md-2 col-lg-2 my-4">
                <div
                    class="d-flex justify-content-center align-items-center py-5 bx-shdw-g-r rounded-circle nova-round-regular">
                    <p class="mb-0 py-4">Step 4</p>
                </div>
            </div>
            <div class="col-4 col-sm-4 col-md-2 col-lg-2 my-4">
                <div
                    class="d-flex justify-content-center align-items-center py-5 gradient-border rounded-circle nova-round-regular">
                    <p class="mb-0 py-4">Step 5</p>
                </div>
            </div>
            <div class="col-4 col-sm-4 col-md-2 col-lg-2 my-4">
                <div
                    class="d-flex justify-content-center align-items-center py-5 bx-shdw-g-r rounded-circle nova-round-regular">
                    <p class="mb-0 py-4">Step 6</p>
                </div>
            </div>
        </div>
    </section>
    <section class="container py-5">
        <h2 class="text-center mb-4 text-uppercase nova-round-regular">Who are we?</h2>
        <h5 class="mb-5 text-center nova-round-regular">Find out more about our company & vision</h5>
        <div class="row">
            <div class="col-1 col-sm-1 col-md-1 col-lg-3"></div>
            <div class="col-10 col-sm-10 col-md-10 col-lg-6">
                <p class="text-center nova-round-regular mb-5 text-green">Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Eaque labore deleniti, facere quam, corrupti adipisci perspiciatis fugit suscipit,
                    amet dignissimos animi nihil exercitationem soluta est ratione aperiam unde nisi et.</p>
            </div>
            <div class="col-1 col-sm-1 col-md-1 col-lg-3"></div>
        </div>
        <div class="w-100 text-center">
            <a href="#"
                class="btn bg-g-r rounded-pill bg-dark px-3 text-uppercase text-light nova-round-regular border-0">
                About us</a>
        </div>
    </section>
    <section class="container py-5">
        <h2 class="mb-5 nova-round-regular text-center text-uppercase">Contact Us</h2>
        <div class="row">
            <div class="col-1 col-sm-1 col-md-1 col-lg-3"></div>
            <div class="col-10 col-sm-10 col-md-10 col-lg-6">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-4">
                        <input type="email" class="form-control bg-clear nova-round-regular border border-dark"
                            placeholder="Email" autocomplete="off">
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-4">
                        <input type="text" class="form-control bg-clear nova-round-regular border border-dark"
                            placeholder="Name" autocomplete="off">
                    </div>
                </div>
                <textarea rows="3" class="form-control bg-clear mb-5 nova-round-regular border border-dark"
                    placeholder="Write Something..."></textarea>
                <div class="d-flex justify-content-center mb-5">
                    <button
                        class="btn bg-g-r rounded-pill bg-dark px-3 text-uppercase text-light nova-round-regular border-0">
                        Contact us</button>
                </div>
                <p class="w-100 nova-round-regular d-flex justify-content-between text-green">
                    <span>Mail: <strong class="text-dark text-nowrap">info@domain.com</strong></span>
                    <span>Tel: <strong class="text-dark text-nowrap">9999999999</strong></span>
                    <span>Address: <strong class="text-dark text-nowrap">Place Name</strong></span>
                </p>
            </div>
            <div class="col-1 col-sm-1 col-md-1 col-lg-3"></div>
        </div>
    </section>
    <section class="container-fluid pt-5 pb-1">
        <div class="container">
            <p class="w-100 nova-round-regular d-flex justify-content-between">
                <span><a href="#" class="link-underline link-underline-opacity-0 text-green">Home</a>
                    <a href="#" class="link-underline link-underline-opacity-0 text-green ms-5">Service</a></span>
                <span><a href="#" class="link-underline link-underline-opacity-0 text-green me-5">About</a>
                    <a href="#" class="link-underline link-underline-opacity-0 text-green">Contact</a></span>
            </p>
        </div>
        <hr>
        <p class="text-center nova-round-regular">Copyright &copy; 2024 VD. All Rights Reserved.</p>
    </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=Nova+Round&display=swap');

.nova-round-regular {
    font-family: "Nova Round", system-ui;
    font-weight: 400;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    width: 100%;
    background-color: #f4f4ed;
}

.bg-g-r {
    background-image: linear-gradient(135deg, #62cabb, #ff8583);
    transition: all 0.5s ease-in-out;
}

.bg-g-r:hover {
    box-shadow: -4px -4px 16px #62cabb59, 4px 4px 16px #ff858340;
}

.bx-shdw-g-r {
    box-shadow: -4px -4px 16px #62cabb59, 4px 4px 16px #ff858340;
}

.bx-shdw-g-r.bx-shdw-g-r-animate {
    animation: bxshdwanim 6s ease-in-out infinite;
}

@keyframes bxshdwanim {
    0%, 100% {
        box-shadow: -4px -4px 16px #62cabb, 4px 4px 16px #ff8583;
    }

    22.5%, 27.5%, 72.5%, 77.5% {
        box-shadow: 0 0 0 transparent;
    }

    50% {
        box-shadow: 4px 4px 16px #62cabb, -4px -4px 16px #ff8583;
    }
}

.bg-clear {
    background-color: transparent;
}

.text-green {
    color: #62cabb;
}

.gradient-border {
    position: relative;
    background: #f4f4ed;
    box-sizing: border-box;
}

.gradient-border::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    background-image: linear-gradient(135deg, #62cabb, #ff8583);
    border-radius: 50%;
    z-index: -1;
}

.gradient-border.gradient-border-animate::before {
    animation: borderanim 6s ease-in-out infinite;
}

@keyframes borderanim {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.form-control:focus {
    background-color: transparent;
    box-shadow: none;
    border-color: #62cabb !important;
}

Thanks for visiting