add cloud

M3-org · Nov 10, 2023 · 0c579a2 · 0c579a2
1 parent ee01821
commit 0c579a2
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 3 deletions.
diff --git a/overworld/images/cloud.png b/overworld/images/cloud.png
diff --git a/overworld/index.html b/overworld/index.html
@@ -8,8 +8,10 @@
 </head>
 
 <body>
+
+
     <div class="map-container">
-        <!-- All your <a> tags go here -->
+
 
         <a href="safe (multisig bank)" target="_blank" class="gnosis-safe"><img src="images/gnosis.png"><span class="tooltip">Gnosis Safe Info</span></a>
 
@@ -39,8 +41,15 @@
 
         <a href="https://sketchfab.com/3d-models/m3tv-soundstage-6206325ff5c643c9b1dd2ce5aadbec19" target="_blank" class="m3tv-soundstage"><img src="images/studio.png"><span class="tooltip">M3TV Soundstage</span></a>
 
+        <div class="cloud-container">
+            <img src="images/cloud.png" class="cloud" alt="Cloud">
+            <!-- Repeat the above line for multiple clouds if needed -->
+        </div>
+
     </div>
 
+
+
     <!-- HUD with badges -->
     <div class="hud">
         <img src="images/1.png" target="_blank" alt="Badge 1" class="badge" data-tooltip="This is Badge 1">
@@ -55,8 +64,14 @@
         <a href="https://github.com/M3-org/charter" target="_blank"><img src="images/10.png" alt="Badge 10" class="badge" data-tooltip="This is Badge 10"></a>
         <!-- Add more badges as needed -->
     </div>
-
+        <div class="about">
+            <p>
+                M3Org is a pioneering platform in the Open Metaverse, dedicated to creating an interoperable, open-source universe of 3D worlds where individuality thrives through customizable avatars. Our vibrant community collaborates on Discord, fostering a co-working environment that encourages diverse aspirations while jointly building and shaping our digital realm. M3Org is more than just a space; it's a collective journey towards an imaginative and inclusive future, powered by the creativity and unity of its members.
+            </p>
+        </div>
     <div class="links">
+
+
         <a href="https://github.com/m3-org" target="_blank" class="ping">M3 GitHub</a>
         <a href="https://discord.gg/m3-org" target="_blank" class="ping">M3 Discord</a>
         <a href="https://hackmd.io/@xr/book" target="_blank" class="ping">M3 Research</a>
@@ -84,6 +99,7 @@
         <a href="https://uncannyalley.io" target="_blank"  class="ping">Uncanny Alley</a>
       </div>
 
+
 
 
 </body>

diff --git a/overworld/styles.css b/overworld/styles.css
@@ -4,6 +4,11 @@ body {
      width: 100%;
 }
 
+.about{
+     margin: 0px;
+     padding: 100px;
+}
+
 
 .map-container {
     background: url('images/body.png') no-repeat center center;
@@ -205,4 +210,41 @@ body {
           background-color: #00000f;
           position: relative;
           top: 100%;
-        }
+        }
+
+        .cloud-container {
+          position: relative;
+          width: 100%;
+          height: 100vh; /* Adjust as needed */
+          overflow: hidden; /* Keeps clouds within the bounds of the container */
+          pointer-events: none; /* Disables click events on the cloud */
+
+      }
+
+      .cloud {
+          position: absolute;
+          width: 150px; /* Adjust based on your image size */
+          animation: floatClouds 100s linear infinite;
+          pointer-events: none; /* Disables click events on the cloud */
+
+          /* Use multiple cloud elements with different delays for a more dynamic effect */
+      }
+
+
+
+      @keyframes floatClouds {
+          0% {
+              transform: translateX(0) translateY(0);
+              opacity: 0;
+          }
+          10% {
+              opacity: 1;
+          }
+          90% {
+              opacity: 1;
+          }
+          100% {
+              transform: translateX(100vw) translateY(100vh); /* Moves to the bottom right */
+              opacity: 0;
+          }
+      }