Tell us what’s happening:
For Design a Pricing Plans Layout Page: Tests 18, 23, and 27 are failing even though I have order styles of 0, 1, and 2 respectively on the basic, pro, and premium-plan classes. Additionally, test 24 fails saying I don’t have flex-grow of 2 on the pro-plan. Did I make a mistake in targeting these elements? Earlier my pricing-card class wasn’t applying, but after I removed the container class and then added it again it fixed the issue, but that isn’t working here…
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pricing Plans Layout Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Pricing Plans</h1>
<div class="pricing-container">
<div class="pricing-card basic-plan">
<h2>Basic</h2>
<p>$9/month</p>
</div>
<div class="pricing-card pro-plan">
<h2>Pro</h2>
<p>$19/month</p>
</div>
<div class="pricing-card premium-plan">
<h2>Premium</h2>
<p>$29/month</p>
</div>
</div>
</body>
</html>
/* file: styles.css */
.pricing-container {
display: flex;
flex-wrap: wrap;
}
.pricing-card {
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
flex: 0 0 200px;
border: 2px solid black;
};
.basic-plan {
order: 0;
};
.pro-plan {
order: 1;
flex-grow: 2;
};
.premium-plan {
order: 2;
};
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
Challenge Information:
Design a Pricing Plans Layout Page - Design a Pricing Plans Layout Page