Página de contacto futurista

Abrir en el editor Video Publica tu código

Recomendado

22 June 2025

Ejemplo de animación de capa CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us | Future Interface</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #00f7ff;
            --secondary: #ff00e6;
            --dark: #0a0a1a;
            --light: #e0e0ff;
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: 'Rajdhani', sans-serif;
            background-color: var(--dark);
            color: var(--light);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow-x: hidden;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(0, 247, 255, 0.1) 0%, transparent 25%),
                radial-gradient(circle at 80% 70%, rgba(255, 0, 230, 0.1) 0%, transparent 25%);
        }
        
        .container {
            position: relative;
            width: 100%;
            max-width: 800px;
            padding: 40px;
            z-index: 1;
        }
        
        .contact-card {
            background: rgba(10, 10, 26, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 
                0 0 20px rgba(0, 247, 255, 0.3),
                0 0 40px rgba(255, 0, 230, 0.2);
            border: 1px solid rgba(0, 247, 255, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        .contact-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                transparent,
                transparent,
                transparent,
                var(--primary),
                transparent,
                transparent,
                transparent
            );
            transform: rotate(30deg);
            animation: shine 6s infinite linear;
            opacity: 0.3;
        }
        
        @keyframes shine {
            0% { transform: translateX(-100%) rotate(30deg); }
            100% { transform: translateX(100%) rotate(30deg); }
        }
        
        h1 {
            font-family: 'Orbitron', sans-serif;
            color: var(--primary);
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5rem;
            text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
            letter-spacing: 3px;
        }
        
        .form-group {
            margin-bottom: 30px;
            position: relative;
        }
        
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: 500;
            color: var(--primary);
            font-size: 1.1rem;
        }
        
        input, textarea {
            width: 100%;
            padding: 15px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(0, 247, 255, 0.3);
            border-radius: 8px;
            color: var(--light);
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        input:focus, textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 15px rgba(0, 247, 255, 0.5);
            background: rgba(0, 0, 0, 0.5);
        }
        
        textarea {
            min-height: 150px;
            resize: vertical;
        }
        
        .submit-btn {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: var(--dark);
            border: none;
            padding: 15px 30px;
            font-size: 1.1rem;
            font-weight: bold;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: block;
            margin: 40px auto 0;
            font-family: 'Orbitron', sans-serif;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, var(--secondary), var(--primary));
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }
        
        .submit-btn:hover::before {
            opacity: 1;
        }
        
        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 5px 15px rgba(0, 247, 255, 0.4),
                0 5px 30px rgba(255, 0, 230, 0.3);
        }
        
        .submit-btn:active {
            transform: translateY(0);
        }
        
        .floating-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        
        .particle {
            position: absolute;
            background: rgba(0, 247, 255, 0.5);
            border-radius: 50%;
            animation: float linear infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            .contact-card {
                padding: 30px;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="floating-particles" id="particles"></div>
        <div class="contact-card">
            <h1>CONTACT US</h1>
            <form action="/submit-form" method="POST">
                <div class="form-group">
                    <label for="name">YOUR NAME</label>
                    <input type="text" id="name" name="name" required>
                </div>
                
                <div class="form-group">
                    <label for="email">EMAIL ADDRESS</label>
                    <input type="email" id="email" name="email" required>
                </div>
                
                <div class="form-group">
                    <label for="subject">SUBJECT</label>
                    <input type="text" id="subject" name="subject">
                </div>
                
                <div class="form-group">
                    <label for="message">MESSAGE</label>
                    <input id="message" name="message" required />
                </div>
                
                <button type="submit" class="submit-btn">SEND TRANSMISSION</button>
            </form>
        </div>
    </div>

Página de contacto futurista

Recomendado

el enigma del tiempo

Universo geocéntrico

Ejemplo de animación de capa CSS

HTML

CSS

JS

Recomendado

el enigma del tiempo

Universo geocéntrico

Ejemplo de animación de capa CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS