finished, or near finished mobile version of FAQ challenge (yes wrong branch, oops)

projects/FrontendMentor/newbie/faq-accordion-card/css/style.css

@@ -1,5 +1,5 @@
-/* 
+/*
-Info: 
+Info:
     desktop size 1440x768
     mobile size 375x768
 
@@ -25,9 +25,16 @@ Info:
     --clr-test: rgb(255, 111, 000);
 
     /* Fonts */
-    --fs-12px: 0.75rem;
+    --fs-header: 2rem;
+    --fs-question: 0.8125rem;
+    --fs-answer: 0.75rem;
+
     --fw-400: 400;
     --fw-700: 700;
+
+    --lh-header: 2.5rem;
+    --lh-question: 1rem;
+    --lh-answer: 1.125rem;
 }
 
 *,
@@ -37,12 +44,16 @@ Info:
 }
 
 html,
-body,
+body {
-main {
+    /* min-width: 320px; */
     min-height: 100vh;
     width: 100%;
 }
 
+img {
+    width: 100%;
+}
+
 /* Base page styling */
 
 body {
@@ -51,12 +62,9 @@ body {
         var(--col-violet-soft) 0%,
         var(--col-blue-soft) 100%
     );
-}
 
-main {
     display: grid;
-    align-content: center;
+    place-items: center;
-    justify-items: center;
 }
 
 .card {
@@ -68,28 +76,77 @@ main {
     width: 87%;
     border-radius: 23px;
     background-image: var(--card-image);
+
+    max-width: 920px;
 }
 
 .card__header {
     text-align: center;
     font-weight: var(--fw-700);
-    font-size: 2rem;
+    font-size: var(--fs-header);
-    line-height: 2.5rem;
+    line-height: var(--lh-header);
+
+    margin-bottom: 2.375rem;
+}
+
+.card__header_thing {
+    /* position: relative; */
+    margin-bottom: 40px;
+    height: 90px;
 }
 
 .card__header_image {
-    position: absolute;
+    position: relative;
     background-size: contain;
-    content: url(../images/illustration-woman-online-mobile.svg);
+    /* background-image: url(../images/illustration-woman-online-mobile.svg),
+        url(../images/bg-pattern-mobile.svg);
+    background-position: center, bottom center;
+    background-repeat: no-repeat; */
     /* margin: 0 auto; */
-    width: 237px;
+    /* width: 237px; */
+    width: 80%;
     height: 180px;
-    left: calc(50% - calc(237px / 2) - 10px);
+    /* left: calc(50% - calc(237px / 2) - 10px); */
-    top: -20px;
+    /* left: calc(50% - calc(80% / 2) - 10px); */
+
+    /* top: calc(50% - calc(80% / 2) - 10px); */
     /* : calc(100% - 237px/2); */
     /* left: 40px; */
 }
 
+.card__header_image.desktop {
+    display: none;
+}
+
+.card__header_image.mobile {
+    display: contents;
+    margin: 0 auto;
+}
+
+.card__header_image.mobile > img {
+    /* width: 72.5%; */
+}
+
+.woman,
+.box,
+.background {
+    position: absolute;
+}
+
+.woman {
+    top: -95px;
+    left: calc((50% - 118.5px) - 10px);
+    width: 73%;
+    position: relative;
+}
+
+.background {
+    left: calc(50% - 118.5px + 15px);
+    width: 66%;
+    top: -170px;
+    position: relative;
+}
+
 .card__header_image_shadow {
     background-image: url(../images/bg-pattern-mobile.svg);
     background-repeat: no-repeat;
@@ -97,41 +154,37 @@ main {
     border: 1px solid red;
 }
 
-@media screen and (min-width: 376px) {
-    .card {
-        flex-direction: row;
-    }
-    .card__header {
-        text-align: start;
-    }
-}
-
 .faq {
-    margin-top: 6.125rem;
     /* border: 1px red solid; */
     color: var(--col-red-soft);
+    /* margin: 6.125rem 1.5rem 3rem; */
+    margin: 0 1.5rem 3rem;
 }
 
 /* FAQ Section */
 
 details {
-    font-size: var(--fs-12px);
+    font-size: var(--fs-answer);
     line-height: 1.125rem;
-    padding: 1rem 0 1rem 1.5rem;
+    padding: 1rem 0;
     color: var(--col-blue-dark-grayish);
 
     border-bottom: 1px solid var(--col-blue-light-grayish);
     border-width: 75%;
 }
 
+h1 + details {
+    padding: 0 0 1rem 0;
+}
+
 summary {
-    font-size: 0.8125rem;
+    font-size: var(--fs-question);
     font-weight: var(--fw-400);
-    line-height: 1rem;
+    line-height: var(--lh-question);
 
     color: var(--col-blue-very-dark-grayish);
     /* padding: 1rem 1.5rem; */
-    margin-bottom: 1rem;
+    /* margin-bottom: 1rem; */
     outline: none;
     /* border-radius: 0.25rem; */
     text-align: left;
@@ -147,7 +200,7 @@ summary:hover {
 details > summary::after {
     position: absolute;
     content: url(../images/icon-arrow-down.svg);
-    right: 20px;
+    right: 0px;
 }
 details[open] > summary {
     font-weight: var(--fw-700);
@@ -161,6 +214,7 @@ details > summary::-webkit-details-marker {
     display: none;
 }
 
+/* ! add check for prefers motion */
 details[open] summary ~ * {
     animation: sweep 0.5s ease-in-out;
 }
@@ -174,3 +228,62 @@ details[open] summary ~ * {
         margin-top: 0px;
     }
 }
+
+.faq__content {
+    width: 90%;
+    margin-top: 0.6875rem;
+}
+
+@media screen and (min-width: 600px) {
+    :root {
+        --fs-question: 0.875rem;
+        --lh-question: 1.0625rem;
+    }
+
+    .card {
+        flex-direction: row;
+    }
+
+    .card__header_thing {
+        display: grid;
+        align-content: center;
+    }
+
+    .card__header_image {
+        /* content: url(../images/illustration-woman-online-desktop.svg); */
+        top: unset;
+        position: unset;
+        width: 100%;
+        height: unset;
+
+        position: relative;
+
+        margin-bottom: unset;
+    }
+
+    .woman,
+    .box,
+    .background {
+        position: absolute;
+    }
+
+    .card__header_image.mobile {
+        display: none;
+    }
+
+    .card__header_image.desktop {
+        display: contents;
+    }
+
+    article {
+        width: 45%;
+    }
+
+    .faq {
+        margin-left: 5.4375rem;
+    }
+
+    .faq__content {
+        width: 95%;
+    }
+}

projects/FrontendMentor/newbie/faq-accordion-card/index.html

@@ -25,55 +25,64 @@
 </head>
 
 <body>
-  <main>
+  <!-- <main> -->
-    <div class="card">
+  <div class="card">
-      <!-- <header class="card__header"> -->
+    <!-- <header class="card__header"> -->
-      <div class="card__header_thing">
+    <div class="card__header_thing">
-        <div class="card__header_image"></div>
+      <div class="card__header_image desktop">
-        <div class="card__header_image_shadow"></div>
+        <img class="woman" src="./images/illustration-woman-online-desktop.svg" alt="">
+        <img class="box" src="./images/bg-pattern-desktop.svg" alt="">
+        <img class="background" src="./images/illustration-box-desktop.svg" alt="">
       </div>
-      <!-- </header> -->
+      <div class="card__header_image mobile">
-      <article>
+        <img class="woman" src="./images/illustration-woman-online-mobile.svg" alt="">
-        <div class="faq">
+        <img class="background" src="./images/bg-pattern-mobile.svg" alt="">
-          <h2 class="card__header">FAQ</h2>
+      </div>
-          <details>
+
-            <summary>How many team members can I invite?</summary>
+      <!-- <div class="card__header_image_shadow"></div> -->
-            <div class="faq__content">
-              You can invite up to 2 additional users on the Free plan. There is no limit on
-              team members for the Premium plan.
-            </div>
-          </details>
-          <details>
-            <summary>What is the maximum file upload size?</summary>
-            <div class="faq__content">
-              No more than 2GB. All files in your account must fit your allotted storage space. </div>
-          </details>
-          <details>
-            <summary>How do I reset my password?</summary>
-            <div class="faq__content">
-              Click “Forgot password” from the login page or “Change password” from your profile page.
-              A reset link will be emailed to you.
-            </div>
-          </details>
-          <details>
-            <summary>Can I cancel my subscription?</summary>
-            <div class="faq__content">
-              Yes! Send us a message and we’ll process your request no questions asked.
-            </div>
-          </details>
-          <details>
-            <summary> Do you provide additional support?</summary>
-            <div class="faq__content">
-              Chat and email support is available 24/7. Phone lines are open during normal business hours.
-            </div>
-          </details>
-        </div>
-      </article>
     </div>
-  </main>
+    <!-- </header> -->
+    <article>
+      <div class="faq">
+        <h1 class="card__header">FAQ</h1>
+        <details>
+          <summary>How many team members can I invite?</summary>
+          <div class="faq__content">
+            You can invite up to 2 additional users on the Free plan. There is no limit on
+            team members for the Premium plan.
+          </div>
+        </details>
+        <details>
+          <summary>What is the maximum file upload size?</summary>
+          <div class="faq__content">
+            No more than 2GB. All files in your account must fit your allotted storage space. </div>
+        </details>
+        <details>
+          <summary>How do I reset my password?</summary>
+          <div class="faq__content">
+            Click “Forgot password” from the login page or “Change password” from your profile page.
+            A reset link will be emailed to you.
+          </div>
+        </details>
+        <details>
+          <summary>Can I cancel my subscription?</summary>
+          <div class="faq__content">
+            Yes! Send us a message and we’ll process your request no questions asked.
+          </div>
+        </details>
+        <details>
+          <summary> Do you provide additional support?</summary>
+          <div class="faq__content">
+            Chat and email support is available 24/7. Phone lines are open during normal business hours.
+          </div>
+        </details>
+      </div>
+    </article>
+  </div>
+  <!-- </main> -->
 
   <!-- <div class="attribution">
-    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
+    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
     Coded by <a href="https://tarasis.net">Robert McGovern</a>.
   </div> -->
 </body>