Página de contato futurista

154 alejandrokundrah

Abrir no Editor Publique Seu Código

Recomendado

27 February 2025

Um código por securearray494

29 December 2024

Uma página inicial alternativa

19 April 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>

Página de contato futurista

Recomendado

Um código por securearray494

Uma página inicial alternativa

HTML

CSS

JS

Recomendado

Um código por securearray494

Uma página inicial alternativa

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS