diff --git a/50Days/day4/index.html b/50Days/day4/index.html
new file mode 100644
index 0000000..8491268
--- /dev/null
+++ b/50Days/day4/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+ Day 4: Hidden Search
+
+
+
+
+
+
+
+
+
+
+
diff --git a/50Days/day4/script.js b/50Days/day4/script.js
new file mode 100644
index 0000000..04386d7
--- /dev/null
+++ b/50Days/day4/script.js
@@ -0,0 +1,8 @@
+const button = document.getElementById('toggle');
+const search = document.getElementById('search');
+const input = document.getElementById('input');
+
+toggle.addEventListener('click', () => {
+ search.classList.toggle('active');
+ input.focus();
+});
diff --git a/50Days/day4/style.css b/50Days/day4/style.css
new file mode 100644
index 0000000..2678037
--- /dev/null
+++ b/50Days/day4/style.css
@@ -0,0 +1,57 @@
+@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;
+}
+
+.search.active .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;
+}
+
+.search.active .btn {
+ transform: translateX(198px);
+}
+
+.btn:focus,
+.input:focus {
+ outline: 0;
+}