Creating a responsive pricing plan with HTML, CSS, and JavaScript

In today's business landscape, pricing plans are an essential part of any website. A well-designed pricing plan can make a huge impact on a customer's decision to purchase a product or service. However, it's not just the pricing that matters. It's also important to make sure that your pricing plan is responsive, meaning it looks good on all devices, including desktops, laptops, tablets, and smartphones. In this blog post, we will show you how to create a responsive pricing plan using HTML, CSS, and JavaScript.

HTML

The first step in creating a responsive pricing plan is to create the HTML structure. In this example, we will use a simple structure that includes a container div and three pricing plan divs, each containing a title, price, description, and button. Here's the HTML code:

<div class="pricing-plans">
  <div class="pricing-plan">
    <h2>Basic</h2>
    <h3>$19.99/month</h3>
    <p>5 GB Storage</p>
    <p>10 Email Accounts</p>
    <p>24/7 Support</p>
    <button>Select Plan</button>
  </div>
  
  <div class="pricing-plan">
    <h2>Standard</h2>
    <h3>$29.99/month</h3>
    <p>10 GB Storage</p>
    <p>20 Email Accounts</p>
    <p>24/7 Support</p>
    <button>Select Plan</button>
  </div>
  
  <div class="pricing-plan">
    <h2>Premium</h2>
    <h3>$39.99/month</h3>
    <p>20 GB Storage</p>
    <p>30 Email Accounts</p>
    <p>24/7 Support</p>
    <button>Select Plan</button>
  </div>
</div>

The container div has a class of "pricing-plans", and each pricing plan div has a class of "pricing-plan". We also included the necessary content for each pricing plan, including the title, price, description, and button.

CSS

Once we have the HTML structure in place, we can move on to the CSS. We'll start by styling the container div:

.pricing-plans {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

Here, we're using flexbox to create a row of pricing plan divs. We're also setting the maximum width to 1200px and centering the container using margin: 0 auto. Next, we'll style the pricing plan divs:

.pricing-plan {
  width: 30%;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f5f5f5;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

We're using a width of 30% for each pricing plan div to create three columns on desktop devices. We're also adding a margin-bottom of 30px to create space between the pricing plan divs. We're setting the background-color to #f5f5f5 to create a light gray background and using box-shadow to create a subtle shadow effect. Finally, we're centering the content using text-align: center.

Next, we'll add some styles for the title, price, and description:

.pricing-plan h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.pricing-plan h3 {
  font-size: 24px;
  color: #007aff;
  margin-bottom: 20px;
}

.pricing-plan p {
  font-size: 16px;
  margin-bottom: 10px;
}

Here, we're using font sizes to create hierarchy between the title, price, and description. We're also using a blue color (#007aff) for the price to make it stand out. Finally, we're adding some margin-bottom to create space between the elements.

Lastly, we'll add some styles for the button:

.pricing-plan button {
  background-color: #007aff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pricing-plan button:hover {
  background-color: #0055ff;
}

Here, we're using a blue background color (#007aff) for the button and white text color. We're also using padding, border-radius, and font-size to make the button look more clickable. Finally, we're using cursor: pointer to indicate that the button is clickable, and we're adding a hover effect that changes the background color to a darker blue (#0055ff).

JavaScript

Now that we have our HTML and CSS in place, we can add some interactivity using JavaScript. In this example, we'll add a click event listener to each button that logs the selected pricing plan to the console:

const pricingPlans = document.querySelectorAll('.pricing-plan');

pricingPlans.forEach(pricingPlan => {
  const button = pricingPlan.querySelector('button');
  const title = pricingPlan.querySelector('h2').textContent;
  const price = pricingPlan.querySelector('h3').textContent;

  button.addEventListener('click', () => {
    console.log(`Selected plan: ${title} (${price})`);
  });
});

Here, we're using querySelectorAll to select all pricing plan divs and forEach to loop through them. For each pricing plan div, we're selecting the button and the title and price elements using querySelector. We're then adding a click event listener to the button that logs the selected plan to the console using template literals.

Conclusion

In this blog post, we showed you how to create a responsive pricing plan using HTML, CSS, and JavaScript. By using flexbox and media queries, we created a pricing plan that looks good on all devices. We also added some interactivity using JavaScript, allowing users to select a pricing plan and see the selected plan in the console. With these techniques, you can create a pricing plan that not only looks good but also helps drive sales for your business.