Home
gidy
FLESH & BONE

FLESH & BONE

Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

This tailwind example is contributed by gidy, on 07-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Hero Pagination Profile Navigations Other

Author gidy

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flesh & Bone | Survival Horror Game</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        blood: '#8a0303',
                        flesh: '#d45d5d',
                        bone: '#e8e1d1',
                        decay: '#3a3a3a',
                        jungle: '#1a2a1a',
                    },
                    animation: {
                        'pulse-slow': 'pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'blood-drip': 'blood-drip 8s linear infinite',
                        'flicker': 'flicker 5s infinite alternate',
                        'skew-scroll': 'skew-scroll 20s linear infinite',
                    },
                    keyframes: {
                        'blood-drip': {
                            '0%': { transform: 'translateY(-100%)', opacity: '0' },
                            '10%': { opacity: '1' },
                            '70%': { opacity: '1' },
                            '100%': { transform: 'translateY(100vh)', opacity: '0' },
                        },
                        'flicker': {
                            '0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%': { opacity: '1' },
                            '20%, 21.999%, 63%, 63.999%, 65%, 69.999%': { opacity: '0.3' },
                        },
                        'skew-scroll': {
                            '0%': { transform: 'skewY(-5deg) translateY(0)' },
                            '100%': { transform: 'skewY(-5deg) translateY(-50%)' },
                        }
                    },
                    backgroundImage: {
                        'blood-pattern': 'radial-gradient(circle, rgba(138,3,3,0.2) 1px, transparent 1px)',
                        'meat-texture': 'url("data:image/svg+xml,%3Csvg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z\' fill=\'%23d45d5d\' fill-opacity=\'0.2\' fill-rule=\'evenodd\'/%3E%3C/svg%3E")',
                    },
                    fontFamily: {
                        grotesk: ['"Space Grotesk"', 'sans-serif'],
                        condensed: ['"Bebas Neue"', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style type="text/tailwindcss">
        @layer utilities {
            .text-stroke-blood {
                -webkit-text-stroke: 1px theme('colors.blood');
                text-stroke: 1px theme('colors.blood');
            }
            .text-stroke-flesh {
                -webkit-text-stroke: 1px theme('colors.flesh');
                text-stroke: 1px theme('colors.flesh');
            }
            .perspective-1000 {
                perspective: 1000px;
            }
            .transform-style-preserve-3d {
                transform-style: preserve-3d;
            }
            .backface-hidden {
                backface-visibility: hidden;
            }
            .blood-drip {
                position: absolute;
                top: 0;
                left: 0;
                width: 2px;
                height: 100px;
                background: linear-gradient(to bottom, theme('colors.blood'), transparent);
                opacity: 0;
            }
        }
    </style>
</head>
<body class="bg-decay text-bone font-grotesk overflow-x-hidden">
    
    <div class="fixed inset-0 overflow-hidden z-0 pointer-events-none">
        <div class="absolute inset-0 bg-[length:30px_30px] bg-blood-pattern opacity-10"></div>
        <div class="absolute inset-0 bg-meat-texture opacity-5"></div>
        <div id="bloodContainer" class="absolute inset-0 overflow-hidden"></div>
        <div class="absolute inset-0 bg-gradient-to-b from-black/70 to-black/30"></div>
    </div>

<nav class="relative z-50 py-6 px-8 flex justify-between items-center border-b border-blood/20">
        <div class="text-3xl font-condensed tracking-wider">
            <span class="text-blood">FLESH</span> & <span class="text-bone">BONE</span>
        </div>
        <ul class="hidden md:flex space-x-8">
            <li><a href="#" class="hover:text-flesh transition-colors duration-300 font-medium">About</a></li>
            <li><a href="#" class="hover:text-flesh transition-colors duration-300 font-medium">Gallery</a></li>
            <li><a href="#" class="hover:text-flesh transition-colors duration-300 font-medium">Gameplay</a></li>
            <li><a href="#" class="hover:text-flesh transition-colors duration-300 font-medium">Pre-order</a></li>
        </ul>
        <button class="hidden md:block bg-blood text-bone px-6 py-3 rounded-sm hover:bg-blood/90 transition-colors duration-300 font-medium tracking-wider">
            PRE-ORDER NOW
        </button>
        <button class="md:hidden text-flesh">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
    </nav>

<section class="min-h-screen relative overflow-hidden">
        <div class="container mx-auto px-6 pt-24 md:pt-32 relative z-10">
            <div class="flex flex-col lg:flex-row items-center">
                
                <div class="lg:w-1/2 mb-16 lg:mb-0">
                    <div class="max-w-2xl">
                        <span class="inline-block px-4 py-1 bg-blood/20 text-blood rounded-sm text-sm font-medium mb-6 tracking-widest">SURVIVAL HORROR</span>
                        <h1 class="text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-condensed leading-none mb-8 animate-flicker">
                            <span class="text-blood">CONSUME</span><br>
                            OR BE <span class="text-stroke-blood">CONSUMED</span>
                        </h1>
                        <p class="text-lg opacity-90 mb-10 max-w-lg">
                            Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. 
                            How far will you go to see another sunrise?
                        </p>
                        <div class="flex flex-col sm:flex-row gap-6">
                            <button class="bg-blood text-bone px-8 py-4 rounded-sm font-condensed text-xl tracking-wider hover:bg-blood/90 transition-colors duration-300 flex items-center justify-center gap-2">
                                WATCH TRAILER
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </button>
                            <button class="border border-flesh/50 text-flesh px-8 py-4 rounded-sm font-condensed text-xl tracking-wider hover:bg-flesh/10 transition-colors duration-300">
                                LEARN MORE
                            </button>
                        </div>

<div class="mt-16 grid grid-cols-3 gap-8 max-w-md">
                            <div>
                                <div class="text-blood text-3xl font-condensed mb-2">18+</div>
                                <div class="text-sm opacity-70">Mature Rating</div>
                            </div>
                            <div>
                                <div class="text-blood text-3xl font-condensed mb-2">2024</div>
                                <div class="text-sm opacity-70">Release Date</div>
                            </div>
                            <div>
                                <div class="text-blood text-3xl font-condensed mb-2">4K</div>
                                <div class="text-sm opacity-70">Ultra HD</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="lg:w-1/2 relative perspective-1000 mt-16 lg:mt-0">
                    <div class="relative w-full max-w-2xl mx-auto transform-style-preserve-3d">
                        
                        <div class="relative overflow-hidden border-2 border-blood/30 shadow-2xl">
                            <img src="https://cdn.midjourney.com/8c472e23-1ad4-41ec-bf5b-9f32458c947c/0_3.png" 
                                 alt="Flesh & Bone Game Scene" 
                                 class="w-full h-auto object-cover transform transition-transform duration-700 ease-out hover:scale-105">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-black/0"></div>
                            <div class="absolute bottom-0 left-0 p-6">
                                <div class="text-blood font-condensed text-xl tracking-widest">COMING 2024</div>
                                <div class="text-3xl font-condensed">FLESH & BONE</div>
                            </div>
                        </div>

<div class="absolute top-10 -left-10 w-32 h-32 bg-blood/10 rounded-full blur-lg"></div>
                        <div class="absolute bottom-20 -right-10 w-40 h-40 bg-blood/10 rounded-full blur-lg"></div>
                        
                        
                        <div class="absolute inset-0 border-2 border-blood/10 pointer-events-none"></div>
                        <div class="absolute inset-2 border border-blood/5 pointer-events-none"></div>
                    </div>
                </div>
            </div>
        </div>

<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 animate-bounce">
            <div class="text-blood">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
                </svg>
            </div>
        </div>
    </section>

<section class="py-32 bg-jungle/50 relative overflow-hidden">
        
        <div class="absolute inset-0 overflow-hidden -skew-y-5 origin-top-left">
            <div class="absolute inset-0 bg-meat-texture opacity-5 skew-y-5"></div>
            <div class="absolute inset-0 bg-gradient-to-r from-black/90 via-black/50 to-black/90 skew-y-5"></div>
        </div>

<div class="container mx-auto px-6 relative z-10 skew-y-5">
            <h2 class="text-4xl font-condensed text-center mb-6">
                <span class="text-blood">FEATURES</span> THAT WILL HAUNT YOU
            </h2>
            <p class="text-center max-w-2xl mx-auto opacity-80 mb-16">
                Experience survival horror like never before with our groundbreaking systems and mechanics.
            </p>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                
                <div class="bg-decay/80 p-8 border border-blood/10 hover:border-blood/30 transition-all duration-500 group">
                    <div class="text-blood text-5xl font-condensed mb-4">01</div>
                    <h3 class="text-2xl font-condensed mb-4">MORAL DECAY SYSTEM</h3>
                    <p class="opacity-80 mb-6">
                        Your choices affect your character's sanity and appearance. Will you maintain your humanity or embrace the darkness?
                    </p>
                    <div class="h-px w-full bg-blood/20 group-hover:bg-blood/50 transition-colors duration-500 mb-4"></div>
                    <div class="text-blood/70 text-sm">Every bite changes you...</div>
                </div>
                
                
                <div class="bg-decay/80 p-8 border border-blood/10 hover:border-blood/30 transition-all duration-500 group">
                    <div class="text-blood text-5xl font-condensed mb-4">02</div>
                    <h3 class="text-2xl font-condensed mb-4">DYNAMIC HUNGER</h3>
                    <p class="opacity-80 mb-6">
                        Starvation has never felt so real. As hunger grows, your vision distorts and your choices become more desperate.
                    </p>
                    <div class="h-px w-full bg-blood/20 group-hover:bg-blood/50 transition-colors duration-500 mb-4"></div>
                    <div class="text-blood/70 text-sm">Would you eat a friend?</div>
                </div>
                
                
                <div class="bg-decay/80 p-8 border border-blood/10 hover:border-blood/30 transition-all duration-500 group">
                    <div class="text-blood text-5xl font-condensed mb-4">03</div>
                    <h3 class="text-2xl font-condensed mb-4">TRIBAL WARFARE</h3>
                    <p class="opacity-80 mb-6">
                        Navigate complex relationships between warring cannibal tribes. Play them against each other or become their god.
                    </p>
                    <div class="h-px w-full bg-blood/20 group-hover:bg-blood/50 transition-colors duration-500 mb-4"></div>
                    <div class="text-blood/70 text-sm">All tribes must eat...</div>
                </div>
            </div>
        </div>
    </section>

<script>
        // Create blood drip elements
        const bloodContainer = document.getElementById('bloodContainer');
        const dripCount = 15;
        
        for (let i = 0; i < dripCount; i++) {
            const drip = document.createElement('div');
            drip.className = 'blood-drip';
            drip.style.left = `${Math.random() * 100}%`;
            drip.style.animationDelay = `${Math.random() * 5}s`;
            drip.style.animationDuration = `${5 + Math.random() * 10}s`;
            drip.style.height = `${50 + Math.random() * 150}px`;
            drip.style.opacity = `${0.2 + Math.random() * 0.5}`;
            bloodContainer.a<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flesh & Bone | Survival Horror Game</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        blood: '#8a0303',
                        flesh: '#d45d5d',
                        bone: '#e8e1d1',
                        decay: '#3a3a3a',
                        jungle: '#1a2a1a',
                    },
                    animation: {
                        'pulse-slow': 'pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'blood-drip': 'blood-drip 8s linear infinite',
                        'flicker': 'flicker 5s infinite alternate',
                        'skew-scroll': 'skew-scroll 20s linear infinite',
                    },
                    keyframes: {
                        'blood-drip': {
                            '0%': { transform: 'translateY(-100%)', opacity: '0' },
                            '10%': { opacity: '1' },
                            '70%': { opacity: '1' },
                            '100%': { transform: 'translateY(100vh)', opacity: '0' },
                        },
                        'flicker': {
                            '0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%': { opacity: '1' },
                            '20%, 21.999%, 63%, 63.999%, 65%, 69.999%': { opacity: '0.3' },
                        },
                        'skew-scroll': {
                            '0%': { transform: 'skewY(-5deg) translateY(0)' },
                            '100%': { transform: 'skewY(-5deg) translateY(-50%)' },
                        }
                    },
                    backgroundImage: {
                        'blood-pattern': 'radial-gradient(circle, rgba(138,3,3,0.2) 1px, transparent 1px)',
                        'meat-texture': 'url("data:image/svg+xml,%3Csvg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z\' fill=\'%23d45d5d\' fill-opacity=\'0.2\' fill-rule=\'evenodd\'/%3E%3C/svg%3E")',
                    },
                    fontFamily: {
                        grotesk: ['"Space Grotesk"', 'sans-serif'],
                        condensed: ['"Bebas Neue"', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style type="text/tailwindcss">
        @layer utilities {
            .text-stroke-blood {
                -webkit-text-stroke: 1px theme('colors.blood');
                text-stroke: 1px theme('colors.blood');
            }
            .text-stroke-flesh {
                -webkit-text-stroke: 1px theme('colors.flesh');
                text-stroke: 1px theme('colors.flesh');
            }
            .perspective-1000 {
                perspective: 1000px;
            }
            .transform-style-preserve-3d {
                transform-style: preserve-3d;
            }
            .backface-hidden {
                backface-visibility: hidden;
            }
            .blood-drip {
                position: absolute;
                top: 0;
                left: 0;
                width: 2px;
                height: 100px;
                background: linear-gradient(to bottom, theme('colors.blood'), transparent);
                opacity: 0;
            }
        }
    </style>
</head>
<body class="bg-decay text-bone font-grotesk overflow-x-hidden">
    
    <div class="fixed inset-0 overflow-hidden z-0 pointer-events-none">
        <div class="absolute inset-0 bg-[length:30px_30px] bg-blood-pattern opacity-10"></div>
        <div class="absolute inset-0 bg-meat-texture opacity-5"></div>
        <div id="bloodContainer" class="absolute inset-0 overflow-hidden"></div>
        <div class="absolute inset-0 bg-gradient-to-b from-black/70 to-black/30"></div>
    </div>

// Parallax effect on mouse move
        const parallaxElements = document.querySelectorAll('.transform-style-preserve-3d');
        document.addEventListener('mousemove', (e) => {
            parallaxElements.forEach(element => {
                const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
                const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
                element.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
            });
        });
    </script>
</body>
</html>ppendChild(drip);
        }

Related Examples

Previous page - Next page Buttons

Author:
Krishna Gudpalle

3 years ago

13.4k
Back and next navigation buttons

Author:
Fagundo67

2 years ago

11.9k
Show user details

Author:
Lucas Martinez

2 years ago

25.1k
Background image section

Author:
Marc

1 year ago

6.2k
Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3.5k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.3k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

1.9k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Author:
Hezron Okoko

1 year ago

2.8k
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.3k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

1 year ago

2k
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

Author:
nejaa badr

1 year ago

2.9k
Portfolio Hero Section 4

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components