Um código por constantcc607

Abrir no Editor Publique Seu Código

Recomendado

17 July 2025

Código de barras de navegação HTML SVG

26 January 2025

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

Um código por constantcc607

Recomendado

Código de barras de navegação HTML SVG

Um código por alqsdeus

Código de Mete

HTML

CSS

JS

Recomendado

Código de barras de navegação HTML SVG

Um código por alqsdeus

Código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS