@sandro21-glitch
Posted
Hi David
Here are some suggestions to improve the code
You can use CSS resets to avoid unexpected default styling.
Add font-size and font-weight to the body class to provide a better overall consistency in the design.
You could use CSS grid or flexbox for the layout to make the design more responsive and flexible.
To center the card with Flex, you can use the following CSS
body{ display: flex; align-items: center; justify-content: center; height: 100vh; }
If you want to place the card in the center with absolute position, you can use the following example:
.card{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background:rgb(255, 255, 255); max-width: 30.0rem; border-radius: 1.5rem; overflow: hidden; }
you can learn Flexbox and CSS Grid on the following resources:
MDN Web Docs , CSS-Tricks , W3Schools , FreeCodeCamp
Happy Coding