Página de inicio - God of War

1,571 Andev.web

Abrir en el editor Publica tu código

Recomendado

27 May 2025

Tarjeta de pago

13 January 2025

Un código de mo832860

10 October 2025

Contenedor de fragmentos de animación CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>God of War - Epic Norse Journey</title>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #E31B23;
            --primary-hover: #C41920;
            --background-color: #0B0B0B;
            --secondary-background: #111111;
            --text-color: #FFFFFF;
            --text-muted: #A0A0A0;
            --border-color: #333333;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Open Sans', sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
        }

.flex-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

.grid {
            display: grid;
            gap: 4rem;
        }

@media (min-width: 768px) {
            .grid {
                grid-template-columns: 1fr 1fr;
            }
        }

header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background-color: rgba(11, 11, 11, 0.8);
            backdrop-filter: blur(10px);
            transition: background-color 0.3s ease;
        }

header.scrolled {
            background-color: rgba(11, 11, 11, 0.95);
        }

.logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: var(--text-color);
        }

.logo img {
            width: 120px;
            height: auto;
            transition: transform 0.3s ease;
        }

.logo:hover img {
            transform: scale(1.05);
        }

nav {
            display: none;
        }

.menu-toggle {
            display: block;
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 1.5rem;
            cursor: pointer;
        }

@media (min-width: 768px) {
            nav {
                display: flex;
                gap: 2rem;
            }

.menu-toggle {
                display: none;
            }
        }

nav a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 1rem;
            font-weight: 600;
            transition: color 0.3s ease;
            position: relative;
        }

nav a:hover {
            color: var(--text-color);
        }

nav a::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--primary-color);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

nav a:hover::after {
            transform: scaleX(1);
        }

main {
            flex: 1;
        }

.hero {
            position: relative;
            height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

.hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.hero-content {
            position: relative;
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 2rem;
            border-radius: 0.5rem;
            max-width: 100%;
            margin: 0 1rem;
        }

@media (min-width: 768px) {
            .hero-content {
                padding: 3rem;
                max-width: 600px;
                margin: 0 auto;
            }
        }

h1, h2 {
            font-family: 'Cinzel', serif;
            letter-spacing: 1px;
        }

h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
        }

@media (min-width: 768px) {
            h1 {
                font-size: 3rem;
            }
        }

h2 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
        }

@media (min-width: 768px) {
            h2 {
                font-size: 2.5rem;
            }
        }

p {
            color: var(--text-muted);
            margin-bottom: 2rem;
            font-size: 1rem;
        }

@media (min-width: 768px) {
            p {
                font-size: 1.1rem;
            }
        }

.btn-primary, .btn-secondary {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 0.25rem;
            transition: all 0.3s ease;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

@media (min-width: 768px) {
            .btn-primary, .btn-secondary {
                padding: 1rem 2rem;
                font-size: 1.1rem;
            }
        }

.btn-primary {
            background-color: var(--primary-color);
            color: var(--text-color);
            border: none;
        }

.btn-primary:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(227, 27, 35, 0.3);
        }

.btn-secondary {
            background-color: transparent;
            color: var(--text-color);
            border: 2px solid var(--text-color);
        }

.btn-secondary:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
        }

.rating {
            margin-top: 1.5rem;
            font-size: 0.9rem;
            color: var(--text-muted);
        }

@media (min-width: 768px) {
            .rating {
                font-size: 1rem;
            }
        }

.section {
            padding: 4rem 0;
        }

@media (min-width: 768px) {
            .section {
                padding: 6rem 0;
            }
        }

.section-dark {
            background-color: var(--secondary-background);
        }

.image-container {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
            overflow: hidden;
            border-radius: 0.75rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

.image-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.image-container:hover img {
            transform: scale(1.05);
        }

.video-container {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

.play-button {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.6);
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.play-button:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

.play-icon {
            color: var(--text-color);
            transition: transform 0.3s ease;
        }

.play-button:hover .play-icon {
            transform: scale(1.1);
        }

.trailer-thumbnail {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.weapons ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

.weapons li {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            color: var(--text-muted);
            font-size: 1rem;
        }

@media (min-width: 768px) {
            .weapons li {
                font-size: 1.1rem;
            }
        }

.weapons li::before {
            content: '';
            display: block;
            width: 0.5rem;
            height: 0.5rem;
            background-color: var(--primary-color);
            border-radius: 50%;
        }

footer {
            border-top: 1px solid var(--border-color);
            padding: 2rem 0;
            background-color: var(--secondary-background);
        }

@media (min-width: 768px) {
            footer {
                padding: 3rem 0;
            }
        }

.footer-top {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

@media (min-width: 768px) {
            .footer-top {
                flex-direction: row;
                justify-content: space-between;
                margin-bottom: 2rem;
            }
        }

.footer-links {
            display: flex;
            gap: 1rem;
        }

@media (min-width: 768px) {
            .footer-links {
                gap: 2rem;
            }
        }

.footer-links a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

@media (min-width: 768px) {
            .footer-links a {
                font-size: 1rem;
            }
        }

.footer-links a:hover {
            color: var(--text-color);
        }

.footer-bottom {
            text-align: center;
        }

.footer-bottom p {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

@media (min-width: 768px) {
            .footer-bottom p {
                font-size: 0.9rem;
            }
        }

.mobile-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background-color);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            z-index: 1001;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
        }

.mobile-nav.active {
            transform: translateX(0);
        }

.mobile-nav a {
            color: var(--text-color);
            text-decoration: none;
            font-size: 1.5rem;
            font-weight: 600;
        }

.close-menu {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 1.5rem;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <header>
            <a href="#" class="logo">
                <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/92554480-bde6-4f5c-9861-7022237da1ce/dfk2tos-4299426f-c415-41ad-becf-cae3763ac48d.png/v1/fill/w_1024,h_284/god_of_war_2018_logo_by_brsbr_dfk2tos-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Mjg0IiwicGF0aCI6IlwvZlwvOTI1NTQ0ODAtYmRlNi00ZjVjLTk4NjEtNzAyMjIzN2RhMWNlXC9kZmsydG9zLTQyOTk0MjZmLWM0MTUtNDFhZC1iZWNmLWNhZTM3NjNhYzQ4ZC5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.MVMNs_v2I-DeHgKSo8lUt7i3yh56On-52FOiEQ2JRh0" alt="God of War Logo">
            </a>
            <nav>
                <a href="#story">Story</a>
                <a href="#characters">Characters</a>
                <a href="#weapons">Weapons</a>
                <a href="#buy">Buy Now</a>
            </nav>
            <button class="menu-toggle" aria-label="Open menu">☰</button>
        </header>
        <div class="mobile-nav">
            <button class="close-menu" aria-label="Close menu">✕</button>
            <a href="#story">Story</a>
            <a href="#characters">Characters</a>
            <a href="#weapons">Weapons</a>
            <a href="#buy">Buy Now</a>
        </div>
        <main>
            <section class="hero">
                <video class="hero-video" autoplay loop muted playsinline>
                    <source src="https://gmedia.playstation.com/is/content/SIEPDC/global_pdc/en/games/pdps/g/go/god-of-war/pc/videos/god-of-war-pc-atreus-mouthcave-gif-02-en-12oct21.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <div class="container">
                    <div class="hero-content">
                        <h1>Begin Your Norse Journey</h1>
                        <p>Join Kratos and Atreus on an epic journey through the nine realms. Face legendary creatures and gods in their most ambitious adventure yet.</p>
                        <div class="cta">
                            <button class="btn-primary">Play Now</button>
                            <div class="rating">
                                <span>⭐ Rated 9.8/10 based on 10000+ reviews</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="section section-dark">
                <div class="container grid">
                    <div class="video-container">
                        <button class="play-button" aria-label="Play trailer">
                            <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play-icon">
                                <circle cx="12" cy="12" r="10"></circle>
                                <polygon points="10 8 16 12 10 16 10 8"></polygon>
                            </svg>
                        </button>
                        <img src="https://gmedia.playstation.com/is/image/SIEPDC/god-of-war-hub-thumbnail-2018-en-29jul21?$1600px$" alt="Game Trailer Thumbnail" class="trailer-thumbnail">
                    </div>
                    <div class="content">
                        <h2>Experience Norse Mythology Like Never Before</h2>
                        <p>Witness the evolution of Kratos as he adapts to survive in the Norse realm, protecting his son and facing the consequences of his past.</p>
                        <button class="btn-secondary">Watch Trailer</button>
                    </div>
                </div>
            </section>
            <section class="section weapons" id="weapons">
                <div class="container grid">
                    <div class="content">
                        <h2>Master Legendary Weapons</h2>
                        <ul>
                            <li>Wield the legendary Leviathan Axe</li>
                            <li>Unleash the power of the Blades of Chaos</li>
                            <li>Upgrade and customize your combat style</li>
                            <li>Master godlike abilities and runic attacks</li>
                        </ul>
                        <button class="btn-primary">Explore Arsenal</button>
                    </div>
                    <div class="image-container">
                        <img src="https://gmedia.playstation.com/is/image/SIEPDC/god-of-war-screen-06-ps4-us-12jun17?$1600px$" alt="Weapons Showcase">
                    </div>
                </div>
            </section>
            <section class="section section-dark realms">
                <div class="container grid">
                    <div class="image-container">
                        <img src="https://gmedia.playstation.com/is/image/SIEPDC/god-of-war-hub-background-block-desktop-02-en-24oct22?$2400px$" alt="Norse Realms">
                    </div>
                    <div class="content">
                        <h2>Explore the Nine Realms</h2>
                        <p>Travel through stunning landscapes and mythical realms. From the frozen peaks of Midgard to the golden halls of Asgard, each realm offers unique challenges and secrets to discover.</p>
                        <button class="btn-primary">Discover Realms</button>
                    </div>
                </div>
            </section>
        </main>
        <footer>
            <div class="container">
                <div class="footer-top">
                    <a href="#" class="logo">
                        <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/92554480-bde6-4f5c-9861-7022237da1ce/dfk2tos-4299426f-c415-41ad-becf-cae3763ac48d.png/v1/fill/w_1024,h_284/god_of_war_2018_logo_by_brsbr_dfk2tos-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Mjg0IiwicGF0aCI6IlwvZlwvOTI1NTQ0ODAtYmRlNi00ZjVjLTk4NjEtNzAyMjIzN2RhMWNlXC9kZmsydG9zLTQyOTk0MjZmLWM0MTUtNDFhZC1iZWNmLWNhZTM3NjNhYzQ4ZC5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.MVMNs_v2I-DeHgKSo8lUt7i3yh56On-52FOiEQ2JRh" alt="God of War Logo" width="100" height="auto">
                    </a>
                    <div class="footer-links">
                        <a href="#">Privacy Policy</a>
                        <a href="#">Terms of Service</a>
                    </div>
                </div>
                <div class="footer-bottom">
                    <p>© 2024 Santa Monica Studio. All rights reserved.</p>
                </div>
            </div>
        </footer>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const header = document.querySelector('header');
            const playButton = document.querySelector('.play-button');
            const videoContainer = document.querySelector('.video-container');
            const menuToggle = document.querySelector('.menu-toggle');
            const mobileNav = document.querySelector('.mobile-nav');
            const closeMenu = document.querySelector('.close-menu');
            const mobileNavLinks = document.querySelectorAll('.mobile-nav a');

// Header scroll effect
            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    header.classList.add('scrolled');
                } else {
                    header.classList.remove('scrolled');
                }
            });

playButton.addEventListener('click', () => {
                // This is where you would typically initialize a video player or open a modal with the trailer
                alert('Play trailer functionality would be implemented here.');
            });

// Mobile menu functionality
            menuToggle.addEventListener('click', () => {
                mobileNav.classList.add('active');
            });

closeMenu.addEventListener('click', () => {
                mobileNav.classList.remove('active');
            });

mobileNavLinks.forEach(link => {
                link.addEventListener('click', () => {
                    mobileNav.classList.remove('active');
                });
            });

// Smooth scrolling for navigation links
            const navLinks = document.querySelectorAll('nav a, .mobile-nav a');

navLinks.forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    const targetId = link.getAttribute('href').substring(1);
                    const targetElement = document.getElementById(targetId);
                    
                    if (targetElement) {
                        targetElement.scrollIntoView({
                            behavior: 'smooth'
                        });
                    }
                });
            });

// Intersection Observer for fade-in effect
            const fadeElems = document.querySelectorAll('.section');

fadeElems.forEach(elem => {
                elem.style.opacity = 0;
                elem.style.transform = 'translateY(20px)';
                elem.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                fadeObserver.observe(elem);
            });
        });
    </script>
</body>
</html>

CSS