diff --git a/hidden-search/index.html b/hidden-search/index.html
new file mode 100644
index 0000000..54f45b9
--- /dev/null
+++ b/hidden-search/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+ Hidden Search
+
+
+
+
+
+
+
+
+
diff --git a/hidden-search/script.js b/hidden-search/script.js
new file mode 100644
index 0000000..e8eb0d0
--- /dev/null
+++ b/hidden-search/script.js
@@ -0,0 +1,8 @@
+const search = document.querySelector('.search')
+const btn = document.querySelector('.btn')
+const input = document.querySelector('.input')
+
+btn.addEventListener('click', () => {
+ search.classList.toggle('active')
+ input.focus()
+})
\ No newline at end of file
diff --git a/hidden-search/style.css b/hidden-search/style.css
new file mode 100644
index 0000000..4dadd30
--- /dev/null
+++ b/hidden-search/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;
+}
+
+.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;
+}
+
+.btn:focus,
+.input:focus {
+ outline: none;
+}
+
+.search.active .input {
+ width: 200px;
+}
+
+.search.active .btn {
+ transform: translateX(198px);
+}