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.7k

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