@hitmorecode
Posted
- For start it is good practice to use CSS reset. If you are not familiar with css reset, do some google research.
- Try not to repeat yourself, meaning don't write the same thing twice. You have a class
div-paragraph
andparagraph
they are targeting the same element. You don't need both of them.
You can use flexbox on the body to place the card in the middle of the page. When possible avoid using margin to place the card in the middle of the page. This will make harder to create a responsive page.
Down below I've commented out all the things you don't need. Play with it and see if you can figure out why.
/* css reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #D5E1EF;
min-height: 100vh; /* add these lines*/
display: flex;
justify-content: center;
align-items: center;
}
.first-card {
background-color: white;
width: 340px;
height: 500px;
/* margin-left: 600px; */
/* margin-top: 100px; */
border-radius: 20px;
padding-top: 20px; /* add these lines */
display: flex;
flex-direction: column;
align-items: center;
}
.img-qr{
width: 300px;
height: 320px;
/* margin-top: 20px; */
margin-bottom: 20px;
/* margin-left: 20px; */
/* margin-right: 180px; */
border-radius: 20px;
}
.div-paragraph{
width: 280px;
/* margin-top: -30px; */
/* margin-left: 25px; */
}
.paragraph {
/* text-align: center; */
font-family: 'Outfit', sans-serif;
font-size: 20px;
font-weight: 900;
/* display: block; */
/* margin-block-start: 1em; */
/* margin-block-end: 1em; */
/* margin-inline-start: 10px; */
text-align: center;
margin-bottom: 1rem;
}
.div-paragraph1{
width: 280px;
/* margin-top: 5px; */
/* margin-left: 25px; */
text-align: center;
}
.paragraph1 {
font-size: 15px;
font-weight: lighter;
/* text-align: center; */
font-family: 'Outfit', sans-serif;
color: gray;
/* display: block; */
/* margin-block-start: 1em; */
/* margin-block-end: 1em; */
/* margin-inline-start: 10px; */
}
Marked as helpful
@ElisaFossemale
Posted
Hi! Thanks for checking the code, I'll try your improvements.
@hitmorecode