Added ground and grass animation (#2361)

zero-to-mastery · Oct 27, 2023 · ebda3d9 · ebda3d9
1 parent ddbe0c5
commit ebda3d9
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 1 deletion.
diff --git a/Art/RoksolanaVeres/index.html b/Art/RoksolanaVeres/index.html
@@ -76,6 +76,28 @@
             <div class="vein vein-4"></div>
           </div>
         </div>
+        <div class="ground">
+          <div class="grass grass-1"></div>
+          <div class="grass grass-2"></div>
+          <div class="grass grass-3"></div>
+          <div class="grass grass-4"></div>
+          <div class="grass grass-5"></div>
+          <div class="grass grass-6"></div>
+          <div class="grass grass-7"></div>
+          <div class="grass grass-8"></div>
+          <div class="grass grass-9"></div>
+          <div class="grass grass-10"></div>
+          <div class="grass grass-11"></div>
+          <div class="grass grass-12"></div>
+          <div class="grass grass-13"></div>
+          <div class="grass grass-14"></div>
+          <div class="grass grass-15"></div>
+          <div class="grass grass-16"></div>
+          <div class="grass grass-17"></div>
+          <div class="grass grass-18"></div>
+          <div class="grass grass-19"></div>
+          <div class="grass grass-20"></div>
+        </div>
       </div>
     </main>
   </body>

diff --git a/Art/RoksolanaVeres/moody-sunflower.gif b/Art/RoksolanaVeres/moody-sunflower.gif
diff --git a/Art/RoksolanaVeres/styles.css b/Art/RoksolanaVeres/styles.css
@@ -18,7 +18,6 @@ main {
   align-items: center;
   justify-content: space-between;
   gap: 250px;
-  padding-bottom: 100px;
 }
 
 .sky {
@@ -537,3 +536,150 @@ main {
   right: 45px;
   transform: rotate(290deg);
 }
+
+.ground {
+  width: 600%;
+  height: 20px;
+  background: linear-gradient(
+    180deg,
+    rgba(60, 163, 64, 1) 21%,
+    rgba(111, 78, 38, 1) 100%
+  );
+  position: relative;
+}
+
+.grass {
+  position: absolute;
+  width: 4px;
+  height: 50px;
+  z-index: -10;
+  border-radius: 50%;
+  background-color: rgba(60, 163, 64, 1);
+  animation: growing-grass 4s ease infinite;
+}
+
+@keyframes growing-grass {
+  50% {
+    height: 20px;
+  }
+}
+
+.grass-1 {
+  bottom: 1px;
+  left: 50px;
+  transform: rotate(312deg);
+}
+
+.grass-2 {
+  bottom: 8px;
+  left: 60px;
+  transform: rotate(317deg);
+}
+
+.grass-3 {
+  bottom: 17px;
+  left: 70px;
+  transform: rotate(341deg);
+}
+
+.grass-4 {
+  bottom: 17px;
+  left: 80px;
+  transform: rotate(24deg);
+}
+
+.grass-5 {
+  bottom: 10px;
+  left: 90px;
+  transform: rotate(24deg);
+}
+
+.grass-6 {
+  bottom: 5px;
+  left: 100px;
+  transform: rotate(24deg);
+}
+
+.grass-7 {
+  bottom: 13px;
+  left: 117px;
+  transform: rotate(19deg);
+}
+
+.grass-8 {
+  bottom: 5px;
+  left: 120px;
+  transform: rotate(24deg);
+}
+
+.grass-9 {
+  bottom: 5px;
+  left: 130px;
+  transform: rotate(304deg);
+}
+
+.grass-10 {
+  bottom: 5px;
+  left: 140px;
+  transform: rotate(24deg);
+}
+
+.grass-11 {
+  bottom: 5px;
+  left: 150px;
+  transform: rotate(24deg);
+}
+
+.grass-12 {
+  bottom: 11px;
+  left: 160px;
+  transform: rotate(316deg);
+}
+
+.grass-13 {
+  bottom: 5px;
+  left: 170px;
+  transform: rotate(24deg);
+}
+
+.grass-14 {
+  bottom: 5px;
+  left: 180px;
+  transform: rotate(24deg);
+}
+
+.grass-15 {
+  bottom: 10px;
+  left: 192px;
+  transform: rotate(36deg);
+}
+
+.grass-16 {
+  bottom: 5px;
+  left: 200px;
+  transform: rotate(24deg);
+}
+
+.grass-17 {
+  bottom: 10px;
+  left: 210px;
+  transform: rotate(12deg);
+}
+
+.grass-18 {
+  bottom: 5px;
+  left: 220px;
+  transform: rotate(24deg);
+}
+
+.grass-19 {
+  bottom: 15px;
+  left: 235px;
+  transform: rotate(24deg);
+}
+
+.grass-20 {
+  bottom: 5px;
+  left: 240px;
+  transform: rotate(42deg);
+}