Page 9

jack-vo · Aug 21, 2024 · 3d8b7d6 · 3d8b7d6
1 parent 5196e60
commit 3d8b7d6
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 10 deletions.
diff --git a/blue-riding-hood/long-road-the-end.html b/blue-riding-hood/long-road-the-end.html
@@ -9,19 +9,10 @@
             rel="stylesheet"
             href="https://fonts.googleapis.com/icon?family=Material+Icons"
         />
-
-        <style>
-            .page-the-end {
-                gap: 40px;
-            }
-        </style>
     </head>
     <body class="indie-flower-regular">
-        <!-- https://labs.learnosity.com/solutions/sales-enablement/custom-ui/blue-riding-hood/index.php -->
         <div class="container">
-            <div
-                class="page page-the-end animate__animated animate__lightSpeedInRight"
-            >
+            <div class="page">
                 <div class="text text-align-center">
                     <div>
                         The long road is wayyy... too long SO by the time our

diff --git a/blue-riding-hood/page-9.html b/blue-riding-hood/page-9.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta name="robots" content="noindex" />
+        <title>Blue riding hood</title>
+        <link rel="stylesheet" type="text/css" href="global.css" />
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/icon?family=Material+Icons"
+        />
+        <style>
+            .room {
+                position: relative;
+            }
+
+            .room-background {
+                width: 1100px;
+            }
+
+            .blue-riding-hood-img {
+                width: 140px;
+                position: absolute;
+                right: 420px;
+                bottom: 90px;
+            }
+
+            .wolf {
+                width: 180px;
+                position: absolute;
+                right: 100px;
+                bottom: 20px;
+            }
+
+            .speech-bubble,
+            .speech-bubble a {
+                display: flex;
+                align-items: center;
+            }
+            .speech-bubble img {
+                width: 50px;
+            }
+
+            .bubble-1 {
+                left: 200px;
+                bottom: 210px;
+            }
+
+            .bubble-2 {
+                bottom: 260px;
+                right: 80px;
+            }
+
+            .bubble-3 {
+                bottom: 40px;
+                left: 330px;
+            }
+        </style>
+    </head>
+    <body class="indie-flower-regular">
+        <div class="container">
+            <div class="page page-6 tilt-in-fwd-tr">
+                <div class="text text-align-center">
+                    <div>
+                        The Wolf jumps from the bed and throws aside Grandma's
+                        dressing gown!
+                    </div>
+                    <div>
+                        <span class="blue">Blue</span> Riding Hood is chased
+                        into the corner of the room!
+                    </div>
+                    <div class="text-bold red">What should she do???</div>
+                </div>
+                <div class="room">
+                    <img
+                        class="room-background"
+                        src="https://img.freepik.com/free-vector/house-attic-interior-empty-old-mansard-room_107791-16776.jpg?w=1380"
+                    />
+                    <img
+                        class="blue-riding-hood-img"
+                        src="https://labs.learnosity.com/solutions/sales-enablement/custom-ui/blue-riding-hood/assets/img/sadblueridinghood.png"
+                    />
+                    <img
+                        class="wolf"
+                        src="https://labs.learnosity.com/solutions/sales-enablement/custom-ui/blue-riding-hood/assets/img/wolf.png"
+                    />
+                    <button
+                        class="speech-bubble indie-flower-regular bubble-1"
+                        onclick="alert('Seriously... You must have watched too many Hollywood action movies!')"
+                    >
+                        <img src="https://pngimg.com/d/ninja_PNG34.png" />
+                        Let's flying kick out of the window like a ninja!
+                    </button>
+                    <button
+                        class="speech-bubble indie-flower-regular bubble-2"
+                        onclick="alert('Do you even have any money??? You have blown all your allowance on video games last week!')"
+                    >
+                        <img
+                            src="https://labs.learnosity.com/solutions/sales-enablement/custom-ui/blue-riding-hood/assets/img/taxi.png"
+                        />Let's Uber the heck out of here!
+                    </button>
+                    <button class="speech-bubble indie-flower-regular bubble-3">
+                        <a href="page-10.html">
+                            <img
+                                src="https://png.pngtree.com/png-vector/20220704/ourmid/pngtree-loudly-screaming-emoji-face-png-image_5612781.png"
+                            />
+                            SCREAM for HELP!
+                        </a>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>