looks changed

hegelespaul · Jul 21, 2024 · 1b78032 · 1b78032
1 parent aa23bcf
commit 1b78032
Show file tree

Hide file tree

Showing 3 changed files with 237 additions and 186 deletions.
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
 <body>
     <section class="main-header">
         <h1>FreeBook</h1>
+        <br>
         <h2>The only place with all Jazz Standards chord progressions for free!</h2>
     </section>
 

diff --git a/main.css b/main.css
@@ -1,29 +1,62 @@
 body {
     display: inline-block;
-    background-color: #e0e0e0;
-    /* Adding a background color for better visibility */
+    background-color: #f5f5f5; /* Light background for better readability */
+    font-family: 'Roboto', sans-serif; /* Modern font */
+    color: #333; /* Dark text for better contrast */
 }
 
 .main-header {
     display: block;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 70%;
     position: relative;
     text-align: center;
+    background-color: #007acc; /* Primary color for header background */
+    color: #fff; /* White text for contrast */
+    padding: 20px 0; /* Padding for spacing */
+}
+
+.main-header h1, .main-header h2 {
+    margin: 0;
 }
 
-#searchBox{
+#searchBox {
     margin-bottom: 30px;
     width: 93%;
 }
 
+#searchBox input {
+    border: 1px solid #ccc; /* Subtle border */
+    border-radius: 5px; /* Rounded corners */
+    padding: 10px; /* Consistent padding */
+    width: calc(100% - 22px); /* Full width minus padding */
+    font-size: 1em;
+    box-sizing: border-box;
+}
+
+#searchBox button {
+    background-color: #007acc; /* Matching button color */
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    cursor: pointer;
+    font-size: 1em;
+}
+
 .songIndex {
     display: inline-block;
     position: relative;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
-    background-color: #f0f0f0;
+    background-color: #fff; /* White background for content */
     padding: 20px;
     box-sizing: border-box;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
+    border-radius: 10px; /* Rounded corners */
+    margin-bottom: 20px; /* Space between elements */
 }
 
 #index {
@@ -34,7 +67,7 @@ body {
     grid-column-gap: 1em;
 }
 
-button{
+button {
     cursor: pointer;
     display: none;
 }
@@ -43,13 +76,20 @@ button{
     .songIndex {
         width: 90%;
     }
+    .main-header {
+        width: 90%;
+    }
 }
 
 @media (max-width: 768px) {
     .songIndex {
         width: 95%;
     }
 
+    .main-header {
+        width: 95%;
+    }
+
     #index {
         grid-template-columns: repeat(2, 1fr);
     }
@@ -78,6 +118,10 @@ button{
         width: 100%;
     }
 
+    .main-header {
+        width: 100%;
+    }
+
     #index {
         grid-template-columns: 1fr;
         grid-row-gap: 1em; /* Increase vertical gap between tunes */
@@ -100,4 +144,4 @@ button{
         width: 100%;
         padding: 8px;
     }
-}
+}