Merge pull request #22 from skywarspro15/main

Improved browser homepage design
zeondev · Jan 22, 2024 · 9c975e2 · 9c975e2
2 parents 862bfd2 + 279b815
commit 9c975e2
Showing 1 changed file with 35 additions and 8 deletions.
diff --git a/assets/browserhp.html b/assets/browserhp.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>New Tab</title>
+    <title>My Browser Homepage</title>
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -31,51 +31,78 @@
     <meta name="color-scheme" content="light dark" />
     <style>
       /* CSS Styling for the homepage */
+      html,
       body {
         font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
           "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
           "Helvetica Neue", sans-serif;
         margin: 0;
         padding: 0;
+        background: url("https://source.unsplash.com/random/1920x1080?Space");
+        background-size: cover;
+        background-repeat: no-repeat;
+        width: 100%;
+        height: 100%;
       }
 
       .container {
-        max-width: 800px;
+        height: 100%;
         margin: 0 auto;
-        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.5);
       }
 
       h1 {
         text-align: center;
+        font-size: 45px;
       }
 
       .search-container {
         text-align: center;
         margin-top: 50px;
+        background: transparent;
+      }
+
+      .search-container form {
+        display: flex;
+        align-items: center;
+        justify-items: center;
+        gap: 10px;
       }
 
-      /* .search-input {
+      .search-input {
         width: 400px;
-        height: 40px;
+        font-family: inherit;
+        border: 1px solid hsl(222, 23%, 22%);
+        background-color: hsl(222, 26%, 18%);
+        border-radius: 5px;
+        height: 20px;
         padding: 5px;
         font-size: 16px;
       }
 
       .search-button {
+        font-family: inherit;
         color: #fff;
         border: none;
-        padding: 10px 20px;
+        padding: 8px 20px;
         font-size: 16px;
         cursor: pointer;
+        border-radius: 10px;
+        border: 1px solid hsl(222, 23%, 22%);
+        background-color: hsl(222, 26%, 18%);
       }
 
       .search-button:hover {
-      } */
+      }
     </style>
   </head>
   <body>
     <div class="container">
-      <h1>Welcome to Browser</h1>
+      <h1>Pluto Browser</h1>
       <div class="search-container">
         <form action="https://www.google.com/search" method="GET">
           <input