From f9adbab8c011327396c847ce50de16bda01413ab Mon Sep 17 00:00:00 2001 From: Akash Nai Date: Sun, 2 Oct 2022 17:46:08 +0530 Subject: [PATCH 1/2] form wave animation --- form wave animation/index.html | 31 +++++++++++ form wave animation/script.js | 7 +++ form wave animation/style.css | 99 ++++++++++++++++++++++++++++++++++ 3 files changed, 137 insertions(+) create mode 100644 form wave animation/index.html create mode 100644 form wave animation/script.js create mode 100644 form wave animation/style.css diff --git a/form wave animation/index.html b/form wave animation/index.html new file mode 100644 index 00000000..f159a9af --- /dev/null +++ b/form wave animation/index.html @@ -0,0 +1,31 @@ + + + + + + + + + Form Input wave + + +
+

Please Login

+
+
+ + +
+
+ + +
+ + + +

Don't have an account? Register

+
+
+ + + \ No newline at end of file diff --git a/form wave animation/script.js b/form wave animation/script.js new file mode 100644 index 00000000..d2e7eb42 --- /dev/null +++ b/form wave animation/script.js @@ -0,0 +1,7 @@ +const labels = document.querySelectorAll('.form-control label') +labels.forEach(label => { + label.innerHTML = label.innerText + .split('') + .map((letter, idx) => `${letter}`) + .join('') +}) \ No newline at end of file diff --git a/form wave animation/style.css b/form wave animation/style.css new file mode 100644 index 00000000..cd518c00 --- /dev/null +++ b/form wave animation/style.css @@ -0,0 +1,99 @@ +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); + +*{ + box-sizing: border-box; +} + +body{ + background-color: steelblue; + color: #fff; + font-family: 'Muli', sans-serif; + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; +} + + +.container{ + background-color: rgba(0,0,0,0.4); + padding: 20px 40px; + border-radius: 5px; +} + +.container h1{ + text-align: center; + margin-bottom: 30px; +} + +.container a{ + text-decoration: none; + color: lightblue; +} + +.btn{ + cursor: pointer; + display: inline-block; + width: 100%; + background: lightblue; + padding: 15px; + font-family: inherit; + border: 0; + border-radius: 5px; +} + +.btn:focus{ + outline: 0; +} + +.btn:active{ + transform: scale(0.98); +} + +.text{ + margin-top: 30px; +} + +.form-control{ + position: relative; + margin: 20px 0 40px; + width: 300px; +} + +.form-control input{ + background-color: transparent; + border: 0; + border-bottom: 2px #fff solid; + display: block; + width: 100%; + padding: 15px 0; + font-size: 18px; + color: white; +} + +.form-control input:focus, .form-control input:valid{ + outline: 0; + border-bottom-color: lightblue; +} + +.form-control label{ + position: absolute; + top: 15px; + left: 0; +} + +.form-control label span{ + display: inline-block; + font-size: 18px; + min-width: 5px; + transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.form-control input:focus + label span, +.form-control input:valid + label span{ + color: lightblue; + transform: translateY(-30px); +} \ No newline at end of file From b8d5ee9c5a8df17aa85290f542a7b98a1962a13d Mon Sep 17 00:00:00 2001 From: Akash Nai Date: Mon, 3 Oct 2022 00:45:00 +0530 Subject: [PATCH 2/2] hidden search widget using html css js --- hidden search widget/index.html | 20 +++++++++++ hidden search widget/script.js | 8 +++++ hidden search widget/style.css | 59 +++++++++++++++++++++++++++++++++ 3 files changed, 87 insertions(+) create mode 100644 hidden search widget/index.html create mode 100644 hidden search widget/script.js create mode 100644 hidden search widget/style.css diff --git a/hidden search widget/index.html b/hidden search widget/index.html new file mode 100644 index 00000000..fbe179e4 --- /dev/null +++ b/hidden search widget/index.html @@ -0,0 +1,20 @@ + + + + + + + + + My Project + + +
+ + +
+ + + \ No newline at end of file diff --git a/hidden search widget/script.js b/hidden search widget/script.js new file mode 100644 index 00000000..e8eb0d05 --- /dev/null +++ b/hidden search widget/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 widget/style.css b/hidden search widget/style.css new file mode 100644 index 00000000..e97de8d8 --- /dev/null +++ b/hidden search widget/style.css @@ -0,0 +1,59 @@ +@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; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; +} + + +.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.search.active .btn { + transform: translateX(198px); +} \ No newline at end of file