diff --git a/form-input-wave/index.html b/form-input-wave/index.html
new file mode 100644
index 0000000..77ddc08
--- /dev/null
+++ b/form-input-wave/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Form Input Wave
+
+
+
+
+
+
diff --git a/form-input-wave/script.js b/form-input-wave/script.js
new file mode 100644
index 0000000..b740afd
--- /dev/null
+++ b/form-input-wave/script.js
@@ -0,0 +1,8 @@
+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-input-wave/style.css b/form-input-wave/style.css
new file mode 100644
index 0000000..2fdad64
--- /dev/null
+++ b/form-input-wave/style.css
@@ -0,0 +1,100 @@
+@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;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+}
+
+.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;
+ font-size: 16px;
+ 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: #fff;
+}
+
+.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);
+}