@correlucas
Posted
👾Hello Cheosphere, congratulations for your new solution!
🎯 Your solution its almost done and I’ve some tips to help you to improve it:
1.REMOVE THE SHADOW AND THE BLACK BACKGROUND FROM THE CONTAINER, ADD IT TO THE BODY
.contenedor {
width: 1440px;
height: 800px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* background-color: hsl(216, 12%, 8%); */
/* box-shadow: 0 0 40px rgb(36 36 36); */
transition: all .4s ease-in-out;
}
body {
background-color: hsl(216, 12%, 8%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Overpass', sans-serif;
/* background-color: rgb(30, 30, 30); */
color: hsl(0, 0%, 100%);
}
2.REMOVE THE HEIGHT
FROM THE CARD TO MAKE IT GROW AUTOMATICALLY, NOT THE AFTER THE height: 416px;
YOUR CONTENT START TO POP OUT THE CONTAINER
.card {
width: 412px;
/* height: 416px; */
padding: 2rem;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
border-radius: 30px;
background: linear-gradient(0deg, rgba(23, 30, 40, 1) 0%, rgb(30, 39, 48) 100%);
}
✌️ I hope this helps you and happy coding!
Marked as helpful