Perfume responsive

Hii Facundo , Congratulations on completing this challlenge 👏👏. I have a suggestions for you. You didn't use the cursor pointer property on the button element when a user hover the button there should be a cursor which make your website more interactive.

The answer of your doubts are --

A) for border-radius you have to give border radius to image like this

for desktop design

img {
    border-radius: 12px 0 0 12px;
}

for Mobile design

img {
    border-radius: 12px 12px 0 0;
}

B) for text you have to give font-size in px and also give font-weight like this -

for Heading

h1 {
    font-family: 'Fraunces', serif;
    font-size: 32px;
    font-weight: 700;
}

For description

.product, .desc, .style {
    font-family: 'Montserrat', sans-serif;
    color: var(--dark-grayish-blue);
    font-size: 18px;
    font-weight: 500;
}

For button to take full width of the container give 100% width and also give some padding like this

button {
    width: 100%;
    font-size: 22px;
    padding: 15px;
}

C) for Centering the card use CSS display Property and give min-height 100vh like this -

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

You can also go through my solution-

Hey @1991facundo, Congratulations on completing this challenge!

Regarding your question:

A. This should your border radius issue for the desktop image: .img-dsk{border-bottom-left-radius: 10px; border-top-left-radius: 10px; }

B. I don't understand this question.

C. To place the card in the center of the page do this:

body { min-height: 100vh; align-items: center; display: flex; flex-direction: column; justify-content: center; }

Keep doing a good job!

img-dsk"

Hello facundo, how are you?

I think i have a solution for your problem A.

You can simply apply "overflor: hidden " in your container, this hides anything that cross the limits of the element you're applyng it to