Página de inicio - Logitech

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

21 January 2024

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

Código de Icono Social en 3D

Un código de mikey

Un código de adwq

HTML

CSS

JS

Recomendado

Código de Icono Social en 3D

Un código de mikey

Un código de adwq

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS