diff --git a/index.html b/index.html index e02546b..55954fb 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + @@ -18,61 +18,20 @@ Frontend Mentor | Product preview card component - -
-
+
- bottle of perfume + + + product -
+
-
+

PERFUME

@@ -85,7 +44,7 @@

Gabrielle Essence Eau De Parfum

$149.99 $169.99

-
+ diff --git a/style.css b/style.css index 14971da..3a791c2 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,58 @@ +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, *::before, *::after { + box-sizing: border-box; + } + /* + 2. Remove default margin + */ + * { + margin: 0; + } + /* + Typographic tweaks! + 3. Add accessible line-height + 4. Improve text rendering + */ + body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; + } + /* + 5. Improve media defaults + */ + img, picture, video, canvas, svg { + display: block; + max-width: 100%; + } + /* + 6. Remove built-in form typography styles + */ + input, button, textarea, select { + font: inherit; + } + /* + 7. Avoid text overflows + */ + p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; + } + /* + 8. Create a root stacking context + */ + #root, #__next { + isolation: isolate; + } + + @media only screen and (max-width: 375px){ body { + display: flexbox; + min-height: 100vh; background-color: hsl(30, 38%, 92%); - display: grid; - max-width: 100%; -} + } + .grid-container { display: flex; max-width: 30%; @@ -91,4 +140,5 @@ button { } svg { padding-right: 10px; +} } \ No newline at end of file