Coupon Card Design Using HTML and CSS

on
Coupon Card Design Using HTML and CSS

Coupon Card Design Using HTML and CSS

Create a modern, responsive coupon card using HTML and CSS, featuring a visually appealing design with discount details, a coupon code, and an expiry date. This static implementation focuses on clean design, accessibility, and maintainable code structure, ideal for e-commerce or promotional websites. JavaScript can be added for interactivity (e.g., copying the coupon code).

Special Offer

20% OFF
SAVE20

Use this coupon at checkout to save on your next purchase.

Expires: May 31, 2025

Prerequisites

  • Basic HTML and CSS knowledge
  • A code editor (e.g., VS Code)

Part 1: Coupon Card Design

Step 1: HTML Structure (index.html)

Create a semantic HTML structure for the coupon card with a header for the title, discount, and code, and a details section for additional information.

<div class="coupon-card" role="region" aria-label="Coupon: 20% off">
    <div class="coupon-header">
        <h2 class="coupon-title">Special Offer</h2>
        <div class="coupon-discount">20% OFF</div>
        <div class="coupon-code">SAVE20</div>
    </div>
    <div class="coupon-details">
        <p>Use this coupon at checkout to save on your next purchase.</p>
        <p class="coupon-expiry">Expires: May 31, 2025</p>
    </div>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the coupon card with vibrant colors, dashed borders, and responsive design.

:root {
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --white: #ffffff;
    --primary-600: #2563eb;
    --primary-500: #3b82f6;
    --accent-500: #f59e0b;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --transition: 0.3s ease;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.coupon-card {
    max-width: 350px;
    width: 100%;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    position: relative;
    border: 2px dashed var(--accent-500);
    transition: transform var(--transition), box-shadow var(--transition);
}

.coupon-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.coupon-header {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.coupon-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.coupon-discount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-500);
    margin: var(--spacing-sm) 0;
}

.coupon-code {
    display: inline-block;
    background: var(--primary-500);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-md);
}

.coupon-details {
    font-size: 0.9375rem;
    color: var(--gray-700);
    text-align: center;
}

.coupon-details p {
    margin: var(--spacing-xs) 0;
}

.coupon-expiry {
    font-weight: 500;
    color: var(--accent-500);
}

@media (max-width: 640px) {
    .coupon-card {
        max-width: 300px;
        padding: var(--spacing-md);
    }

    .coupon-title {
        font-size: 1.25rem;
    }

    .coupon-discount {
        font-size: 1.75rem;
    }

    .coupon-code {
        font-size: 0.875rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .coupon-details {
        font-size: 0.875rem;
    }
}

Explanation

  • Layout: The coupon card uses a centered layout with a header (title, discount, code) and a details section (description, expiry). The card is styled with a white background, shadow, and dashed border.
  • Styling: A dashed --accent-500 border gives a coupon-like appearance. The discount uses --primary-500 for emphasis, and the code is highlighted in a blue badge. The expiry date uses --accent-500 for contrast.
  • Visual Feedback: Hovering the card lifts it (translateY(-4px)) with a stronger shadow, enhancing interactivity.
  • Responsiveness: A media query (@media (max-width: 640px)) reduces the card size, padding, and font sizes for mobile usability.
  • Accessibility: role="region" and aria-label="Coupon: 20% off" ensure screen readers describe the card’s purpose. High contrast ratios and clear typography improve readability.
UX Tip: Ensure the coupon card is visually engaging with vibrant colors and clear text. Use ARIA attributes for accessibility. Add JavaScript in production for interactivity, such as copying the coupon code to the clipboard or revealing the code on click.

Accessibility Features

  • Use role="region" and aria-label for semantic structure
  • Ensure high contrast ratios for text and accents (4.5:1 minimum)
  • Use clear, readable typography and sufficient spacing

Golden Rules

  • Use CSS variables for consistent theming
  • Implement hover effects for visual feedback
  • Ensure accessibility with ARIA attributes
  • Optimize for mobile with responsive design

Conclusion

A professional coupon card should maintain visual clarity, provide engaging styling, remain responsive, and follow accessibility guidelines. This solution uses HTML and CSS for a polished static coupon card, showcasing a 20% off offer with a coupon code and expiry date. Experiment with colors, borders, or add JavaScript for interactivity like copying the code or dynamic offers. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!

Location: Pune, Maharashtra, India

Comments

Post a Comment