<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px, 0px, 50px rgba(0, 0, 0, 0.2)body {
background-image: url("../images/pattern-background-desktop.svg");
background-repeat: no-repeat;
background-size: contain;
background-color: hsl(225, 100%, 94%);
}
main .card {
width: 450px;
}
main .card .container {
padding: 4.2rem;
}
main .card .description {
margin-bottom: 2.5rem;
line-height: 2.8rem;
}
main .card .plan {
justify-content: space-around;
}
main .card .plan-info {
margin-right: 80px;
}
main .card .change-plan:hover {
cursor: pointer;
text-decoration: none;
color: #766cf1;
}
main .card .main-button {
margin-bottom: 30px;
}
main .card .main-button:hover {
cursor: pointer;
background-color: #766cf1;
}
main .card .cancel {
color: rgb(114, 114, 114);
font-weight: 700;
}
main .card .cancel:hover {
cursor: pointer;
font-weight: 900;
color: hsl(223, 47%, 23%);
}