- picture of perfume +
+ picture of perfume +

PERFUME

Gabrielle Essence Eau De Parfum

diff --git a/product-preview-card-component-main/styles.css b/product-preview-card-component-main/styles.css index 5fa8620..1fe1e3b 100644 --- a/product-preview-card-component-main/styles.css +++ b/product-preview-card-component-main/styles.css @@ -2,10 +2,10 @@ margin: 0; padding: 0; background-color: hsl(30, 38%, 92%); - font-size: 18px; + font-size: 16px; + --padding-content: 0 1.5rem; } -html, body { margin: 0; display: flex; @@ -13,54 +13,64 @@ body { min-height: 100vh; font-family: "Montserrat", serif; } + +img { + display: block; +} .container { display: flex; flex-direction: column; padding: 2.5em 2em 0 2em; + max-width: 600px; } .content { display: flex; flex-direction: column; + justify-content: space-around; background-color: hsl(0, 0%, 100%); - padding: 2em; border-radius: 0 0 0.5em 0.5em; } .content h3, p { - font-size: 1.5em; color: hsl(228, 12%, 48%); + font-size: 1rem; + padding: var(--padding-content); } .content h3 { letter-spacing: 0.2em; + padding: 0 1.2em; } .content p { line-height: 1.6em; text-align: left; font-weight: 500; - font-size: 1.6em; + font-size: 1.2rem; word-wrap: break-word; + padding: var(--padding-content); } .content h1 { - font-size: 3.5em; + font-size: 2rem; font-weight: 700; font-family: "Fraunces", serif; margin: 0; - padding: 0; + padding: 0 0.6em; } - .hero-img { border-radius: 0.5em 0.5em 0 0; max-width: 100%; - height: auto; +} +.img-container { + align-self: center; } .price { display: flex; align-items: center; gap: 20px; + padding: var(--padding-content); } .price h2, @@ -70,19 +80,19 @@ span { } .price h2 { - font-size: 3.5em; + font-size: 2rem; font-family: "Fraunces", serif; color: hsl(158, 36%, 37%); } .price span { - font-size: 1.5em; + font-size: 1.2rem; } .btn { + margin: 1.725em; padding: 0.8em; - margin-top: 1em; - font-size: 1.5em; + font-size: 1rem; font-family: "Montserrat", serif; font-weight: 700; color: hsl(0, 0%, 100%); @@ -110,16 +120,21 @@ span { display: flex; flex-direction: row; justify-content: center; - width: 60vw; align-self: center; + /*max-width: 600px;*/ + } + + .container > * { + flex: 1; } .content { - width: 50%; border-radius: 0 0.5em 0.5em 0; } .hero-img { - width: 50%; border-radius: 0.5rem 0 0 0.5em; object-fit: cover; } + .content p { + line-height: 1em; + } }