From 4911937c6d7d33a8a63eb3df06ea78cd6af09f6e Mon Sep 17 00:00:00 2001
From: nick-devos <nickdevos123@yahoo.com>
Date: Thu, 9 Jul 2020 10:39:37 -0400
Subject: [PATCH 1/9] first commit

---
 README.md              | 17 ++++----
 css/style.css          | 19 +++++---
 index.html             | 99 +++++++++++++++++++++++++-----------------
 js/footer-functions.js |  2 -
 js/header-functions.js | 11 -----
 js/utils.js            | 26 -----------
 page2.html             | 72 ++++++++++++++++++++++++++++++
 page3.html             | 72 ++++++++++++++++++++++++++++++
 8 files changed, 225 insertions(+), 93 deletions(-)
 create mode 100644 page2.html
 create mode 100644 page3.html
diff --git a/README.md b/README.md
index 7ed589e..10acefc 100644
--- a/README.md
+++ b/README.md
@@ -3,19 +3,20 @@
 
 
 ### Description
-* In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly.
+* This 3-page website was designed to fulfill the requirements of the Per Scholas HTML, CSS, & Javascript SBA. 
+
+### Resources used
+* Bootstrap: `https://getbootstrap.com/`
+* Google fonts: `https://fonts.google.com/`
+
+
+
+
 
-* You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor.
 
-* Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements.
 
-* Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system.
 
 
-* Some resources for free content:
-  * Photos: `https://www.pexels.com/search/template/`
-  * Text: `https://www.lipsum.com/`
-  * GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k`
 
 * Useful API sites:
   * https://rapidapi.com/ (Links to an external site.)
diff --git a/css/style.css b/css/style.css
index d17d83a..973d195 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,18 @@
-body {
-    background-color: navy;
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
+
+html {
+    font-family: 'Lato', sans-serif;
 }
 
+#index {
+    background-color: deepskyblue;
+}
 
-object {
-    height: 100vh;
-    width: 100vh;
+#page2 {
+    background-color: darkslategray;
 }
+
+#page3 {
+    background-color: salmon;
+}
+
diff --git a/index.html b/index.html
index 4dc0c72..3f0c9e3 100644
--- a/index.html
+++ b/index.html
@@ -1,57 +1,74 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+<head> 
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">
+  <title>SBA Home</title>
 
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <link href="./css/style.css" rel="stylesheet">
-  <script type="text/javascript" src="./js/header-functions.js"></script>
+  <!-- <script type="text/javascript" src="./js/header-functions.js"></script> -->
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+
+</head>
+
+
+
+<body id="index">
+
+  <!----------------- BEGIN NAV ----------------->
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="font-family: 'Lato', sans-serif;">
+    <a class="navbar-brand" href="#">Nick DeVos</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="page2.html">Page2</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="page3.html">Page3</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <a class="dropdown-item" href="#">Action</a>
+            <a class="dropdown-item" href="#">Another action</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#">Something else here</a>
+          </div>
+        </li>
+      </ul>
+      <form class="form-inline my-2 my-lg-0">
+        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
+      </form>
+    </div>
+  </nav>
+  <!----------------- END NAV ----------------->
+
+  <div id="main col-12">
+
+  </div>
 
-</head> <!-- header ends here -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
 
-
-
-
-
-
-
-
-
-
-
-
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-
-
-  The quickest of brown foxes.
-
-
-
-
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
   <footer>
-    <!-- footer of page begins here -->
-    <script type="text/javascript" src="./js/footer-functions.js"></script>
-  </footer> <!-- footer of page ends here -->
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
+    <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
+  </footer> 
+
 
 </body>
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
+
 
 </html>
\ No newline at end of file
diff --git a/js/footer-functions.js b/js/footer-functions.js
index c7d6a2c..e69de29 100644
--- a/js/footer-functions.js
+++ b/js/footer-functions.js
@@ -1,2 +0,0 @@
-w3IncludeHTML();
-document.write('<script type="text/javascript" src="./js/file-inject.js"></script>');
diff --git a/js/header-functions.js b/js/header-functions.js
index ff2614d..e69de29 100644
--- a/js/header-functions.js
+++ b/js/header-functions.js
@@ -1,11 +0,0 @@
-// import jquery-3.4.0
-document.write('<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>');
-document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>');
-
-// import `utils.js`
-document.write('<script type="text/javascript" src="./js/utils.js"></script>');
-
-
-
-// import w3-include
-document.write('<script src="http://www.w3schools.com/lib/w3data.js"></script>');
diff --git a/js/utils.js b/js/utils.js
index bf0c12e..e69de29 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -1,26 +0,0 @@
-// Utility JS functions are to be defined here
-function resizeIFrameToFitContent( iFrame ) {
-    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
-    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
-}
-
-// used to fetch all methods of an arbitrary object to display to client
-function getAllMethodsOfObejct(obj) {
-    var result = [];
-    for (var id in obj) {
-      try {
-        if (typeof(obj[id]) == "function") {
-          result.push(id + ": " + obj[id].toString());
-        }
-      } catch (err) {
-        result.push(id + ": inaccessible");
-      }
-    }
-    return result;
-  }
-
-
-
-function loadHtml(elementId, fileName) {
-    $(elementId).html('<object data="'+ fileName + '">');
-};
diff --git a/page2.html b/page2.html
new file mode 100644
index 0000000..ac16318
--- /dev/null
+++ b/page2.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head> 
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <title>SBA Page2</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+  <link href="./css/style.css" rel="stylesheet">
+  <!-- <script type="text/javascript" src="./js/header-functions.js"></script> -->
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+
+</head>
+
+
+
+<body id="page2">
+
+  <!----------------- BEGIN NAV ----------------->
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="font-family: 'Lato', sans-serif;">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item active">
+          <a class="nav-link" href="page2.html">Page2</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="page3.html">Page3</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <a class="dropdown-item" href="#">Action</a>
+            <a class="dropdown-item" href="#">Another action</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#">Something else here</a>
+          </div>
+        </li>
+      </ul>
+      <form class="form-inline my-2 my-lg-0">
+        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
+      </form>
+    </div>
+  </nav>
+  <!----------------- END NAV ----------------->
+
+
+
+
+  <footer>
+    <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
+  </footer> 
+
+
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/page3.html b/page3.html
new file mode 100644
index 0000000..04b2064
--- /dev/null
+++ b/page3.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head> 
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <title>SBA Page3</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+  <link href="./css/style.css" rel="stylesheet">
+  <!-- <script type="text/javascript" src="./js/header-functions.js"></script> -->
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+
+</head>
+
+
+
+<body id="page3">
+
+  <!----------------- BEGIN NAV ----------------->
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="font-family: 'Lato', sans-serif;">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="page2.html">Page2</a>
+        </li>
+        <li class="nav-item active">
+          <a class="nav-link" href="page3.html">Page3</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <a class="dropdown-item" href="#">Action</a>
+            <a class="dropdown-item" href="#">Another action</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#">Something else here</a>
+          </div>
+        </li>
+      </ul>
+      <form class="form-inline my-2 my-lg-0">
+        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
+      </form>
+    </div>
+  </nav>
+  <!----------------- END NAV ----------------->
+
+
+
+
+  <footer>
+    <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
+  </footer> 
+
+
+</body>
+
+
+</html>
\ No newline at end of file

From 1c000408b7da40d420459a48fbfc1cd76be32e59 Mon Sep 17 00:00:00 2001
From: nick-devos <nickdevos123@yahoo.com>
Date: Thu, 9 Jul 2020 14:33:52 -0400
Subject: [PATCH 2/9] progress

---
 README.md     |   5 +-
 cart.html     | 252 ++++++++++++++++++++++++++++++++++++++++++++++++++
 css/style.css |  78 +++++++++++++++-
 index.html    |  47 ++++++++--
 page2.html    |  72 ---------------
 page3.html    |  72 ---------------
 products.html | 230 +++++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 602 insertions(+), 154 deletions(-)
 create mode 100644 cart.html
 delete mode 100644 page2.html
 delete mode 100644 page3.html
 create mode 100644 products.html

diff --git a/README.md b/README.md
index 10acefc..3208420 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,7 @@
 ### Resources used
 * Bootstrap: `https://getbootstrap.com/`
 * Google fonts: `https://fonts.google.com/`
+* Photos: `https://www.pexels.com/`
 
 
 
@@ -15,8 +16,8 @@
 
 
 
-
-
+* Some resources for free content:
+  * GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k`
 
 * Useful API sites:
   * https://rapidapi.com/ (Links to an external site.)
diff --git a/cart.html b/cart.html
new file mode 100644
index 0000000..94b14ff
--- /dev/null
+++ b/cart.html
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head> 
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <title>SBA Page3</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+  <link href="./css/style.css" rel="stylesheet">
+  <!-- <script type="text/javascript" src="./js/header-functions.js"></script> -->
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+
+</head>
+
+
+
+<body id="page3">
+<header>
+  <!----------------- BEGIN NAV ----------------->
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="font-family: 'Lato', sans-serif;">
+    <a class="navbar-brand" style="font-weight: 700;" href="#">Nick DeVos</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="products.html">Products</a>
+        </li>
+        <li class="nav-item active">
+          <a class="nav-link" href="cart.html">Cart</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <a class="dropdown-item" href="#">Action</a>
+            <a class="dropdown-item" href="#">Another action</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#">Something else here</a>
+          </div>
+        </li>
+      </ul>
+      <form class="form-inline my-2 my-lg-0">
+        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
+      </form>
+    </div>
+  </nav>
+  <!----------------- END NAV ----------------->
+</header>
+
+<main id="cart-form">
+<div class="row">
+    <div class="col-md-4 order-md-2 mb-4">
+      <h4 class="d-flex justify-content-between align-items-center mb-3">
+        <span class="text-muted">Your cart</span>
+        <span class="badge badge-secondary badge-pill">3</span>
+      </h4>
+      <ul class="list-group mb-3">
+        <li class="list-group-item d-flex justify-content-between lh-condensed">
+          <div>
+            <h6 class="my-0">Product name</h6>
+            <small class="text-muted">Brief description</small>
+          </div>
+          <span class="text-muted">$12</span>
+        </li>
+        <li class="list-group-item d-flex justify-content-between lh-condensed">
+          <div>
+            <h6 class="my-0">Second product</h6>
+            <small class="text-muted">Brief description</small>
+          </div>
+          <span class="text-muted">$8</span>
+        </li>
+        <li class="list-group-item d-flex justify-content-between lh-condensed">
+          <div>
+            <h6 class="my-0">Third item</h6>
+            <small class="text-muted">Brief description</small>
+          </div>
+          <span class="text-muted">$5</span>
+        </li>
+        <li class="list-group-item d-flex justify-content-between bg-light">
+          <div class="text-success">
+            <h6 class="my-0">Promo code</h6>
+            <small>EXAMPLECODE</small>
+          </div>
+          <span class="text-success">-$5</span>
+        </li>
+        <li class="list-group-item d-flex justify-content-between">
+          <span>Total (USD)</span>
+          <strong>$20</strong>
+        </li>
+      </ul>
+
+      <form class="card p-2">
+        <div class="input-group">
+          <input type="text" class="form-control" placeholder="Promo code">
+          <div class="input-group-append">
+            <button type="submit" class="btn btn-secondary">Redeem</button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div class="col-md-8 order-md-1">
+      <h4 class="mb-3">Billing address</h4>
+      <form class="needs-validation" novalidate>
+        <div class="row">
+          <div class="col-md-6 mb-3">
+            <label for="firstName">First name</label>
+            <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
+            <div class="invalid-feedback">
+              Valid first name is required.
+            </div>
+          </div>
+          <div class="col-md-6 mb-3">
+            <label for="lastName">Last name</label>
+            <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
+            <div class="invalid-feedback">
+              Valid last name is required.
+            </div>
+          </div>
+        </div>
+
+        <div class="mb-3">
+          <label for="email">Email <span class="text-muted">(Optional)</span></label>
+          <input type="email" class="form-control" id="email" placeholder="you@example.com">
+          <div class="invalid-feedback">
+            Please enter a valid email address for shipping updates.
+          </div>
+        </div>
+
+        <div class="mb-3">
+          <label for="address">Address</label>
+          <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
+          <div class="invalid-feedback">
+            Please enter your shipping address.
+          </div>
+        </div>
+
+        <div class="mb-3">
+          <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
+          <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
+        </div>
+
+        <div class="row">
+          <div class="col-md-5 mb-3">
+            <label for="country">Country</label>
+            <input type="text" class="form-control" id="zip" placeholder="United States" required>
+            <div class="invalid-feedback">
+              Please select a valid country.
+            </div>
+          </div>
+          <div class="col-md-4 mb-3">
+            <label for="state">State</label>
+            <input type="text" class="form-control" id="zip" placeholder="NC" required>
+            <div class="invalid-feedback">
+              Please provide a valid state.
+            </div>
+          </div>
+          <div class="col-md-3 mb-3">
+            <label for="zip">Zip</label>
+            <input type="text" class="form-control" id="zip" placeholder="" required>
+            <div class="invalid-feedback">
+              Zip code required.
+            </div>
+          </div>
+        </div>
+        <hr class="mb-4">
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" class="custom-control-input" id="same-address">
+          <label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
+        </div>
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" class="custom-control-input" id="save-info">
+          <label class="custom-control-label" for="save-info">Save this information for next time</label>
+        </div>
+        <hr class="mb-4">
+
+        <h4 class="mb-3">Payment</h4>
+
+        <div class="d-block my-3">
+          <div class="custom-control custom-radio">
+            <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
+            <label class="custom-control-label" for="credit">Credit card</label>
+          </div>
+          <div class="custom-control custom-radio">
+            <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
+            <label class="custom-control-label" for="debit">Debit card</label>
+          </div>
+          <div class="custom-control custom-radio">
+            <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
+            <label class="custom-control-label" for="paypal">PayPal</label>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6 mb-3">
+            <label for="cc-name">Name on card</label>
+            <input type="text" class="form-control" id="cc-name" placeholder="" required>
+            <small class="text-muted">Full name as displayed on card</small>
+            <div class="invalid-feedback">
+              Name on card is required
+            </div>
+          </div>
+          <div class="col-md-6 mb-3">
+            <label for="cc-number">Credit card number</label>
+            <input type="text" class="form-control" id="cc-number" placeholder="" required>
+            <div class="invalid-feedback">
+              Credit card number is required
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-3 mb-3">
+            <label for="cc-expiration">Expiration</label>
+            <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
+            <div class="invalid-feedback">
+              Expiration date required
+            </div>
+          </div>
+          <div class="col-md-3 mb-3">
+            <label for="cc-cvv">CVV</label>
+            <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
+            <div class="invalid-feedback">
+              Security code required
+            </div>
+          </div>
+        </div>
+        <hr class="mb-4">
+        <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
+      </form>
+    </div>
+  </div>
+</main>
+
+  <footer>
+    <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
+  </footer> 
+
+
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 973d195..8007466 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,18 +1,92 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
 
+/* all pages */
 html {
     font-family: 'Lato', sans-serif;
 }
+/* end all pages */
 
+/* index page */
 #index {
-    background-color: deepskyblue;
+    background-image: url('https://images.pexels.com/photos/251225/pexels-photo-251225.jpeg?cs=srgb&dl=information-sign-on-shelf-251225.jpg&fm=jpg');
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: center;
+    background-size: cover;
 }
 
+.form-signin {
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+  }
+  .form-signin .checkbox {
+    font-weight: 400;
+    font-size: small;
+  }
+  .form-signin .form-control {
+    position: relative;
+    box-sizing: border-box;
+    height: auto;
+    padding: 10px;
+    font-size: 16px;
+  }
+  .form-signin .form-control:focus {
+    z-index: 2;
+  }
+  .form-signin input[type="email"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .form-signin input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+/* end index page */
+
+/* page 2 */
 #page2 {
     background-color: darkslategray;
 }
 
+
+#page2 .jumbotron {
+    background-image: url('https://cdn.wccftech.com/wp-content/uploads/2019/06/cyberpunk-2077-keyart.jpg');
+    background-size: cover;
+    background-attachment: local;
+    background-repeat: no-repeat;
+    background-position: center;
+    margin-bottom: 0;
+  }
+  @media (min-width: 768px) {
+    #page2 .jumbotron {
+      padding-top: 25rem;
+      padding-bottom: 6rem;
+    }
+  }
+  
+  #page2 .jumbotron p:last-child {
+    margin-bottom: 0;
+  }
+  
+  #page2 .jumbotron h1 {
+    font-weight: 300;
+  }
+  
+  #page2 .jumbotron .container {
+    max-width: 40rem;
+  }
+/* end page 2 */
+
+/* page 3 */
 #page3 {
-    background-color: salmon;
+    background-color: rgba(194, 197, 194, 0.719);
 }
 
+#cart-form {
+    padding: 2em;
+}
+/* end page 3 */
diff --git a/index.html b/index.html
index 3f0c9e3..0df4b82 100644
--- a/index.html
+++ b/index.html
@@ -15,15 +15,29 @@
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 
+  <style>
+    #index .jumbotron {
+    background-color: rgba(0, 0, 0, .6);
+    color: white;
+    text-shadow: 2px 2px 3px black;
+    font-size: 3em;
+    font-weight: 700;
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    border-radius: 0;
+    }
+  </style>
+
 </head>
 
 
 
 <body id="index">
-
+<header>
   <!----------------- BEGIN NAV ----------------->
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="font-family: 'Lato', sans-serif;">
-    <a class="navbar-brand" href="#">Nick DeVos</a>
+    <a class="navbar-brand" style="font-weight: 700;" href="#">Nick DeVos</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -34,10 +48,10 @@
           <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="page2.html">Page2</a>
+          <a class="nav-link" href="products.html">Products</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="page3.html">Page3</a>
+          <a class="nav-link" href="cart.html">Cart</a>
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -47,7 +61,7 @@
             <a class="dropdown-item" href="#">Action</a>
             <a class="dropdown-item" href="#">Another action</a>
             <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="#">Something else here</a>
+            <a class="dropdown-item disabled" href="#">Dropdown</a>
           </div>
         </li>
       </ul>
@@ -57,10 +71,31 @@
     </div>
   </nav>
   <!----------------- END NAV ----------------->
+</header>
 
-  <div id="main col-12">
+<main>
+  <div class="jumbotron col-12 text-center">
+    Welcome!
+    <form class="form-signin" style="padding-top: 1em;">
 
+      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+      <label for="inputEmail" class="sr-only">Email address</label>
+      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
+      <label for="inputPassword" class="sr-only">Password</label>
+      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
+      <div class="checkbox mb-3">
+        <label>
+          <input type="checkbox" value="remember-me"> Remember me
+        </label>
+      </div>
+      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+      </form>
   </div>
+</main>
+
+
+
+
 
 
   <footer>
diff --git a/page2.html b/page2.html
deleted file mode 100644
index ac16318..0000000
--- a/page2.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head> 
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description" content="">
-  <meta name="author" content="">
-  <title>SBA Page2</title>
-
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
-  <link href="./css/style.css" rel="stylesheet">
-  <!-- <script type="text/javascript" src="./js/header-functions.js"></script> -->
-  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
-
-</head>
-
-
-
-<body id="page2">
-
-  <!----------------- BEGIN NAV ----------------->
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="font-family: 'Lato', sans-serif;">
-    <a class="navbar-brand" href="#">Navbar</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-  
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
-        </li>
-        <li class="nav-item active">
-          <a class="nav-link" href="page2.html">Page2</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="page3.html">Page3</a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Dropdown
-          </a>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="#">Something else here</a>
-          </div>
-        </li>
-      </ul>
-      <form class="form-inline my-2 my-lg-0">
-        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
-      </form>
-    </div>
-  </nav>
-  <!----------------- END NAV ----------------->
-
-
-
-
-  <footer>
-    <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
-  </footer> 
-
-
-</body>
-
-
-</html>
\ No newline at end of file
diff --git a/page3.html b/page3.html
deleted file mode 100644
index 04b2064..0000000
--- a/page3.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head> 
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description" content="">
-  <meta name="author" content="">
-  <title>SBA Page3</title>
-
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
-  <link href="./css/style.css" rel="stylesheet">
-  <!-- <script type="text/javascript" src="./js/header-functions.js"></script> -->
-  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
-
-</head>
-
-
-
-<body id="page3">
-
-  <!----------------- BEGIN NAV ----------------->
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="font-family: 'Lato', sans-serif;">
-    <a class="navbar-brand" href="#">Navbar</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-  
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="page2.html">Page2</a>
-        </li>
-        <li class="nav-item active">
-          <a class="nav-link" href="page3.html">Page3</a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Dropdown
-          </a>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="#">Something else here</a>
-          </div>
-        </li>
-      </ul>
-      <form class="form-inline my-2 my-lg-0">
-        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
-      </form>
-    </div>
-  </nav>
-  <!----------------- END NAV ----------------->
-
-
-
-
-  <footer>
-    <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
-  </footer> 
-
-
-</body>
-
-
-</html>
\ No newline at end of file
diff --git a/products.html b/products.html
new file mode 100644
index 0000000..acbcb49
--- /dev/null
+++ b/products.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head> 
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <title>SBA Page2</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+  <link href="./css/style.css" rel="stylesheet">
+  <!-- <script type="text/javascript" src="./js/header-functions.js"></script> -->
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+
+</head>
+
+
+
+<body id="page2">
+<header>
+  <!----------------- BEGIN NAV ----------------->
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="font-family: 'Lato', sans-serif;">
+    <a class="navbar-brand" style="font-weight: 700;" href="#">Nick DeVos</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item active">
+          <a class="nav-link" href="products.html">Products</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="cart.html">Cart</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <a class="dropdown-item" href="#">Action</a>
+            <a class="dropdown-item" href="#">Another action</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#">Something else here</a>
+          </div>
+        </li>
+      </ul>
+      <form class="form-inline my-2 my-lg-0">
+        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
+      </form>
+    </div>
+  </nav>
+  <!----------------- END NAV ----------------->
+</header>
+
+<main role="main">
+
+    <section class="jumbotron text-center">
+      <div class="container">
+        <h1></h1>
+        <p class="lead text-muted"></p>
+        <p>
+          <a href="#" class="btn btn-primary my-2">Add to Cart</a>
+          <a href="#" class="btn btn-secondary my-2">Visit Official Site</a>
+        </p>
+      </div>
+    </section>
+  
+    <div class="album py-5 bg-light">
+      <div class="container">
+  
+        <div class="row">
+          <div class="col-md-4">
+            <div class="card mb-4 shadow-sm">
+                <img class="card-img-top" src="https://media.gamestop.com/i/gamestop/11097389/The-Last-of-Us-Part-II?$pdp$" alt="image"></img>
+                <div class="card-body">
+                <h5 class="card-title">The Last of Us: Part II</h5>
+                <p class="card-text"></p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                  </div>
+                  <small class="text-muted">$59.99</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="card mb-4 shadow-sm">
+                <img class="card-img-top" src="https://media.gamestop.com/i/gamestop/11100913/Ghost-of-Tsushima-Launch-Edition?$zoom$" alt="image"></img>
+                <div class="card-body">
+                <h5 class="card-title">Ghost of Tsushima</h5>
+                <p class="card-text"></p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                  </div>
+                  <small class="text-muted">$59.99</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="card mb-4 shadow-sm">
+                <img class="card-img-top" src="https://media.gamestop.com/i/gamestop/11094722/Cyberpunk-2077?$zoom$" alt="image"></img>
+                <div class="card-body">
+                <h5 class="card-title">Cyberpunk 2077</h5>
+                <p class="card-text"></p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                  </div>
+                  <small class="text-muted">$59.99</small>
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <div class="col-md-4">
+            <div class="card mb-4 shadow-sm">
+                <img class="card-img-top" src="https://media.gamestop.com/i/gamestop/10131627/Detroit-Become-Human?$zoom$" alt="image"></img>
+                <div class="card-body">
+                <h5 class="card-title">Detroit Become Human</h5>
+                <p class="card-text"></p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                  </div>
+                  <small class="text-muted">$59.99</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="card mb-4 shadow-sm">
+                <img class="card-img-top" src="https://media.gamestop.com/i/gamestop/10161168/Spyro-Reignited-Trilogy?$zoom$" alt="image"></img>
+                <div class="card-body">
+                <h5 class="card-title">Spyro Reignited Trilogy</h5>
+                <p class="card-text"></p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                  </div>
+                  <small class="text-muted">$59.99</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="card mb-4 shadow-sm">
+                <img class="card-img-top" src="https://media.gamestop.com/i/gamestop/11096443/Need-for-Speed-Heat?$pdp$" alt="image"></img>
+                <div class="card-body">
+                <h5 class="card-title">Need for Speed Heat</h5>
+                <p class="card-text"></p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                  </div>
+                  <small class="text-muted">$59.99</small>
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <div class="col-md-4">
+            <div class="card mb-4 shadow-sm">
+                <img class="card-img-top" src="https://media.gamestop.com/i/gamestop/11094749/Call-of-Duty-Modern-Warfare?$zoom$" alt="image"></img>
+                <div class="card-body">
+                <h5 class="card-title">Call of Duty: Modern Warfare</h5>
+                <p class="card-text"></p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                  </div>
+                  <small class="text-muted">$59.99</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="card mb-4 shadow-sm">
+                <img class="card-img-top" src="https://media.gamestop.com/i/gamestop/11097926/MLB-The-Show-20?$zoom$" alt="image"></img>
+                <div class="card-body">
+                <h5 class="card-title">MLB The Show 20</h5>
+                <p class="card-text"></p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                  </div>
+                  <small class="text-muted">$59.99</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="card mb-4 shadow-sm">
+                <img class="card-img-top" src="https://media.gamestop.com/i/gamestop/11096536/Marvels-Spider-Man-Game-of-the-Year-Edition?$zoom$" alt="image"></img>
+                <div class="card-body">
+                <h5 class="card-title">Marvels Spider-Man Game of the Year Edition</h5>
+                <p class="card-text"></p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                  </div>
+                  <small class="text-muted">$59.99</small>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  
+  </main>
+
+  <footer>
+    <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
+  </footer> 
+
+
+</body>
+
+
+</html>
\ No newline at end of file

From 8aeb4f6011d0f3cac582808389075fee4e4cce5d Mon Sep 17 00:00:00 2001
From: nick-devos <nickdevos123@yahoo.com>
Date: Thu, 9 Jul 2020 15:13:33 -0400
Subject: [PATCH 3/9] progress

---
 README.md     | 115 +++++++++++++++-----------------------------------
 cart.html     |   9 ++--
 css/style.css |  20 ++++++++-
 index.html    |   3 ++
 products.html |  15 ++++---
 5 files changed, 70 insertions(+), 92 deletions(-)

diff --git a/README.md b/README.md
index 3208420..8aa7235 100644
--- a/README.md
+++ b/README.md
@@ -8,102 +8,53 @@
 ### Resources used
 * Bootstrap: `https://getbootstrap.com/`
 * Google fonts: `https://fonts.google.com/`
-* Photos: `https://www.pexels.com/`
+* Photos: `https://www.gamestop.com/`, `https://www.reddit.com/r/cyberpunkgame/comments/9d3cv6/cyberpunk_2077_wallpaper_for_pc/`, `'https://cdn.wccftech.com/wp-content/uploads/2019/06/cyberpunk-2077-keyart.jpg'`
 
+### Page 1
+##### Home - Landing Page
+* Form for sign-in
+* Nice gif background
 
+### Page 2
+##### Product Selection Page
+* Bootstrap cards used for each product
+* Each card contains an image, button for adding to cart, and price
 
+### Page 3
+##### Cart Page
+* Second form area for detailed check-out
+* Multiple input areas for things like names, address, and payment options
 
 
 
 
-* Some resources for free content:
-  * GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k`
-
-* Useful API sites:
-  * https://rapidapi.com/ (Links to an external site.)
-  * https://any-api.com/ (Links to an external site.)
-  * https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.)
-  * https://apilist.fun/
-
-### Deliverable:
-* A theme for your site that you feel comfortable with
-  * Complete all technical requirements for HTML, CSS, and Javascript
-  * Have markups of your pages
-  * Research for a public API that can provide you with content (Optional)
-  * Include a README file. The file should include technical specifications and description of your website.
-  * Host on GitHub,  include the link to your GitHub account in the README file(optional)
-  * Submit the project in a ZIP file
-
 
 
 
 ## Technical requirements
 
 * HTML
-  * Have at least 3 pages, keep the grid system consistent as much as possible
-  * Use at least 10 different HTML tags
-  * Use HTML tables
-  * Implement at least two uses for forms
-  * Dropped Down Menu 
-  * Use web fonts
-  * Use different types of content in the form of text, images, videos, and GIFs
-  * Use regex validation
+  - [x] Have at least 3 pages, keep the grid system consistent as much as possible
+  - [x] Use at least 10 different HTML tags
+  - [] Use HTML tables
+  - [x] Implement at least two uses for forms
+  - [] Dropped Down Menu 
+  - [x] Use web fonts
+  - [x] Use different types of content in the form of text, images, videos, and GIFs
+  - [] Use regex validation
 
 * CSS
-  * Inline, internal, and external styling
-  * Use five different CSS selectors
-  * Don’t use too many fonts
-  * Use colors that complement each other
-  * Use Flexbox (Optional)
-  * Use SASS/SCSS (Optional)
-  * Use animations (Optional)
+  - [x] Inline, internal, and external styling
+  - [x] Use five different CSS selectors
+  - [x] Don’t use too many fonts
+  - [x] Use colors that complement each other
+  - [] Use Flexbox (Optional)
+  - [] Use SASS/SCSS (Optional)
+  - [] Use animations (Optional)
 
 * Javascript
-  * External scripts
-  * Use variables, if statements, loops, at least one form of collections, functions/call back, and events
-  * Use AJAX (Optional) 
-  * Use JSON or XML (Optional)
-  * Use JQuery (Optional)
-
-
-
-## How to Download
-
-#### Part 1 - Forking the Project
-* To _fork_ the project, click the `Fork` button located at the top right of the project.
-
-
-#### Part 2 - Navigating to _forked_ Repository
-* Navigate to your github profile to find the _newly forked repository_.
-* Copy the URL of the project to the clipboard.
-
-#### Part 3 - Cloning _forked_ repository
-* Clone the repository from **your account** into the `~/dev` directory.
-  * if you do not have a `~/dev` directory, make one by executing the following command:
-  * * `mkdir ~/dev`
-  * navigate to the `~/dev` directory by executing the following command:
-  * * `cd ~/dev`
-  * clone the project by executing the following command:
-  * * `git clone https://github.com/${MYUSERNAME}/${NAMEOFPROJECT}`
-
-
-
-
-
-
-## How to Submit
-
-#### Part 1 -  _Pushing_ local changes to remote repository
-* from a _terminal_ navigate to the root directory of the _cloned_ project.
-* from the root directory of the project, execute the following commands:
-  * * add all changes
-  *   * `git add .`
-  * * commit changes to be pushed
-  *   * `git commit -m 'I have added changes'`
-  * * push changes to your repository
-  *   * `git push -u origin master`
-
-#### Part 2 - Submitting assignment
-* from the browser, navigate to the _forked_ project from **your** github account.
-* click the `Pull Requests` tab.
-* select `New Pull Request`
+  - [] External scripts
+  - [] Use variables, if statements, loops, at least one form of collections, functions/call back, and events
+  - [] Use AJAX (Optional) 
+  - [] Use JSON or XML (Optional)
+  - [] Use JQuery (Optional)
\ No newline at end of file
diff --git a/cart.html b/cart.html
index 94b14ff..c9509c1 100644
--- a/cart.html
+++ b/cart.html
@@ -241,9 +241,12 @@ <h4 class="mb-3">Payment</h4>
   </div>
 </main>
 
-  <footer>
-    <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
-  </footer> 
+<footer>
+  <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
+  <div class="foot">
+    Website built for educational purposes only! I do not own the images shown and do not sell anything.. please refer to the README.md for citation.
+  </div>
+</footer> 
 
 
 </body>
diff --git a/css/style.css b/css/style.css
index 8007466..7280853 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,9 +6,13 @@ html {
 }
 /* end all pages */
 
+.navbar {
+    background-color: rgba(0,0,0,.8)!important;
+}
+
 /* index page */
 #index {
-    background-image: url('https://images.pexels.com/photos/251225/pexels-photo-251225.jpeg?cs=srgb&dl=information-sign-on-shelf-251225.jpg&fm=jpg');
+    background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.redd.it%2Fd0o107bmuck11.gif&f=1&nofb=1');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
@@ -90,3 +94,17 @@ html {
     padding: 2em;
 }
 /* end page 3 */
+
+#index .foot {
+    position: absolute;
+}
+
+.foot {
+    color: white;
+    bottom: 5%;
+    text-align: center;
+    width: 100%;
+    height: 3%;
+    bottom: 0;
+    background-color: rgba(0,0,0,.5);
+}
diff --git a/index.html b/index.html
index 0df4b82..b07b160 100644
--- a/index.html
+++ b/index.html
@@ -100,6 +100,9 @@ <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
 
   <footer>
     <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
+    <div class="foot">
+      Website built for educational purposes only! I do not own the images shown and do not sell anything.. please refer to the README.md for citation.
+    </div>
   </footer> 
 
 
diff --git a/products.html b/products.html
index acbcb49..25d1dde 100644
--- a/products.html
+++ b/products.html
@@ -67,7 +67,7 @@ <h1></h1>
         <p class="lead text-muted"></p>
         <p>
           <a href="#" class="btn btn-primary my-2">Add to Cart</a>
-          <a href="#" class="btn btn-secondary my-2">Visit Official Site</a>
+          <a href="https://www.cyberpunk.net/us/en/" target="_blank" class="btn btn-secondary my-2">Visit Official Site</a>
         </p>
       </div>
     </section>
@@ -132,7 +132,7 @@ <h5 class="card-title">Detroit Become Human</h5>
                   <div class="btn-group">
                     <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
                   </div>
-                  <small class="text-muted">$59.99</small>
+                  <small class="text-muted">$19.99</small>
                 </div>
               </div>
             </div>
@@ -147,7 +147,7 @@ <h5 class="card-title">Spyro Reignited Trilogy</h5>
                   <div class="btn-group">
                     <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
                   </div>
-                  <small class="text-muted">$59.99</small>
+                  <small class="text-muted">$29.99</small>
                 </div>
               </div>
             </div>
@@ -162,7 +162,7 @@ <h5 class="card-title">Need for Speed Heat</h5>
                   <div class="btn-group">
                     <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
                   </div>
-                  <small class="text-muted">$59.99</small>
+                  <small class="text-muted">$29.99</small>
                 </div>
               </div>
             </div>
@@ -193,7 +193,7 @@ <h5 class="card-title">MLB The Show 20</h5>
                   <div class="btn-group">
                     <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
                   </div>
-                  <small class="text-muted">$59.99</small>
+                  <small class="text-muted">$39.99</small>
                 </div>
               </div>
             </div>
@@ -208,7 +208,7 @@ <h5 class="card-title">Marvels Spider-Man Game of the Year Edition</h5>
                   <div class="btn-group">
                     <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
                   </div>
-                  <small class="text-muted">$59.99</small>
+                  <small class="text-muted">$39.99</small>
                 </div>
               </div>
             </div>
@@ -221,6 +221,9 @@ <h5 class="card-title">Marvels Spider-Man Game of the Year Edition</h5>
 
   <footer>
     <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
+    <div class="foot">
+      Website built for educational purposes only! I do not own the images shown and do not sell anything.. please refer to the README.md for citation.
+    </div>
   </footer> 
 
 

From b3da3dbe18b19c595efcde7bfe3ff83d5b027078 Mon Sep 17 00:00:00 2001
From: nick-devos <nickdevos123@yahoo.com>
Date: Thu, 9 Jul 2020 15:46:52 -0400
Subject: [PATCH 4/9] progress

---
 README.md              | 22 ++++++++--------
 cart.html              | 60 +++++++++---------------------------------
 css/style.css          | 10 +++++++
 index.html             |  2 +-
 js/header-functions.js |  9 +++++++
 products.html          |  8 +++---
 6 files changed, 47 insertions(+), 64 deletions(-)

diff --git a/README.md b/README.md
index 8aa7235..ccdd7b8 100644
--- a/README.md
+++ b/README.md
@@ -36,25 +36,25 @@
 * HTML
   - [x] Have at least 3 pages, keep the grid system consistent as much as possible
   - [x] Use at least 10 different HTML tags
-  - [] Use HTML tables
+  - [ ] Use HTML tables
   - [x] Implement at least two uses for forms
-  - [] Dropped Down Menu 
+  - [ ] Dropped Down Menu 
   - [x] Use web fonts
   - [x] Use different types of content in the form of text, images, videos, and GIFs
-  - [] Use regex validation
+  - [ ] Use regex validation
 
 * CSS
   - [x] Inline, internal, and external styling
   - [x] Use five different CSS selectors
   - [x] Don’t use too many fonts
   - [x] Use colors that complement each other
-  - [] Use Flexbox (Optional)
-  - [] Use SASS/SCSS (Optional)
-  - [] Use animations (Optional)
+  - [ ] Use Flexbox (Optional)
+  - [ ] Use SASS/SCSS (Optional)
+  - [ ] Use animations (Optional)
 
 * Javascript
-  - [] External scripts
-  - [] Use variables, if statements, loops, at least one form of collections, functions/call back, and events
-  - [] Use AJAX (Optional) 
-  - [] Use JSON or XML (Optional)
-  - [] Use JQuery (Optional)
\ No newline at end of file
+  - [ ] External scripts
+  - [ ] Use variables, if statements, loops, at least one form of collections, functions/call back, and events
+  - [ ] Use AJAX (Optional) 
+  - [ ] Use JSON or XML (Optional)
+  - [ ] Use JQuery (Optional)
\ No newline at end of file
diff --git a/cart.html b/cart.html
index c9509c1..a048336 100644
--- a/cart.html
+++ b/cart.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">
-  <title>SBA Page3</title>
+  <title>Cart - SBA</title>
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <link href="./css/style.css" rel="stylesheet">
@@ -62,53 +62,17 @@
 <main id="cart-form">
 <div class="row">
     <div class="col-md-4 order-md-2 mb-4">
-      <h4 class="d-flex justify-content-between align-items-center mb-3">
-        <span class="text-muted">Your cart</span>
-        <span class="badge badge-secondary badge-pill">3</span>
-      </h4>
-      <ul class="list-group mb-3">
-        <li class="list-group-item d-flex justify-content-between lh-condensed">
-          <div>
-            <h6 class="my-0">Product name</h6>
-            <small class="text-muted">Brief description</small>
-          </div>
-          <span class="text-muted">$12</span>
-        </li>
-        <li class="list-group-item d-flex justify-content-between lh-condensed">
-          <div>
-            <h6 class="my-0">Second product</h6>
-            <small class="text-muted">Brief description</small>
-          </div>
-          <span class="text-muted">$8</span>
-        </li>
-        <li class="list-group-item d-flex justify-content-between lh-condensed">
-          <div>
-            <h6 class="my-0">Third item</h6>
-            <small class="text-muted">Brief description</small>
-          </div>
-          <span class="text-muted">$5</span>
-        </li>
-        <li class="list-group-item d-flex justify-content-between bg-light">
-          <div class="text-success">
-            <h6 class="my-0">Promo code</h6>
-            <small>EXAMPLECODE</small>
-          </div>
-          <span class="text-success">-$5</span>
-        </li>
-        <li class="list-group-item d-flex justify-content-between">
-          <span>Total (USD)</span>
-          <strong>$20</strong>
-        </li>
-      </ul>
-
-      <form class="card p-2">
-        <div class="input-group">
-          <input type="text" class="form-control" placeholder="Promo code">
-          <div class="input-group-append">
-            <button type="submit" class="btn btn-secondary">Redeem</button>
-          </div>
-        </div>
-      </form>
+      <table>
+        <tr>
+          <th>Product</th>
+          <th>Price</th>
+          <th>Quantity</th>
+        </tr>
+
+        <tr>
+          <td>Total:</td>
+        </tr>
+      </table>
     </div>
     <div class="col-md-8 order-md-1">
       <h4 class="mb-3">Billing address</h4>
diff --git a/css/style.css b/css/style.css
index 7280853..3bdc598 100644
--- a/css/style.css
+++ b/css/style.css
@@ -93,6 +93,16 @@ html {
 #cart-form {
     padding: 2em;
 }
+
+tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+th {
+    background-color: #89b7ebbd;
+    color: white;
+    padding-right: 3em;
+  }
 /* end page 3 */
 
 #index .foot {
diff --git a/index.html b/index.html
index b07b160..02bad50 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">
-  <title>SBA Home</title>
+  <title>Home - SBA</title>
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <link href="./css/style.css" rel="stylesheet">
diff --git a/js/header-functions.js b/js/header-functions.js
index e69de29..1881206 100644
--- a/js/header-functions.js
+++ b/js/header-functions.js
@@ -0,0 +1,9 @@
+function mouseover() {
+    document.getElementById("featured-btn").style.backgroundColor = "black";
+    document.getElementById("featured-btn").style.color = "yellow";
+}
+
+function mouseout() {
+    document.getElementById("featured-btn").style.backgroundColor = "yellow";
+    document.getElementById("featured-btn").style.color = "black";
+}
\ No newline at end of file
diff --git a/products.html b/products.html
index 25d1dde..7f6410d 100644
--- a/products.html
+++ b/products.html
@@ -6,11 +6,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">
-  <title>SBA Page2</title>
+  <title>Products - SBA</title>
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <link href="./css/style.css" rel="stylesheet">
-  <!-- <script type="text/javascript" src="./js/header-functions.js"></script> -->
+  <script type="text/javascript" src="./js/header-functions.js"></script>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
@@ -66,8 +66,8 @@
         <h1></h1>
         <p class="lead text-muted"></p>
         <p>
-          <a href="#" class="btn btn-primary my-2">Add to Cart</a>
-          <a href="https://www.cyberpunk.net/us/en/" target="_blank" class="btn btn-secondary my-2">Visit Official Site</a>
+          <a href="https://www.cyberpunk.net/us/en/" target="_blank" id="featured-btn" class="btn btn-secondary my-2" 
+          style="background-color: yellow; color: black; border-color: yellow;" onmouseover="mouseover()" onmouseout="mouseout()">Visit Official Site</a>
         </p>
       </div>
     </section>

From 7f0f7bdbddf8f8a519d3d40e76ad265dcd43bfca Mon Sep 17 00:00:00 2001
From: nick-devos <nickdevos123@yahoo.com>
Date: Thu, 9 Jul 2020 18:23:34 -0400
Subject: [PATCH 5/9] progress

---
 README.md              | 11 ++++++-----
 js/footer-functions.js | 30 ++++++++++++++++++++++++++++++
 js/header-functions.js |  1 +
 js/utils.js            |  6 ++++++
 products.html          | 21 +++++++++++----------
 5 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index ccdd7b8..2220c64 100644
--- a/README.md
+++ b/README.md
@@ -11,19 +11,20 @@
 * Photos: `https://www.gamestop.com/`, `https://www.reddit.com/r/cyberpunkgame/comments/9d3cv6/cyberpunk_2077_wallpaper_for_pc/`, `'https://cdn.wccftech.com/wp-content/uploads/2019/06/cyberpunk-2077-keyart.jpg'`
 
 ### Page 1
-##### Home - Landing Page
+#### Home - Landing Page
 * Form for sign-in
-* Nice gif background
+* Nice .gif background
 
 ### Page 2
-##### Product Selection Page
+#### Product Selection Page
 * Bootstrap cards used for each product
 * Each card contains an image, button for adding to cart, and price
 
 ### Page 3
-##### Cart Page
+#### Cart Page
 * Second form area for detailed check-out
 * Multiple input areas for things like names, address, and payment options
+* HTML table used to show products ordered
 
 
 
@@ -53,7 +54,7 @@
   - [ ] Use animations (Optional)
 
 * Javascript
-  - [ ] External scripts
+  - [x] External scripts
   - [ ] Use variables, if statements, loops, at least one form of collections, functions/call back, and events
   - [ ] Use AJAX (Optional) 
   - [ ] Use JSON or XML (Optional)
diff --git a/js/footer-functions.js b/js/footer-functions.js
index e69de29..6d02f33 100644
--- a/js/footer-functions.js
+++ b/js/footer-functions.js
@@ -0,0 +1,30 @@
+var cart = [['The Last of Us: Part II', 0], ['Ghost of Tsushima', 0], ['Cyberpunk 2077', 0], ['Detroit Become Human', 0], ['Spyro Reignited Trilogy', 0],
+            ['Need For Speed Heat', 0], ['Call of Duty Modern Warfare', 0], ['MLB The Show 20', 0], ['Marvels Spider-Man Game of the Year Edition', 0]];
+
+function addToCart(evt) {
+    console.log(evt);
+    switch(evt) {
+        case 'btn-lastOfUsPart2': cart[0][1]++;
+            break;
+        case 'btn-ghostOfTsushima': cart[1][1]++;
+            break;
+        case 'btn-cyberpunk2077': cart[2][1]++;
+            break;
+        case 'btn-detroitBecomeHuman': cart[3][1]++;
+            break;
+        case 'btn-spyroReignitedTrilogy': cart[4][1]++;
+            break;
+        case 'btn-needForSpeedHeat': cart[5][1]++;
+            break;
+        case 'btn-callOfDutyModernWarfare': cart[6][1]++;
+            break;
+        case 'btn-mlbTheShow20': cart[7][1]++;
+            break;
+        case 'btn-marvelsSpiderManGoty': cart[8][1]++;
+            break;
+        default: alert('Mismatched Names');
+            break;
+    }
+console.log(cart);
+}
+
diff --git a/js/header-functions.js b/js/header-functions.js
index 1881206..ee3afd4 100644
--- a/js/header-functions.js
+++ b/js/header-functions.js
@@ -1,3 +1,4 @@
+
 function mouseover() {
     document.getElementById("featured-btn").style.backgroundColor = "black";
     document.getElementById("featured-btn").style.color = "yellow";
diff --git a/js/utils.js b/js/utils.js
index e69de29..977a0a5 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -0,0 +1,6 @@
+// import jquery-3.4.0
+document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>');
+document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>');
+
+// import w3-include
+document.write('<script src="http://www.w3schools.com/lib/w3data.js"></script>');
\ No newline at end of file
diff --git a/products.html b/products.html
index 7f6410d..66bbc03 100644
--- a/products.html
+++ b/products.html
@@ -10,6 +10,7 @@
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <link href="./css/style.css" rel="stylesheet">
+  <script type="text/javascript" src="./js/utils.js"></script>
   <script type="text/javascript" src="./js/header-functions.js"></script>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
@@ -84,7 +85,7 @@ <h5 class="card-title">The Last of Us: Part II</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                    <button type="button" id="btn-lastOfUsPart2" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$59.99</small>
                 </div>
@@ -99,7 +100,7 @@ <h5 class="card-title">Ghost of Tsushima</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                    <button type="button" id="btn-ghostOfTsushima" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$59.99</small>
                 </div>
@@ -114,7 +115,7 @@ <h5 class="card-title">Cyberpunk 2077</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                    <button type="button" id="btn-cyberpunk2077" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$59.99</small>
                 </div>
@@ -130,7 +131,7 @@ <h5 class="card-title">Detroit Become Human</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                    <button type="button" id="btn-detroitBecomeHuman" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$19.99</small>
                 </div>
@@ -145,7 +146,7 @@ <h5 class="card-title">Spyro Reignited Trilogy</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                    <button type="button" id="btn-spyroReignitedTrilogy" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$29.99</small>
                 </div>
@@ -160,7 +161,7 @@ <h5 class="card-title">Need for Speed Heat</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                    <button type="button" id="btn-needForSpeedHeat" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$29.99</small>
                 </div>
@@ -176,7 +177,7 @@ <h5 class="card-title">Call of Duty: Modern Warfare</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                    <button type="button" id="btn-callOfDutyModernWarfare" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$59.99</small>
                 </div>
@@ -191,7 +192,7 @@ <h5 class="card-title">MLB The Show 20</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                    <button type="button" id="btn-mlbTheShow20" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$39.99</small>
                 </div>
@@ -206,7 +207,7 @@ <h5 class="card-title">Marvels Spider-Man Game of the Year Edition</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" class="btn btn-sm btn-outline-secondary">Add to Cart</button>
+                    <button type="button" id="btn-marvelsSpiderManGoty" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$39.99</small>
                 </div>
@@ -220,7 +221,7 @@ <h5 class="card-title">Marvels Spider-Man Game of the Year Edition</h5>
   </main>
 
   <footer>
-    <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
+    <script type="text/javascript" src="./js/footer-functions.js"></script>
     <div class="foot">
       Website built for educational purposes only! I do not own the images shown and do not sell anything.. please refer to the README.md for citation.
     </div>

From a3d37e8b512be4cecb4645bf358da9384d7f5743 Mon Sep 17 00:00:00 2001
From: nick-devos <nickdevos123@yahoo.com>
Date: Thu, 9 Jul 2020 22:22:41 -0400
Subject: [PATCH 6/9] progress

---
 README.md                  |  4 ++--
 cart.html => checkout.html | 20 +++-----------------
 css/style.css              | 15 +++++++++------
 index.html                 |  2 +-
 js/footer-functions.js     | 13 ++++++++++---
 products.html              | 34 ++++++++++++++++++++++++----------
 6 files changed, 49 insertions(+), 39 deletions(-)
 rename cart.html => checkout.html (95%)

diff --git a/README.md b/README.md
index 2220c64..3a7fcbf 100644
--- a/README.md
+++ b/README.md
@@ -21,10 +21,10 @@
 * Each card contains an image, button for adding to cart, and price
 
 ### Page 3
-#### Cart Page
+#### Checkout Page
 * Second form area for detailed check-out
 * Multiple input areas for things like names, address, and payment options
-* HTML table used to show products ordered
+
 
 
 
diff --git a/cart.html b/checkout.html
similarity index 95%
rename from cart.html
rename to checkout.html
index a048336..7058afb 100644
--- a/cart.html
+++ b/checkout.html
@@ -6,11 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">
-  <title>Cart - SBA</title>
+  <title>Checkout - SBA</title>
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <link href="./css/style.css" rel="stylesheet">
-  <!-- <script type="text/javascript" src="./js/header-functions.js"></script> -->
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
@@ -37,7 +36,7 @@
           <a class="nav-link" href="products.html">Products</a>
         </li>
         <li class="nav-item active">
-          <a class="nav-link" href="cart.html">Cart</a>
+          <a class="nav-link" href="checkout.html">Checkout</a>
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -61,20 +60,7 @@
 
 <main id="cart-form">
 <div class="row">
-    <div class="col-md-4 order-md-2 mb-4">
-      <table>
-        <tr>
-          <th>Product</th>
-          <th>Price</th>
-          <th>Quantity</th>
-        </tr>
-
-        <tr>
-          <td>Total:</td>
-        </tr>
-      </table>
-    </div>
-    <div class="col-md-8 order-md-1">
+    <div class="col-md-8 order-md-1 mx-auto">
       <h4 class="mb-3">Billing address</h4>
       <form class="needs-validation" novalidate>
         <div class="row">
diff --git a/css/style.css b/css/style.css
index 3bdc598..4942322 100644
--- a/css/style.css
+++ b/css/style.css
@@ -52,10 +52,6 @@ html {
 /* end index page */
 
 /* page 2 */
-#page2 {
-    background-color: darkslategray;
-}
-
 
 #page2 .jumbotron {
     background-image: url('https://cdn.wccftech.com/wp-content/uploads/2019/06/cyberpunk-2077-keyart.jpg');
@@ -64,6 +60,7 @@ html {
     background-repeat: no-repeat;
     background-position: center;
     margin-bottom: 0;
+    border-radius: 0;
   }
   @media (min-width: 768px) {
     #page2 .jumbotron {
@@ -83,6 +80,10 @@ html {
   #page2 .jumbotron .container {
     max-width: 40rem;
   }
+
+  .album {
+    background-color: rgba(0,0,0,.4)!important;
+  }
 /* end page 2 */
 
 /* page 3 */
@@ -99,10 +100,12 @@ tr:nth-child(even) {
 }
 
 th {
-    background-color: #89b7ebbd;
-    color: white;
     padding-right: 3em;
   }
+
+table {
+  padding-bottom: 2em;
+}
 /* end page 3 */
 
 #index .foot {
diff --git a/index.html b/index.html
index 02bad50..c4dac5d 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
           <a class="nav-link" href="products.html">Products</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="cart.html">Cart</a>
+          <a class="nav-link" href="checkout.html">Checkout</a>
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
diff --git a/js/footer-functions.js b/js/footer-functions.js
index 6d02f33..6333c0d 100644
--- a/js/footer-functions.js
+++ b/js/footer-functions.js
@@ -1,5 +1,5 @@
-var cart = [['The Last of Us: Part II', 0], ['Ghost of Tsushima', 0], ['Cyberpunk 2077', 0], ['Detroit Become Human', 0], ['Spyro Reignited Trilogy', 0],
-            ['Need For Speed Heat', 0], ['Call of Duty Modern Warfare', 0], ['MLB The Show 20', 0], ['Marvels Spider-Man Game of the Year Edition', 0]];
+var cart = [['The Last of Us: Part II', 0, 59.99], ['Ghost of Tsushima', 0, 59.99], ['Cyberpunk 2077', 0, 59.99], ['Detroit Become Human', 0, 19.99], ['Spyro Reignited Trilogy', 0, 29.99],
+            ['Need For Speed Heat', 0, 29.99], ['Call of Duty Modern Warfare', 0, 59.99], ['MLB The Show 20', 0, 39.99], ['Marvels Spider-Man Game of the Year Edition', 0, 39.99]];
 
 function addToCart(evt) {
     console.log(evt);
@@ -25,6 +25,13 @@ function addToCart(evt) {
         default: alert('Mismatched Names');
             break;
     }
-console.log(cart);
+}
+
+function getCart() {
+    for(let x = 0; x < cart.length; x++) {
+        if(cart[x][1] > 0) {
+            document.write('<tr><td>'+cart[x][0]+'</td><td>'+cart[x][1]+'</td><td>'+(cart[x][2])*(cart[x][1])+'</td></tr>');
+        }
+    }
 }
 
diff --git a/products.html b/products.html
index 66bbc03..e8e32e5 100644
--- a/products.html
+++ b/products.html
@@ -38,7 +38,7 @@
           <a class="nav-link" href="products.html">Products</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="cart.html">Cart</a>
+          <a class="nav-link" href="checkout.html">Checkout</a>
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -85,7 +85,7 @@ <h5 class="card-title">The Last of Us: Part II</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" id="btn-lastOfUsPart2" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
+                    <button type="button" id="btn-lastOfUsPart2" class="btn btn-sm btn-success" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$59.99</small>
                 </div>
@@ -100,7 +100,7 @@ <h5 class="card-title">Ghost of Tsushima</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" id="btn-ghostOfTsushima" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
+                    <button type="button" id="btn-ghostOfTsushima" class="btn btn-sm btn-success" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$59.99</small>
                 </div>
@@ -115,7 +115,7 @@ <h5 class="card-title">Cyberpunk 2077</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" id="btn-cyberpunk2077" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
+                    <button type="button" id="btn-cyberpunk2077" class="btn btn-sm btn-success" onclick="addToCart(this.id)">Pre-order</button>
                   </div>
                   <small class="text-muted">$59.99</small>
                 </div>
@@ -131,7 +131,7 @@ <h5 class="card-title">Detroit Become Human</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" id="btn-detroitBecomeHuman" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
+                    <button type="button" id="btn-detroitBecomeHuman" class="btn btn-sm btn-success" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$19.99</small>
                 </div>
@@ -146,7 +146,7 @@ <h5 class="card-title">Spyro Reignited Trilogy</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" id="btn-spyroReignitedTrilogy" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
+                    <button type="button" id="btn-spyroReignitedTrilogy" class="btn btn-sm btn-success" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$29.99</small>
                 </div>
@@ -161,7 +161,7 @@ <h5 class="card-title">Need for Speed Heat</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" id="btn-needForSpeedHeat" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
+                    <button type="button" id="btn-needForSpeedHeat" class="btn btn-sm btn-success" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$29.99</small>
                 </div>
@@ -177,7 +177,7 @@ <h5 class="card-title">Call of Duty: Modern Warfare</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" id="btn-callOfDutyModernWarfare" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
+                    <button type="button" id="btn-callOfDutyModernWarfare" class="btn btn-sm btn-success" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$59.99</small>
                 </div>
@@ -192,7 +192,7 @@ <h5 class="card-title">MLB The Show 20</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" id="btn-mlbTheShow20" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
+                    <button type="button" id="btn-mlbTheShow20" class="btn btn-sm btn-success" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$39.99</small>
                 </div>
@@ -207,7 +207,7 @@ <h5 class="card-title">Marvels Spider-Man Game of the Year Edition</h5>
                 <p class="card-text"></p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group">
-                    <button type="button" id="btn-marvelsSpiderManGoty" class="btn btn-sm btn-outline-secondary" onclick="addToCart(this.id)">Add to Cart</button>
+                    <button type="button" id="btn-marvelsSpiderManGoty" class="btn btn-sm btn-success" onclick="addToCart(this.id)">Add to Cart</button>
                   </div>
                   <small class="text-muted">$39.99</small>
                 </div>
@@ -217,6 +217,20 @@ <h5 class="card-title">Marvels Spider-Man Game of the Year Edition</h5>
         </div>
       </div>
     </div>
+
+    <div class="table-container col-12">
+      <table class="info-table col-6 mx-auto" style="margin-bottom: 2em;">
+        <tr>
+          <th>Game</th>
+          <th>Quantity</th>
+          <th>Price</th>
+        </tr>
+        <script></script>
+        <tr>
+          <td>Total: </td>
+        </tr>
+      </table>
+    </div>
   
   </main>
 

From 5c5c96f318f0d9a6d5c6637ae88f218017a210ed Mon Sep 17 00:00:00 2001
From: nick-devos <nickdevos123@yahoo.com>
Date: Fri, 10 Jul 2020 00:54:08 -0400
Subject: [PATCH 7/9] progress

---
 README.md              |  4 ++--
 checkout.html          | 34 +++++++++-------------------------
 css/style.css          | 12 +++++++-----
 index.html             | 11 -----------
 js/footer-functions.js |  2 ++
 js/utils.js            |  7 ++++++-
 products.html          | 30 ++++++++++++------------------
 7 files changed, 38 insertions(+), 62 deletions(-)

diff --git a/README.md b/README.md
index 3a7fcbf..3288bba 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,7 @@
   - [x] Use at least 10 different HTML tags
   - [ ] Use HTML tables
   - [x] Implement at least two uses for forms
-  - [ ] Dropped Down Menu 
+  - [x] Dropped Down Menu 
   - [x] Use web fonts
   - [x] Use different types of content in the form of text, images, videos, and GIFs
   - [ ] Use regex validation
@@ -55,7 +55,7 @@
 
 * Javascript
   - [x] External scripts
-  - [ ] Use variables, if statements, loops, at least one form of collections, functions/call back, and events
+  - [x] Use variables, if statements, loops, at least one form of collections, functions/call back, and events
   - [ ] Use AJAX (Optional) 
   - [ ] Use JSON or XML (Optional)
   - [ ] Use JQuery (Optional)
\ No newline at end of file
diff --git a/checkout.html b/checkout.html
index 7058afb..f7fd0fa 100644
--- a/checkout.html
+++ b/checkout.html
@@ -38,17 +38,6 @@
         <li class="nav-item active">
           <a class="nav-link" href="checkout.html">Checkout</a>
         </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Dropdown
-          </a>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="#">Something else here</a>
-          </div>
-        </li>
       </ul>
       <form class="form-inline my-2 my-lg-0">
         <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
@@ -81,8 +70,8 @@ <h4 class="mb-3">Billing address</h4>
         </div>
 
         <div class="mb-3">
-          <label for="email">Email <span class="text-muted">(Optional)</span></label>
-          <input type="email" class="form-control" id="email" placeholder="you@example.com">
+          <label for="email">Email</label>
+          <input type="email" class="form-control" id="email" placeholder="you@example.com" required>
           <div class="invalid-feedback">
             Please enter a valid email address for shipping updates.
           </div>
@@ -138,18 +127,13 @@ <h4 class="mb-3">Billing address</h4>
         <h4 class="mb-3">Payment</h4>
 
         <div class="d-block my-3">
-          <div class="custom-control custom-radio">
-            <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
-            <label class="custom-control-label" for="credit">Credit card</label>
-          </div>
-          <div class="custom-control custom-radio">
-            <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
-            <label class="custom-control-label" for="debit">Debit card</label>
-          </div>
-          <div class="custom-control custom-radio">
-            <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
-            <label class="custom-control-label" for="paypal">PayPal</label>
-          </div>
+          <label for="payment">Payment</label>
+            <select class="custom-select d-block w-100" id="payment" required>
+              <option value="">Choose...</option>
+              <option>Credit Card</option>
+              <option>Debit Card</option>
+              <option>PayPal</option>
+            </select>
         </div>
         <div class="row">
           <div class="col-md-6 mb-3">
diff --git a/css/style.css b/css/style.css
index 4942322..0aea6c2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -81,9 +81,15 @@ html {
     max-width: 40rem;
   }
 
-  .album {
+  .album, .table-container {
     background-color: rgba(0,0,0,.4)!important;
   }
+
+  hr {
+    border-color: white!important;
+    padding: 0;
+    margin: 0;
+  }
 /* end page 2 */
 
 /* page 3 */
@@ -102,10 +108,6 @@ tr:nth-child(even) {
 th {
     padding-right: 3em;
   }
-
-table {
-  padding-bottom: 2em;
-}
 /* end page 3 */
 
 #index .foot {
diff --git a/index.html b/index.html
index c4dac5d..67c9d5d 100644
--- a/index.html
+++ b/index.html
@@ -53,17 +53,6 @@
         <li class="nav-item">
           <a class="nav-link" href="checkout.html">Checkout</a>
         </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Dropdown
-          </a>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item disabled" href="#">Dropdown</a>
-          </div>
-        </li>
       </ul>
       <form class="form-inline my-2 my-lg-0">
         <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
diff --git a/js/footer-functions.js b/js/footer-functions.js
index 6333c0d..fbd7dd7 100644
--- a/js/footer-functions.js
+++ b/js/footer-functions.js
@@ -35,3 +35,5 @@ function getCart() {
     }
 }
 
+
+
diff --git a/js/utils.js b/js/utils.js
index 977a0a5..c54e087 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -3,4 +3,9 @@ document.write('<script type="text/javascript" src="https://ajax.googleapis.com/
 document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>');
 
 // import w3-include
-document.write('<script src="http://www.w3schools.com/lib/w3data.js"></script>');
\ No newline at end of file
+document.write('<script src="http://www.w3schools.com/lib/w3data.js"></script>');
+
+var gameList = [['The Last of Us: Part II', 'M - Mature', 94, 59.99], ['Ghost of Tsushima', 'M - Mature', 'tbd', 59.99], 
+['Cyberpunk 2077', 'M - Mature', 'tbd', 59.99], ['Detroit Become Human', 'M - Mature', 78, 19.99], 
+['Spyro Reignited Trilogy', 'E - Everyone', 82, 29.99], ['Need For Speed Heat', 'T - Teen', 72, 29.99], 
+['Call of Duty Modern Warfare', 'M - Mature', 80, 59.99], ['MLB The Show 20', 'E - Everyone', 83, 39.99], ['Marvels Spider-Man Game of the Year Edition', 'T - Teen', 87, 39.99]];
\ No newline at end of file
diff --git a/products.html b/products.html
index e8e32e5..7b3ffe3 100644
--- a/products.html
+++ b/products.html
@@ -40,17 +40,6 @@
         <li class="nav-item">
           <a class="nav-link" href="checkout.html">Checkout</a>
         </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Dropdown
-          </a>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="#">Something else here</a>
-          </div>
-        </li>
       </ul>
       <form class="form-inline my-2 my-lg-0">
         <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
@@ -219,16 +208,21 @@ <h5 class="card-title">Marvels Spider-Man Game of the Year Edition</h5>
     </div>
 
     <div class="table-container col-12">
-      <table class="info-table col-6 mx-auto" style="margin-bottom: 2em;">
+      <div class="info" style="text-align: center;">
+        <hr><h3 style="color: white;">Game Info</h3>
+      </div>
+      <table class="info-table col-6 mx-auto">
         <tr>
-          <th>Game</th>
-          <th>Quantity</th>
+          <th>Games</th>
+          <th>Rating</th>
+          <th>*Metacritic Score</th>
           <th>Price</th>
         </tr>
-        <script></script>
-        <tr>
-          <td>Total: </td>
-        </tr>
+        <script>
+          for(var x=0; x<gameList.length; x++) {
+            document.write('<tr><td>'+gameList[x][0]+'</td><td>'+gameList[x][1]+'</td><td>'+gameList[x][2]+'</td><td>'+gameList[x][3]+'</td></tr>')
+          }
+        </script>
       </table>
     </div>
   

From 42e2d875e108554c76989805952ee6a098ac809c Mon Sep 17 00:00:00 2001
From: nick-devos <nickdevos123@yahoo.com>
Date: Fri, 10 Jul 2020 14:03:51 -0400
Subject: [PATCH 8/9] progress

---
 README.md              | 11 ++++---
 checkout.html          |  6 ++--
 css/style.css          | 14 ++++++++-
 index.html             |  3 --
 js/footer-functions.js | 68 +++++++++++++++++++++---------------------
 js/utils.js            | 11 ++++++-
 products.html          |  5 +---
 7 files changed, 67 insertions(+), 51 deletions(-)

diff --git a/README.md b/README.md
index 3288bba..bb9d198 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # AD - SBA - HTML/CSS/JavaScript
 
-
+Please use this link to access my website: 
 
 ### Description
 * This 3-page website was designed to fulfill the requirements of the Per Scholas HTML, CSS, & Javascript SBA. 
@@ -19,11 +19,14 @@
 #### Product Selection Page
 * Bootstrap cards used for each product
 * Each card contains an image, button for adding to cart, and price
+* HTML table at bottom of page uses iterates through an array with JS to populate table
+* Short animations on buttons on hover
 
 ### Page 3
 #### Checkout Page
 * Second form area for detailed check-out
 * Multiple input areas for things like names, address, and payment options
+* Payment type uses a dropdown menu as required
 
 
 
@@ -37,12 +40,12 @@
 * HTML
   - [x] Have at least 3 pages, keep the grid system consistent as much as possible
   - [x] Use at least 10 different HTML tags
-  - [ ] Use HTML tables
+  - [x] Use HTML tables
   - [x] Implement at least two uses for forms
   - [x] Dropped Down Menu 
   - [x] Use web fonts
   - [x] Use different types of content in the form of text, images, videos, and GIFs
-  - [ ] Use regex validation
+  - [x] Use regex validation
 
 * CSS
   - [x] Inline, internal, and external styling
@@ -51,7 +54,7 @@
   - [x] Use colors that complement each other
   - [ ] Use Flexbox (Optional)
   - [ ] Use SASS/SCSS (Optional)
-  - [ ] Use animations (Optional)
+  - [x] Use animations (Optional)
 
 * Javascript
   - [x] External scripts
diff --git a/checkout.html b/checkout.html
index f7fd0fa..b164944 100644
--- a/checkout.html
+++ b/checkout.html
@@ -10,6 +10,7 @@
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <link href="./css/style.css" rel="stylesheet">
+  <script type="text/javascript" src="./js/utils.js"></script>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
@@ -39,9 +40,6 @@
           <a class="nav-link" href="checkout.html">Checkout</a>
         </li>
       </ul>
-      <form class="form-inline my-2 my-lg-0">
-        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
-      </form>
     </div>
   </nav>
   <!----------------- END NAV ----------------->
@@ -71,7 +69,7 @@ <h4 class="mb-3">Billing address</h4>
 
         <div class="mb-3">
           <label for="email">Email</label>
-          <input type="email" class="form-control" id="email" placeholder="you@example.com" required>
+          <input type="email" class="form-control" id="email" onblur="validateEmail()" placeholder="you@example.com" required>
           <div class="invalid-feedback">
             Please enter a valid email address for shipping updates.
           </div>
diff --git a/css/style.css b/css/style.css
index 0aea6c2..f50da0f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -85,7 +85,7 @@ html {
     background-color: rgba(0,0,0,.4)!important;
   }
 
-  hr {
+  .hr-white {
     border-color: white!important;
     padding: 0;
     margin: 0;
@@ -123,3 +123,15 @@ th {
     bottom: 0;
     background-color: rgba(0,0,0,.5);
 }
+
+.btn:hover {
+  animation-name: 'grow';
+  animation-timing-function: linear;
+  animation-duration: 100ms;
+}
+
+@keyframes grow {
+  50% {
+    transform: scale(1.1);
+  }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 67c9d5d..c09eafc 100644
--- a/index.html
+++ b/index.html
@@ -54,9 +54,6 @@
           <a class="nav-link" href="checkout.html">Checkout</a>
         </li>
       </ul>
-      <form class="form-inline my-2 my-lg-0">
-        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
-      </form>
     </div>
   </nav>
   <!----------------- END NAV ----------------->
diff --git a/js/footer-functions.js b/js/footer-functions.js
index fbd7dd7..17c7a40 100644
--- a/js/footer-functions.js
+++ b/js/footer-functions.js
@@ -1,39 +1,39 @@
-var cart = [['The Last of Us: Part II', 0, 59.99], ['Ghost of Tsushima', 0, 59.99], ['Cyberpunk 2077', 0, 59.99], ['Detroit Become Human', 0, 19.99], ['Spyro Reignited Trilogy', 0, 29.99],
-            ['Need For Speed Heat', 0, 29.99], ['Call of Duty Modern Warfare', 0, 59.99], ['MLB The Show 20', 0, 39.99], ['Marvels Spider-Man Game of the Year Edition', 0, 39.99]];
+// var cart = [['The Last of Us: Part II', 0, 59.99], ['Ghost of Tsushima', 0, 59.99], ['Cyberpunk 2077', 0, 59.99], ['Detroit Become Human', 0, 19.99], ['Spyro Reignited Trilogy', 0, 29.99],
+//             ['Need For Speed Heat', 0, 29.99], ['Call of Duty Modern Warfare', 0, 59.99], ['MLB The Show 20', 0, 39.99], ['Marvels Spider-Man Game of the Year Edition', 0, 39.99]];
 
-function addToCart(evt) {
-    console.log(evt);
-    switch(evt) {
-        case 'btn-lastOfUsPart2': cart[0][1]++;
-            break;
-        case 'btn-ghostOfTsushima': cart[1][1]++;
-            break;
-        case 'btn-cyberpunk2077': cart[2][1]++;
-            break;
-        case 'btn-detroitBecomeHuman': cart[3][1]++;
-            break;
-        case 'btn-spyroReignitedTrilogy': cart[4][1]++;
-            break;
-        case 'btn-needForSpeedHeat': cart[5][1]++;
-            break;
-        case 'btn-callOfDutyModernWarfare': cart[6][1]++;
-            break;
-        case 'btn-mlbTheShow20': cart[7][1]++;
-            break;
-        case 'btn-marvelsSpiderManGoty': cart[8][1]++;
-            break;
-        default: alert('Mismatched Names');
-            break;
-    }
-}
+// function addToCart(evt) {
+//     console.log(evt);
+//     switch(evt) {
+//         case 'btn-lastOfUsPart2': cart[0][1]++;
+//             break;
+//         case 'btn-ghostOfTsushima': cart[1][1]++;
+//             break;
+//         case 'btn-cyberpunk2077': cart[2][1]++;
+//             break;
+//         case 'btn-detroitBecomeHuman': cart[3][1]++;
+//             break;
+//         case 'btn-spyroReignitedTrilogy': cart[4][1]++;
+//             break;
+//         case 'btn-needForSpeedHeat': cart[5][1]++;
+//             break;
+//         case 'btn-callOfDutyModernWarfare': cart[6][1]++;
+//             break;
+//         case 'btn-mlbTheShow20': cart[7][1]++;
+//             break;
+//         case 'btn-marvelsSpiderManGoty': cart[8][1]++;
+//             break;
+//         default: alert('Mismatched Names');
+//             break;
+//     }
+// }
 
-function getCart() {
-    for(let x = 0; x < cart.length; x++) {
-        if(cart[x][1] > 0) {
-            document.write('<tr><td>'+cart[x][0]+'</td><td>'+cart[x][1]+'</td><td>'+(cart[x][2])*(cart[x][1])+'</td></tr>');
-        }
-    }
-}
+// function getCart() {
+//     for(let x = 0; x < cart.length; x++) {
+//         if(cart[x][1] > 0) {
+//             document.write('<tr><td>'+cart[x][0]+'</td><td>'+cart[x][1]+'</td><td>'+(cart[x][2])*(cart[x][1])+'</td></tr>');
+//         }
+//     }
+// }
 
 
 
diff --git a/js/utils.js b/js/utils.js
index c54e087..35fc5ec 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -8,4 +8,13 @@ document.write('<script src="http://www.w3schools.com/lib/w3data.js"></script>')
 var gameList = [['The Last of Us: Part II', 'M - Mature', 94, 59.99], ['Ghost of Tsushima', 'M - Mature', 'tbd', 59.99], 
 ['Cyberpunk 2077', 'M - Mature', 'tbd', 59.99], ['Detroit Become Human', 'M - Mature', 78, 19.99], 
 ['Spyro Reignited Trilogy', 'E - Everyone', 82, 29.99], ['Need For Speed Heat', 'T - Teen', 72, 29.99], 
-['Call of Duty Modern Warfare', 'M - Mature', 80, 59.99], ['MLB The Show 20', 'E - Everyone', 83, 39.99], ['Marvels Spider-Man Game of the Year Edition', 'T - Teen', 87, 39.99]];
\ No newline at end of file
+['Call of Duty Modern Warfare', 'M - Mature', 80, 59.99], ['MLB The Show 20', 'E - Everyone', 83, 39.99], ['Marvels Spider-Man Game of the Year Edition', 'T - Teen', 87, 39.99]];
+
+function validateEmail() {
+    var email = document.getElementById('email');
+    let regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    if(!regex.test(email.value)) {
+        alert('Email entered is NOT valid!');
+    }
+    return;
+}
\ No newline at end of file
diff --git a/products.html b/products.html
index 7b3ffe3..8eaf603 100644
--- a/products.html
+++ b/products.html
@@ -41,9 +41,6 @@
           <a class="nav-link" href="checkout.html">Checkout</a>
         </li>
       </ul>
-      <form class="form-inline my-2 my-lg-0">
-        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
-      </form>
     </div>
   </nav>
   <!----------------- END NAV ----------------->
@@ -209,7 +206,7 @@ <h5 class="card-title">Marvels Spider-Man Game of the Year Edition</h5>
 
     <div class="table-container col-12">
       <div class="info" style="text-align: center;">
-        <hr><h3 style="color: white;">Game Info</h3>
+        <hr class="hr-white"><h3 style="color: white;">Game Info</h3>
       </div>
       <table class="info-table col-6 mx-auto">
         <tr>

From 9ed634f262c7bb929e7d9b68101726c7adba844b Mon Sep 17 00:00:00 2001
From: nick-devos <nickdevos123@yahoo.com>
Date: Fri, 10 Jul 2020 14:09:00 -0400
Subject: [PATCH 9/9] added link in README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bb9d198..7f934a6 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # AD - SBA - HTML/CSS/JavaScript
 
-Please use this link to access my website: 
+Please use this link to access my website: https://nick-devos.github.io/sba.javascript_3-page-website/
 
 ### Description
 * This 3-page website was designed to fulfill the requirements of the Per Scholas HTML, CSS, & Javascript SBA. 
