From af4bc6a70baa1de929cc85337c072a066b40e35b Mon Sep 17 00:00:00 2001
From: miketitan58 <michs800@yahoo.com>
Date: Tue, 22 Mar 2022 11:06:17 -0500
Subject: [PATCH 1/5] fixed the button issue

all buttons are now centered properly
---
 src/Pages/ProductPage/ProductPage.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css
index f15f721..37b17b3 100644
--- a/src/Pages/ProductPage/ProductPage.css
+++ b/src/Pages/ProductPage/ProductPage.css
@@ -38,7 +38,7 @@
     text-align: left;
 }
 
-button {
+.button {
     position: relative;
     left: 25%;
     width: 15%;

From d9c00c7aacae27673f3c141c62a65dc2537311e4 Mon Sep 17 00:00:00 2001
From: miketitan58 <michs800@yahoo.com>
Date: Tue, 22 Mar 2022 11:40:48 -0500
Subject: [PATCH 2/5] working on printing variables

doesnt work but the framework is there
---
 src/Pages/ProductPage/ProductPage.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js
index c8bc0a6..9321158 100644
--- a/src/Pages/ProductPage/ProductPage.js
+++ b/src/Pages/ProductPage/ProductPage.js
@@ -1,8 +1,19 @@
 import "./ProductPage.css"
 
 function Product(){
+
+    /* temo variables */
+    let test_name = "glasses01";
+    let test_manufacturer = "Stark Industries";
+    let test_cost = 99.99;
+
     return(
             <div>
+                <script>
+                    let name = test_name;
+                    let manufacturer = test_manufacturer;
+                    let cost = test_cost;
+                </script>
                 <div className = "App1">
                     <div className = "header1">
                         <b>WorldWide Frames</b> - <i>See A Better World</i>
@@ -10,9 +21,9 @@ function Product(){
                     {/* create an overall panel, with header 2, the image, and the button inside of it */}
                     <div className = "panel1">
                         <div className = "header2">    
-                                <p>Name: </p>
-                                <p>Manufacturer: </p>
-                                <p>Cost: </p>
+                                <p>Name: <var>name</var></p>
+                                <p>Manufacturer: <var>manufacturer</var></p>
+                                <p>Cost: <var>cost</var> </p>
                         </div>
                         <button>Add to Cart</button>
                     </div>

From 13604f84ef7796d14b2ea4a103bf0bf1c6bc9060 Mon Sep 17 00:00:00 2001
From: miketitan58 <michs800@yahoo.com>
Date: Wed, 23 Mar 2022 11:33:33 -0500
Subject: [PATCH 3/5] Revert "fixed the button issue"

This reverts commit af4bc6a70baa1de929cc85337c072a066b40e35b.
---
 src/Pages/ProductPage/ProductPage.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css
index 37b17b3..f15f721 100644
--- a/src/Pages/ProductPage/ProductPage.css
+++ b/src/Pages/ProductPage/ProductPage.css
@@ -38,7 +38,7 @@
     text-align: left;
 }
 
-.button {
+button {
     position: relative;
     left: 25%;
     width: 15%;

From 9c5f02600890836cd02c6095a5e4e6b022041969 Mon Sep 17 00:00:00 2001
From: miketitan58 <michs800@yahoo.com>
Date: Wed, 23 Mar 2022 11:33:37 -0500
Subject: [PATCH 4/5] Revert "working on printing variables"

This reverts commit d9c00c7aacae27673f3c141c62a65dc2537311e4.
---
 src/Pages/ProductPage/ProductPage.js | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js
index 9321158..c8bc0a6 100644
--- a/src/Pages/ProductPage/ProductPage.js
+++ b/src/Pages/ProductPage/ProductPage.js
@@ -1,19 +1,8 @@
 import "./ProductPage.css"
 
 function Product(){
-
-    /* temo variables */
-    let test_name = "glasses01";
-    let test_manufacturer = "Stark Industries";
-    let test_cost = 99.99;
-
     return(
             <div>
-                <script>
-                    let name = test_name;
-                    let manufacturer = test_manufacturer;
-                    let cost = test_cost;
-                </script>
                 <div className = "App1">
                     <div className = "header1">
                         <b>WorldWide Frames</b> - <i>See A Better World</i>
@@ -21,9 +10,9 @@ function Product(){
                     {/* create an overall panel, with header 2, the image, and the button inside of it */}
                     <div className = "panel1">
                         <div className = "header2">    
-                                <p>Name: <var>name</var></p>
-                                <p>Manufacturer: <var>manufacturer</var></p>
-                                <p>Cost: <var>cost</var> </p>
+                                <p>Name: </p>
+                                <p>Manufacturer: </p>
+                                <p>Cost: </p>
                         </div>
                         <button>Add to Cart</button>
                     </div>

From dc4661b8064d1e481bce3a85dc7adbad76b0affc Mon Sep 17 00:00:00 2001
From: miketitan58 <michs800@yahoo.com>
Date: Wed, 23 Mar 2022 12:33:53 -0500
Subject: [PATCH 5/5] Product Page

- added image
- fixed header and button location issues
---
 src/Pages/ProductPage/ProductPage.css |  9 +++++++++
 src/Pages/ProductPage/ProductPage.js  | 16 +++++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css
index 40599c3..7de889d 100644
--- a/src/Pages/ProductPage/ProductPage.css
+++ b/src/Pages/ProductPage/ProductPage.css
@@ -7,6 +7,13 @@
   text-align: center;
 }
 
+.image1{
+  position: relative;
+  right: 450px;
+  top: 100px;
+  border-radius: 100px;
+}
+
 .panel1 {
   height: 500px;
   font-family: 'Times New Roman', Times, serif;
@@ -29,6 +36,7 @@
 */
 .header2 {
   position: relative;
+  top: -350px;
   left: 55%;
   height: 500px;
   width: 40%;
@@ -41,6 +49,7 @@
 
 .panel1 button {
   position: relative;
+  top: -350px;
   left: 25%;
   width: 15%;
 }
\ No newline at end of file
diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js
index 55b28b6..685dc71 100644
--- a/src/Pages/ProductPage/ProductPage.js
+++ b/src/Pages/ProductPage/ProductPage.js
@@ -1,6 +1,10 @@
 import "./ProductPage.css"
+import image from "../../images/testglasses.jpg";
 
 function Product() {
+    let name = "Test Glasses";
+    let manufacturer = "Stark Industries"
+    let cost = 99.99;
     return (
         <div>
             <div className="App1">
@@ -9,10 +13,16 @@ function Product() {
                 </div>
                 {/* create an overall panel, with header 2, the image, and the button inside of it */}
                 <div className="panel1">
+                    <div className="image1">
+                        <img src={image} 
+                            alt=""
+                            width="400"
+                            height="400" />
+                    </div>
                     <div className="header2">
-                        <p>Name: </p>
-                        <p>Manufacturer: </p>
-                        <p>Cost: </p>
+                        <p><b>Name: </b> {name}</p>
+                        <p><b>Manufacturer: </b>{manufacturer} </p>
+                        <p><b>Cost: </b>{cost}</p>
                     </div>
                     <button>Add to Cart</button>
                 </div>