Landing Page - Logitech

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech Product Landing</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        
        :root {
            --primary-color: #00B0FF; /* Azul Logitech */
            --bg-color: #121212;     /* Negro de fondo */
            --text-color: #FFFFFF;   /* Blanco para texto */
            --grid-size: 30px;
        }

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

body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

.grid-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
            background-size: var(--grid-size) var(--grid-size);
            z-index: -1;
            animation: gridMove 20s linear infinite;
        }

@keyframes gridMove {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(var(--grid-size), var(--grid-size));
            }
        }

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

.hero {
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4rem;
            padding: 2rem;
        }

.hero-content {
            flex: 1;
            animation: slideIn 1s ease-out;
        }

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    filter: drop-shadow(10px 10px 20px rgba(0, 176, 255, 0.5));
}

@keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

.pixel-title {
            font-family: 'Press Start 2P', cursive;
            color: var(--primary-color);
            font-size: clamp(2rem, 4vw, 4rem);
            line-height: 1.4;
            margin-bottom: 2rem;
            animation: glitch 1s infinite;
        }

@keyframes glitch {
            0% {
                text-shadow: 2px 0 0 red, -2px 0 0 blue;
            }
            50% {
                text-shadow: -2px 0 0 red, 2px 0 0 blue;
            }
            100% {
                text-shadow: 2px 0 0 red, -2px 0 0 blue;
            }
        }

.description {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            max-width: 600px;
        }

.cta-button {
            display: inline-block;
            background-color: var(--primary-color);
            color: var(--text-color);
            padding: 1rem 2rem;
            text-decoration: none;
            border-radius: 5px;
            font-family: 'Press Start 2P', cursive;
            font-size: 1rem;
            transition: transform 0.3s ease;
        }

.cta-button:hover {
            transform: translateY(-3px);
        }

@media (max-width: 768px) {
            .hero {
                flex-direction: column;
                text-align: center;
                padding: 1rem;
            }

.hero-image {
                order: -1;
                margin-bottom: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="grid-background"></div>
    <main class="container">
        <section class="hero">
            <div class="hero-content">
                <h1 class="pixel-title">Logitech G502 HERO</h1>
                <p class="description">
                   Conquer every battle with the Logitech G502 HERO. Precision, speed and an ergonomic design designed for high-level players.
                </p>
                <a href="#" class="cta-button">buy now!</a>
            </div>
            <div class="hero-image">
                <img src="https://symcomputadores.com/wp-content/uploads/2023/03/LOGITECH-G502-HERO-1-1.png" alt="Logitech G502 HERO" width="400" height="400">
            </div>
        </section>
    </main>
</body>
</html>

Landing Page - Logitech

Recommended

3D Login page

About Page

Embed External Page in Iframe

HTML

CSS

JS

Recommended

3D Login page

About Page

Embed External Page in Iframe

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS