Página de inicio - Logitech

Abrir en el editor Video Publica tu código

Recomendado

14 October 2023

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

Página de inicio - Logitech

Recomendado

Juego de Memoria

Un código de zegarekdawida

solicitud de citas

HTML

CSS

JS

Recomendado

Juego de Memoria

Un código de zegarekdawida

solicitud de citas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS