From a9822dfcc6bfe590244758985d93e593b3836d4b Mon Sep 17 00:00:00 2001
From: Suyesha Bhattacharjee <66883895+suyesha07@users.noreply.github.com>
Date: Fri, 22 Oct 2021 22:10:59 +0530
Subject: [PATCH 1/3] Create index.html
---
hidden-search/index.html | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
create mode 100644 hidden-search/index.html
diff --git a/hidden-search/index.html b/hidden-search/index.html
new file mode 100644
index 000000000..54f45b988
--- /dev/null
+++ b/hidden-search/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+ Hidden Search
+
+
+
+
+
+
+
+
+
From 41f463a162f245a188d11716f5a5a2fd14b50a30 Mon Sep 17 00:00:00 2001
From: Suyesha Bhattacharjee <66883895+suyesha07@users.noreply.github.com>
Date: Fri, 22 Oct 2021 22:11:40 +0530
Subject: [PATCH 2/3] Create script.js
---
hidden-search/script.js | 8 ++++++++
1 file changed, 8 insertions(+)
create mode 100644 hidden-search/script.js
diff --git a/hidden-search/script.js b/hidden-search/script.js
new file mode 100644
index 000000000..88df4d80e
--- /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()
+})
From 80027a818f72f6049f4f3e2ed64eac9bcad8f83f Mon Sep 17 00:00:00 2001
From: Suyesha Bhattacharjee <66883895+suyesha07@users.noreply.github.com>
Date: Fri, 22 Oct 2021 22:12:20 +0530
Subject: [PATCH 3/3] Create style.css
---
hidden-search/style.css | 57 +++++++++++++++++++++++++++++++++++++++++
1 file changed, 57 insertions(+)
create mode 100644 hidden-search/style.css
diff --git a/hidden-search/style.css b/hidden-search/style.css
new file mode 100644
index 000000000..4dadd304f
--- /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);
+}