@undrthegraveyard
Posted
Hey,
Good job on the code.
To get the desired design for the .card__plan component, you need to implement a nested flexbox concept. Include the "<img src="/images/icon-music.svg" alt="" />" and "<div class="card__plan-content">" under <div class="card__plan-img">. Then implement flexbox in the "card__plan-img" class, with a flex-direction of row, and also with a suitable gap: between them. PS: Your class "card__plan-content" should also be in flex, with a flex-direction: column and with a gap between both the text.
Try this, and let me know.
Happy Coding 😁
@ErrorCode710
Posted
@undrthegraveyard what do you mean sir? like this
<body>
<div class="card__plan">
<div class="card__plan-img">
<img src="/images/icon-music.svg" alt="Music Icon">
<div class="card__plan-content">
<div class="card__plan-heading">Annual Plan</div>
<div class="card__plan-price">$59.99/year</div>
</div>
</div>
<div class="card__plan-cta">
<a href="#">Change</a>
</div>
</div>
</body>```
My css:
```.card__plan {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
}
.card__plan-img {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
.card__plan-content {
display: flex;
flex-direction: column;
gap: 5px;
}
.card__plan-heading {
font-weight: bold;
font-size: 1.2em;
}
.card__plan-price {
color: #6c757d;
}
.card__plan-cta {
text-align: right;
margin-top: auto;
}
.card__plan-cta a {
color: hsl(228, 45%, 44%);
text-decoration: none;
} ```