Update design for congrats page

src/components/shared/Congratulations.tsx

@@ -6,28 +6,51 @@ import penPalsLogo from '../../assets/turtleLogo.svg';
 function CongratsPage(): JSX.Element {
   return (
     <section id="congrats-page-container">
-      <div>
-        <div id="turtle-logo">
-          <img
-            src={penPalsLogo}
-            alt="Small turtle, part of the TeachLA logo"
-            id="turtle-image"
-          />
-          <div id="turtle-logo-text">Pen Pals</div>
-        </div>
-
+      <div id="congrats-turtle-logo">
+        <img
+          src={penPalsLogo}
+          alt="Small turtle, part of the TeachLA logo"
+          id="turtle-image"
+        />
+        <div id="turtle-logo-text">Pen Pals</div>
+      </div>
+      <div className="congrats-speech-and-turtle-container"></div>
+      <div className="congrats-speech-turtle-container">
         <div className="speech-bubble">
           <img
             src={speechBubble}
             alt="Small turtle, part of the TeachLA logo"
             id="speech-bubble-image"
           />
-          <div id="congratsTxt">CONGRATULATIONS!</div>
+          <div className="congrats-text">
+            <h1 id="congratsHeader">CONGRATULATIONS!</h1>
+            <p>
+              You learned about Python’s turtle library, where you can use
+              commands such as goto, forward, left, and right to draw lines.
+              Now, you can use these skills to create your own drawings and
+              graphics using code!
+            </p>
+            <div className="congrats-links">
+              <h2 id="congrats-links-header">
+                Check out our other websites to learn more!
+              </h2>
+              <a href="https://parcel-pointers.netlify.app/">
+                <u>Parcel Pointers</u>
+              </a>
+              <br />
+              <a href="https://boolbots.uclaacm.com/">
+                <u>Bool Bots</u>
+              </a>
+              <br />
+              <a href="https://tuxs-great-adventure.netlify.app/">
+                <u>Tux&apos;s Great Adventures</u>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div id="encouraging-turtle-congratulations">
+          <img src={encouragingTurtle} alt="turtle image" id="turtle-picture" />
         </div>
-      </div>
-
-      <div id="encouraging-turtle-congratulations">
-        <img src={encouragingTurtle} alt="turtle image" id="turtle-picture" />
       </div>
     </section>
   );

src/styles/Congratulations.scss

@@ -9,19 +9,26 @@
 }
 
 #congrats-page-container {
+  align-items: center;
   background-color: colors.$primary-green;
+  display: flex;
+  flex-direction: column;
   // display: flex;
   height: 100%;
+  justify-content: center;
   // position: relative;
   width: 100%;
 }
 
-#turtle-logo {
+#congrats-turtle-logo {
   color: colors.$text-white;
   float: left;
+  left: 0;
   padding-left: 2vw;
   padding-top: 2vh;
+  position: fixed;
   text-align: left;
+  top: 0;
   width: 37vw;
 }
 
@@ -39,27 +46,54 @@
 }
 
 .speech-bubble {
-  height: auto;
   margin-left: 18vw;
   margin-right: 18vw;
+  max-height: 100vh;
+  padding: 0 2rem;
+  position: relative;
   // position: absolute;
-  width: auto;
+  width: 60vw;
 }
 
 #speech-bubble-image {
   height: auto;
-  width: 100%;
+  max-height: 100vh;
+  width: 60vw;
+}
+
+.congrats-text {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: 0;
+  max-width: 60vw;
+  padding: 0 8vw;
+  position: absolute;
+  top: 1rem;
+}
+
+.congrats-text p {
+  font-size: 1.75vw;
 }
 
-#congratsTxt {
+#congratsHeader {
   color: colors.$primary-green;
   font-family: 'PT Sans', sans-serif;
   font-size: 4vw;
   font-weight: bold;
-  left: 50vw;
-  position: absolute;
-  top: 26%;
-  transform: translate(-50%, -60%);
+}
+
+.congrats-links a {
+  color: #000;
+  font-size: 1.75vw;
+}
+
+#congrats-links-header {
+  color: colors.$primary-green;
+  font-family: 'PT Sans', sans-serif;
+  font-size: 2vw;
+  font-weight: bold;
 }
 
 #encouraging-turtle-congratulations {
@@ -71,6 +105,9 @@
 }
 
 #turtle-picture {
+  bottom: 2rem;
+  left: 2rem;
   padding-left: 6vw;
+  position: absolute;
   width: 14vw;
 }