product preview card solution

Hello there!

𝗖𝗼𝗻𝗴𝗿𝗮𝘁𝘂𝗹𝗮𝘁𝗶𝗼𝗻𝘀 𝗼𝗻 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗶𝗻𝗴 𝘁𝗵𝗲 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲.

𝗬𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗹𝗼𝗼𝗸𝘀 𝗴𝗿𝗲𝗮𝘁.

I have a suggestion to improve your challenge!

●To move the card to the center of the page, change the 𝗖𝗦𝗦 code:

body{ 
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; 
box-sizing: border-box;
background-color: hsl(30, 38%, 92%);
}

●To make it responsive from :

You should find the size of fonts and other items in smaller sizes to avoid cluttering your project!

𝗧𝗵𝗲𝘀𝗲 𝘀𝗶𝘇𝗲𝘀 𝗺𝗮𝘆 𝗯𝗲 𝘂𝘀𝗲𝗳𝘂𝗹 𝗳𝗼𝗿 𝘁𝗵𝗲 𝗵𝗲𝗶𝗴𝗵𝘁 𝗮𝗻𝗱 𝘄𝗶𝗱𝘁𝗵 𝗼𝗳 𝘆𝗼𝘂𝗿 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲.

@media screen and (max-width: 400px){ 
 .container{
 height:300px;
}     
picture .image{
    height: 300px;
    width: 170px;
}
}

@media (min-width: 500px){
.container{
    height:340px;
}
picture .image{
    height: 340px;
    width: 200px;
} 
}

Let me know if this comment was helpful.

𝗚𝗼𝗼𝗱 𝗹𝘂𝗰𝗸 𝗰𝗼𝗱𝗶𝗻𝗴!

try using :root to save color and font variables, to avoid mistakes in using colors or using fonts