Publish 2025-08-21

Author: alexanderby

images/plus-devices-black.jpg

@@ -38,7 +38,13 @@ <h3 class="slogan">
         </h3>
 
         <div class="desktop-promo">
-            <img class="desktop-promo-image" src="/images/plus-devices-1.jpg">
+            <div class="desktop-promo-wrapper">
+                <img class="desktop-promo-image" src="/images/plus-devices-black.jpg">
+                <img class="desktop-promo-image" src="/images/plus-devices-violet.jpg">
+                <img class="desktop-promo-image" src="/images/plus-devices-green.jpg">
+                <img class="desktop-promo-image" src="/images/plus-devices-blue.jpg">
+                <img class="desktop-promo-image" src="/images/plus-devices-darkblue.jpg">
+            </div>
         </div>
 
         <p>

images/plus-devices-blue.jpg

@@ -175,13 +175,41 @@ footer {
     padding-left: 10%;
 }
 
+.desktop-promo-wrapper {
+    position: relative;
+}
+
 .desktop-promo-image {
-    aspect-ratio: 2;
-    object-fit: cover;
-    object-position: 50% 54%;
     width: 100%;
 }
 
+.desktop-promo-image:not(:first-child) {
+    animation-duration: 10s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+}
+
+.desktop-promo-image:nth-child(2) {
+    animation-name: promo-image-1;
+}
+
+.desktop-promo-image:nth-child(3) {
+    animation-name: promo-image-2;
+}
+
+.desktop-promo-image:nth-child(4) {
+    animation-name: promo-image-3;
+}
+
+.desktop-promo-image:nth-child(5) {
+    animation-name: promo-image-4;
+}
+
 .edge-icon {
     background-image: url(/images/icon-edge-256x256.svg);
     background-position: center;
@@ -203,3 +231,63 @@ footer {
         font-size: 2rem;
     }
 }
+
+@keyframes promo-image-1 {
+    0% {
+        opacity: 0;
+    }
+    20% {
+        opacity: 1;
+    }
+    40% {
+        opacity: 1;
+    }
+    41% {
+        opacity: 0;
+    }
+}
+
+@keyframes promo-image-2 {
+    20% {
+        opacity: 0;
+    }
+    40% {
+        opacity: 1;
+    }
+    60% {
+        opacity: 1;
+    }
+    61% {
+        opacity: 0;
+    }
+}
+
+@keyframes promo-image-3 {
+    40% {
+        opacity: 0;
+    }
+    60% {
+        opacity: 1;
+    }
+    80% {
+        opacity: 1;
+    }
+    81% {
+        opacity: 0;
+    }
+}
+
+@keyframes promo-image-4 {
+    0% {
+        opacity: 0;
+    }
+    60% {
+        opacity: 0;
+    }
+    80% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}