[+] Created new search element class called .input-data

KennyOliver · Mar 7, 2021 · 34cb991 · 34cb991
1 parent 7e48db3
commit 34cb991
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -45,12 +45,23 @@
       <div class="card flat">
         <div class="neu inset pill">Kenny</div>
         <div class="neu convex shrink circle"><i class="far fa-heart"></i></div>
-        <div class="neu convex shrink circle"><i class="far fa-share"></i></div>
+        <div class="neu convex shrink circle"><i class="fas fa-share"></i></div>
       </div>
       <div class="card flat">
         <div class="neu inset pill">GitHub</div>
         <div class="neu convex shrink circle"><i class="far fa-heart"></i></div>
-        <div class="neu convex shrink circle"><i class="far fa-share"></i></div>
+        <div class="neu convex shrink circle"><i class="fas fa-share"></i></div>
+      </div>
+    </div>
+
+    <hr>
+
+    <div class="chunk">
+      <div class="group">
+        <div class="card flat">
+          <input type="search" class="neu inset input-data" id="card-search" name="search" placeholder="Search...">
+          <div class="neu convex shrink circle"><i class="fas fa-search"></i></div>
+        </div>
       </div>
     </div>
 

diff --git a/style.css b/style.css
@@ -140,4 +140,15 @@ hr {
   box-shadow:
   0px 0px 20px rgba(255,255,255,0.8),
   inset 0px 0px 20px rgba(255,255,255,0.8); /* glowing effect */
+}
+
+.input-data {
+  background: linear-gradient(135deg, rgba(255,255,255,0.1),rgba(255,255,255,0.5));
+  border-radius: 25px;
+  border-width: 0px;
+  height: 50px;
+  width: 150px;
+}
+.input-data::placeholder {
+  color: white;
 }