Merge pull request #38 from mvanshbu0681/main

Changed the css and inserted it into style.css
mavicompanion · Oct 5, 2024 · bb3292e · bb3292e
2 parents 63f2e21 + afdab00
commit bb3292e
Show file tree

Hide file tree

Showing 4 changed files with 603 additions and 309 deletions.
diff --git a/index.html b/index.html
@@ -49,7 +49,10 @@
           <h5 class="fw-bold mt-2">BU Notes</h5>
         </div>
         <hr />
-
+        <button class="new-button"
+          <span style="font-size: 20px; margin-right: 10px"><strong>+</strong></span>
+          <strong>New</strong>
+        </button>
         <!-- Navigation Links for Sidebar -->
         <div class="d-flex flex-column flex-fill">
           <!-- Home link -->
@@ -106,14 +109,48 @@ <h5 class="fw-bold mt-2">BU Notes</h5>
             <i class="fa-solid fa-bars" style="font-size: 25px"></i>
           </a>
           <span class="ms-3 fw-bold">BU Notes</span>
+
+          <button
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              background-color: white;
+              border: 1px solid lightgray;
+              border-radius: 10px;
+              padding: 10px 20px;
+              font-size: 16px;
+              cursor: pointer;
+              transition: background-color 0.3s ease, transform 0.3s ease;
+            "
+            onmouseover="this.style.backgroundColor='#f0f0f0'; this.style.transform='scale(1.05)';"
+            onmouseout="this.style.backgroundColor='white'; this.style.transform='scale(1)';"
+          >
+            <span style="font-size: 24px; margin-right: 5px">+</span> New
+          </button>
         </div>
+
         <!-- Add the search bar and app buttons here -->
         <div class="sea">
           <div class="search-container">
             <div class="search-box">
               <button><i class="fa-solid fa-magnifying-glass"></i></button>
               <input type="text" placeholder="Search in Drive" />
-              <button><i class="fas fa-sliders-h"></i></button>
+              <button class="hover-grey rounded-circle">
+                <i class="fas fa-sliders-h"></i>
+              </button>
+              <style>
+                .hover-grey {
+                  transition: background-color 0.3s ease;
+                }
+                .hover-grey:hover {
+                  background-color: #ccc9c9;
+                }
+                .rounded-circle {
+                  border-radius: 50%;
+                  width: 35px; /* Add width to the circle */
+                }
+              </style>
             </div>
           </div>
           <div class="appButtonsContainer">