formulaire d'inscription à la newsletter

1168 Tatsoya

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

14 January 2026

Clone du jeu Geometry Dash en JavaScript

9 September 2024

Générateur de mot de passe

14 September 2024

Interaction avec les affiches de films

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsletter Signup</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
        }

.container {
            width: 100%;
            max-width: 450px;
        }

.card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 40px;
            text-align: center;
        }

.logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px;
            background: #6b46c1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 24px;
        }

h1 {
            color: #333;
            margin-bottom: 12px;
            font-size: 24px;
        }

.subheading {
            color: #666;
            margin-bottom: 32px;
            font-size: 16px;
            line-height: 1.5;
        }

.social-signup {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 24px;
        }

.social-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2e8f0;
            background: white;
            color: #4a5568;
            cursor: pointer;
            transition: all 0.2s ease;
        }

.social-btn:hover {
            background: #f7fafc;
            transform: translateY(-2px);
        }

.divider {
            display: flex;
            align-items: center;
            margin: 24px 0;
            color: #a0aec0;
        }

.divider::before,
        .divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #e2e8f0;
        }

.divider span {
            padding: 0 16px;
            font-size: 14px;
        }

.form-group {
            margin-bottom: 24px;
        }

input {
            width: 100%;
            padding: 16px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.2s;
        }

input:focus {
            outline: none;
            border-color: #6b46c1;
        }

.cta-button {
            width: 100%;
            padding: 16px;
            background: #6b46c1;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

.cta-button:hover {
            background: #553c9a;
            transform: translateY(-2px);
        }

.links {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-top: 24px;
            font-size: 14px;
        }

.links a {
            color: #6b46c1;
            text-decoration: none;
        }

.links a:hover {
            text-decoration: underline;
        }

.footer {
            text-align: center;
            margin-top: 24px;
            color: #718096;
            font-size: 14px;
        }

.success-message {
            display: none;
            color: #38a169;
            margin-top: 16px;
            font-weight: 500;
        }

.error-message {
            display: none;
            color: #e53e3e;
            margin-top: 8px;
            font-size: 14px;
            text-align: left;
        }

@media (max-width: 480px) {
            .card {
                padding: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="logo">M</div>
            <h1>Subscribe to Our Newsletter</h1>
            <p class="subheading">Get weekly insights, tips, and exclusive content directly to your inbox.</p>
            
            <div class="social-signup">
                <button class="social-btn">
                    <i class="fab fa-google"></i>
                </button>
                <button class="social-btn">
                    <i class="fab fa-facebook-f"></i>
                </button>
                <button class="social-btn">
                    <i class="fab fa-twitter"></i>
                </button>
            </div>
            
            <div class="divider">
                <span>or sign up with email</span>
            </div>
            
            <form id="newsletter-form">
                <div class="form-group">
                    <input type="email" id="email" placeholder="Your email address" required>
                    <div class="error-message" id="email-error">Please enter a valid email address</div>
                </div>
                
                <button type="submit" class="cta-button">Subscribe Now</button>
                <div class="success-message" id="success-message">Thanks for subscribing!</div>
            </form>
            
            <div class="links">
                <a href="#">Terms</a>
                <a href="#">Privacy</a>
                <a href="#">Help</a>
            </div>
        </div>
        
        <div class="footer">
            <p>We respect your privacy. Unsubscribe at any time.</p>
        </div>
    </div>

formulaire d'inscription à la newsletter

Recommandé

Clone du jeu Geometry Dash en JavaScript

Générateur de mot de passe

Interaction avec les affiches de films

HTML

CSS

JS

Recommandé

Clone du jeu Geometry Dash en JavaScript

Générateur de mot de passe

Interaction avec les affiches de films

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS