moved order summary to top of list, and marked it as featured. Need to look at templaating or something so I don't need to keep adding a whole bunch of divs and stuff

Properly this time. I made the change and checked the page, except I checked the live page not the local test version 🤦

FrontendMentor/newbie/order-summary-component/css/style.css

@@ -1,33 +1,45 @@
 @import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap");
 
 /* 
-    Mobile 375 x 709
+    Mobile Screen Width: 375 x 709
-    Box roughly: 327 x 567
+    Figma Box : 327 x 567
     Ratio 0.872 x 0.7997179126 
     
-    Desktop: 1440 x 900
+    Desktop Width: 1440 x 900
-    Box roughly: 450 x 697
+    Figma Box: 450 x 697
     Ratio 0.3125 x 0.7744444444
 */
 :root {
-    /* colors */
+    /* Colors */
-
     --clr-pale-blue: hsl(225, 100%, 94%);
     --clr-bright-blue: hsl(245, 75%, 52%);
 
     --clr-very-pale-blue: hsl(225, 100%, 98%);
     --clr-desaturated-blue: hsl(224, 23%, 55%);
     --clr-dark-blue: hsl(223, 47%, 23%);
+    --clr-light-purple: hsla(245, 83%, 68%, 1);
 
-    /* fonts */
+    /* Fonts */
     --fs-p: 1rem;
     --fw-500: 500;
     --fw-700: 700;
     --fw-900: 900;
 
-    /* Border Radius */
+    /* Border Radii */
     --br-11: 11px;
     --br-20: 20px;
+
+    /* Scaling fonts between the left and right sizes */
+    --font-width-15px-16px: clamp(0.94rem, 0.92rem + 0.09vw, 1rem);
+    --font-width-14px-16px: clamp(0.88rem, 0.83rem + 0.19vw, 1rem);
+
+    /* 
+    Used for the Price Plan box and the Proceed to Payment button
+    sensibly these should be two seperate variables in case the
+    components where used in different places */
+    --box-width: 85%;
+
+    --page-background-img: url("../images/pattern-background-mobile.svg");
 }
 
 *,
@@ -36,114 +48,133 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    /* because I want it to affect the link color */
+    color: var(--clr-desaturated-blue);
 }
 
-/* General Formating */
+/* General Formatting */
+
+html,
+body {
+    min-height: 100vh;
+    width: 100%;
+}
 
 body {
     font-family: "Red Hat Display", sans-serif;
-    width: 100vw;
-    height: 100vh;
     background-color: var(--clr-pale-blue);
 }
 
 main {
-    background-image: url(../images/pattern-background-mobile.svg);
+    background-image: var(--page-background-img);
     background-repeat: no-repeat;
-    /* margin: 0 auto; */
+    min-height: inherit;
-    width: 100%;
-    height: 100%;
-
-    margin: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
 
+/* Order Summary Card formatting */
+
 .card {
-    width: 87.2%;
+    width: clamp(327px, 32%, 450px);
     border-radius: var(--br-20);
     background-color: white;
     text-align: center;
+
+    box-shadow: 0px 40px 40px -20px rgba(13, 48, 189, 0.151826);
 }
-.hero-image img {
+.card__hero-image {
     width: 100%;
     border-radius: var(--br-20) var(--br-20) 0 0;
-    margin-bottom: 2rem;
+    margin-bottom: clamp(2rem, 8vw, 2.815rem);
 }
 
-.card h1 {
+.card__title {
     font-weight: var(--fw-900);
-    font-size: 1.375rem;
+    font-size: clamp(1.375rem, 2.5vw, 1.815rem);
-    line-height: 1.2;
+    line-height: 1.3195;
     margin-bottom: 1rem;
     color: var(--clr-dark-blue);
 }
 
-.card p {
+.card__info {
     font-weight: var(--fw-500);
-    color: var(--clr-desaturated-blue);
+    margin: 0 clamp(2rem, 4vw, 3rem);
-    margin: 0 2rem;
+    font-size: var(--font-width-15px-16px);
-    font-size: 0.9375rem;
     margin-bottom: 1.5rem;
-    line-height: 25px;
+    line-height: 162%;
 }
 
-.price-plan {
+.card__price-plan {
     display: flex;
     justify-content: space-around;
     align-items: center;
 
-    width: 85%;
+    width: var(--box-width);
-    margin: 0 auto 1.5rem auto;
+    margin: 0 auto clamp(1.5rem, 2vw, 2rem) auto;
-    padding: 1rem 0;
+    padding: clamp(1rem, 2vw, 1.5315rem) 0;
 
     border-radius: var(--br-11);
     background-color: var(--clr-very-pale-blue);
 }
 
-.plan-type {
+.card__plan-type-area {
-    color: var(--clr-dark-blue);
+    line-height: 1.3125;
-    font-size: 0.875rem;
-    font-weight: var(--fw-900);
-    margin-bottom: 0.1875rem;
 }
-.plan-price {
+
-    color: var(--clr-desaturated-blue);
+.card__plan-type {
-    font-size: 0.875rem;
+    color: var(--clr-dark-blue);
+    font-size: var(--font-width-14px-16px);
+    font-weight: var(--fw-900);
+    margin-bottom: clamp(0.1875rem, 0.8vw, 0.375rem);
+}
+.card__plan-price {
+    font-size: var(--font-width-14px-16px);
     font-weight: 500;
 }
-.change-button {
+.card__change-button {
-    font-size: 0.8125rem;
+    font-size: clamp(0.813rem, 0.79rem + 0.09vw, 0.88rem);
     font-weight: var(--fw-700);
     color: var(--clr-bright-blue);
 }
 
-.button-area a {
+.card__button-area a {
     display: block;
     text-decoration: none;
     font-weight: var(--fw-900);
     font-size: 0.9375rem;
     line-height: 20px;
 }
-.payment-button {
+.card__payment-button {
     color: white;
-    /* margin-bottom: 1.5rem; */
     background-color: var(--clr-bright-blue);
-    width: 85%;
+    width: var(--box-width);
-    margin: 0 auto 1.5rem auto;
+    margin: 0 auto clamp(1.5rem, 4vw, 2rem) auto;
     box-shadow: 0px 20px 20px rgba(56, 42, 225, 0.190291);
     border-radius: var(--br-11);
     padding: 15px 0;
 }
-.cancel-button {
+.card__cancel-button {
-    color: var(--clr-desaturated-blue);
+    margin-bottom: clamp(2rem, 8vw, 3rem);
-    margin-bottom: 2rem;
+}
+
+.card__change-button:is(:hover, :focus) {
+    color: var(--clr-light-purple);
+}
+
+.card__payment-button:is(:hover, :focus) {
+    background-color: var(--clr-light-purple);
+}
+
+.card__cancel-button:is(:hover, :focus) {
+    color: var(--clr-dark-blue);
 }
 
 @media screen and (min-width: 376px) {
-    main {
+    :root {
-        background-image: url(../images/pattern-background-desktop.svg);
+        --box-width: 80%;
+        --page-background-img: url("../images/pattern-background-desktop.svg");
     }
 }

FrontendMentor/newbie/order-summary-component/index.html

@@ -29,26 +29,26 @@
 
   <main>
     <div class="card">
-      <div class="hero-image">
+      <img class="card__hero-image" src="./images/illustration-hero.svg"
-        <img src="./images/illustration-hero.svg"
         alt="Hero Image Person holding an audio device and wearing headphones">
-      </div>
+      <h1 class="card__title">Order Summary</h1>
-      <h1>Order Summary</h1>
+      <p class="card__info">
-      <p>
         You can now listen to millions of songs, audiobooks, and podcasts on any
         device anywhere you like!
       </p>
-      <div class="price-plan">
+      <div class="card__price-plan">
-        <img class="icon" src="./images/icon-music.svg" alt="Music icon" aria-hidden="true">
+        <!-- maybe price-plan, then price-plan__icon, __plan-type, __plan-price, __change-button? -->
-        <div class="plan-type-area">
+        <img class="card__icon" src="./images/icon-music.svg" alt="Music icon" aria-hidden="true">
-          <div class="plan-type">Annual Plan</div>
+        <div class="card__plan-type-area">
-          <div class="plan-price">$59.99/year</div>
+          <p class="card__plan-type">Annual Plan</p>
+          <p class="card__plan-price">$59.99/year</p>
         </div>
-        <a href="#" class="change-button">Change</a>
+        <a href="#" class="card__change-button">Change</a>
       </div>
-      <div class="button-area">
+      <!-- maybe button-area, button-area__payment-button, button-area__cancel-button? -->
-        <a href="#" class="payment-button">Proceed to Payment</a>
+      <div class="card__button-area">
-        <a href="#" class="cancel-button">Cancel Order</a>
+        <a href="#" class="card__payment-button">Proceed to Payment</a>
+        <a href="#" class="card__cancel-button">Cancel Order</a>
       </div>
     </div>
   </main>

index.html

@@ -44,7 +44,32 @@
                 <h3>Newbie Challenges</h3>
 
                 <div class="projects-grid">
+
                     <div class="project-card stacked featured">
+                        <a href="./FrontendMentor/newbie/order-summary-component/">
+                            <img class="card__img" src="./screenshots/fem-newbie-order-summary-component.png"
+                                alt="Order Summary Component Challenge from FrontendMentor" />
+                        </a>
+                        <div class="card__content">
+                            <h3 class="card__title">
+                                Order Summary Card Component
+                            </h3>
+                            <!-- <p class="card__description">
+                                Lorem ipsum dolor sit amet consectetur
+                                adipisicing elit.
+                            </p> -->
+                            <ul class="card__techUsed">
+                                <li>
+                                    <img src="./svgs/html5.svg" alt="HTML5" />
+                                </li>
+                                <li>
+                                    <img src="./svgs/css3.svg" alt="CSS3" />
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="project-card stacked">
                         <a href="./FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/">
                             <img class="card__img"
                                 src="./screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png"
@@ -217,30 +242,6 @@
                         </div>
                     </div>
 
-                    <div class="project-card stacked">
-                        <a href="./FrontendMentor/newbie/order-summary-component/">
-                            <img class="card__img" src="./svgs/image-photo-svgrepo-com.svg"
-                                alt="Order Summary Component Challenge from FrontendMentor" />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">
-                                Order Summary Card Component
-                            </h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
                 </div>
             </div>
         </div>