Home
Baraka Salvator
Game changer

Game changer

by salvator

This tailwind example is contributed by Baraka Salvator, on 23-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Social media links,

Button Hero Navbar Social media buttons

Author Baraka Salvator

232

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.appendChild(drip);
        }

// 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>

Related Examples