new: setup bouncy cube

lezette · Oct 4, 2024 · 493660d · 493660d
1 parent 3c7d186
commit 493660d
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 2 deletions.
diff --git a/bouncyCube/index.html b/bouncyCube/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <div class="stage">
+    <div class="floor"></div>
+    <div class="cube"></div>
+    <div class="ball"></div>
+  </div>
+</body>
+
+</html>
diff --git a/bouncyCube/style.css b/bouncyCube/style.css
@@ -0,0 +1,51 @@
+:root {
+  --boxColor: #0ff7;
+}
+
+body {
+  background-color: black;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 75px;
+  perspective: 10em;
+  perspective-origin: 50% calc(50% - 2em);
+}
+
+
+
+
+.stage {
+  position: relative;
+  transform-style: preserve-3d;
+}
+
+.ball {
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  background-color: white;
+  position: absolute;
+  left: -.5em;
+  bottom: 1em;
+}
+
+.cube {
+  width: 2em;
+  height: 2em;
+  background-color: var(--boxColor);
+  position: absolute;
+  top: -1em;
+  left: -1em;
+}
+
+.floor {
+  position: absolute;
+  top: 1em;
+  width: 15em;
+  height: 15em;
+  transform: translate(-50%, -50%) rotateX(90deg);
+  background-image: repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg);
+  background-size: 1em 1em;
+}
diff --git a/portal/style.css b/portal/style.css
@@ -1,8 +1,7 @@
 body {
   background-color: #efe8dd;
   overflow: hidden;
-  /* background: linear-gradient(#ced5d3, #ced5d3 144px, #efe8dd 144px, #efe8dd 100%); */
-  background-color: black;
+  background: linear-gradient(#ced5d3, #ced5d3 144px, #efe8dd 144px, #efe8dd 100%);
   width: 90%;
 }