Congratulations page draft 1

src/components/Congratulations.tsx

@@ -0,0 +1,25 @@
+import '../styles/Congratulations.scss';
+import Cat from '../assets/cat.svg';
+import Dog from '../assets/dog.svg';
+import EncouragingTurtle from '../assets/encouraging-turtle.svg';
+import Header from '../assets/header.svg';
+import SpeechBubble from '../assets/speech-bubble.svg';
+
+function Congratulations(): JSX.Element {
+  return (
+    <div>
+      <section id="congratulations-container">
+        <img id="header" src={Header} />
+        <img id="speech-bubble" src={SpeechBubble} />
+        <img id="encouraging-turtle" src={EncouragingTurtle} />
+        <img id="cat" src={Cat} />
+        <img id="dog" src={Dog} />
+        <div id="congratulations-text">
+          CONGRATULATIONS!
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default Congratulations;

src/styles/Congratulations.scss

@@ -0,0 +1,62 @@
+@use '_colors.scss' as colors;
+
+#congratulations-container {
+  background-color: colors.$primary-green;
+  height: 100vh;
+  width: 100vw;
+}
+
+#speech-bubble {
+  position: absolute;
+  width: 80vw;
+  height: 60vh;
+  left: 10vw;
+  top: 20vh;
+}
+
+#header {
+  position: absolute;
+  width: 68.08px;
+  height: 35px;
+  left: 40px;
+  top: 71px;
+}
+
+#dog {
+  position: absolute;
+  width: 15vw;
+  height: 15vh;
+  left: 80vw;
+  top: 90vh;
+}
+
+#cat {
+  position: absolute;
+  width: 15vw;
+  height: 15vh;
+  left: 90vw;
+  top: 90vh;
+}
+
+#encouraging-turtle {
+  position: absolute;
+  width: 15vw;
+  height: 15vh;
+  left: 10vw;
+  top: 80vh;
+}
+
+#congratulations-text {
+  position: absolute;
+  width: 60vw;
+  left: 20vw;
+  top: 27vh;
+
+  font-family: PT Sans;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 40px;
+  line-height: 79px;
+
+  color: colors.$primary-green;
+}