poss finished front for mobile

projects/FrontendMentor/newbie/interactive-rating-component/css/style.css

@@ -13,6 +13,52 @@
 }
 
 :root {
+    /* Colors */
+    --col-orange: hsl(25, 97%, 53%);
+
+    --col-white: hsl(0, 0%, 100%);
+    --col-light-grey: hsl(217, 12%, 63%);
+    --col-medium-grey: hsl(216, 12%, 54%);
+    --col-very-dark-blue: hsl(216, 12%, 8%);
+    --col-dark-blue: hsl(213, 19%, 18%);
+
+    --col-button: var(--col-orange);
+    --col-button-hover: var(--col-white);
+    --col-background-page: var(--col-very-dark-blue);
+    --col-background-component: radial-gradient(
+        98.96% 98.96% at 50% 0%,
+        #232a34 0%,
+        #181e27 100%
+    );
+    --col-background-rating: var(--col-dark-blue);
+    --col-font-rating: var(--col-medium-grey);
+    --col-font-selected-rating: var(--col-orange);
+    --col-font-header: var(--col-white);
+    --col-font-body: var(--col-light-grey);
+    --col-background-button-hover: var(--col-white);
+    --col-font-button-hover: var(--col-orange);
+
+    --col-font-selected-rating: var(--col-white);
+    --col-background-selected-rating: var(--col-medium-grey);
+
+    /* Typography */
+    --fs-header: 1.5rem;
+    --lh-header: 125%;
+    --fw-header: 700;
+
+    --fs-body: 0.875rem;
+    --lh-body: 157%;
+    --fw-body: 400;
+
+    --fs-rating: 0.875rem;
+    --lh-rating: 171%;
+    --ls-rating: 0.175px;
+
+    --fs-button: 0.875rem;
+    --lh-button: 1.2857142857;
+    --ls-button: 1.86667px;
+
+    --border-radius: 0.9375rem;
 }
 
 body {
@@ -22,9 +68,244 @@ body {
     /* margin: 0 auto; */
     display: grid;
     place-content: center;
+
+    /* background-color: var(--col-background-page); */
+}
+
+.rating-component {
+    max-width: 327px;
+    background: var(--col-background-component);
+    border-radius: var(--border-radius);
+    /* margin: 0 1.5rem; */
+    padding: 24px 24px 32px 24px;
+}
+.rating-component-front {
+}
+
+.star-icon {
+    /* margin-top: 19px; */
+    display: block;
+    background-color: var(--col-dark-blue);
+    /* width: 100px; */
+    /* height: 100px; */
+    border-radius: 50%;
+    text-align: center;
+    width: 40px;
+    /* line-height: 100px; */
+    vertical-align: middle;
+    padding: 13px;
+}
+
+.star-icon:before {
+}
+
+.header {
+    font-size: var(--fs-header);
+    line-height: var(--lh-header);
+    color: var(--col-font-header);
+}
+
+.body {
+    font-size: var(--fs-body);
+    line-height: var(--lh-body);
+    color: var(--col-font-body);
+}
+
+.rating-component__header {
+    margin-top: 22px; /* 1rem;*/
+}
+.rating-component__body {
+    margin-top: 17px;
+    /* margin-top: 33px; */
+    margin-left: 2px;
+}
+
+#ratingForm {
+    margin-top: 1.5rem;
+}
+
+#ratingForm fieldset {
+    border: none;
+}
+
+/* #ratingForm input {
+    visibility: hidden;
+} */
+
+.radio_container {
+    /* display: flex; */
+    /* gap: 30px; */
+}
+
+.ratingForm__label {
+    display: inline-block;
+
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: var(--col-background-rating);
+
+    font-size: var(--fs-rating);
+    line-height: var(--lh-rating);
+    letter-spacing: var(--ls-rating);
+
+    font-weight: 700;
+    color: var(--col-font-rating);
+    /* padding: 13px 18.12px 12px 17.29px; */
+    padding: 10px;
+    text-align: center;
+    width: 42px;
+    height: 42px;
+}
+
+#ratingForm input[type="radio"] {
+    opacity: 0;
+    position: fixed;
+    width: 0;
+}
+
+#ratingForm label {
+    margin-right: 13px;
+}
+
+#ratingForm label:last-of-type {
+    margin-right: 0px;
+}
+
+#ratingForm label:hover {
+    background-color: var(--col-orange);
+    color: var(--col-white);
+}
+.radio_container input[type="radio"]:focus + label {
+    outline: 2px dashed var(--col-white);
+    color: var(--col-white);
+    background-color: var(--col-medium-grey);
+}
+
+.radio_container input[type="radio"]:checked + label {
+    color: var(--col-white);
+    background-color: var(--col-medium-grey);
+}
+
+.btn {
+    border-radius: 22.5px;
+    padding: 13px 110px 13px 107px;
+    text-align: center;
+
+    font-family: "Overpass", sans-serif;
+    font-size: var(--fs-button);
+    line-height: var(--lh-button);
+    letter-spacing: var(--ls-button);
+    font-weight: 700;
+
+    text-transform: uppercase;
+
+    border: none;
+}
+
+.btn-submit {
+    margin-top: 1.5rem;
+    margin-inline: auto;
+
+    color: var(--col-white);
+    background-color: var(--col-button);
+}
+
+.btn-submit:where(:focus, :hover) {
+    color: var(--col-orange);
+    background-color: var(--col-background-button-hover);
+}
+
+.hidden {
+    display: none;
+}
+
+.visible {
+    display: block;
+}
+/*  for rating-component-back */
+
+.rating-component-back {
+    /* display: none; */
+    padding: 34px 24px 37px 24px;
+
+    text-align: center;
+}
+
+.thank-you-img {
+    margin-top: 0px;
+}
+
+.rating-component__rating {
+    margin-top: 1.5rem;
+    /* margin-inline: 45px; */
+
+    font-size: var(--fs-body);
+    /* line-height: var(--lh-body); */
+    color: var(--col-orange);
+
+    border-radius: 22.5px;
+    background-color: var(--col-dark-blue);
+    padding: 5px 12px;
+}
+
+.rating-component__header-submitted {
+    margin-top: 24px;
+}
+
+.rating-component__body-submitted {
+    margin-top: 10px;
 }
 
 @media screen and (min-width: 62.5rem) {
     :root {
+        /* Typography */
+        --fs-header: 1.75rem;
+
+        --fs-body: 0.9375rem;
+        --lh-body: 160%;
+
+        --fs-rating: 1rem;
+        --lh-rating: 150%;
+        --ls-rating: 0.2px;
+
+        --fs-button: 15px;
+        --lh-button: 1.2666666667;
+        --ls-button: 2px;
+    }
+
+    .rating-component {
+        max-width: 25.75rem;
+    }
+
+    .rating-component-front {
+        padding: 32px 39px 32px 32px;
+    }
+
+    .rating-component__header {
+        margin-top: 30px;
+    }
+
+    .rating-component__body {
+        margin-top: 15px;
+    }
+
+    .btn-submit {
+        margin-top: 32px;
+    }
+
+    .rating-component-back {
+        padding: 45px 40px 45px 32px;
+    }
+
+    .rating-component__rating {
+        margin-top: 32px;
+    }
+
+    .rating-component__header-submitted {
+        margin-top: 32px;
+    }
+
+    .rating-component__body-submitted {
+        margin-top: 15px;
     }
 }

projects/FrontendMentor/newbie/interactive-rating-component/index.html

@@ -36,27 +36,27 @@
 
     <article class="rating-component">
       <!-- Rating state start -->
-      <section class="component-front">
+      <section class="rating-component-front" id="rating-component-front">
-        <img src="images/icon-star.svg" alt="Image of a Star" aria-hidden="true">
+        <img class="star-icon" src="images/icon-star.svg" alt="Image of a Star" aria-hidden="true">
-        <h2 class="rating-component__header">How did we do?</h2>
+        <h2 class="header rating-component__header">How did we do?</h2>
-        <p class="rating-component__body">
+        <p class="body rating-component__body">
           Please let us know how we did with your support request. All feedback is appreciated to help us improve our
           offering!
         </p>
         <form id="ratingForm">
           <fieldset>
             <!-- <legend>Please select your preferred contact method:</legend> -->
-            <div>
+            <div class="radio_container">
               <input type="radio" id="ratingScore1" name="rating" value="1">
-              <label for="ratingScore1">1</label>
+              <label class="ratingForm__label" for="ratingScore1">1</label>
               <input type="radio" id="ratingScore2" name="rating" value="2">
-              <label for="ratingScore2">2</label>
+              <label class="ratingForm__label" for="ratingScore2">2</label>
               <input type="radio" id="ratingScore3" name="rating" value="3">
-              <label for="ratingScore3">3</label>
+              <label class="ratingForm__label" for="ratingScore3">3</label>
               <input type="radio" id="ratingScore4" name="rating" value="4">
-              <label for="ratingScore4">4</label>
+              <label class="ratingForm__label" for="ratingScore4">4</label>
               <input type="radio" id="ratingScore5" name="rating" value="5">
-              <label for="ratingScore5">5</label>
+              <label class="ratingForm__label" for="ratingScore5">5</label>
             </div>
             <div>
               <button class="btn btn-submit" type="submit">Submit</button>
@@ -66,16 +66,16 @@
       </section>
       <!-- Rating state end -->
       <!-- Thank you state start -->
-      <section>
+      <section class="rating-component-back hidden" id="rating-component-back">
-        <img src="images/illustration-thank-you.svg"
+        <img class="thank-you-img" src="images/illustration-thank-you.svg"
           alt="Image of an electronic box with paper coming out of it. A card is moving towards the box"
           aria-hidden="true">
         <p class="rating-component__rating">
           You selected <span id="ratingSpan"></span>
           <!-- Add rating here --> out of 5
         </p>
-        <h2 class="rating-component__header">Thank you!</h2>
+        <h2 class="header rating-component__header-submitted">Thank you!</h2>
-        <p class="rating-component__body">
+        <p class="body rating-component__body-submitted">
           We appreciate you taking the time to give a rating. If you ever need more support,
           don’t hesitate to get in touch!
         </p>

projects/FrontendMentor/newbie/interactive-rating-component/js/script.js

@@ -1,6 +1,9 @@
 const form = document.getElementById("ratingForm");
 const ratingSpan = document.getElementById("ratingSpan");
 
+const frontSection = document.getElementById("rating-component-front");
+const backSection = document.getElementById("rating-component-back");
+
 console.log(form);
 
 form.addEventListener(
@@ -14,6 +17,8 @@ form.addEventListener(
         ratingSpan.innerText = output;
 
         //hide first section, make second section visible
+        frontSection.classList.add("hidden");
+        backSection.classList.remove("hidden");
         //use a transition effect, plus a reduced motion version
 
         event.preventDefault();