@AsteriqqSubmitted 12 months ago
Creating the borders and getting the right spacing. the design overall was a hassle to complete.
Damian Kurkowicz
@Kurkov11All comments
- @Kurkov11Posted 12 months ago
Hi Asteriqq, welcome to the community!
Your struggle comes from the fact that you've tried to center your card using paddings and margins which is far from optimal and hard 😤. To center your card on the page you should find the parent of your card - in your current code, the parent is the body. Then in css, inside this parent you could write something like this:
display: flex; //Enables FlexBox
justify-content: center; //Justifies children to the center
align-items: center; //Aligns children to the center
You should also set the parent's height to 100vh - meaning it's height is equal to the screen's height, so that the card could be centered on the screen. Here is a decent video about using FlexBox - VIDEO
To give your text some new fonts you first need to import them from Google Fonts website. Here is a tutorial for that - VIDEO. After you've imported your fonts you can apply them in css by typing this code in a class that you wish to change the font of:
font-family: 'name of the font';
You can also use the background color provided in the style-guide.md file.
Other than that you did everything right in terms of positioning elements inside the card and setting the border radius, good job! Keep coding, everything will come with practice.
Marked as helpful0
