I keep failing test 23 and 24. I can’t see the error and everything seems to work fine. Can someone please help me. My is below and Thank you for your assistance!
test 23: Your .pro-plan element should have the property order with a value of 1.
test 24: Your .pro-plan element should have the property flex-grow with a value of 2.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<hr>
<ul>
<li class="green">Access to our core features</li>
<li class="green"> Email support</li>
<li class="red">Advance analytics</li>
<li class="red">Custom integrations</li>
<li class="red">Priority support</li>
</ul>
<button>Choose Plan</button>
</div>
<div class="pricing-card pro-plan">
<h2>Pro</h2>
<p>$19/month</p>
<hr>
<ul>
<li class="green">Access to our core features</li>
<li class="green"> Email support</li>
<li class="green">Advance analytics</li>
<li class="green">Custom integrations</li>
<li class="red">Priority support</li>
</ul>
<button>Choose Plan</button>
</div>
<div class="pricing-card premium-plan">
<h2>Premium</h2>
<p>$29/month</p>
<hr>
<ul>
<li class="green">Access to our core features</li>
<li class="green"> Email support</li>
<li class="green">Advance analytics</li>
<li class="green">Custom integrations</li>
<li class="green">Priority support</li>
</ul>
<button>Choose Plan</button>
</div>
</div>
</body>
</html>
**CSS**
\* {
box-sizing: border-box;
}
h1, h2, p {
text-align: center;
}
p {
margin: 2px auto;
font-size: 1.2rem;
font-weight: 800;
}
h2 {
margin-bottom: 10px;
}
hr {
border: none;
border-bottom: 1px solid black;
width: 60%;
}
.pricing-container {
width: 80%;
display: flex;
flex-wrap: wrap;
border: 2px solid black;
gap: 20px;
margin: auto;
}
.pricing-card {
display: flex;
flex-direction: column;
flex: 0 0 200px;
justify-content: space-between;
border: 2px solid black;
margin: 0 20px;
border-radius: 5px;
transition: transform 0.3s ease;
}
.basic-plan, .premium-plan {
padding: 10px;
background-color: whitesmoke;
}
.pro-plan {
background-color: lightblue;
}
ul {
list-style-position: inside;
list-style-type: square;
}
li.green::marker{
color: green;
font-size: 1.5rem;
font-weight: 800;
}
li.red::marker{
color: crimson;
font-size: 1.5rem;
font-weight: 800;
}
button {
background-color: yellow;
font-size: 1rem;
font-weight: bold;
border: 1px solid black;
margin: 10px;
border-radius: 10px;
cursor: pointer;
}
.basic-plan {
order: 0;
}
.premium-plan {
order: 2;
}
.pro-plan {
order: 1;
flex-grow: 2;
}
.pricing-card:hover {
transform: scale(1.1);
}
