Added solar-system animation (#2326)

zero-to-mastery · Oct 24, 2023 · 00f8533 · 00f8533
1 parent da3410a
commit 00f8533
Show file tree

Hide file tree

Showing 5 changed files with 185 additions and 0 deletions.
diff --git a/Art/Comder101/solar_system.css b/Art/Comder101/solar_system.css
@@ -0,0 +1,133 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  background-color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+stars {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.star {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background-color: white;
+  opacity: 0.5;
+  animation: twinkle 1s infinite;
+  background: url('star.png') no-repeat center center/contain;
+
+}
+
+@keyframes twinkle {
+  0% { opacity: 1; }
+  50% { opacity: 0; }
+  100% { opacity: 1; }
+}
+.solar-system {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.sun,
+.planet {
+  width: 60px;
+  height: 60px;
+  background-color: #f39c12;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.sun {
+  background-color: #f39c12;
+}
+
+.mercury {
+  background-color: #bdc3c7;
+  top: -20px;
+  left: 0;
+  animation: planet-revolution 4s infinite linear;
+}
+
+.venus {
+  background-color: #d35400;
+  top: -40px;
+  left: 70px;
+  animation: planet-revolution 7s infinite linear;
+}
+
+.earth {
+  background-color: #3498db;
+  top: -60px;
+  left: 140px;
+  animation: planet-revolution 12s infinite linear;
+}
+
+.mars {
+  background-color: #e74c3c;
+  top: -80px;
+  left: 210px;
+  animation: planet-revolution 20s infinite linear;
+}
+
+.orbit {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+}
+
+.mercury-orbit {
+  width: 40px;
+  height: 40px;
+  animation: orbit-rotation 4s infinite linear;
+}
+
+.venus-orbit {
+  width: 100px;
+  height: 100px;
+  animation: orbit-rotation 7s infinite linear;
+}
+
+.earth-orbit {
+  width: 160px;
+  height: 160px;
+  animation: orbit-rotation 12s infinite linear;
+}
+
+.mars-orbit {
+  width: 220px;
+  height: 220px;
+  animation: orbit-rotation 20s infinite linear;
+}
+
+
+
+@keyframes planet-revolution {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes orbit-rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/Art/Comder101/solar_system.gif b/Art/Comder101/solar_system.gif
diff --git a/Art/Comder101/solar_system.html b/Art/Comder101/solar_system.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="solar_system.css">
+</head>
+<body>
+  <div class="solar-system">
+    <div class="sun"></div>
+    <div class="orbit mercury-orbit">
+      <div class="planet mercury"></div>
+    </div>
+    <div class="orbit venus-orbit">
+      <div class="planet venus"></div>
+    </div>
+    <div class="orbit earth-orbit">
+      <div class="planet earth"></div>
+    </div>
+    <div class="orbit mars-orbit">
+      <div class="planet mars"></div>
+    </div>
+  </div>
+  <div class="stars"></div>
+  <script>  
+    function createRandomStars() {
+      const numberOfStars = 100; 
+      const starsContainer = document.querySelector('.stars');
+
+      for (let i = 0; i < numberOfStars; i++) {
+        const star = document.createElement('div');
+        star.className = 'star';
+        star.style.left = `${Math.random() * 100}vw`;
+        star.style.top = `${Math.random() * 100}vh`;
+        star.style.width = `${Math.random() * 80}px`;
+        star.style.height = star.style.width;
+        const twinklingTime = Math.random() * 5 + 0.5;
+        star.style.animation = `twinkle ${twinklingTime}s infinite`;
+        starsContainer.appendChild(star);
+      }
+    }
+    createRandomStars();
+  </script>
+</body>
+</html>
diff --git a/Art/Comder101/star.png b/Art/Comder101/star.png
diff --git a/include.js b/include.js
@@ -111,6 +111,13 @@ let cards = [
     author: 'Ahmed',
     githubLink: 'https://github.com/ahmedalhamad7'
   },
+  {
+    artName: "Solar system-Art",
+    pageLink: './Art/Comder101/solar_system.html',
+    imageLink: './Art/Comder101/solar_system.gif',
+    author: 'Comder101',
+    githubLink: 'https://github.com/Comder101'
+  },
   {
     artName: 'Bird Walk',
     pageLink: './Art/pypimo/index.html',