Finished checkout page and added a prototype sidebar

footer.php

@@ -35,13 +35,3 @@
     </div>
 </footer>
 
-<!-- Optional JavaScript; choose one of the two! -->
-
-<!-- Option 1: Bootstrap Bundle with Popper -->
-<!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>-->
-
-<!-- Option 2: Separate Popper and Bootstrap JS -->
-    
-<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>

index.php

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

php/addingToCart.php

@@ -6,6 +6,7 @@ session_start();
 $product_id = $_GET['product_id'];
 $product_name = $_GET['product_name'];
 $product_price = $_GET['product_price'];
+$product_img = $_GET['product_img'];
 $quantity = (int)$_GET['quantity'];
 
 
@@ -17,19 +18,12 @@ if(array_key_exists($product_id, $mycar)){
 	$mycar[$product_id]['buy_price'] += $product_price*$quantity;
 
 } else {
-	$mycar[$product_id] = array('buy_id'=>$product_id, 'buy_name'=>$product_name, 'buy_price'=>0, 'buy_num'=>$quantity);
+	$mycar[$product_id] = array('buy_id'=>$product_id, 'buy_name'=>$product_name, 'buy_price'=>0, 'buy_img'=>$product_img, 'buy_num'=>$quantity);
 	$mycar[$product_id]['buy_price'] += $product_price*$quantity;
 }
 
 
 
-
-
-
-if($_GET[clear]=="yes"){
-	$_SESSION['mycar']="";
-}
-
 $_SESSION['mycar'] = $mycar;
 
 header('location: ../shopping/cart.php');

php/cart_delProduct.php

@@ -0,0 +1,18 @@
+<?php 
+include 'connection.php';
+$conn = connectMysql();
+session_start();
+
+$buy_id = $_GET['id'];
+$mycar = $_SESSION['mycar'];
+
+foreach ($mycar as $product) {
+	if($product['buy_id'] == $buy_id){
+		unset($mycar[$buy_id]);
+	}
+}
+
+$_SESSION['mycar'] = $mycar;
+
+header('location: ../shopping/cart.php');
+?>

scripts.php

@@ -0,0 +1,4 @@
+
+<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/cart.php

@@ -52,16 +52,6 @@
                 <div class="col-sm-12" id="shopping_cart">
                     <form action="checkout.php" method="get">
                         <table class="cartTable">
-                            <thead>
-                                <!-- <tr style="margin:auto; border: 2px solid black;">
-                                    <td>Product</td>
-
-                                    <td>Quantity</td>
-
-                                    <td>Price</td>
-
-                                </tr> -->
-                            </thead>
                             <tbody>
 
 
@@ -73,30 +63,33 @@
                                         <h3> <?=$product['buy_num']?> </h3>
 
                                     </td>
+
+                                    <td class="cart_img">
+                                        <img src="../img/<?=$product['buy_img'];?>" style="width: 70px; padding:5px; border: 1px solid black;">
+                                    </td>
+
                                     <td>
                                         <span> <?=$product['buy_name']?> </span>
                                     </td>
 
-                                    
-                                    
                                     <td class="cart_priceP">
                                         <span> &dollar;<?=$product['buy_price']?> </span>
                                     </td>
 
                                     <td class="cart_deleteP">
-                                        <a href="cart_delProduct.php?id=<?php echo $product['buy_id'];?>">Delete</a></td>
+                                        <a href="../php/cart_delProduct.php?id=<?php echo $product['buy_id'];?>">Delete</a></td>
                                     </td>
 
                                 </tr>
                                 <?php $totalprice += $product['buy_price']?>
                                 <?php endforeach; ?>
+
                             </tbody>
+                            
                         </table>
 
                         <br>
-                        <div class="subtotal">
+                        
-                            <span class="text" style="font-weight: 1em; font-family: cursive;">Subtotal: &dollar;<span><?= $totalprice ?></span></span>
-                        </div>
 
                         <br>
                         <div class="d-grid gap-2 col-lg-4 mx-auto">
@@ -111,9 +104,9 @@
             
         </div>
     
-    
     </div>
-    <?php include '../footer.php' ?>
+    <?php include_once '../footer.php' ?>
+    <?php include_once '../scripts.php' ?>
 </body>
 
 </html>

shopping/checkout.php

@@ -35,31 +35,6 @@
     <div class="container-fluid">
         <div class="sectionShopping">
             <?php include 'shopping_headerNav.php' ?>
-            <h1>Checkout</h1>
-            <div class="row customerInformation">
-                <div class="col"></div>
-                <div class="col-sm-4">
-                    <h2>Customer Information</h2>
-                    <label>Full Name:</label>
-                    <label><?php echo $_SESSION['username']?></label>
-                    <br>
-                    <label>Email:</label>
-                    <label><?php echo $row["C_EMAIL"]?></label>
-                    <br>
-                    <label>Phone #:</label>
-                    <label><?php echo $row["C_PHONE"]?></label>
-                    <br>
-                    <label>Full Address:</label>
-                    <br>
-                    <label><?php echo $row["C_UNIT"]?>, <?php echo $row["C_ADDRESS"]?></label>
-                    <br>
-                    <label><?php echo $row["C_CITY"]?>, <?php echo $row["C_ZIP"]?></label>
-                    <br>
-                    <label><?php echo $row["C_COUNTRY"]?></label>
-                    <br>
-                </div>
-                <div class="col"></div>
-            </div>
 
             <div class="row">
                 <div class="col-sm-12" id="shopping_cartTitle">
@@ -69,39 +44,40 @@
                             $totalprice += $product['buy_price'];
                         endforeach;
                     ?>
-                    <h1>Total</h1> <h1>CA$<?php echo $totalprice?></h1>
+                    <h1>Comfirm Order</h1> 
 
                 </div>
             </div>
 
-            <div class="row">
+            <div class="row checkoutProduct">
-                <div class="col-sm-12">
+                <div class="col-sm-12 customer-col">
-                    <table class="cartTable">
+                    <table class="checkoutTable">
                         <thead>
-                            <!-- <tr style="margin:auto; border: 2px solid black;">
+                            <tr class="tr_title">
                                 <td>Product</td>
 
                                 <td>Quantity</td>
 
                                 <td>Price</td>
 
-                            </tr> -->
+                            </tr>
                         </thead>
+
                         <tbody>
-
-
                             <?php $totalprice = 0;?>
 
                                 <?php foreach ($_SESSION['mycar'] as $product): ?>
                                 <tr>
-                                <td class="cart_quantity">
-                                    <h3> <?=$product['buy_num']?> </h3>
 
-                                </td>
                                     <td>
                                         <span> <?=$product['buy_name']?> </span>
                                     </td>
 
+                                    <td id="td_num">
+                                        <span > <?=$product['buy_num']?> </span>
+                                    </td>
+                                    
+
                                     
                                     
                                     <td class="cart_priceP">
@@ -115,18 +91,71 @@
                     </table>
 
                     <br>
-                    <div class="subtotal">
+
-                        <span class="text" style="font-weight: 1em; font-family: cursive;">Subtotal: &dollar;<span><?= $totalprice ?></span></span>
                 </div>
             </div>
+
+            <div class="row customerInformation">
+                <div class="col-sm-8"></div>
+                <div class="col-sm-4 customer-col">
+                    <label>Full Name:</label>
+                    <label><?php echo $_SESSION['username']?></label>
+                    <br>
+                    <label>Email:</label>
+                    <label><?php echo $row["C_EMAIL"]?></label>
+                    <br>
+                    <label>Phone #:</label>
+                    <label><?php echo $row["C_PHONE"]?></label>
+                    <br>
+                    <label>Full Address:</label>
+                    <br>
+                    <label><?php if ($row["C_UNIT"] !== '') { echo $row["C_UNIT"] ; echo '-'; }?><?php echo $row["C_ADDRESS"]?></label>
+                    <br>
+                    <label><?php echo $row["C_CITY"]?>, <?php echo $row["C_ZIP"]?></label>
+                    <br>
+                    <label><?php echo $row["C_COUNTRY"]?></label>
+                    <br>
+                </div>
             </div>
 
 
+            <div class="row checkoutSubtotal">
+                <div class="col-sm-12 customer-col">
+                    <span class="checkout_subtotalSpan" >Subtotal: &dollar;<span class="checkout_subtotalPrice"><?= $totalprice ?></span></span>
                 </div>
                 
+            </div>
+
+            <div class="row checkoutComfirm">
+                <div class="col-sm-8"></div>
+                <div class="col-sm-4 customer-col">
+                    <a class="btn btn-primary checkout_back_button" type="button" href="cart.php"> &#11178;   Back To Cart</a>
+                    <button class="btn btn-primary checkout_confirm_button" data-bs-toggle="modal" data-bs-target="#checkoutModal">Confirm</button>
+                </div>
+            </div>
 
         </div>
-    <?php include '../footer.php' ?>
+
+        <!-- Modal -->
+        
+        <div class="modal fade" id="checkoutModal" tabindex="-1" aria-labelledby="checkoutLabel" aria-hidden="true">
+          <div class="modal-dialog modal-dialog-centered">
+
+              <div class="modal-content">
+
+
+                <div class="modal-body">
+                    <h1 class="checkMarkIcon"></h1>
+                    <h1>Checkout Successful!</h1>
+                </div>
+
+              </div>
+          </div>
+        </div>
+    
+    </div>
+    <?php include_once '../footer.php' ?>
+    <?php include_once '../scripts.php' ?>
 </body>
 
 </html>

shopping/productDetails.php

@@ -43,18 +43,42 @@
           <section class="shopping_productDetails">
             <h1><?=$product['Product_Name']?></h1>
             <form action="../php/addingToCart.php" method="get">
-
+              <div class="row">
+                <div class="col-sm-4">
                   <img src="../img/<?=$product['Product_Img'];?>" style="width: 300px; height: 100%; padding:10px; border: 1px solid black;">
+                </div>
+                <div class="col-sm-3"></div>
+                <div class="col-sm-5 productDetail-col">
+                  <div class="row">
+                    <div class="col-sm-12">
+                      <h2>Price: &dollar;<?=$product['Product_Price']?></h2>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-sm-4">
+                      <h3>Quantity: </h3>
+                    </div>
+                    <div class="col-sm-8 quantity">
+                      <input type="number" name="quantity" value="1" min="1" max="20" placeholder="Quantity" required>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-sm-12">
+                      <a class="btn btn-primary productDetail_back_button" type="button" href="shopping.php">Back To Shopping</a>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-sm-12">
+                      <input class="btn btn-primary productDetail_add_button" type="submit" value="Add To Cart">
+                    </div>
+                  </div>
+                </div>
+              </div>
               <h2 style="font-size: 40px;text-transform: uppercase; "></h2>
-                <h2>Price: &dollar;<?=$product['Product_Price']?></h3>
-
-                <h3>Quantity: <input type="number" name="quantity" value="1" min="1" max="20" placeholder="Quantity" required>
-
-                <input type="submit" value="Add To Cart"></h3>
-
               <input type="hidden" name="product_id" value="<?=$product['Product_ID']?>">
               <input type="hidden" name="product_name" value="<?=$product['Product_Name']?>">
               <input type="hidden" name="product_price" value="<?=$product['Product_Price']?>">
+              <input type="hidden" name="product_img" value="<?=$product['Product_Img']?>">
 
             </form>
           </section>
@@ -69,6 +93,7 @@
   </div>
 
   <?php include_once '../footer.php'?>
+  <?php include_once '../scripts.php' ?>
 
 </body>
 

shopping/shopping.php

@@ -25,10 +25,15 @@
       crossorigin="anonymous"
     />
     <title>New Moon Dessert Bar</title>
+
+    <!-- Font Awesome JS -->
+    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
+    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
   </head>
 
 <body class="shopping_body">
 
+  <div class="wrapper_shopping"> 
     <div class="container-fluid">
 
       <div class="sectionShopping">
@@ -63,7 +68,7 @@
         <div class="row">
           <nav class="shopping_pageNav" aria-label="Page navigation">
                 <ul class="pagination justify-content-center">
-                  <li class="page-item">
+                    <li class="page-item">.toggleClass
                         <a class="page-link" href="#" aria-label="Previous">
                             <span aria-hidden="true">&laquo;</span>
                         </a>
@@ -88,10 +93,102 @@
         </div>
       </div>
 
+    
+
+      <div class="my-floating-btn active " id="shopping-my-floating-btn">
+          <button type="button" class="btn btn-lg my-btn btn-floating" id="sidebarCollapse">
+              <i class="fa fa-shopping-cart"></i>
+            </button>
       </div>
 
+
+      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
+        <div class="offcanvas-header">
+          <h5 id="offcanvasRightLabel">Offcanvas right</h5>
+          <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+          ...
+        </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'?>
   
+    <!-- jQuery CDN - Slim version (=without AJAX) -->
+      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <!-- Popper.JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
+    <!-- Bootstrap JS -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
+
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $('#sidebarCollapse').on('click', function () {
+                $('#sidebar').toggleClass('active');
+            });
+        });
+    </script>
+
+    <?php include_once '../scripts.php' ?>
+
 </body>
 
 </html>

shopping/userInfo.php

@@ -108,7 +108,8 @@
 
     
     </div>
-    <?php include '../footer.php' ?>
+  <?php include_once '../footer.php' ?>
+  <?php include_once '../scripts.php' ?>
 </body>
 
 </html>

style/layouts/_footer.sass

@@ -10,6 +10,7 @@
 .shopping-footer
 	background-color: grey
 	padding-left: 10%
+	margin-top: 2%
 	h1
 		color: #fff
 		font-size: 35px

style/modules/_button.sass

@@ -21,6 +21,11 @@
     a
         color: $button-color
         text-decoration: none
+
+.my-floating-btn.active
+    display: block
+
+#index-my-floating-btn
     button
         float: right
         border-radius: 50%
@@ -29,20 +34,29 @@
     width: 100%
     position: fixed
 
-.my-floating-btn.active
+#shopping-my-floating-btn
-    display: block
+    button
+        float: right
+        border-radius: 50%
+        margin-right: 20px
+    top: 90%
+    width: 100%
+    position: fixed
 
-.cart_button_1
+
+
+.cart_button_1, .checkout_back_button, .productDetail_back_button
     color: OliveDrab
     border-color: OliveDrab 
     background-color: transparent
-.cart_button_2
+.cart_button_2, .checkout_confirm_button, .productDetail_add_button
     // color: DarkGrey
     border-color: $button-border-color 
     background-color: OliveDrab 
-.cart_button_1:hover
+.cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover
     border-color: $button-border-color 
     background-color: $button-border-color
-.cart_button_2:hover
+.cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover
     border-color: $button-border-color 
     background-color: $button-border-color
+

style/modules/_modal.sass

@@ -15,6 +15,17 @@
         a
             text-decoration: none
 
+#checkoutModal
+    h1
+        text-align: center
+    .checkMarkIcon
+        text-align: center
+        color: green
+        font-size: 1200%
+    .checkMarkIcon:before
+        font-family: 'FontAwesome'
+        content: '\f058'
+
 @media (max-width: 483px)
     #logInModal, #registerModal
         .mb-3
@@ -27,3 +38,4 @@
                 width: 100%;
                 margin-left: 10%
                 margin-right: 10%
+                

style/modules/shopping/_cart.sass

@@ -28,4 +28,9 @@
         .cart_deleteP
             text-align: right
         
+            a
+                color: black
+                font-size: 1.3rem
+                font-family: cursive
+                text-decoration: none
         

style/modules/shopping/_checkout.sass

@@ -0,0 +1,43 @@
+.sectionShopping
+
+    div.checkoutProduct, table.checkoutTable
+        width: 100%
+        height: 100%
+        text-align: justify
+
+    div.checkoutProduct:after, table.checkoutTable:after
+        content: ""
+        display: inline-block
+        overflow: hidden
+        width: 100%
+
+    div.checkoutProduct
+        table.checkoutTable .tr_title
+            font-family: $font-slabo
+
+
+    div.customerInformation
+
+        margin-top: 10px
+        text-align: left
+
+        div.customer-col
+            border: 1px solid grey
+            margin: 20px 0px
+
+    div.checkoutComfirm
+
+        div.customer-col
+            text-align: right
+            margin-bottom: 20px
+
+    div.checkoutSubtotal
+
+        div.customer-col
+            text-align: right
+            margin-bottom: 20px
+
+            span.checkout_subtotalPrice
+                font-size: 3.2rem
+                font-weight: bold
+                color: oliveDrab

style/modules/shopping/_navbar_shopping.sass

@@ -35,10 +35,11 @@
     // #span-shopping-username:active
     //     outline: none
     #btn-shopping-logout 
-        position: absolute
+        position: fixed
         right: 1rem
         top: 1rem
     
+
 #span-shopping-username:before
     font-family: 'FontAwesome'
     content: '\f2be'

style/modules/shopping/_sectionShopping.sass

@@ -1,7 +1,6 @@
 
 .sectionShopping
-    div.customerInformation
+    
-        text-align: left
     background-color: $index-background-color
     .row
         padding-left: 20%
@@ -31,6 +30,25 @@
         text-align: center
         color: OliveDrab
 
+    .shopping_productDetails
+        div.row
+            padding: 0
+        .productDetail-col
+            div.row:first-of-type
+                h2
+                  color: OliveDrab  
+                margin-bottom: 15%
+            div.row:nth-child(2)
+                margin-bottom: 15%
+            div.row:last-of-type
+                margin-top: 2%
+            div.quantity
+                display: inline-block
+                text-align: right
+                input
+                    height: 100%
+            a.productDetail_back_button,input.productDetail_add_button
+                width: 100%
     .shopping_productPrice
         color: OliveDrab
     

style/modules/shopping/_shopping-dir.sass

@@ -2,3 +2,5 @@
 @import "navbar_shopping"
 @import "footer"
 @import "cart"
+@import "checkout"
+@import "shopping"

style/modules/shopping/_shopping.sass

@@ -0,0 +1,78 @@
+.wrapper_shopping
+    
+    div.container-fluid
+        display: flex
+        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
+            color: $navbar-text-color
+    
+        nav#sidebar
+            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

@@ -126,6 +126,7 @@ video {
 .shopping-footer {
   background-color: grey;
   padding-left: 10%;
+  margin-top: 2%;
 }
 
 .shopping-footer h1 {
@@ -181,9 +182,6 @@ video {
 
 .my-floating-btn {
   display: none;
-  top: 90%;
-  width: 100%;
-  position: fixed;
 }
 
 .my-floating-btn a {
@@ -191,33 +189,51 @@ video {
   text-decoration: none;
 }
 
-.my-floating-btn button {
+.my-floating-btn.active {
+  display: block;
+}
+
+#index-my-floating-btn {
+  top: 90%;
+  width: 100%;
+  position: fixed;
+}
+
+#index-my-floating-btn button {
   float: right;
   border-radius: 50%;
   margin-right: 20px;
 }
 
-.my-floating-btn.active {
+#shopping-my-floating-btn {
-  display: block;
+  top: 90%;
+  width: 100%;
+  position: fixed;
 }
 
-.cart_button_1 {
+#shopping-my-floating-btn button {
+  float: right;
+  border-radius: 50%;
+  margin-right: 20px;
+}
+
+.cart_button_1, .checkout_back_button, .productDetail_back_button {
   color: OliveDrab;
   border-color: OliveDrab;
   background-color: transparent;
 }
 
-.cart_button_2 {
+.cart_button_2, .checkout_confirm_button, .productDetail_add_button {
   border-color: rgba(255, 255, 255, 0.3);
   background-color: OliveDrab;
 }
 
-.cart_button_1: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);
 }
 
-.cart_button_2:hover {
+.cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover {
   border-color: rgba(255, 255, 255, 0.3);
   background-color: rgba(255, 255, 255, 0.3);
 }
@@ -244,6 +260,21 @@ video {
   text-decoration: none;
 }
 
+#checkoutModal h1 {
+  text-align: center;
+}
+
+#checkoutModal .checkMarkIcon {
+  text-align: center;
+  color: green;
+  font-size: 1200%;
+}
+
+#checkoutModal .checkMarkIcon:before {
+  font-family: 'FontAwesome';
+  content: '\f058';
+}
+
 @media (max-width: 483px) {
   #logInModal .mb-3, #registerModal .mb-3 {
     width: 90%;
@@ -388,10 +419,6 @@ video {
   background-color: #edeae8;
 }
 
-.sectionShopping div.customerInformation {
-  text-align: left;
-}
-
 .sectionShopping .row {
   padding-left: 20%;
   padding-right: 20%;
@@ -429,6 +456,39 @@ video {
   color: OliveDrab;
 }
 
+.sectionShopping .shopping_productDetails div.row {
+  padding: 0;
+}
+
+.sectionShopping .shopping_productDetails .productDetail-col div.row:first-of-type {
+  margin-bottom: 15%;
+}
+
+.sectionShopping .shopping_productDetails .productDetail-col div.row:first-of-type h2 {
+  color: OliveDrab;
+}
+
+.sectionShopping .shopping_productDetails .productDetail-col div.row:nth-child(2) {
+  margin-bottom: 15%;
+}
+
+.sectionShopping .shopping_productDetails .productDetail-col div.row:last-of-type {
+  margin-top: 2%;
+}
+
+.sectionShopping .shopping_productDetails .productDetail-col div.quantity {
+  display: inline-block;
+  text-align: right;
+}
+
+.sectionShopping .shopping_productDetails .productDetail-col div.quantity input {
+  height: 100%;
+}
+
+.sectionShopping .shopping_productDetails .productDetail-col a.productDetail_back_button, .sectionShopping .shopping_productDetails .productDetail-col input.productDetail_add_button {
+  width: 100%;
+}
+
 .sectionShopping .shopping_productPrice {
   color: OliveDrab;
 }
@@ -480,7 +540,7 @@ video {
 }
 
 .shopping_headerNav #btn-shopping-logout {
-  position: absolute;
+  position: fixed;
   right: 1rem;
   top: 1rem;
 }
@@ -529,4 +589,70 @@ video {
 .sectionShopping #shopping_cart .cart_deleteP {
   text-align: right;
 }
+
+.sectionShopping #shopping_cart .cart_deleteP a {
+  color: black;
+  font-size: 1.3rem;
+  font-family: cursive;
+  text-decoration: none;
+}
+
+.sectionShopping div.checkoutProduct, .sectionShopping table.checkoutTable {
+  width: 100%;
+  height: 100%;
+  text-align: justify;
+}
+
+.sectionShopping div.checkoutProduct:after, .sectionShopping table.checkoutTable:after {
+  content: "";
+  display: inline-block;
+  overflow: hidden;
+  width: 100%;
+}
+
+.sectionShopping div.checkoutProduct table.checkoutTable .tr_title {
+  font-family: "Slabo";
+}
+
+.sectionShopping div.customerInformation {
+  margin-top: 10px;
+  text-align: left;
+}
+
+.sectionShopping div.customerInformation div.customer-col {
+  border: 1px solid grey;
+  margin: 20px 0px;
+}
+
+.sectionShopping div.checkoutComfirm div.customer-col {
+  text-align: right;
+  margin-bottom: 20px;
+}
+
+.sectionShopping div.checkoutSubtotal div.customer-col {
+  text-align: right;
+  margin-bottom: 20px;
+}
+
+.sectionShopping div.checkoutSubtotal div.customer-col span.checkout_subtotalPrice {
+  font-size: 3.2rem;
+  font-weight: bold;
+  color: oliveDrab;
+}
+
+.wrapper_shopping div.container-fluid {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+}
+
+.wrapper_shopping div.container-fluid a, .wrapper_shopping div.container-fluid a:hover, .wrapper_shopping div.container-fluid a:focus {
+  color: OliveDrab;
+  text-decoration: none;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
 /*# sourceMappingURL=style.css.map */