Newsletter Signup Form

<!DOCTYPE html>
<title>My Example</title>

/* The form itself, using flexbox for alignment */
.newsletter-form {
    display: flex;
    justify-content: center;
}
.newsletter-form .form-group {
    flex-grow: 1; /* Allows the input to take up available space */
}

/* Style for the "screen-reader only" class to hide labels visually */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Input field styling */
.newsletter-form input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #7f8c8d;
    background-color: #34495e;
    color: white;
    font-size: 1rem;
    border-radius: 4px 0 0 4px; /* Round left corners */
    box-sizing: border-box;
}
.newsletter-form input[type="email"]::placeholder {
    color: #95a5a6;
}
.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
    z-index: 10;
    position: relative;
}

/* Submit button styling */
.newsletter-form .submit-btn {
    padding: 12px 20px;
    border: none;
    background-color: #3498db;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0 4px 4px 0; /* Round right corners */
    margin-left: -1px; /* Overlaps the input slightly for a joined look */
    transition: background-color 0.2s;
}
.newsletter-form .submit-btn:hover {
    background-color: #2980b9;
}
</style>

<div class="newsletter-form-container">
    <h3>Subscribe to our Newsletter</h3>
    <p>Get the latest news and updates delivered to your inbox.</p>
    
    <form class="newsletter-form" action="#" method="post">
        <div class="form-group">
            <label for="newsletter-email" class="sr-only">Email address</label>
            <input type="email" id="newsletter-email" name="email" placeholder="Enter your email" required>
        </div>
        <button type="submit" class="submit-btn">Subscribe</button>
    </form>
</div>