changed footer and sidebar

footer.php

@@ -1,35 +1,35 @@
 <footer class="shopping-footer">
     <div class="row">
         <div class="col-sm-12 col-lg-6 col-xl-3">
-            <h1>Company</h1>
+            <h4>DESSERTS</h4>
             <ul>
-                <li>About</li>
+                <li>MENU</li>
-                <li>Blogs</li>
+                <li>BLOGS</li>
-                <li>Careers </li>
+                <li>LOCATION </li>
             </ul>
         </div>
         <div class="col-sm-12 col-lg-6 col-xl-3">
-            <h1>Company</h1>
+            <h4>HELP</h4>
             <ul>
-                <li>About</li>
+                <li>FQA</li>
-                <li>Blogs</li>
+                <li>PROBLEM</li>
-                <li>Careers </li>
+                <li>CONTACT US </li>
             </ul>
         </div>
         <div class="col-sm-12 col-lg-6 col-xl-3">
-            <h1>Company</h1>
+            <h4>ACCOUNT</h4>
             <ul>
-                <li>About</li>
+                <li><i class="fa fa-twitter"></i> TWITTER</li>
-                <li>Blogs</li>
+                <li><i class="fa fa-facebook-f"></i> FACEBOOK</li>
-                <li>Careers </li>
             </ul>
         </div>
         <div class="col-sm-12 col-lg-6 col-xl-3">
-            <h1>Company</h1>
+            <h4>LANGUAGES</h4>
-            <ul>
+            <ul class="language">
-                <li>About</li>
+                <li>EN</li>
-                <li>Blogs</li>
+                <li>CN</li>
-                <li>Careers </li>
+                <li>JA </li>
+                <li>RU </li>
             </ul>
         </div>
     </div>

index.php

@@ -303,8 +303,6 @@
       </a>
     </div>
 
-    
-    <?php include_once 'scripts.php' ?>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
     <script src="bootstrap-5.0.1-dist/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="style/style.js"></script>

shopping/shopping.php

@@ -106,6 +106,25 @@
           <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
         </div>
         <div class="offcanvas-body">
+
+          <div class="row shopping_cartTitle">
+              <div class="col-sm-1"></div>
+              <div class="col-sm-3">
+                <h2>Total</h2>
+              </div>
+              <div class="col-sm-4"></div>
+              <div class="col-sm-4">
+                  <?php 
+                      $totalprice = 0;
+                      foreach ($_SESSION['mycar'] as $product):
+                          $totalprice += $product['buy_price'];
+                      endforeach;
+                  ?>
+                  <h2>CA$<?php echo $totalprice?></h2>
+
+              </div>
+          </div>
+
           <div class="row">
               <div class="col-sm-12 shopping_cart">
                   <form action="checkout.php" method="get">
@@ -151,7 +170,6 @@
                       <div class="d-grid gap-2 col-lg-12 mx-auto">
                         <div class="row">
                           <div class="col-sm-6 back-col">
-                            <a class="btn btn-primary back_button" type="button" href="shopping.php"> &#10094;   Continue Shopping</a>
                           </div>
                           <div class="col-sm-6 forward-col">
                             <input class="btn btn-primary forward_button" type="submit" value="Go To Checkout" name="placeorder">
@@ -166,62 +184,7 @@
         </div>
       </div>
 
-      <!-- Sidebar  -->
-      <!-- <nav id="sidebar">
-          <div class="sidebar-header">
-              <h3>Shopping Cart</h3>
-          </div>
 
-          <ul class="list-unstyled components">
-              <p></p>
-              <li class="active">
-                  <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
-                  <ul class="collapse list-unstyled" id="homeSubmenu">
-                      <li>
-                          <a href="#">Home 1</a>
-                      </li>
-                      <li>
-                          <a href="#">Home 2</a>
-                      </li>
-                      <li>
-                          <a href="#">Home 3</a>
-                      </li>
-                  </ul>
-              </li>
-              <li>
-                  <a href="#">About</a>
-              </li>
-              <li>
-                  <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
-                  <ul class="collapse list-unstyled" id="pageSubmenu">
-                      <li>
-                          <a href="#">Page 1</a>
-                      </li>
-                      <li>
-                          <a href="#">Page 2</a>
-                      </li>
-                      <li>
-                          <a href="#">Page 3</a>
-                      </li>
-                  </ul>
-              </li>
-              <li>
-                  <a href="#">Portfolio</a>
-              </li>
-              <li>
-                  <a href="#">Contact</a>
-              </li>
-          </ul>
-
-          <ul class="list-unstyled CTAs">
-              <li>
-                  <a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
-              </li>
-              <li>
-                  <a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
-              </li>
-          </ul>
-      </nav> -->
     </div>
   </div>
   <?php include_once '../footer.php'?>

style/modules/_button.sass

@@ -60,4 +60,7 @@
 .forward_button:hover, .cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover
     border-color: $button-border-color 
     background-color: $button-border-color
+.back_button:hover, .cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover
+    border-color: $button-border-color 
+    background-color: $button-border-color
 

style/modules/_offcanvas.sass

@@ -3,6 +3,9 @@
         h5
             color: $preferred-text-color
     .offcanvas-body
+        .shopping_cartTitle
+            h2
+                color: $preferred-text-color
         .shopping_cart
         margin-top: 5%
 
@@ -14,7 +17,6 @@
             
         .cart_deleteP
             text-align: right
-        
             a
                 color: black
                 font-size: 1.3rem

style/modules/shopping/_footer.sass

@@ -0,0 +1,15 @@
+footer.shopping-footer
+    background-color: DimGrey
+
+    h4 
+        color: WhiteSmoke
+        font-family: $font-mukta-malar
+    ul li 
+        color: Silver
+        font-family: $font-mukta-malar
+        font-size: 0.9rem
+    ul li:hover 
+        color: WhiteSmoke
+    ul.language 
+        -webkit-column-width: 10px
+        -webkit-column-count: 3

style/modules/shopping/_navbar_shopping.sass

@@ -31,7 +31,7 @@
         font-size: 1.5rem
         left: 1rem
         top: 1rem
-        color: white
+        color: WhiteSmoke
     // #span-shopping-username:active
     //     outline: none
     #btn-shopping-logout 

style/modules/shopping/_shopping.sass

@@ -1,80 +1,11 @@
-// .wrapper_shopping
+a.page-link
-    
+    color: $navbar-text-color
-//     div.container-fluid
+a.page-link:hover
-//         display: flex
+    color: white
-//         align-items: stretch
-
-//         a, a:hover, a:focus 
-//             color: OliveDrab
-//             text-decoration: none
-//             transition: all 0.3s
 
 
-//     // #sidebarCollapse
-//     //     z-index: 999
 
-//         div.sectionShopping nav.shopping_pageNav a.page-link
+// .offcanvas-body
-//             color: $navbar-text-color
+//     table.cartTable 
-    
+//         background-color: red
-//         nav#sidebar
+//         border: 1px solid black
-//             min-width: 250px
-//             max-width: 250px
-//             transition: all 0.3s
-//             background-color: white
-//             z-index: -1
-
-//             ul.components 
-//                 padding: 20px 0
-//                 border-bottom: 1px solid #47748b
-
-
-//             div.sidebar-header 
-//                 padding: 20px
-//                 background-color: DimGrey
-//             div.sidebar-header h3
-//                 color: white
-
-//             ul li a 
-//                 padding: 10px
-//                 font-size: 1.1em
-//                 display: block
-            
-//             ul li a:hover 
-//                 color: mediumSeaGreen
-//                 background-color: Gainsboro
-            
-//             ul li.active > a, a[aria-expanded="true"] 
-//                 color: #fff
-//                 background: Gainsboro
-
-//             a[data-toggle="collapse"] 
-//                 position: relative
-//             ul ul a 
-//                 font-size: 0.9em !important
-//                 padding-left: 30px !important
-
-//             ul.CTAs
-//                 padding: 20px
-            
-
-//             ul.CTAs a 
-//                 text-align: center
-//                 font-size: 0.9em 
-//                 display: block
-//                 border-radius: 5px
-//                 margin-bottom: 5px
-            
-
-//             a.download 
-//                 background: #fff
-//                 color: #7386D5
-            
-
-//             a.article, a.article:hover 
-//                 background: #6d7fcc
-//                 color: #fff
-
-//         nav#sidebar.active 
-//             margin-right: -250px
-
-   

style/style.css

@@ -239,6 +239,11 @@ video {
   background-color: rgba(255, 255, 255, 0.3);
 }
 
+.back_button:hover, .cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover {
+  border-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
 #logInModal .mb-3, #registerModal .mb-3 {
   width: 70%;
   margin: auto;
@@ -301,6 +306,10 @@ video {
   margin-top: 5%;
 }
 
+#offcanvasCart .offcanvas-body .shopping_cartTitle h2 {
+  color: OliveDrab;
+}
+
 #offcanvasCart .offcanvas-body .cartTable {
   margin: auto;
 }
@@ -574,7 +583,7 @@ video {
   font-size: 1.5rem;
   left: 1rem;
   top: 1rem;
-  color: white;
+  color: WhiteSmoke;
 }
 
 .shopping_headerNav #btn-shopping-logout {
@@ -594,6 +603,30 @@ video {
   }
 }
 
+footer.shopping-footer {
+  background-color: DimGrey;
+}
+
+footer.shopping-footer h4 {
+  color: WhiteSmoke;
+  font-family: "Mukta Malar";
+}
+
+footer.shopping-footer ul li {
+  color: Silver;
+  font-family: "Mukta Malar";
+  font-size: 0.9rem;
+}
+
+footer.shopping-footer ul li:hover {
+  color: WhiteSmoke;
+}
+
+footer.shopping-footer ul.language {
+  -webkit-column-width: 10px;
+  -webkit-column-count: 3;
+}
+
 .sectionShopping #shopping_cartTitle, .sectionShopping .cartTable {
   width: 100%;
   height: 100%;
@@ -677,4 +710,12 @@ video {
   font-weight: bold;
   color: oliveDrab;
 }
+
+a.page-link {
+  color: DarkOliveGreen;
+}
+
+a.page-link:hover {
+  color: white;
+}
 /*# sourceMappingURL=style.css.map */