diff --git a/50Days/day4_cssonly/index.html b/50Days/day4_cssonly/index.html
new file mode 100644
index 0000000..c9c35a8
--- /dev/null
+++ b/50Days/day4_cssonly/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+ Day 4: Hidden Search
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/50Days/day4_cssonly/script.js b/50Days/day4_cssonly/script.js
new file mode 100644
index 0000000..e69de29
diff --git a/50Days/day4_cssonly/style.css b/50Days/day4_cssonly/style.css
new file mode 100644
index 0000000..67890da
--- /dev/null
+++ b/50Days/day4_cssonly/style.css
@@ -0,0 +1,64 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-image: linear-gradient(90deg, #7d5fff, #7158e2);
+ font-family: 'Roboto', sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+}
+
+.search {
+ position: relative;
+ height: 50px;
+}
+
+.search .input {
+ background-color: #fff;
+ border: 0;
+ font-size: 18px;
+ padding: 15px;
+ height: 50px;
+ width: 50px;
+ transition: width 0.3s ease;
+}
+
+.toggle:checked + .input {
+ width: 200px;
+}
+
+.btn {
+ background-color: #fff;
+ border: 0;
+ cursor: pointer;
+ font-size: 24px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 50px;
+ width: 50px;
+ transition: transform 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.toggle:checked ~ .btn {
+ transform: translateX(198px);
+}
+
+.btn:focus,
+.input:focus {
+ outline: 0;
+}
+
+.toggle {
+ display: none;
+}