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.

Create a Minimalist Web Developer Portfolio 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>Minimalist Web Developer Portfolio</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section class="container-fluid px-0">
        <div class="container px-0">
            <nav class="navbar navbar-expand-lg">
                <div class="container-fluid">
                    <a href="#" class="navbar-brand">ReySi</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 me-auto mb-lg-0">
                            <li class="nav-item">
                                <a href="#" class="nav-link mx-lg-2">Playground</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">Services</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link mx-lg-2">Case studies</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">About me</a>
                            </li>
                        </ul>
                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a href="#" class="nav-link me-lg-2">Anjuna, India
                                    <strong><span id="time-in-anjuna"></span></strong>
                                </a>
                            </li>
                        </ul>
                        <form class="d-flex">
                            <input type="text" class="form-control bg-white-mecca text-center me-2"
                                placeholder="Slot Booked">
                            <input type="text" class="form-control bg-white-mecca text-center me-2"
                                placeholder="Slot Booked">
                            <button type="submit" class="btn btn-dark">+</button>
                        </form>
                    </div>
                </div>
            </nav>
        </div>
    </section>
    <section class="container-fluid px-0">
        <div class="container py-5 px-0">
            <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 h-100">
                        <img src="./avatar.jpg" alt="avatar" class="w-25 rounded-circle">
                        <h1 class="mt-5">Hello! I&apos;m Reyansh Sinha</h1>
                    </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 h-100">
                        <h2>A website designer based in Anjuna, India.</h2>
                        <p>Passionate creating great experiences for Digital Product</p>
                        <div class="mt-2">
                            <button class="btn btn-dark me-2">Talk with me</button>
                            <button class="btn btn-outline-dark">See my work</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="container-fluid px-0 bg-white-mecca">
        <div class="container py-5 px-0">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                    <h3>Working Experience</h3>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item bg-transparent border-dark">
                            <div class="d-flex align-items-center">
                                <p class="mb-0 me-2 fs-1">1.</p>
                                <div>
                                    <p class="mb-0">Designation at <strong>Organization 3</strong></p>
                                    <p class="mb-0"><em>July 2023 - Present</em></p>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item bg-transparent border-dark">
                            <div class="d-flex align-items-center">
                                <p class="mb-0 me-2 fs-1">2.</p>
                                <div>
                                    <p class="mb-0">Designation at <strong>Organization 2</strong></p>
                                    <p class="mb-0"><em>July 2022 - June 2023</em></p>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item bg-transparent border-dark">
                            <div class="d-flex align-items-center">
                                <p class="mb-0 me-2 fs-1">3.</p>
                                <div>
                                    <p class="mb-0">Designation at <strong>Organization 1</strong></p>
                                    <p class="mb-0"><em>July 2020 - June 2022</em></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                    <h3>Awards &amp; Recognition</h3>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item bg-transparent border-dark">
                            <div class="d-flex align-items-center">
                                <p class="mb-0 me-2 fs-1">1.</p>
                                <div>
                                    <p class="mb-0">Award Title 3 at <strong>Organization 3</strong></p>
                                    <p class="mb-0"><em>January 2024</em></p>
                                </div>
                                <a href="#" class="ms-auto text-decoration-none link-dark">&rarr;</a>
                            </div>
                        </li>
                        <li class="list-group-item bg-transparent border-dark">
                            <div class="d-flex align-items-center">
                                <p class="mb-0 me-2 fs-1">2.</p>
                                <div>
                                    <p class="mb-0">Award Title 2 at <strong>Organization 2</strong></p>
                                    <p class="mb-0"><em>January 2023</em></p>
                                </div>
                                <a href="#" class="ms-auto text-decoration-none link-dark">&rarr;</a>
                            </div>
                        </li>
                        <li class="list-group-item bg-transparent border-dark">
                            <div class="d-flex align-items-center">
                                <p class="mb-0 me-2 fs-1">3.</p>
                                <div>
                                    <p class="mb-0">Award Title 1 at <strong>Organization 1</strong></p>
                                    <p class="mb-0"><em>January 2022</em></p>
                                </div>
                                <a href="#" class="ms-auto text-decoration-none link-dark">&rarr;</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container py-5 px-0">
            <div class="d-flex justify-content-between align-items-center w-100 mb-2">
                <h3 class="mb-0">I can help you with</h3>
                <button class="btn btn-outline-dark">See my work</button>
            </div>
            <div class="row">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4>Full pages website design</h4>
                            <p class="mb-0">Crafting immersive and engaging full-page website designs that captive
                                audiences and deliver a seamless user experience</p>
                        </div>
                        <a href="#"
                            class="ms-auto link-dark text-decoration-none mt-auto border px-1 rounded-circle border-dark">&darr;</a>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4>Company website design</h4>
                            <p class="mb-0">Transform your online presence with our sleek and modern company website
                                design</p>
                        </div>
                        <a href="#"
                            class="ms-auto link-dark text-decoration-none mt-auto border px-1 rounded-circle border-dark">&darr;</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="container-fluid px-0">
        <div class="container py-5 px-0">
            <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 h-100">
                        <h3>Experience with a variety of Projects and industries.</h3>
                        <p>Versatile experience across diverse projects and industries, bringing adaptability and
                            valuable skills to any task.</p>
                        <div class="mt-2">
                            <button class="btn btn-dark me-2">Talk with me</button>
                            <button class="btn btn-outline-dark">See my work</button>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                    <div class="d-flex justify-content-center align-items-center flex-column w-100 h-100">
                        <div class="d-flex justify-content-center align-items-center w-100 h-100">
                            <div
                                class="w-25 d-flex justify-content-center align-items-center flex-column border-bottom border-end border-white-mecca h-100">
                                <svg id="logo-88" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="ccustom" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M13.7146 0.516113C11.4582 0.516113 9.2943 1.41245 7.69881 3.00794L0 10.7067V14.2307C0 16.7204 1.06944 18.9603 2.77401 20.5161C1.06944 22.0719 0 24.3118 0 26.8015V30.3255L7.69881 38.0243C9.2943 39.6198 11.4582 40.5161 13.7146 40.5161C16.2043 40.5161 18.4442 39.4467 20 37.7421C21.5558 39.4467 23.7957 40.5161 26.2854 40.5161C28.5418 40.5161 30.7057 39.6198 32.3012 38.0243L40 30.3255V26.8015C40 24.3118 38.9306 22.0719 37.226 20.5161C38.9306 18.9603 40 16.7204 40 14.2307V10.7067L32.3012 3.00794C30.7057 1.41245 28.5418 0.516113 26.2854 0.516113C23.7957 0.516113 21.5558 1.58555 20 3.29012C18.4442 1.58555 16.2043 0.516113 13.7146 0.516113ZM25.7588 20.5161C25.6629 20.4286 25.5688 20.3387 25.4766 20.2465L20 14.7699L14.5234 20.2465C14.4312 20.3387 14.3371 20.4286 14.2412 20.5161C14.3371 20.6036 14.4312 20.6935 14.5234 20.7857L20 26.2623L25.4766 20.7857C25.5688 20.6935 25.6629 20.6036 25.7588 20.5161ZM22.2222 30.3255L22.2222 32.0085C22.2222 34.2525 24.0414 36.0717 26.2854 36.0717C27.363 36.0717 28.3965 35.6436 29.1585 34.8816L35.5556 28.4845V26.8015C35.5556 24.5575 33.7364 22.7383 31.4924 22.7383C30.4148 22.7383 29.3813 23.1664 28.6193 23.9284L22.2222 30.3255ZM17.7778 30.3255L11.3807 23.9284C10.6187 23.1664 9.58524 22.7383 8.50762 22.7383C6.26359 22.7383 4.44444 24.5575 4.44444 26.8015V28.4845L10.8415 34.8816C11.6035 35.6436 12.637 36.0717 13.7146 36.0717C15.9586 36.0717 17.7778 34.2525 17.7778 32.0085V30.3255ZM17.7778 9.02373V10.7067L11.3807 17.1038C10.6187 17.8658 9.58524 18.2939 8.50762 18.2939C6.26359 18.2939 4.44444 16.4747 4.44444 14.2307V12.5477L10.8415 6.15063C11.6035 5.38864 12.637 4.96056 13.7146 4.96056C15.9586 4.96056 17.7778 6.7797 17.7778 9.02373ZM28.6193 17.1038L22.2222 10.7067L22.2222 9.02373C22.2222 6.7797 24.0414 4.96056 26.2854 4.96056C27.363 4.96056 28.3965 5.38864 29.1585 6.15063L35.5556 12.5477V14.2307C35.5556 16.4747 33.7364 18.2939 31.4924 18.2939C30.4148 18.2939 29.3813 17.8658 28.6193 17.1038Z"
                                        fill="#000000"></path>
                                </svg>
                            </div>
                            <div
                                class="w-25 d-flex justify-content-center align-items-center flex-column bg-white-mecca-opacity-50 py-4 border-start border-bottom border-end border-white-mecca">
                                <h4 class="mb-0">50+</h4>
                                <p class="mb-0">Projects</p>
                                <p class="mb-0">Finished</p>
                            </div>
                            <div
                                class="w-25 d-flex justify-content-center align-items-center flex-column border-start border-bottom border-end border-white-mecca h-100">
                                <svg id="logo-88" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="ccustom" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M13.7146 0.516113C11.4582 0.516113 9.2943 1.41245 7.69881 3.00794L0 10.7067V14.2307C0 16.7204 1.06944 18.9603 2.77401 20.5161C1.06944 22.0719 0 24.3118 0 26.8015V30.3255L7.69881 38.0243C9.2943 39.6198 11.4582 40.5161 13.7146 40.5161C16.2043 40.5161 18.4442 39.4467 20 37.7421C21.5558 39.4467 23.7957 40.5161 26.2854 40.5161C28.5418 40.5161 30.7057 39.6198 32.3012 38.0243L40 30.3255V26.8015C40 24.3118 38.9306 22.0719 37.226 20.5161C38.9306 18.9603 40 16.7204 40 14.2307V10.7067L32.3012 3.00794C30.7057 1.41245 28.5418 0.516113 26.2854 0.516113C23.7957 0.516113 21.5558 1.58555 20 3.29012C18.4442 1.58555 16.2043 0.516113 13.7146 0.516113ZM25.7588 20.5161C25.6629 20.4286 25.5688 20.3387 25.4766 20.2465L20 14.7699L14.5234 20.2465C14.4312 20.3387 14.3371 20.4286 14.2412 20.5161C14.3371 20.6036 14.4312 20.6935 14.5234 20.7857L20 26.2623L25.4766 20.7857C25.5688 20.6935 25.6629 20.6036 25.7588 20.5161ZM22.2222 30.3255L22.2222 32.0085C22.2222 34.2525 24.0414 36.0717 26.2854 36.0717C27.363 36.0717 28.3965 35.6436 29.1585 34.8816L35.5556 28.4845V26.8015C35.5556 24.5575 33.7364 22.7383 31.4924 22.7383C30.4148 22.7383 29.3813 23.1664 28.6193 23.9284L22.2222 30.3255ZM17.7778 30.3255L11.3807 23.9284C10.6187 23.1664 9.58524 22.7383 8.50762 22.7383C6.26359 22.7383 4.44444 24.5575 4.44444 26.8015V28.4845L10.8415 34.8816C11.6035 35.6436 12.637 36.0717 13.7146 36.0717C15.9586 36.0717 17.7778 34.2525 17.7778 32.0085V30.3255ZM17.7778 9.02373V10.7067L11.3807 17.1038C10.6187 17.8658 9.58524 18.2939 8.50762 18.2939C6.26359 18.2939 4.44444 16.4747 4.44444 14.2307V12.5477L10.8415 6.15063C11.6035 5.38864 12.637 4.96056 13.7146 4.96056C15.9586 4.96056 17.7778 6.7797 17.7778 9.02373ZM28.6193 17.1038L22.2222 10.7067L22.2222 9.02373C22.2222 6.7797 24.0414 4.96056 26.2854 4.96056C27.363 4.96056 28.3965 5.38864 29.1585 6.15063L35.5556 12.5477V14.2307C35.5556 16.4747 33.7364 18.2939 31.4924 18.2939C30.4148 18.2939 29.3813 17.8658 28.6193 17.1038Z"
                                        fill="#000000"></path>
                                </svg>
                            </div>
                            <div
                                class="w-25 d-flex justify-content-center align-items-center flex-column bg-white-mecca-opacity-50 py-4 border-start border-bottom border-white-mecca">
                                <h4 class="mb-0">40+</h4>
                                <p class="mb-0">Website</p>
                                <p class="mb-0">Developed</p>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center align-items-center w-100 h-100">
                            <div
                                class="w-25 d-flex justify-content-center align-items-center flex-column bg-white-mecca-opacity-50 py-4 border-top border-end border-white-mecca">
                                <h4 class="mb-0">80+</h4>
                                <p class="mb-0">Happy</p>
                                <p class="mb-0">Clients</p>
                            </div>
                            <div
                                class="w-25 d-flex justify-content-center align-items-center flex-column border-start border-top border-end border-white-mecca h-100">
                                <svg id="logo-88" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="ccustom" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M13.7146 0.516113C11.4582 0.516113 9.2943 1.41245 7.69881 3.00794L0 10.7067V14.2307C0 16.7204 1.06944 18.9603 2.77401 20.5161C1.06944 22.0719 0 24.3118 0 26.8015V30.3255L7.69881 38.0243C9.2943 39.6198 11.4582 40.5161 13.7146 40.5161C16.2043 40.5161 18.4442 39.4467 20 37.7421C21.5558 39.4467 23.7957 40.5161 26.2854 40.5161C28.5418 40.5161 30.7057 39.6198 32.3012 38.0243L40 30.3255V26.8015C40 24.3118 38.9306 22.0719 37.226 20.5161C38.9306 18.9603 40 16.7204 40 14.2307V10.7067L32.3012 3.00794C30.7057 1.41245 28.5418 0.516113 26.2854 0.516113C23.7957 0.516113 21.5558 1.58555 20 3.29012C18.4442 1.58555 16.2043 0.516113 13.7146 0.516113ZM25.7588 20.5161C25.6629 20.4286 25.5688 20.3387 25.4766 20.2465L20 14.7699L14.5234 20.2465C14.4312 20.3387 14.3371 20.4286 14.2412 20.5161C14.3371 20.6036 14.4312 20.6935 14.5234 20.7857L20 26.2623L25.4766 20.7857C25.5688 20.6935 25.6629 20.6036 25.7588 20.5161ZM22.2222 30.3255L22.2222 32.0085C22.2222 34.2525 24.0414 36.0717 26.2854 36.0717C27.363 36.0717 28.3965 35.6436 29.1585 34.8816L35.5556 28.4845V26.8015C35.5556 24.5575 33.7364 22.7383 31.4924 22.7383C30.4148 22.7383 29.3813 23.1664 28.6193 23.9284L22.2222 30.3255ZM17.7778 30.3255L11.3807 23.9284C10.6187 23.1664 9.58524 22.7383 8.50762 22.7383C6.26359 22.7383 4.44444 24.5575 4.44444 26.8015V28.4845L10.8415 34.8816C11.6035 35.6436 12.637 36.0717 13.7146 36.0717C15.9586 36.0717 17.7778 34.2525 17.7778 32.0085V30.3255ZM17.7778 9.02373V10.7067L11.3807 17.1038C10.6187 17.8658 9.58524 18.2939 8.50762 18.2939C6.26359 18.2939 4.44444 16.4747 4.44444 14.2307V12.5477L10.8415 6.15063C11.6035 5.38864 12.637 4.96056 13.7146 4.96056C15.9586 4.96056 17.7778 6.7797 17.7778 9.02373ZM28.6193 17.1038L22.2222 10.7067L22.2222 9.02373C22.2222 6.7797 24.0414 4.96056 26.2854 4.96056C27.363 4.96056 28.3965 5.38864 29.1585 6.15063L35.5556 12.5477V14.2307C35.5556 16.4747 33.7364 18.2939 31.4924 18.2939C30.4148 18.2939 29.3813 17.8658 28.6193 17.1038Z"
                                        fill="#000000"></path>
                                </svg>
                            </div>
                            <div
                                class="w-25 d-flex justify-content-center align-items-center flex-column bg-white-mecca-opacity-50 py-4 border-start border-top border-end border-white-mecca">
                                <h4 class="mb-0">8+</h4>
                                <p class="mb-0">Years</p>
                                <p class="mb-0">Experience</p>
                            </div>
                            <div
                                class="w-25 d-flex justify-content-center align-items-center flex-column border-start border-top border-white-mecca h-100">
                                <svg id="logo-88" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="ccustom" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M13.7146 0.516113C11.4582 0.516113 9.2943 1.41245 7.69881 3.00794L0 10.7067V14.2307C0 16.7204 1.06944 18.9603 2.77401 20.5161C1.06944 22.0719 0 24.3118 0 26.8015V30.3255L7.69881 38.0243C9.2943 39.6198 11.4582 40.5161 13.7146 40.5161C16.2043 40.5161 18.4442 39.4467 20 37.7421C21.5558 39.4467 23.7957 40.5161 26.2854 40.5161C28.5418 40.5161 30.7057 39.6198 32.3012 38.0243L40 30.3255V26.8015C40 24.3118 38.9306 22.0719 37.226 20.5161C38.9306 18.9603 40 16.7204 40 14.2307V10.7067L32.3012 3.00794C30.7057 1.41245 28.5418 0.516113 26.2854 0.516113C23.7957 0.516113 21.5558 1.58555 20 3.29012C18.4442 1.58555 16.2043 0.516113 13.7146 0.516113ZM25.7588 20.5161C25.6629 20.4286 25.5688 20.3387 25.4766 20.2465L20 14.7699L14.5234 20.2465C14.4312 20.3387 14.3371 20.4286 14.2412 20.5161C14.3371 20.6036 14.4312 20.6935 14.5234 20.7857L20 26.2623L25.4766 20.7857C25.5688 20.6935 25.6629 20.6036 25.7588 20.5161ZM22.2222 30.3255L22.2222 32.0085C22.2222 34.2525 24.0414 36.0717 26.2854 36.0717C27.363 36.0717 28.3965 35.6436 29.1585 34.8816L35.5556 28.4845V26.8015C35.5556 24.5575 33.7364 22.7383 31.4924 22.7383C30.4148 22.7383 29.3813 23.1664 28.6193 23.9284L22.2222 30.3255ZM17.7778 30.3255L11.3807 23.9284C10.6187 23.1664 9.58524 22.7383 8.50762 22.7383C6.26359 22.7383 4.44444 24.5575 4.44444 26.8015V28.4845L10.8415 34.8816C11.6035 35.6436 12.637 36.0717 13.7146 36.0717C15.9586 36.0717 17.7778 34.2525 17.7778 32.0085V30.3255ZM17.7778 9.02373V10.7067L11.3807 17.1038C10.6187 17.8658 9.58524 18.2939 8.50762 18.2939C6.26359 18.2939 4.44444 16.4747 4.44444 14.2307V12.5477L10.8415 6.15063C11.6035 5.38864 12.637 4.96056 13.7146 4.96056C15.9586 4.96056 17.7778 6.7797 17.7778 9.02373ZM28.6193 17.1038L22.2222 10.7067L22.2222 9.02373C22.2222 6.7797 24.0414 4.96056 26.2854 4.96056C27.363 4.96056 28.3965 5.38864 29.1585 6.15063L35.5556 12.5477V14.2307C35.5556 16.4747 33.7364 18.2939 31.4924 18.2939C30.4148 18.2939 29.3813 17.8658 28.6193 17.1038Z"
                                        fill="#000000"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="container-fluid px-0 bg-white-mecca">
        <div class="container py-5 px-0">
            <div class="w-100 text-center">
                <h3 class="mb-2">Selected works</h3>
            </div>
            <div class="row">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                    <div class="card text-bg-light border-0">
                        <div class="card-body border-0">
                            <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop"
                                alt="card 1 img" class="w-100 rounded-5">
                            <h5 class="card-title mt-4">Card Title 1</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos
                                recusandae voluptatem sit, ipsum doloremque itaque quidem odit, adipisci sint, nostrum
                                culpa asperiores excepturi non sequi quae. Quia eaque aut hic!</p>
                            <a href="#" class="btn btn-dark">View detail work</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                    <div class="card text-bg-light border-0">
                        <div class="card-body border-0">
                            <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop"
                                alt="card 2 img" class="w-100 rounded-5">
                            <h5 class="card-title mt-4">Card Title 2</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos
                                recusandae voluptatem sit, ipsum doloremque itaque quidem odit, adipisci sint, nostrum
                                culpa asperiores excepturi non sequi quae. Quia eaque aut hic!</p>
                            <a href="#" class="btn btn-dark">View detail work</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                    <div class="card text-bg-light border-0">
                        <div class="card-body border-0">
                            <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop"
                                alt="card 3 img" class="w-100 rounded-5">
                            <h5 class="card-title mt-4">Card Title 3</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos
                                recusandae voluptatem sit, ipsum doloremque itaque quidem odit, adipisci sint, nostrum
                                culpa asperiores excepturi non sequi quae. Quia eaque aut hic!</p>
                            <a href="#" class="btn btn-dark">View detail work</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                    <div class="card text-bg-light border-0">
                        <div class="card-body border-0">
                            <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop"
                                alt="card 4 img" class="w-100 rounded-5">
                            <h5 class="card-title mt-4">Card Title 4</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos
                                recusandae voluptatem sit, ipsum doloremque itaque quidem odit, adipisci sint, nostrum
                                culpa asperiores excepturi non sequi quae. Quia eaque aut hic!</p>
                            <a href="#" class="btn btn-dark">View detail work</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="container-fluid px-0">
        <div class="container py-5 px-0">
            <div class="w-100 text-center">
                <h4>Have a Project?</h4>
                <h3>Let&apos;s talk with me</h3>
                <button class="btn btn-dark mt-4">Talk with me</button>
                <p class="mb-0 mt-3">My local time <strong><span id="local-time"></span></strong></p>
            </div>
        </div>
        <div class="container pt-5 pb-2 px-0">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                    <div class="d-flex justify-content-start align-items-center w-100">
                        <a href="#" class="text-decoration-none link-dark">ReySi</a>
                        <p class="mb-0 ms-5">Website design specialist</p>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <a href="#" class="link-dark text-decoration-none">Home</a>
                        <a href="#" class="link-dark text-decoration-none">Playground</a>
                        <a href="#" class="link-dark text-decoration-none">Services</a>
                        <a href="#" class="link-dark text-decoration-none">Case studies</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    <script src="index.js"></script>
</body>

</html>

Below is the css code for this video.

style.css


@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap");

* {
    margin: 0;
    padding: 0;
    font-family: "Gowun Batang", serif;
}

body {
    min-height: 100vh;
    height: 100%;
    width: 100%;
}

.navbar-toggler:focus, .navbar-toggler:focus-visible {
    outline: none;
    box-shadow: none;
}

.bg-white-mecca {
    background-color: #ebf2df;
}

.bg-white-mecca-opacity-50 {
    background-color: #ebf2df80;
}

.border-white-mecca {
    border-color: #ebf2df;
}

.w-25 svg {
    max-width: 25%;
}

Below is the javascript code for this video.

index.js


const timeInAnjuna = document.getElementById("time-in-anjuna");
const currentTimeFunction = () => new Date().toLocaleString('en-US', {
    timeZone: 'Asia/Kolkata', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true
});
setInterval(() => {
    timeInAnjuna.innerHTML = currentTimeFunction();
    timeInAnjuna.style.display = "block";
    timeInAnjuna.style.fontSize = "75%";
    document.getElementById("local-time").innerHTML = currentTimeFunction();
}, 1000);

Thanks for visiting