Codingnic

Objective:

To design a modern, responsive pricing page using HTML and CSS, showcasing different pricing plans with distinctive features. Each plan will have a visually appealing layout with hover animations, highlighting important features and calls to action.

Requirements:

Knowledge of HTML and CSS.
Familiarity with Flexbox or Grid for layout management.
Understanding of CSS transitions/animations.
Optional: JavaScript (for interactivity like plan selection, toggling yearly/monthly prices).

Steps:

Create HTML Structure:
- Include a header section with a title and a brief description.
- Define a grid or flex container to hold multiple pricing cards.
- Each card will have a title, pricing information, a list of features, and a button for users to select the plan.
Add Styling with CSS:
- Use CSS Flexbox or Grid for layout management.
- Design each pricing card with a different background color and typography.
- Use CSS transitions for hover effects (e.g., change background color, add shadow).
- Ensure the layout is fully responsive.
Enhance with Hover Effects:
- Add hover states to the pricing cards to change their appearance when hovered over.
- Highlight the call-to-action buttons on hover for better user engagement.
Make It Responsive:
- Use media queries to ensure that the pricing page looks good on various screen sizes, including mobile devices.
Optional:
- Add a toggle switch for "Monthly" and "Yearly" pricing using JavaScript.

Resources:

HTML & CSS documentation: MDN Web Docs
CSS Flexbox: CSS Tricks Flexbox Guide
Icons: Font Awesome
Color palettes: Coolors
Background images: Unsplash

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Plans</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="pricing-section">
    <h1>Our Pricing Plans</h1>
    <p>Choose the plan that suits your needs</p>
    
    <div class="pricing-cards">
      <!-- Basic Plan -->
      <div class="card">
        <h2>Basic Plan</h2>
        <p class="price">$9 <span>/ month</span></p>
        <ul>
          <li>10 GB Storage</li>
          <li>Basic Support</li>
          <li>Email Integration</li>
        </ul>
        <button>Choose Plan</button>
      </div>

      <!-- Standard Plan -->
      <div class="card popular">
        <h2>Standard Plan</h2>
        <p class="price">$19 <span>/ month</span></p>
        <ul>
          <li>50 GB Storage</li>
          <li>Priority Support</li>
          <li>Email + Chat Integration</li>
        </ul>
        <button>Choose Plan</button>
      </div>

      <!-- Premium Plan -->
      <div class="card">
        <h2>Premium Plan</h2>
        <p class="price">$49 <span>/ month</span></p>
        <ul>
          <li>Unlimited Storage</li>
          <li>24/7 Support</li>
          <li>All Integrations</li>
        </ul>
        <button>Choose Plan</button>
      </div>
    </div>
  </section>

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

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
  padding: 20px;
}

.pricing-section {
  text-align: center;
  padding: 50px 0;
}

.pricing-section h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.pricing-section p {
  font-size: 18px;
  color: #777;
  margin-bottom: 40px;
}

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

.card {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card h2 {
  font-size: 24px;
  margin-bottom: 15px;
}

.card .price {
  font-size: 30px;
  margin: 20px 0;
}

.card .price span {
  font-size: 18px;
  color: #888;
}

.card ul {
  list-style: none;
  margin-bottom: 20px;
}

.card ul li {
  margin: 10px 0;
  font-size: 16px;
}

.card button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.card button:hover {
  background-color: #0056b3;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Highlight popular plan */
.popular {
  border: 2px solid #007bff;
}