diff --git a/100_projects/97-weather-glassmorphism/Glassmorphism-Background.png b/100_projects/97-weather-glassmorphism/Glassmorphism-Background.png
new file mode 100644
index 0000000..e22bd7f
Binary files /dev/null and b/100_projects/97-weather-glassmorphism/Glassmorphism-Background.png differ
diff --git a/100_projects/97-weather-glassmorphism/cloud.png b/100_projects/97-weather-glassmorphism/cloud.png
new file mode 100644
index 0000000..fc74354
Binary files /dev/null and b/100_projects/97-weather-glassmorphism/cloud.png differ
diff --git a/100_projects/97-weather-glassmorphism/index.html b/100_projects/97-weather-glassmorphism/index.html
new file mode 100644
index 0000000..a76cf9d
--- /dev/null
+++ b/100_projects/97-weather-glassmorphism/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <title>Document</title>
+</head>
+<body>
+  <div class="content_wrapper">
+    <div class="card_bg">
+      <div class="card 1st_card">
+        <div class="card-content">
+          <p class="location">Riyadh</p>
+          <h1 class="degree">20<sup>o</sup></h1>
+        <p class="weather-status">Thumber</p>
+        </div>
+        <div class="card-image">
+          <img src="cloud.png" alt="cloud" border="0">
+        </div>
+      </div>
+      <div class="card 2nd_card">
+        <div class="card-content">
+          <p class="location">Jeddah</p>
+          <h1 class="degree">18<sup>o</sup></h1>
+          <p class="weather-status">Rain</p>
+
+        </div>
+        <div class="card-image">
+         <img src="rain.png" alt="rain" border="0">
+        </div>
+      </div>
+      <div class="card 3rd_card">
+        <div class="card-content">
+          <p class="location">Mecca</p>
+          <h1 class="degree">32<sup>o</sup></h1>
+          <p class="weather-status">Wind</p>
+        </div>
+        <div class="card-image">
+          <img src="wind.png" alt="wind" border="0">
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/100_projects/97-weather-glassmorphism/rain.png b/100_projects/97-weather-glassmorphism/rain.png
new file mode 100644
index 0000000..4349feb
Binary files /dev/null and b/100_projects/97-weather-glassmorphism/rain.png differ
diff --git a/100_projects/97-weather-glassmorphism/style.css b/100_projects/97-weather-glassmorphism/style.css
new file mode 100644
index 0000000..eebd57f
--- /dev/null
+++ b/100_projects/97-weather-glassmorphism/style.css
@@ -0,0 +1,77 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body{
+  font-family:'Poppins',sans-serif;
+  overflow-x:hidden;
+  height:100vh;
+  background-image: linear-gradient(to bottom, #ebcdfc, #fdcdec, #ffd0de, #ffd5d4, #ffdcd0, #ffdccf, #ffdcce, #ffdccd, #ffd5ce, #ffced5, #ffc9e0, #ffc6ef);
+}
+.content_wrapper{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  margin:0 auto;
+}
+.card_bg{
+  background: url(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;
+  text-transform: capitalize;
+}
+.location{
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 33px;
+  text-transform: capitalize;
+  color: #000;
+}
+.degree{
+  font-size: 28px;
+  line-height: 10px;
+  text-transform: capitalize;
+  color: #23226B;
+}
+.weather-status{
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  text-transform: uppercase;
+  color:#ffad1c;
+  margin-top: 15px;
+}
+.card-image img{
+  width:100px;
+  height:100px;
+}
\ No newline at end of file
diff --git a/100_projects/97-weather-glassmorphism/wind.png b/100_projects/97-weather-glassmorphism/wind.png
new file mode 100644
index 0000000..4cd2d90
Binary files /dev/null and b/100_projects/97-weather-glassmorphism/wind.png differ
diff --git a/100_projects/97-weather-glassmorphism/‏‏glassmorphism-background.png b/100_projects/97-weather-glassmorphism/‏‏glassmorphism-background.png
new file mode 100644
index 0000000..e22bd7f
Binary files /dev/null and b/100_projects/97-weather-glassmorphism/‏‏glassmorphism-background.png differ
