<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
gap: 20px;
font-family: Arial, sans-serif;
background: #f9f9f9;
padding: 40px;
}
.plan {
background: white;
padding: 20px;
border-radius: 12px;
width: 200px;
text-align: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.plan h3 {
margin-bottom: 10px;
}
.plan p {
color: gray;
}
.plan button {
margin-top: 15px;
background: green;
color: white;
border: none;
padding: 10px;
border-radius: 8px;
cursor: pointer;
}
.plan button:hover {
background: darkgreen;
}
</style>
</head>
<body>
<div class="plan">
<h3>Basic</h3>
<p>$9/month</p>
<button>Buy</button>
</div>
<div class="plan">
<h3>Pro</h3>
<p>$19/month</p>
<button>Buy</button>
</div>
<div class="plan">
<h3>Premium</h3>
<p>$29/month</p>
<button>Buy</button>
</div>
</body>
</html>
Explanation:
- Cards aligned with
flexbox. - Each plan is a styled box.
hovermakes buttons interactive.
Leave a Reply