From b04ed410463b9d90759f75ea9524a11202ee9624 Mon Sep 17 00:00:00 2001 From: Leighton Date: Tue, 7 Nov 2023 15:12:44 +0900 Subject: [PATCH] finishes rebuild of styles for non-active desktop layout --- furniture-article.css | 70 ++++++++++++++++++++++++++++++++++++++++--- index.html | 59 +++++++++++++++++++++++------------- 2 files changed, 104 insertions(+), 25 deletions(-) diff --git a/furniture-article.css b/furniture-article.css index a73d28d..f3c6617 100644 --- a/furniture-article.css +++ b/furniture-article.css @@ -26,10 +26,13 @@ main { margin: 75px 24px; } -.image__section img { +.desktop-drawers-img { + display: none; +} + +.mobile-drawers-img { + width: 100%; border-radius: 10px 10px 0 0; - height: 199px; - width: 326px; object-fit: cover; } @@ -58,10 +61,21 @@ main { .author__section { display: flex; - padding: 0px 32px 20px; + align-items: center; + justify-content: space-between; + padding: 0 32px 32px; +} + +.author__items { + display: flex; gap: 16px; } +.author__details { + display: flex; + flex-direction: column; +} + .author__details-name { color: var(--brand-primary); font-size: 13px; @@ -78,11 +92,59 @@ main { letter-spacing: 0.122px; } +.share-arrow { + height: 32px; + width: 32px; + margin-left: 59px; +} + /* .triangle { display: none; } */ @media screen and (min-width: 1024px) { + body { + display: grid; + place-items: center; + min-height: 100vh; + } + + main { + display: flex; + max-width: 730px; + max-height: 280px; + } + + .mobile-drawers-img { + display: none; + } + + .desktop-drawers-img { + display: block; + width: fit-content; + border-radius: 10px 0 0 10px; + } + + .article__content-desktop { + display: flex; + flex-direction: column; + } + + .article__header { + font-size: 20px; + line-height: 28px; /* 140% */ + letter-spacing: 0.25px; + } + + .article__section { + padding: 32px 40px 0; + } + + .author__section { + padding: 20px 40px 36px; + justify-content: space-between; + } + /* .triangle { position: absolute; display: flex; diff --git a/index.html b/index.html index 7ee5324..b16a896 100644 --- a/index.html +++ b/index.html @@ -11,28 +11,45 @@
- drawers - -
-
-

- Shift the overall look and feel by adding these wonderful touches to - furniture in your home -

-

- Ever been in a room and felt like something was missing? Perhaps it felt - slightly bare and uninviting. I’ve got some simple tips to help you make - any room feel complete. -

-
-
- michelle-avatar -
-

Michelle Appleton

-

28 June 2020

-
- share-arrow + + drawers + drawers
+
+
+

+ Shift the overall look and feel by adding these wonderful touches to + furniture in your home +

+

+ Ever been in a room and felt like something was missing? Perhaps it + felt slightly bare and uninviting. I’ve got some simple tips to help + you make any room feel complete. +

+
+
+
+ michelle-avatar +
+

Michelle Appleton

+

28 June 2020

+
+
+ +
+