modify styles

Author: tajulafreen

Source-Code/WeatherApp/style.css

@@ -3,52 +3,58 @@
   padding: 0;
   margin: 0;
 }
-p, span{
+
+p, span {
   font-size: 18px;
 }
-.weather-app{
+
+.weather-app {
   min-height: 100vh;
   min-width: 100vw;
-  background-image: url(./images/Night/clear.jpg);
-  background-position: center;
+  background-position: center; 
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: cover; 
   position: relative;
   color: #fff;
   transition: 500ms linear;
   opacity: 1;
 }
-.weather-app::before{
- content: "";
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0,0,0,0.3);
- z-index: 0;
+
+.weather-app::before {
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.3);
+  z-index: 0;
 }
-.weather-container{
- display: flex;
- justify-content: space-between;
+
+.weather-container {
+  display: flex;
+  justify-content: space-between;
 }
-.heading{
+
+.heading {
   display: flex;
   align-items: center;
 }
 
-.temp{
+.temp {
   font-size: 50px;
   font-weight: 700;
 }
-.city{
+
+.city {
   font-size: 48px;
   font-weight: 700;
-  
 }
-li{
+
+li {
   list-style: none;
 }
-.weather-information{
+
+.weather-information {
   display: flex;
   flex-direction: row;
   align-items: flex-end; 
@@ -58,20 +64,21 @@ li{
   width: 60%;
 }
 
-.column{
+.column {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
-.row{
+
+.row {
   display: flex;
   justify-content: space-between;
-  margin: 13px 30px;
+  margin: 10px 30px;
   gap: 30%;
 }
 
-.weather-suggestions{
+.weather-suggestions {
   width: 40vw;
   height: 100vh;
   background: rgba(236, 236, 178, 0.104);
@@ -80,9 +87,10 @@ li{
   --webkit-backdrop-filter: blur(5px);
   border: 1px solid rgb(236, 236, 178,0);
   z-index: 1;
-  padding: 3em 2em;
+  padding: 2em 2em;
 }
-.input{
+
+.input {
   height: 40px;
   width: 90%;
   border-radius: 9px;
@@ -92,10 +100,17 @@ li{
   color: #fff;
   border-bottom: 1px solid #ccc;
 }
-.input:focus{
+
+.input:focus {
   outline: none;
+  color: #fff;
 }
-.search{
+
+.input::placeholder {
+  color: #fff;
+}
+
+.search {
   height: 40px;
   width: 40px;
   border-radius: 9px;
@@ -104,78 +119,87 @@ li{
   margin-left: 3%;
   position: absolute;
 }
-.fa-search{
+
+.fa-search {
   color: #fafafa;
 }
-.weather-suggestions > ul{
+
+.weather-suggestions > ul {
   display: flex;
   flex-direction: column;
   width: 90%;
   justify-content: center;
   margin: auto;
-  
 }
-.weather-suggestions > ul >li{
-margin: 15px auto;
-font-size: medium;
-height: 30px;
-padding: 5px;
-display: flex;
-justify-content: flex-start;
+
+.weather-suggestions > ul > li {
+  margin: 15px auto;
+  font-size: medium;
+  height: 30px;
+  padding: 5px;
+  display: flex;
+  justify-content: flex-start;
 }
 
-.icon{
-  height: 70px;
-  width: 70px;
+.icon {
+  height: 90px;
+  width: 90px;
   border-radius: 50%;
 }
-span{
+
+span {
   font-size: medium;
 }
-.weather-de{
+
+.weather-de {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 15px;
+  margin: 5px;
+  padding-top: 25px;
+  border-top: 1px #fff solid;
 }
-.weather-details{
+
+.weather-details {
   display: flex;
   flex-direction: column;
   justify-items: center;
-margin: 6%;
-
+  margin: 6%;
 }
-.city, .location{
+
+.weather-suggestions .city, .location {
   display: block;
   cursor: pointer;
 }
-.city:hover, .location:hover{
+
+.weather-suggestions .city:hover, .location:hover {
   color: #ffffffc8;
   transform: scale(1.2);
   transition: 0.5s;
 }
 
 @media (max-width: 768px) {
-  .weather-container{
+  .weather-container {
     display: flex;
     flex-direction: column;
     width: 100%;
-   }
-   .weather-suggestions, .weather-information{
-width: 100%;
-   }
+  }
+  
+  .weather-suggestions, .weather-information {
+    width: 100%;
+  }
 
-   .temp{
+  .temp {
     font-size: 30px;
     font-weight: 700;
   }
-  .city{
+
+  .city {
     font-size: 28px;
     font-weight: 700;
-    
   }
-  .weather-information{ 
+
+  .weather-information {
     gap: 1%;
   }
-  
 }