Codingnic

Objective

Create a responsive pricing table for a fictional product or service with hover

Requirements

Design a pricing table with at least 3 different price tiers.
Make the table responsive, stacking the tiers vertically on mobile devices.
Implement hover effects to highlight each
Use CSS to style a "recommended" or "most popular" tier.

Steps

Create the HTML structure for the pricing table.
Style the table using CSS, focusing on a clean, modern design.
Implement hover effects for each pricing tier.
Use CSS to highlight the recommended tier.
Add media queries to make the table responsive.

Bonus

Add a toggle to switch between monthly and annual pricing.
Implement a subtle animation when the page loads.

Resources

Solution

Here's a step-by-step solution to create a responsive pricing table with hover effects:

HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Pricing Table</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="pricing-table">
        <div class="pricing-tier">
            <h2>Basic</h2>
            <p class="price">$9.99/mo</p>
            <ul>
                <li>Feature 1</li>
                <li>Feature 2</li>
                <li>Feature 3</li>
            </ul>
            <button>Choose Plan</button>
        </div>
        <div class="pricing-tier recommended">
            <h2>Pro</h2>
            <p class="price">$19.99/mo</p>
            <ul>
                <li>All Basic Features</li>
                <li>Feature 4</li>
                <li>Feature 5</li>
                <li>Feature 6</li>
            </ul>
            <button>Choose Plan</button>
        </div>
        <div class="pricing-tier">
            <h2>Enterprise</h2>
            <p class="price">$29.99/mo</p>
            <ul>
                <li>All Pro Features</li>
                <li>Feature 7</li>
                <li>Feature 8</li>
                <li>Feature 9</li>
            </ul>
            <button>Choose Plan</button>
        </div>
    </div>
</body>
</html>

CSS Styling (styles.css):

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

.pricing-table {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.pricing-tier {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 300px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-tier:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.pricing-tier h2 {
    color: #333;
    margin-top: 0;
}

.price {
    font-size: 24px;
    font-weight: bold;
    color: #0066cc;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 10px 0;
}

button {
    background-color: #0066cc;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0052a3;
}

.recommended {
    border: 2px solid #0066cc;
    position: relative;
}

.recommended::after {
    content: 'Recommended';
    position: absolute;
    top: -12px;
    right: 10px;
    background-color: #0066cc;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

@media (max-width: 768px) {
    .pricing-tier {
        width: 100%;
    }
}

This solution creates a responsive pricing table with three tiers. The table uses Flexbox for layout and includes hover effects on each tier. The "Pro" tier is highlighted as the recommended option. On mobile devices, the tiers stack vertically.

To add the bonus features:

For a monthly/annual toggle, you would add a toggle switch in the HTML and use JavaScript to update the prices and save the user's preference.
For a loading animation, you could add a CSS animation to fade in the pricing tiers when the page loads:

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.pricing-tier {
    /* ... existing styles ... */
    animation: fadeIn 0.5s ease forwards;
}

.pricing-tier:nth-child(1) { animation-delay: 0.1s; }
.pricing-tier:nth-child(2) { animation-delay: 0.2s; }
.pricing-tier:nth-child(3) { animation-delay: 0.3s; }