add search bar

TODO: add function and display

Author: STICKnoLOGIC

index.html

@@ -60,6 +60,14 @@ <h3>Grab your own sweet-looking <span>.is-a.dev</span> subdomain.</h3>
                 src="//cdn.carbonads.com/carbon.js?serve=CW7DE2JU&placement=is-adev&format=cover"
                 id="_carbonads_js"></script>
 
+            <h2>Check SubDomain Availability</h2>
+            <div class="search-cntnr">
+                <input type="text" placeholder="Check domain name e.g. william">
+            <div class="search-btn">
+                Check
+            </div>
+            </div>
+
             <h2>Important Links</h2>
             <ul>
                 <li><a href="https://docs.is-a.dev">Documentation</a></li>

styles/main.css

@@ -119,6 +119,44 @@ a:hover {
     background-color: transparent; /* No background change */
 }
 
+/* Search */
+input{
+    font-family: "Ubuntu Mono Regular";
+    width: 100%;
+    color: var(--body-fg);
+    font-size: 1.2rem;
+    padding: 4px;
+    border: 0 solid #0f0c19;
+    background-image: linear-gradient(#0f0c19, #0f0c19);
+}
+
+input::placeholder{
+    color: var(--body-fg);
+}
+
+.search-cntnr{
+    font-family: "Ubuntu Mono Regular";
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    gap: 8px;
+    padding: 4px;
+    background: var(--header-bg);
+    border-radius: 4px;
+}
+.search-btn{
+    cursor: pointer;
+    padding-right: 8px;
+    font-weight: 700;
+    font-size: 1rem;
+    /* make unselectable text */
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 /* Carbon Ads */
 #carbonads {
     padding-top: 20px;