Update styles.css

Author: abgdya

starter/src/assets/styles.css

@@ -1,84 +1,92 @@
-* {
-    font-family: 'Montserrat', sans-serif;
-    padding: 0;
+/* General Styles */
+body {
+    font-family: Arial, sans-serif;
     margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+}
+
+.container {
+    width: 80%;
+    margin: 0 auto;
+    padding: 20px;
 }
 
 h1 {
     text-align: center;
-    padding: 1em;
-}
-h2, h3 {
-    padding: 1em 0 .5em;
-}
-p {
-    padding-bottom: 1em;
-}
-.products-container{
-    width: 100%;
-    max-width: 55em;
-    padding: 2em;
+    color: #333;
 }
-.cart-container {
-    display: flex;
+
+.centered-title {
+    text-align: center;
+    color: #333;
+    font-size: 24px;
 }
-.checkout-container {
-    max-width: 34em;
-    padding: 2em;
-    background: #efefef;
+
+.product-list,
+.cart-list {
+    list-style: none;
+    padding: 0;
 }
-.products, .cart{
+
+.product,
+.cart-item {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    padding: 15px;
     display: flex;
-    flex-wrap: wrap;
+    align-items: center;
 }
 
-.products > div {
-    background: #f5f5f5;
-    margin: 1em;
-    padding: 2em;
+.product img,
+.cart-image {
+    max-width: 100px;
+    max-height: 100px;
+    margin-right: 15px;
 }
 
-.products > div img {
-    max-width: 175px;
-    height: auto;
+.product div,
+.cart-item div {
+    flex: 1;
 }
 
-.products > div h3 {
-    font-weight: 800;
+.product h2,
+.cart-item p {
+    margin: 0;
+    padding: 5px 0;
 }
 
-.cart > div {
-    border: 1px solid #ccc;
-    margin: 1em;
-    padding: 2em;
-}
-.checkout-container {
-    max-width: 34em;
-}
-.checkout {
-    margin-bottom: 4em;
+button {
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 15px;
+    cursor: pointer;
+    font-size: 14px;
+    margin: 5px;
+    transition: background-color 0.3s;
 }
 
-button {
-    border: 1px solid #ccc;
-    background: #fff;
-    padding: 1em;
-    transition: .2s ease all;
-    text-transform: uppercase;
+button:hover {
+    background-color: #218838;
 }
-button.pay {
-    background: #f5f5f5;
-    vertical-align: middle
+
+button:disabled {
+    background-color: #d6d6d6;
+    cursor: not-allowed;
 }
-button:hover {
-    background: rgb(93, 120, 118);
-    color: #fff;
-    cursor: pointer;
+
+#receipt,
+#balance,
+#cash-returned,
+#thank-you {
+    margin-top: 20px;
+    font-size: 18px;
 }
 
-.received {
-    font-size: 1.5em;
-    padding: 0.3em;
-    border: 1px solid #ccc;
-    vertical-align: middle
-}
+#cart-items {
+    margin-top: 20px;
+}