textfield: 💥

Author: tonalmathew

css/cardcolor.css

@@ -14,6 +14,10 @@
   background-color: rgb(229, 9, 20);
 }
 
+.tonal {
+  background-color: #43aa8b;
+}
+
 .demo {
   background-color: #35cce0;
 }

css/textfield.css

@@ -1 +1,56 @@
-/* Add your css for textfields */
+/* Add your css for textfields */
+
+
+
+/* Tonal Mathew : start */
+
+.form-tonal {
+    margin: 100px;
+}
+
+.input-field-tonal {
+    position: relative;
+    width: 250px;
+    height: 44px;
+    line-height: 44px;
+}
+
+.label-tonal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    color: #43aa8b;
+    transition: 0.2s all;
+    cursor: text;
+}
+
+.input-tonal {
+    width: 100%;
+    border: 0;
+    outline: 0;
+    padding: 0.5rem 0;
+    border-bottom: 2px solid #43aa8b;
+    box-shadow: none;
+    color: #111;
+}
+
+.input-tonal:invalid {
+    outline: 0;
+}
+
+.input-tonal:required {
+    color: #00dd22;
+}
+
+.input-tonal:focus,
+.input-tonal:valid {
+    border-color: #00dd22;
+}
+
+.input-tonal:focus~label,
+.input-tonal:valid~label {
+    font-size: 14px;
+    top: -24px;
+    color: #00dd22;
+}  /* Tonal Mathew : end */

pages/textfield.html

@@ -47,6 +47,51 @@ <h3>Add your different textfields</h3>
       <div class="container-fluid">
         <!--          your name     -->
         <!-- Add your html content that you have copied from contributors.md along with you component -->
+
+
+
+        <!--          Tonal Mathew  -->
+        <div class="row">
+          <div class="col-lg-6">
+            <div class="component">
+              <div class="card magictime">
+                <div class="card-title tonal">
+                  <strong>Textfield</strong>
+                </div>
+                <div class="card-content">
+                  <form class="form-tonal" action="">
+                    <div class="input-field-tonal">
+                      <input class="input-tonal" type="text" id="name" required />
+                      <label class="label-tonal" for="name">Your name:</label>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-6">
+            <div class="component">
+              <div class="card magictime">
+                <div class="card-title tonal">
+                  <strong>Creator</strong>
+                </div>
+                <div class="card-content">
+                  <div class="creater-name">
+                    <h2>
+                      <b>Name:</b>
+                      <span>
+                        <a href="https://github.com/tonalmathew">Tonal Mathew</a>
+                      </span>
+                    </h2>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
       </div>
     </section>
     <footer>