Added simple frog and speech bubble

Taseen18 · Mar 31, 2024 · 2904923 · 2904923
1 parent 7d02d81
commit 2904923
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/web/src/css/Resources.css b/web/src/css/Resources.css
@@ -37,4 +37,27 @@
     font-size: 1vw;
     margin: auto;
     margin-top:2vh;
+}
+.frog {
+    position: absolute;
+    bottom: 50%;
+    left: 15%;
+    transform: translateX(-50%);
+    z-index: 10; /* Ensure the frog is above the lily pad image */
+    font-size: 8rem;
+  }
+
+.thought-bubble {
+    position: absolute;
+    bottom: 40%;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    background-color: grey;
+    color: black;
+    border-radius: 50%;
+    padding: 20px;
+    z-index: 5; /* Below the frog but above the lily pad */
+    width: auto;
+    height: auto;
+    text-align: center;
 }
diff --git a/web/src/pages/Resources.js b/web/src/pages/Resources.js
@@ -18,8 +18,13 @@ function Resources() {
       <div className="info">Click on a lilypad</div>
       <div className="selection">
 
-
-        <Link to="/diet" className="linker"> <img className="pad" src={diet} /> </Link>
+        <div>
+          <Link to="/diet" className="linker"> <img className="pad" src={diet} /> </Link>
+          <div className="frog" role="img" aria-label="frog">🐸</div>
+          <div className="thought-bubble">
+            <p>Click on a lilypad. SPEECH BUBBLE?? ADD BUBBLE OR TAIL? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
+          </div>
+        </div>
         <Link to="/exercise" className="linker"> <img id="middlepad"className="pad"src={exercise} /> </Link>
         <Link to="/mentalhealth" className="linker">  <img className="pad"src={mh} /> </Link>