restyled temperature cards

avinash201199 · Oct 25, 2023 · 729f28c · 729f28c
1 parent 4a837da
commit 729f28c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -326,13 +326,27 @@ button:focus {
 }
 
 .forecast-component__item {
-  border: 1px solid rgb(35, 35, 35);
-    background: rgba(9, 80, 102, 0.7);
-  padding: 12px;
-  transition: background-color 0.5s ease;
-  height: 150px;
+  position: relative;
+  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+  border-left: 1px solid rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(5px);
+  height: 210px;
   width: 100%;
   min-width: max-content;
+  margin: 1%;
+
+}
+
+.w-100{
+  width: 111%!important;
 }
 
 .forecast-component__item img {

diff --git a/index.html b/index.html
@@ -153,7 +153,7 @@ <h2 id="temp" class="weather-component__city-temperature fw-bold display-1">32°
             </div>
           </div>
         </div>
-        <div class="col" style="margin-top: 5.5rem;">
+        <div class="col" style="margin-top: 3.5rem;">
           <div class="forecast-component p-2 overflow-hidden text-white w-100">
             <div class="forecast-component__items-wrapper transition overflow-hidden " id="weather-forecast">
               <div class="forecast-component__item rounded text-center" id="weather-forecast-item">