Merge pull request #104 from Ankurnegigithub/main

#23 Improve banner design done

banner.js

@@ -1,12 +1,16 @@
-document.addEventListener('DOMContentLoaded', function () {
-    for (let i = 1; i <= 10; i++) {
-        let div = document.createElement('div');
-        div.classList.add('box');
-        div.style.animationDelay = `${i * 0.05}s`;
-        document.querySelector('.banner').appendChild(div);
-    }
+const boxContainer = document.getElementById('boxContainer');
 
-});
+        // Create 2 sets of 'infi' elements
+        for (let set = 0; set < 2; set++) {
+            const infiDiv = document.createElement('div');
+            infiDiv.classList.add('infi');
 
+            for (let i = 0; i <= 20; i++) {
+                const span = document.createElement('span');
+                span.style.setProperty('--i', i);
+                infiDiv.appendChild(span);
+            }
 
+            boxContainer.appendChild(infiDiv);
+        }
 

index.html

@@ -35,6 +35,8 @@ <h3>Simple Contribution</h3>
     </nav>
     <section>
         <div class="banner">
+             <div class="box" id="boxContainer">
+            </div>
             <h1>HI CONTRIBUTORS!</h1>
             <p>This is a simple project that will not only help you contribute to your first open source project,
                 but will also guide you through the entire process,<span>so whether this is your first time contributing
@@ -123,4 +125,4 @@ <h1>Thanks for your Contribution<i class="fa-solid fa-leaf-heart"></i></i></h1>
     </script>
 </body>
 
-</html>
+</html>

style/banner.css

@@ -0,0 +1,103 @@
+.banner{
+    animation: animatecolor 8s linear infinite;
+
+    }
+
+    @keyframes animatecolor {
+        0% {
+            filter: hue-rotate(0deg);
+        }
+        100% {
+            filter: hue-rotate(360deg);
+        }
+    }
+    .banner .box {
+         display:flex;
+         height:800px;
+         width: 1250px;
+         position: absolute;
+         margin-top: 20rem;
+         margin-left:20rem;
+      opacity: 0.8;
+
+}
+
+    .banner .box .infi {
+        position: relative;
+        height: 500px;
+        width: 500px;
+        margin:0 -12.5px;
+
+    }
+
+    .banner .box .infi span {
+        position: absolute;
+        left:0;
+        right:0;
+        height: 100%;
+        width: 100%;
+        transform: rotate(calc(18deg * var(--i)));
+
+    }
+
+    .banner .box .infi span::before {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: calc(50% - 12.5px);
+        width: 25px;
+        height: 25px;
+        background-color: rgba(255, 255, 255);
+        border-radius: 50%;
+        box-shadow: 0 0 10px #15b5ff50,
+         0 0 20px #15b5ff50, 
+         0 0 40px #15b5ff50,
+          0 0 60px #15b5ff50, 
+          0 0 80px #15b5ff50, 
+          0 0 100px #15b5ff50;
+        transform: scale(0.1);
+        animation: animate 4s infinite;
+        animation-delay: calc(0.1s * var(--i));
+
+    }
+
+    @keyframes animate {
+        0% {
+            transform: scale(1);
+        }
+        50%, 100% {
+            transform: scale(0.1);
+        }
+    }
+
+    .banner .box .infi:nth-child(2) {
+        transform: rotate(-180deg);
+    }
+
+    .banner .box .infi:nth-child(2) span::before {
+        animation-delay: calc(-0.1s * var(--i));
+    }
+
+
+    @media screen and (max-width:760px) {
+       /* Add this inside your existing media query for smaller screens */
+        .banner .box {
+            width: 90%; /* Adjust the width of the box for smaller screens */
+
+             margin:2rem auto;
+             margin-top: 20rem;
+             /* Center the box and add some vertical spacing */
+        }
+
+        .box .infi {
+            height: 120px; /* Adjust the height of the infi for smaller screens */
+            width: 120px; /* Adjust the width of the infi for smaller screens */
+            margin: 0 -3px; /* Adjust margins for spacing between elements */
+        }
+
+        .box .infi span::before {
+            top: calc(50% - 3px); /* Adjust the top position for smaller screens */
+            width: 6px; /* Adjust the width of the dots for smaller screens */
+            height: 6px; /* Adjust the height of the dots for smaller screens */
+        }
+    }

style/style.css

@@ -93,26 +93,6 @@ section {
 
 }
 
-.box {
-    height: 800px;
-    width: 1250px;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    position: absolute;
-    margin-top: 5rem;
-    animation: rotate 6s ease infinite;
-    z-index: 1; 
-
-}
-
-@keyframes rotate {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
 .banner h1 {
     font-size: 3.5rem;
     margin-bottom: 0;
@@ -544,4 +524,4 @@ footer .lag {
         margin-bottom: 2rem;
     }
 
-}
+}