fixed background

Ctmax-ui · May 31, 2024 · 15bd877 · 15bd877
1 parent 783da0e
commit 15bd877
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 7 deletions.
diff --git a/css/style.css b/css/style.css
@@ -7,8 +7,8 @@
     font-family: "Signika", sans-serif;
     font-weight: 400;
     font-style: normal;
+
 }
-
 .wraper {
     width: 100vw;
     height: 100vh;
@@ -19,8 +19,32 @@
     height: 100%;
     width: 100%;
     margin: auto;
-    background: linear-gradient(to top, #3E2D8F, #9D52AC);
     border-radius: 0 !important;
+    position: relative;
+    overflow: hidden;
+    border: none;
+}
+
+.main-card::before {
+    content: '';
+    position: absolute;
+    scale: 2.5;
+    border-radius: 50%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(0deg, #3E2D8F, #9D52AC);
+    animation: bgRoundAnim 4s linear infinite;
+}
+
+@keyframes bgRoundAnim {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 .search-bar input {
@@ -89,8 +113,15 @@
     width: 90%;
     display: flex;
     justify-content: center !important;
-    background: #ffffff24;
-    border: 1px solid #3E2D8F;
+    background: transparent;
+    background-image: linear-gradient(
+        110deg,
+        rgba(115, 87, 255, 0.3),
+        rgba(62, 45, 143, 0.3)
+    );
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(30px);
+    border: 1px solid #efefef83;
 }
 
 .weather-details img {
@@ -125,9 +156,17 @@
     height: 100%;
     margin: 10px auto;
     width: 90%;
-    background: #ffffff24;
-    border: 1px solid #3E2D8F;
     color: #fff;
+    background: transparent;
+    background-image: linear-gradient(
+        110deg,
+        rgba(115, 87, 255, 0.3),
+        rgba(62, 45, 143, 0.3)
+    );
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(30px);
+    border: 1px solid #efefef83;
+    padding-top: 3% !important;
 }
 
 

diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
                     <p class="">Max: <span id="max-temp">0</span></p>
                 </div>
             </div>
-            <div class="extra-details rounded-4 p-2 pt-3">
+            <div class="extra-details rounded-4 p-2">
                 <div class="w-100 d-flex justify-content-evenly ">
                     <p><i class="fa-solid fa-wind"></i> <span id="wind-speed">0</span> Km/s</p>
                     <p><i class="fa-regular fa-compass"></i> <span id="wind-angle">0</span>°</p>

diff --git a/js/index.js b/js/index.js
@@ -86,3 +86,4 @@ searchForm.addEventListener("submit", (e) => {
         searchInput.value = "";
     }
 });
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -86,3 +86,4 @@ searchForm.addEventListener("submit", (e) => {
		searchInput.value = "";
		}
		});