diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..97e3960
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+.snowpack
+build
+node_modules
\ No newline at end of file
diff --git a/clear.png b/clear.png
new file mode 100644
index 0000000..d2bc413
Binary files /dev/null and b/clear.png differ
diff --git a/cloud gif.gif b/cloud gif.gif
new file mode 100644
index 0000000..68910fa
Binary files /dev/null and b/cloud gif.gif differ
diff --git a/clouds.png b/clouds.png
new file mode 100644
index 0000000..75ef047
Binary files /dev/null and b/clouds.png differ
diff --git a/drizzle.png b/drizzle.png
new file mode 100644
index 0000000..01cd0e7
Binary files /dev/null and b/drizzle.png differ
diff --git a/humidity.png b/humidity.png
new file mode 100644
index 0000000..804ef0c
Binary files /dev/null and b/humidity.png differ
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..e4c33c5
--- /dev/null
+++ b/index.css
@@ -0,0 +1,116 @@
+head {
+ margin: 0;
+ padding: 0;
+ font-family: "Helvetica", sans-serif;
+ box-sizing: border-box;
+}
+
+body {
+ background: linear-gradient(135deg, grey, #5b54);
+}
+
+.header {
+ margin-top: 20px;
+ border-radius: 20px;
+ align-items: center;
+ background-color: white;
+ max-width: 200px;
+ text-align: center;
+ font-family: "Helvetica", sans-serif;
+ color: rgb(49, 46, 46);
+}
+
+.logo-icon {
+ max-width: 150px; /* Adjust the maximum width of your weather icon */
+ height: auto;
+ margin-right: 10px; /* Optional: Adjust the space between the icon and heading */
+}
+
+.card {
+ width: 90%;
+ max-width: 470px;
+ background: linear-gradient(135deg, powderblue, #5b54);
+ color: #fff;
+ margin: 0px auto 0;
+ border-radius: 20px;
+ padding: 40px 35px;
+ text-align: center;
+ padding-top: 10px;
+}
+
+.search {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.search input {
+ border: 0;
+ outline: 0;
+ background-color: #ebfffc;
+ color: white;
+ padding: 10px 25px;
+ height: 60px;
+ border-radius: 30px;
+ flex: 1;
+ margin-right: 16px;
+ font-size: 18px;
+}
+
+.search button {
+ border: 0;
+ outline: 0;
+ background: #ebfffc;
+ border-radius: 50%;
+ color: #555;
+ width: 60px;
+ height: 60px;
+ cursor: pointer;
+}
+
+.search button img {
+ width: 16px;
+}
+
+.weather-icon {
+ width: 170px;
+ margin-top: 30px;
+}
+
+.weather h1 {
+ font-size: 80px;
+ font-weight: 500;
+}
+
+.weather h2 {
+ font-size: 45px;
+ font-weight: 400px;
+ margin-top: -10px;
+}
+
+.details {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 50px;
+ margin-top: 50px;
+}
+
+.col {
+ display: flex;
+ align-items: center;
+ text-align: left;
+}
+
+.col img {
+ width: 40px;
+ margin-right: 10px;
+}
+
+.humidity,
+.wind {
+ font-size: 28px;
+ margin-top: -6px;
+ font-family: "Helvetica;" sans-serif;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..73abe42
--- /dev/null
+++ b/index.html
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ New Weather
+
+
+
+
+
+
+
+
+
+
+
+
+
_°C
+
_ _ _
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+