Account Deleted
Hello, aryakrishnaksh2021. Congrats on completing the challenge!
I have some suggestions that might be helpful to you in the future:
- Consider using the
main
tag to represent the main content of your page, which, in this case, is the card. - Instead of adding
<section class="container">
and<div class="row">
to center your content, you can use these two methods:
/* Add this to your body selector */
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* _ _ _ OR _ _ _ */
/* Add this to your main selector */
.card {
/* other styles */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- To ensure that the image stays inside the card, no matter the size, add
width: 100%
to your.card-img
selector. - Adding the
background
property inside yourbody
selector is best.
Regarding responsiveness, you may find width: min()
useful to resize the content depending on the screen size. You can read more about it here => MDN: CSS min()
I hope you find these suggestions helpful. With that, happy coding!