लैंडिंग पेज - युद्ध के देवता

613 Andev.web

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

23 August 2024

रिएक्ट नेटफ्लिक्स लैंडिंग पेज

19 January 2024

इनपुट वैलिडेशन के साथ लॉगिन फॉर्म

28 November 2024

स्लाइडिंग मेनू के साथ शुद्ध क्षैतिज स्लाइडर

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>

लैंडिंग पेज - युद्ध के देवता

अनुशंसित

रिएक्ट नेटफ्लिक्स लैंडिंग पेज

इनपुट वैलिडेशन के साथ लॉगिन फॉर्म

स्लाइडिंग मेनू के साथ शुद्ध क्षैतिज स्लाइडर

HTML

CSS

JS

अनुशंसित

रिएक्ट नेटफ्लिक्स लैंडिंग पेज

इनपुट वैलिडेशन के साथ लॉगिन फॉर्म

स्लाइडिंग मेनू के साथ शुद्ध क्षैतिज स्लाइडर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS