<body>
  <div class="content_wrapper">
        <div class="card_bg">
    <div class="card 1st_card">
      <div class="card-content">
        <p class="location">London</p>
        <h1 class="degree">20<sup>o</sup>   </h1>
      <p class="weather-status">Thumber</p>
      </div>
      <div class="card-image">
        <img src="https://i.ibb.co/GtWcGNW/cloud.png" alt="cloud" border="0">
      </div>
    </div>
    <div class="card 2nd_card">
      <div class="card-content">
        <p class="location">Italy</p>
        <h1 class="degree">18<sup>o</sup>         </h1>
        <p class="weather-status">Rain</p>

      </div>
      <div class="card-image">
       <img src="https://i.ibb.co/h7Tn2P8/rain.png" alt="rain" border="0">
      </div>
    </div>
     <div class="card 3rd_card">
      <div class="card-content">
        <p class="location">Singapore</p>
        <h1 class="degree">32<sup>o</sup>         </h1>
        <p class="weather-status">Wind</p>

      </div>
      <div class="card-image">
        <img src="https://i.ibb.co/30tJCSC/wind.png" alt="wind" border="0">
      </div>
    </div>
  </div>
  </div>
</body>





*{
  font-family:sans-serif;
}
body{
  overflow-x:hidden;
  width:100%;
  height:100%;
  margin-top:2rem;
  margin-bottom:2rem;
}

.content_wrapper{
 display:flex;
 justify-content:center;
  align-items:center;
  marign:0 auto;
}


.card_bg{
  background: url(https://i.ibb.co/M9LB3Kq/Glassmorphism-Background.png);
  background-size:cover;
  padding:2rem;
  width:310px;
  height:640px;
  background-color:#eee;
}

.card{
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.5rem;
  height:105px;
  border-radius:30px;
  margin:15px 0;
  background: rgba( 255, 255, 255, 0.05 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 16.5px );
  -webkit-backdrop-filter: blur( 16.5px );
  border-radius: 30px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );


}
sup{
  font-family: Poppins;
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 22px;
/* identical to box height */

text-transform: capitalize;
}

.location{
font-family: Poppins;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 33px;
/* identical to box height */
text-transform: capitalize;
color: #000;

}

.degree{
  font-size: 28px;
line-height: 10px;
/* identical to box height */
text-transform: capitalize;
  color: #23226B;
  font-family:'Poppins',sans-serif;
}

.weather-status{
  font-family: sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  text-transform: uppercase;
  color:#ffad1c;
  font-family:'Poppins',sans-serif;
}
.card-image img{
  width:100px;
  height:100px;
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.