Merge pull request #63 from devxMani/main

issue #16 improving the checkout page (devxMani)
dohinaf · Oct 2, 2024 · 6ddf425 · 6ddf425
2 parents d44263e + ed52d27
commit 6ddf425
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -50,7 +50,8 @@
                     <!-- Cart items will be displayed here -->
                 </ul>
                 <h3>
-                    <div id="total">Total:$0.00 </div>
+                    <div id="total">Total:$0.00 
+                    </div>
                 </h3>
                 <button onclick="checkout()">Checkout</button>
             </div>

diff --git a/style.css b/style.css
@@ -272,29 +272,31 @@ button:hover {
     align-items: center;
 }
 
-
-
 .header .cart-items-container .cart h3 {
     font-size: 1.4rem;
     color: #92866d;
 }
 
 .header .cart-items-container button {
-    width: 100%;
+    width: auto;  /* Allows button to size based on content */
     display: block;
-    margin-top: 1rem;
-    padding: 0.8rem;
-    font-size: 1.6rem;
+    margin: 2rem auto;  /* Centers the button */
+    padding: 1rem 2rem;  /* Increased padding */
+    font-size: 1.6rem;  /* Increased font size */
     color: #fff;
     background-color: var(--main-color);
+    border: none;
+    border-radius: 0.3rem;
     text-align: center;
     cursor: pointer;
-    transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .header .cart-items-container button:hover {
-    background-color: #c49f6a;
+    background-color: #fff;
+    color: var(--main-color);
 }
+
 /* ... existing styles ... */
 
 /* My Order Styles */
@@ -650,4 +652,45 @@ footer .credit {
     html {
         font-size: 50%;
     }
-}
+}
+
+/* Global button styles */
+.btn,
+button,
+.header .cart-items-container button,
+.order-actions button {
+    /* ... existing styles ... */
+    transition: background-color 0.3s ease, color 0.3s ease, letter-spacing 0.3s ease;
+}
+
+.btn:hover,
+button:hover,
+.header .cart-items-container button:hover,
+.order-actions button:hover {
+    background-color: #fff;
+    color: var(--main-color);
+    letter-spacing: .2rem;
+}
+
+/* Remove conflicting hover styles */
+.header .cart-items-container button:hover {
+    background-color: #fff;
+    color: var(--main-color);
+}
+
+.order-actions button:hover {
+    background-color: #fff;
+    color: var(--main-color);
+}
+
+/* ... existing code ... */
+
+/* Footer button hover effect */
+.footer .share a:hover,
+.footer .links a:hover {
+    background-color: #fff;
+    color: var(--main-color);
+    letter-spacing: .2rem;
+}
+
+/* ... rest of the existing code ... */