Pagina dei contatti futuristica

1071 alejandrokundrah

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

24 July 2025

Frammento di animazione di caricamento CSS

30 October 2025

Codice HTML dell'animazione CSS Eye Loader

28 August 2024

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>

Consigliato

Frammento di animazione di caricamento CSS

Codice HTML dell'animazione CSS Eye Loader

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS