@lisztomania23
Posted
Hello there! 👋
I've taken a look at your code, and I have some feedback to share:
-
It seems you wanted to try and use
absolute: position
andtransform: translate(-50%, -50%)
to center the card within the.container
. However, you could have achieved the same result more simply by usingjustify-content: center
andalign-items: center
in the.container
. -
You've applied a media query for small screens to adjust the width of
.items
, the width of theimg
, andpadding/margin
for other elements. Instead of doing this, you could have given a non-relative width value to.items
(width: 330px
) and set theheight: auto
. But if you wanted to try and use a media query, you would need to make a few other tweaks. -
It's a good practice to use a single
<h1>
element for the main heading of your page before using<h2>
. -
You've used a different font URL for "Outfit" font (which was recommended). Here's the corrected URL for the "Outfit" font:
https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap
-
I also made a few other tweaks to the fonts in
<h1>
and<p>
, as well as the padding. Here is the code below:
* {
padding: 0;
margin: 0;
}
body {
background-color: hsl(212, 45%, 89%);
}
.container {
width: 100%;
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
}
.items {
position: absolute;
top: 50%;
left: 50%;
width: 330px; /* changed value */
/* width:25%; */
height: auto; /* changed value to auto */
transform: translate(-50%, -50%);
text-align: center;
align-items: center;
background-color: hsl(0, 0%, 100%);
border-radius: 13px;
padding-bottom: 20px;
}
.img {
padding: 5px;
margin-top: 20px;
}
img {
max-width: 280px; /* changed value */
height: auto;
border-radius: 10px;
}
/* changed h2 to h1; change in HTML also */
h1 {
padding: 6px 30px; /* changed value */
margin: 2px;
color: hsl(218, 44%, 22%);
/* font-weight: 700; */ /* import recommended font and activate this property */
font-size: 22px; /* added */
}
p {
padding: 6px 30px; /* changed value */
margin: 5px;
color: hsl(220, 15%, 55%);
font-size: 16px; /* changed value */
/* font-weight: 400; */ /* import recommended font and activate this property */
}
/* removed media query */
Overall, your code is functional, but these improvements can help make it cleaner, more maintainable, and aligned with best practices. Keep up the good work! 👍