finishes rebuild of styles for non-active desktop layout

LBuchananCates · Nov 7, 2023 · b04ed41 · b04ed41
1 parent 1367ebf
commit b04ed41
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 25 deletions.
diff --git 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
@@ -11,28 +11,45 @@
 <body>
   <main>
     <section class="image__section">
-      <img src="./images/drawers.jpg" alt="drawers" />
-      <!-- <img src="./images/drawers-img.png" alt="" /> -->
-    </section>
-    <section class="article__section">
-      <h1 class="article__header">
-        Shift the overall look and feel by adding these wonderful touches to
-        furniture in your home
-      </h1>
-      <p class="article__content">
-        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.
-      </p>
-    </section>
-    <section class="author__section">
-      <img src="./images/michelle-avatar.svg" alt="michelle-avatar" />
-      <div class="author__details">
-        <p class="author__details-name">Michelle Appleton</p>
-        <p class="author__details-postdate">28 June 2020</p>
-      </div>
-      <img src="./images/light-oval.png" alt="share-arrow" />
+      <!-- <img src="./images/drawers.jpg" alt="drawers" /> -->
+      <img
+        src="./images/drawers-img.png"
+        alt="drawers"
+        class="mobile-drawers-img"
+      />
+      <img
+        src="./images/desktop-image.png"
+        alt="drawers"
+        class="desktop-drawers-img"
+      />
     </section>
+    <div class="article__content-desktop">
+      <section class="article__section">
+        <h1 class="article__header">
+          Shift the overall look and feel by adding these wonderful touches to
+          furniture in your home
+        </h1>
+        <p class="article__content">
+          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.
+        </p>
+      </section>
+      <section class="author__section">
+        <div class="author__items">
+          <img src="./images/michelle-avatar.svg" alt="michelle-avatar" />
+          <div class="author__details">
+            <p class="author__details-name">Michelle Appleton</p>
+            <p class="author__details-postdate">28 June 2020</p>
+          </div>
+        </div>
+        <img
+          src="./images/light-oval.png"
+          alt="share-arrow"
+          class="share-arrow"
+        />
+      </section>
+    </div>
   </main>
 </body>
 <script src="furniture-article.js"></script>