HTML and CSS code with improved structure, consistency, and accessibility:
Updated index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Design - Pricing Plans</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery, Popper.js, and Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container my-5">
<!-- Section: Content -->
<section class="text-center dark-grey-text">
<!-- Section heading -->
<h3 class="font-weight-bold pb-2 mb-4">Our Pricing Plans</h3>
<!-- Section description -->
<p class="text-muted w-responsive mx-auto mb-5">
Discover the best plans for your needs with our flexible pricing options. Choose the right plan today.
</p>
<!-- Grid row for pricing plans -->
<div class="row">
<!-- Basic Plan -->
<div class="col-lg-4 col-md-12 mb-4">
<div class="card">
<div class="card-body">
<h5 class="mb-4">Basic Plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fas fa-home light-blue-text"></i>
</div>
</div>
<h2 class="font-weight-bold my-4">59$</h2>
<p class="grey-text">A basic plan for individuals or small teams with essential features.</p>
<button class="btn btn-light-blue btn-rounded">Buy Now</button>
</div>
</div>
</div>
<!-- Premium Plan -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="card purple-gradient">
<div class="card-body white-text">
<h5 class="mb-4">Premium Plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fas fa-users"></i>
</div>
</div>
<h2 class="font-weight-bold my-4 colorwr">79$</h2>
<p>For teams and growing businesses with advanced features and priority support.</p>
<button class="btn btn-color">Buy Now</button>
</div>
</div>
</div>
<!-- Advanced Plan -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="mb-4">Advanced Plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="far fa-chart-bar light-blue-text"></i>
</div>
</div>
<h2 class="font-weight-bold my-4">99$</h2>
<p class="grey-text">For large teams and enterprises, with full access to all features.</p>
<button class="btn btn-light-blue btn-rounded">Buy Now</button>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
Updated styles.css:
/* Basic Reset */
*,
::after,
::before {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
/* Card Styles */
.card {
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
border-radius: .25rem;
display: flex;
flex-direction: column;
min-width: 0;
background-color: #fff;
}
.card-body {
padding: 1.25rem;
}
/* Card Circle (Icon Area) */
.card .card-circle {
width: 7.5rem;
height: 7.5rem;
border: 2px solid #e0e0e0;
border-radius: 50%;
}
.card .card-circle i {
font-size: 4rem;
color: white;
display: inline-block;
line-height: 7.5rem; /* Center the icon vertically */
}
/* Button Styles */
.btn-light-blue {
color: #fff !important;
background-color: #9cc1ff !important;
padding: 8px 15px;
border-radius: 3.125rem;
font-weight: 900;
}
.btn-light-blue:hover {
background-color: #015cfa !important;
}
.btn-color {
color: white !important;
background-color: #eb9718 !important;
padding: 8px 15px;
border-radius: 3.23rem;
font-weight: 900;
}
.btn-color:hover {
background-color: #8518eb !important;
}
/* Purple Gradient */
.purple-gradient {
background: linear-gradient(40deg, #ff6ec4, #7873f5) !important;
}
/* Text Colors */
.light-blue-text {
color: #03a9f4 !important;
}
.colorwr {
color: white;
}
.grey-text {
color: #6c757d;
}
.text-center {
text-align: center;
}
/* Grid Layout for Cards */
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col-lg-4, .col-md-6 {
margin-bottom: 1.5rem;
width: 100%;
max-width: 33.333333%; /* 3 columns in larger screens */
}
@media (max-width: 992px) {
.col-lg-4 {
max-width: 100%;
}
}
/* Responsive Typography */
h3.font-weight-bold {
font-size: 1.8rem;
}
h2.font-weight-bold {
font-size: 2.5rem;
}
/* Spacing */
.mb-4, .my-4 {
margin-bottom: 1.5rem !important;
}
/* Centering and Styling of Section */
.dark-grey-text {
color: #343a40;
}
.w-responsive {
width: 90%;
margin: 0 auto;
}
Changes Made:
-
Button Conversion: I changed
<a>tags to<button>for the "Buy now" links to improve accessibility. -
Icon Centering: The Font Awesome icons are now centered within their circular divs by adjusting the line-height.
-
Styling Consistency: Applied consistent margins, padding, and font sizing to improve layout consistency.
-
Responsive Layout: Ensured that the cards stacked properly on smaller screens and maintained their size on larger ones using flexbox.
-
SEO and Readability: Updated the section description text for better clarity.
