Home
Creative Solution
my website

my website

This tailwind example is contributed by Creative Solution, on 13-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Creative Solution

2.8k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Abdul Basit Memon</title>
    <link rel="stylesheet" href="../src/styles.css">
    <link rel="stylesheet" href="./css/tailwind.css">

body {
            font-family: 'Poppins', sans-serif;
        }

.gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

.navbar-item {
            position: relative;
            transition: all 0.3s ease;
        }

.navbar-item::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background-color: #667eea;
            transition: all 0.3s ease;
        }

.navbar-item:hover::after {
            width: 100%;
            left: 0;
        }

.btn-primary {
            background-color: #667eea;
            transition: all 0.3s ease;
        }

.btn-primary:hover {
            background-color: #5a67d8;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
        }

.bg-animation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
            background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 70%);
            animation: animateBackground 20s linear infinite;
        }

.bg-animation::before,
        .bg-animation::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.6);
            animation: circulate 4s linear infinite;
        }

.bg-animation::before {
            top: 20%;
            left: 30%;
        }

.bg-animation::after {
            top: 50%;
            left: 70%;
        }

@keyframes animateBackground {
            0% {
                transform: scale(1);
            }

50% {
                transform: scale(1.1);
            }

100% {
                transform: scale(1);
            }
        }

@keyframes circulate {
            0% {
                transform: translateX(0) translateY(0) scale(1);
            }

25% {
                transform: translateX(50px) translateY(-50px) scale(1.2);
            }

50% {
                transform: translateX(100px) translateY(0) scale(1);
            }

75% {
                transform: translateX(50px) translateY(50px) scale(1.2);
            }

100% {
                transform: translateX(0) translateY(0) scale(1);
            }
        }

.section-heading {
            position: relative;
            display: inline-block;
        }

.section-heading::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 3px;
            bottom: -10px;
            left: 25%;
            background-color: #667eea;
        }

.card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

.skill-bar {
            height: 8px;
            background-color: #ddd;
            border-radius: 4px;
            overflow: hidden;
        }

.skill-progress {
            height: 100%;
            width: 0;
            background-color: #6B46C1;
        }
    </style>
</head>

<body class="bg-gray-100">
    <header x-data="{ isOpen: false }" class="bg-white shadow-md fixed w-full z-50">
        <nav class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <a href="#" class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700">
                        <img src="./images/logo-removebg-preview.png" alt="Logo" class="h-8 w-8 mr-2 inline-block">
                        Abdul Basit Memon
                    </a>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#home" class="navbar-item text-gray-800 hover:text-indigo-600">Home</a>
                    <a href="#about" class="navbar-item text-gray-800 hover:text-indigo-600">About</a>
                    <a href="#projects" class="navbar-item text-gray-800 hover:text-indigo-600">Projects</a>
                    <a href="#services" class="navbar-item text-gray-800 hover:text-indigo-600">Services</a>
                    <a href="#contact" class="navbar-item text-gray-800 hover:text-indigo-600">Contact</a>
                    <a href="https://nas.io/prologware-solutions-3" target="_blank"
                        class="btn-primary text-white px-4 py-2 rounded-md">Join Us</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button @click="isOpen = !isOpen" class="outline-none mobile-menu-button">
                        <svg class="w-6 h-6 text-gray-500 hover:text-indigo-600"
                            x-show="!isOpen"
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                        <svg class="w-6 h-6 text-gray-500 hover:text-indigo-600"
                            x-show="isOpen"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>
            <div x-show="isOpen" class="md:hidden mt-3">
                <a href="#home"
                    class="block py-2 px-4 text-sm hover:bg-indigo-600 hover:text-white rounded transition duration-200">Home</a>
                <a href="#about"
                    class="block py-2 px-4 text-sm hover:bg-indigo-600 hover:text-white rounded transition duration-200">About</a>
                <a href="#projects"
                    class="block py-2 px-4 text-sm hover:bg-indigo-600 hover:text-white rounded transition duration-200">Projects</a>
                <a href="#services"
                    class="block py-2 px-4 text-sm hover:bg-indigo-600 hover:text-white rounded transition duration-200">Services</a>
                <a href="#contact"
                    class="block py-2 px-4 text-sm hover:bg-indigo-600 hover:text-white rounded transition duration-200">Contact</a>
                <a href="https://nas.io/prologware-solutions-3" target="_blank"
                    class="block py-2 px-4 text-sm bg-indigo-600 text-white rounded mt-2">Join Us</a>
            </div>
        </nav>
    </header>
    <main class="pt-16">

<section id="home" class="gradient-bg text-white min-h-screen flex items-center relative overflow-hidden">
            <div class="container mx-auto px-6 py-20 text-center relative z-10">
                <h1 class="text-4xl md:text-6xl font-bold mb-4">Welcome to My Portfolio</h1>
                <p class="text-xl md:text-2xl mb-8">I am Abdul Basit Memon, a passionate Computer Systems Engineering
                    student.</p>
                <div id="typing-text" class="text-lg md:text-xl mb-8 h-8 overflow-hidden">
                    Data Science | Graphic Design | Technology Enthusiast
                </div>
                <a href="./images/Resume.pdf"
                    class="btn-primary text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-indigo-700 transition duration-300">Download
                    CV</a>
            </div>
            <div class="bg-animation"></div>
        </section>

<section id="about" class="py-20 bg-white">
            <div class="container mx-auto px-6">
                <h2 class="section-heading text-3xl font-bold text-center mb-12">About Me</h2>
                <div class="flex flex-col md:flex-row items-center justify-center md:justify-between">
                    <div class="md:w-1/2 mb-8 md:mb-0 flex justify-center">
                        <img src="./images/abm.png" alt="Abdul Basit Memon" class="rounded-full w-64 h-64 object-cover object-center shadow-lg">
                    </div>
                    <div class="md:w-1/2 md:ml-12">
                        <p class="text-lg mb-6 ml-2">I am Abdul Basit Memon, a final-year Computer Systems Engineering
                            student with a passion for data science, graphic design, and technology. I have over two
                            years of experience in graphic designing and have led several innovative projects.</p>
                        <div class="space-y-4 ml-2">
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-base font-medium text-indigo-700">Data Science</span>
                                    <span class="text-sm font-medium text-indigo-700">85%</span>
                                </div>
                                <div class="skill-bar">
                                    <div class="skill-progress bg-indigo-200" style="width: 85%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-base font-medium text-indigo-700">Graphic Design</span>
                                    <span class="text-sm font-medium text-indigo-700">90%</span>
                                </div>
                                <div class="skill-bar">
                                    <div class="skill-progress bg-indigo-200" style="width: 90%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-base font-medium text-indigo-700">Web Development</span>
                                    <span class="text-sm font-medium text-indigo-700">75%</span>
                                </div>
                                <div class="skill-bar">
                                    <div class="skill-progress bg-indigo-200" style="width: 75%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="projects" class="py-20 bg-gray-100">
            <div class="container mx-auto px-6">
                <h2 class="section-heading text-3xl font-bold text-center mb-12">My Projects</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div class="card bg-white rounded-lg overflow-hidden shadow-lg">
                        <img src="./images/project-1.png" alt="Project 1" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">Project Title 1</h3>
                            <p class="text-gray-600 mb-4">Short description of Project 1. This project demonstrates my
                                skills in XYZ.</p>
                            <div class="flex justify-between">
                                <a href="#" class="text-indigo-600 hover:text-indigo-800">View Project</a>
                                <a href="#" class="text-gray-600 hover:text-gray-800">
                                    <i class="fab fa-github"></i> GitHub
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card bg-white rounded-lg overflow-hidden shadow-lg">
                        <img src="./images/project-2.png" alt="Project 2" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">Project Title 2</h3>
                            <p class="text-gray-600 mb-4">Short description of Project 2. This project showcases my
                                expertise in ABC.</p>
                            <div class="flex justify-between">
                                <a href="#" class="text-indigo-600 hover:text-indigo-800">View Project</a>
                                <a href="#" class="text-gray-600 hover:text-gray-800">
                                    <i class="fab fa-github"></i> GitHub
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card bg-white rounded-lg overflow-hidden shadow-lg">
                        <img src="./images/project-3.jpg" alt="Project 3" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">Project Title 3</h3>
                            <p class="text-gray-600 mb-4">Short description of Project 3. This project highlights my
                                skills in DEF.</p>
                            <div class="flex justify-between">
                                <a href="#" class="text-indigo-600 hover:text-indigo-800">View Project</a>
                                <a href="#" class="text-gray-600 hover:text-gray-800">
                                    <i class="fab fa-github"></i> GitHub
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="services" class="py-20 bg-white">
            <div class="container mx-auto px-6">
                <h2 class="section-heading text-3xl font-bold text-center mb-12">My Services</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div class="card bg-gray-100 rounded-lg p-6 text-center">
                        <i class="fas fa-palette text-4xl text-indigo-600 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Graphic Design</h3>
                        <p class="text-gray-600">Professional graphic design services to bring your ideas to life.</p>
                    </div>
                    <div class="card bg-gray-100 rounded-lg p-6 text-center">
                        <i class="fas fa-calculator text-4xl text-indigo-600 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Maths Tutoring</h3>
                        <p class="text-gray-600">Comprehensive math tutoring for students at all levels.</p>
                    </div>
                    <div class="card bg-gray-100 rounded-lg p-6 text-center">
                        <i class="fas fa-code text-4xl text-indigo-600 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Web Development</h3>
                        <p class="text-gray-600">Professional web development services to build your online presence.
                        </p>
                    </div>
                    <div class="card bg-gray-100 rounded-lg p-6 text-center">
                        <i class="fas fa-chart-line text-4xl text-indigo-600 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">SEO Services</h3>
                        <p class="text-gray-600">Optimize your website to rank higher in search engine results.</p>
                    </div>
                    <div class="card bg-gray-100 rounded-lg p-6 text-center">
                        <i class="fas fa-camera text-4xl text-indigo-600 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Photography</h3>
                        <p class="text-gray-600">Capture your moments with professional photography services.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="prologware" class="bg-gray-100 py-20">
            <div class="container mx-auto px-6">
                <h2 class="section-heading text-3xl font-bold text-center mb-12">Prologware Solutions</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                    <div
                        class="relative overflow-hidden rounded-lg shadow-xl transform hover:scale-105 transition-transform duration-300 ease-in-out">
                        <iframe class="w-full h-96 object-cover object-center"
                            src="https://www.youtube.com/embed/videoID" frameborder="0"
                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe>
                    </div>
                    <div class="bg-white rounded-lg shadow-xl p-8">
                        <p class="text-lg text-gray-700 mb-6 leading-relaxed">Prologware Solutions focuses on community
                            building with the motto of
                            <span class="font-bold text-gray-900">'To Learn,' 'Grow,' 'Earn & Collab.'</span>
                        </p>
                        <ul class="space-y-4">
                            <li class="flex items-center space-x-3 text-gray-900">
                                <span class="text-blue-500">
                            <i class="fas fa-star"></i>
                        </span>
                                <span>Premium Courses</span>
                            </li>
                            <li class="flex items-center space-x-3 text-gray-900">
                                <span class="text-green-500">
                            <i class="fas fa-tools"></i>
                        </span>
                                <span>Tools and Resources</span>
                            </li>
                            <li class="flex items-center space-x-3 text-gray-900">
                                <span class="text-orange-500">
                            <i class="fas fa-graduation-cap"></i>
                        </span>
                                <span>Scholarship Updates</span>
                            </li>
                            <li class="flex items-center space-x-3 text-gray-900">
                                <span class="text-purple-500">
                            <i class="fas fa-briefcase"></i>
                        </span>
                                <span>Internships and Jobs</span>
                            </li>
                            <li class="flex items-center space-x-3 text-gray-900">
                                <span class="text-red-500">
                            <i class="fas fa-users"></i>
                        </span>
                                <span>Community Collaboration</span>
                            </li>
                        </ul>
                        <a href="https://nas.io/prologware-solutions-3" target="_blank"
                            class="inline-block bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-6 rounded-lg shadow-md hover:shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out mt-6 text-lg font-semibold">
                            Join Our Community
                        </a>
                    </div>
                </div>
            </div>
        </section>
        
        <section class="bg-white dark:bg-gray-900">
            <div class="container px-6 py-12 mx-auto">
                <div class="lg:flex lg:items-center lg:-mx-6">
                    <div class="lg:w-1/2 lg:mx-6">
                        <h1 class="text-2xl font-semibold text-gray-800 capitalize dark:text-white lg:text-3xl">
                            Contact us for more info
                        </h1>

<span class="mx-2 text-gray-700 truncate w-72 dark:text-gray-400">
                                Old National Highway, Ameen Masjid
                                Iron Market street, 66020
                            </span>
                            </p>

<span class="mx-2 text-gray-700 truncate w-72 dark:text-gray-400">basitmemon67@gmail.com</span>
                            </p>
                        </div>

<div class="mt-6 w-80 md:mt-8">
                            <h3 class="text-gray-600 dark:text-gray-300 ">Follow us</h3>

<div class="flex-1 mt-6">
                                    <label class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Email address</label>
                                    <input type="email" placeholder="johndoe@example.com" class="block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
                                </div>

<div class="w-full mt-6">
                                    <label class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Message</label>
                                    <textarea class="block w-full h-32 px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md md:h-48 dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" placeholder="Message"></textarea>
                                </div>
                                <button class="w-full px-6 py-3 mt-6 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50">
                                get in touch
                            </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<footer class="bg-white dark:bg-gray-900">
            <div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
                <div class="md:flex md:justify-between">
                    <div class="mb-6 md:mb-0">
                        <a href="" class="flex items-center">
                            <img src="./images/logo-removebg-preview.png" class="h-8 me-3" alt="FlowBite Logo" />
                            <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">ABDUL Basit Memon</span>
                        </a>
                    </div>
                    <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
                        <div>
                            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Resources
                            </h2>
                            <ul class="text-gray-500 dark:text-gray-400 font-medium">
                                <li class="mb-4">
                                    <a href="https://flowbite.com/" class="hover:underline">Flowbite</a>
                                </li>
                                <li>
                                    <a href="https://tailwindcss.com/" class="hover:underline">Tailwind CSS</a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Follow us
                            </h2>
                            <ul class="text-gray-500 dark:text-gray-400 font-medium">
                                <li class="mb-4">
                                    <a href="https://github.com/themesberg/flowbite" class="hover:underline ">Github</a>
                                </li>
                                <li>
                                    <a href="https://discord.gg/4eeurUVvTy" class="hover:underline">Discord</a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Legal</h2>
                            <ul class="text-gray-500 dark:text-gray-400 font-medium">
                                <li class="mb-4">
                                    <a href="#" class="hover:underline">Privacy Policy</a>
                                </li>
                                <li>
                                    <a href="#" class="hover:underline">Terms &amp; Conditions</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
                <div class="sm:flex sm:items-center sm:justify-between">
                    <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 <a href="https://linktr.ee/abdulbasitmemon" class="hover:underline"> Abdul Basit MEMON™ </a>. All Rights Reserved.
          </span>
                    <div class="flex mt-4 sm:justify-center sm:mt-0">
                        <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="currentColor" viewBox="0 0 8 19">
                                <path fill-rule="evenodd"
                                    d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="sr-only">Facebook page</span>
                        </a>
                        <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5">
                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="currentColor" viewBox="0 0 21 16">
                                <path
                                    d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
                            </svg>
                            <span class="sr-only">Discord community</span>
                        </a>
                        <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5">
                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="currentColor" viewBox="0 0 20 17">
                                <path fill-rule="evenodd"
                                    d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="sr-only">Twitter page</span>
                        </a>
                        <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5">
                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="sr-only">GitHub account</span>
                        </a>
                        <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5">
                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="sr-only">Dribbble account</span>
                        </a>
                    </div>
                </div>
            </div>
        </footer>

</html>

Related Examples

Creative Hero Section

Author:
Ijila Itunu

5 months ago

862
Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

7 months ago

1.9k
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

4 months ago

616
Sidebar with Tailwind CSs and alpinejs

Author:
Michael Andreuzza

1 year ago

3.4k
home
html , css

Author:
Hacker Development

5 months ago

1.3k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

1 month ago

301
Book
nice kbx

Author:
Umutoniwase Yvette

4 months ago

293
Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

7 months ago

1.5k
sticky headings
sticky headings

Author:
Anonymous

1 year ago

5.9k
Movies are a popular form
Movies are a popular form of entertainment that combine storytelling, visuals, and sound to create immersive experiences. They can be fictional or based on real events, spanning genres like action, comedy, drama, horror, sci-fi, romance, and more. Here’s a quick overview:

Author:
nii fanny

4 months ago

441
Yvette
it's very good

Author:
Umutoniwase Yvette

4 months ago

453
App Hero Section With header

Author:
Abdul Baset Bappy

3 months ago

684

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components