Search Button in Searchbar

src/index.html

@@ -27,24 +27,27 @@ limitations under the License.
         <nav class="global-nav">
             <ul>
                 <li class="nav-item">
-                    Seekra
+                    seekra
                 </li>
             </ul>
         </nav>
 
         <header>
-            <h1>Seekra</h1>
+            <h1>seekra</h1>
             <p>
                 Built to search.
             </p>
         </header>
 
-        <form>
+        <form id="search-form">
+            <div class="search-wrapper">
                 <input type="search" name="search" placeholder="Search..." required />
                 <button type="submit">Search</button>
+            </div>
         </form>
+        
         <footer>
-            <p>&copy; 2026 Seekra.</p>
+            <p>&copy; 2026 seekra.</p>
         </footer>
     </body>
 </html>

src/static/css/main.css

@@ -1,5 +1,6 @@
 body {
     margin: 0;
+    background-color: #ffffff;
 }
 
 header {
@@ -7,7 +8,17 @@ header {
 }
 
 header h1 {
+    display: inline-block;
     margin-bottom: 0;
+    background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+header p {
+    margin-top: 0;
+    font-size: small;
 }
 
 form {
@@ -17,14 +28,39 @@ form {
     width: 100%;
 }
 
-form button{
-    margin-left: 10px;
+.search-wrapper {
+    display: flex;
+    align-items: center;
+    width: 80%;
+    border: 1.5px solid #ccc;
+    border-radius: 999px;
+    padding: 4px 4px 4px 16px;
 }
 
-form input{
-    width: 80%;
+.search-wrapper input {
+    border: none;
+    outline: none;
+    width: 100%;
+    font-size: 1rem;
+    background: transparent;
 }
 
+.search-wrapper button {
+    border-radius: 999px;
+    border: none;
+    padding: 8px 20px;
+    background: #4562BE;
+    color: white;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.search-wrapper button:hover {
+    background: #374FA5;
+}
+
+
+
 footer{
     text-align: center;
     margin-top: 20px;