Un código de constantcc607

687 constantcc607

Abrir en el editor Publica tu código

Recomendado

19 May 2025

Editor de imágenes de medios tonos

16 September 2024

Construyendo un horizonte

1 August 2025

Presentación de diapositivas (moderna)

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>

Un código de constantcc607

Recomendado

Editor de imágenes de medios tonos

Construyendo un horizonte

Presentación de diapositivas (moderna)

HTML

CSS

JS

Recomendado

Editor de imágenes de medios tonos

Construyendo un horizonte

Presentación de diapositivas (moderna)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS