Merge pull request #65 from GeorgiySergeev/how-it-gif-and-animations

How it gif and animations

src/css/how-it-works.css

@@ -1,3 +1,6 @@
+video {
+  object-fit: fill;
+}
 .ruls {
   padding-top: 50px;
   padding-bottom: 30px;
@@ -58,7 +61,7 @@
   justify-content: center;
 
   flex-wrap: wrap;
-  gap: 20px;
+   gap: 20px;
 }
 
 @media only screen and (min-width: 768px) {
@@ -103,14 +106,98 @@
 
   background-color: var(--btn-bg-color-norm);
   border-radius: 200px;
+
+  animation-name: jump-1;
+  animation-duration: 7s;
+  animation-iteration-count: infinite;
+
+
+
+}
+
+@keyframes jump-1 {
+
+  0% {
+    scale: 1;
+  }
+
+  8% {
+    scale: 1;
+  }
+
+  14% {
+    scale: 1.2;
+  }
+
+  24% {
+    scale: 1;
+  }
+
+  100% {
+    scale: 1;
+  }
+
 }
 
 .link-how-it:first-child .title-box-how-it {
   background-color: var(--primary-bg-color);
+  animation-name: jump;
+
+}
+
+@keyframes jump  {
+
+  0% {
+    scale:1;
+  }
+
+  6% {
+    scale: 1;
+  }
+
+  12% {
+    scale: 1.2;
+  }
+
+  22%{
+    scale: 1;
+  }
+
+  100% {
+    scale: 1;
+  }
 }
 
 .link-how-it:last-child .title-box-how-it {
   background-color: var(--yellow-bg);
+  animation-name: jump-2;
+}
+
+@keyframes jump-2 {
+
+
+  0% {
+    scale: 1;
+  }
+
+  10% {
+    scale: 1;
+  }
+
+  18% {
+    scale: 1.2
+  }
+
+  26% {
+    scale: 1;
+  }
+
+
+  100% {
+    scale: 1;
+  }
+
+
 }
 
 @media only screen and (min-width: 768px) {

src/partials/how-it-works.html

@@ -46,13 +46,15 @@ <h3 class="title-card-how-it">Third Step</h3>
   </ul>
 
   <div class="box-gif">
-    <img
-      src="./img/how-it/deck-gif.gif"
+    <video 
+      src="./img/how-it/deck-gif.mp4"
       class="gif-how-it"
       alt="fruits"
       width="860"
       height="476"
       loading="lazy"
-    />
+      autoplay=""
+      loop
+    ></video>
   </div>
 </div>