Constantcc607 द्वारा एक कोड

अनुशंसित

3 February 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>

Constantcc607 द्वारा एक कोड

अनुशंसित

iyedgoucha84 द्वारा एक कोड

मेटे का एक कोड

सीएसएस के साथ एक द्विघात लूप

HTML

CSS

JS

अनुशंसित

iyedgoucha84 द्वारा एक कोड

मेटे का एक कोड

सीएसएस के साथ एक द्विघात लूप

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS