index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Pricing Table</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="toggle-theme">Modo Claro</button>

    <div class="pricing-container">
        <div class="pricing-plan">
            <div class="plan-title">Basic</div>
            <div class="plan-price">$9.99/month</div>
            <ul class="plan-features">
                <li>✅ 10GB Storage</li>
                <li>✅ 1 User</li>
                <li>🚫 Support</li>
            </ul>
            <button class="plan-button">Sign Up</button>
        </div>
        <div class="pricing-plan">
            <div class="plan-title">Standard</div>
            <div class="plan-price">$19.99/month</div>
            <ul class="plan-features">
                <li>✅ 50GB Storage</li>
                <li>✅ 5 Users</li>
                <li>✅ Phone & Email Support</li>
            </ul>
            <button class="plan-button">Sign Up</button>
        </div>
        <div class="pricing-plan">
            <div class="plan-title">Premium</div>
            <div class="plan-price">$49.99/month</div>
            <ul class="plan-features">
                <li>✅ 100GB Storage</li>
                <li>✅ 10 Users</li>
                <li>✅ 24/7 Support</li>
            </ul>
            <button class="plan-button">Sign Up</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>