Página de inicio - Logitech

Abrir en el editor Publica tu código

Recomendado

28 July 2023

Formulario de inicio de sesión cómico

HTML

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

Barra de búsqueda con CSS

Botón de descarga animado

Formulario de inicio de sesión cómico

HTML

CSS

JS

Recomendado

Barra de búsqueda con CSS

Botón de descarga animado

Formulario de inicio de sesión cómico

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS