Styling complete

alison-ah · Dec 2, 2024 · 741b266 · 741b266
1 parent 7d014a2
commit 741b266
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 18 deletions.
diff --git a/CSS/main.css b/CSS/main.css
@@ -11,9 +11,9 @@ html {
 }
 
 body {
-    background: var(--body-background) url(assets/images/background-pattern-desktop.svg) center top / 100% 13.5rem no-repeat;
+    background: var(--body-background) url(/Users/alisonholland/Documents/coding/javascript/faq-accordion-main/assets/images/background-pattern-desktop.svg) center top / 400vw no-repeat;
     padding: 0;
-    margin: 0;
+    margin: 10em 0em;
 }
 
 .content-wrapper {
@@ -22,8 +22,8 @@ body {
     border-radius: 25px;
     display: flex;
     flex-direction: column;
-    margin: 5%;
-    padding: 3em;
+    margin: 5% 10%;
+    padding: 1em;
     box-shadow: 0 0 5px #9c9c9c;
 }
 
@@ -36,9 +36,16 @@ h1 {
     margin-bottom: .25em;
 }
 
+h2 {
+    display: flex;
+    font-size: 1.25em;
+    color: var(--dark-font);
+}
+
 p {
-    font: 1em;
-    padding: .5em;
+    font-size: 1em;
+    line-height: 1.75em;
+    padding: 0em;
     margin: 1.5em;
     margin-top: 0em;
     color: var(--light-font);
@@ -70,14 +77,6 @@ summary img {
     margin-left: auto;
 }
 
-.plus {
-
-}
-
-.minus {
-
-}
-
 .hide {
     display: none;
 }
@@ -92,3 +91,26 @@ summary img {
     color: var(--hover-text); 
 }
 
+@media (min-width: 480px) {
+    body {
+        background: var(--body-background) url(/Users/alisonholland/Documents/coding/javascript/faq-accordion-main/assets/images/background-pattern-desktop.svg) center top / 150vw no-repeat;
+        padding: 0;
+        margin: 10% 0 2% 0;
+    }
+
+    .content-wrapper {
+        margin: 5% 15%;
+    }
+}
+
+@media (min-width: 1200px) {
+    body {
+        background: var(--body-background) url(/Users/alisonholland/Documents/coding/javascript/faq-accordion-main/assets/images/background-pattern-desktop.svg) center top / 150vw no-repeat;
+        padding: 0;
+        margin: 20% 0 2% 0;
+    }
+
+    .content-wrapper {
+        margin: 5% 25%;
+    }
+}
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@ <h1><img src="assets/images/icon-star.svg" alt="star icon"> FAQ</h1>
 
     <div class ="accordion">
       <details>
-        <summary class="first-summary-item">What is Frontend Mentor, and how will it help me?<img src="assets/images/icon-plus.svg" alt="plus icon" class="first-plus"><img src="assets/images/icon-minus.svg" alt="minus icon" class="first-minus hide"></summary>
+        <summary class="first-summary-item"><h2>What is Frontend Mentor, and how will it help me?</h2><img src="assets/images/icon-plus.svg" alt="plus icon" class="first-plus"><img src="assets/images/icon-minus.svg" alt="minus icon" class="first-minus hide"></summary>
         <div class ="content">
           <p>Frontend Mentor offers realistic coding challenges to help developers improve their 
           frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for 
@@ -28,23 +28,23 @@ <h1><img src="assets/images/icon-star.svg" alt="star icon"> FAQ</h1>
       </details>
 
       <details>
-        <summary class="second-summary-item">Is Frontend Mentor free?<img src="assets/images/icon-plus.svg" alt="plus icon" class="second-plus"><img src="assets/images/icon-minus.svg" alt="minus icon" class="second-minus hide"></summary>
+        <summary class="second-summary-item"><h2>Is Frontend Mentor free?</h2><img src="assets/images/icon-plus.svg" alt="plus icon" class="second-plus"><img src="assets/images/icon-minus.svg" alt="minus icon" class="second-minus hide"></summary>
         <div class ="content">
           <p>Yes, Frontend Mentor offers both free and premium coding challenges, with the free 
             option providing access to a range of projects suitable for all skill levels.</p>
         </div>
       </details>
 
       <details>
-        <summary class="third-summary-item">Can I use Frontend Mentor projects in my portfolio?<img src="assets/images/icon-plus.svg" alt="plus icon" class="third-plus"><img src="assets/images/icon-minus.svg" alt="minus icon" class="third-minus hide"></summary>
+        <summary class="third-summary-item"><h2>Can I use Frontend Mentor projects in my portfolio?</h2><img src="assets/images/icon-plus.svg" alt="plus icon" class="third-plus"><img src="assets/images/icon-minus.svg" alt="minus icon" class="third-minus hide"></summary>
         <div class ="content">
           <p>Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent
             way to showcase your skills to potential employers!</p>
         </div>
       </details>
 
       <details>
-        <summary class="fourth-summary-item">How can I get help if I'm stuck on a Frontend Mentor challenge?<img src="assets/images/icon-plus.svg" alt="plus icon" class="fourth-plus"><img src="assets/images/icon-minus.svg" alt="minus icon" class="fourth-minus hide"></summary>
+        <summary class="fourth-summary-item"><h2>How can I get help if I'm stuck on a Frontend Mentor challenge?</h2><img src="assets/images/icon-plus.svg" alt="plus icon" class="fourth-plus"><img src="assets/images/icon-minus.svg" alt="minus icon" class="fourth-minus hide"></summary>
         <div class ="content">
           <p>The best place to get help is inside Frontend Mentor's Discord community. There's a help 
             channel where you can ask questions and seek support from other community members.</p>