From 2a783bf9f3258301480ee8e1c7e7681faa926d3d Mon Sep 17 00:00:00 2001
From: miketitan58 <michs800@yahoo.com>
Date: Mon, 21 Mar 2022 14:38:39 -0500
Subject: [PATCH] updated product page

---
 src/Pages/ProductPage/ProductPage.css | 66 +++++++++++++--------------
 src/Pages/ProductPage/ProductPage.js  | 18 ++++++--
 2 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css
index 57a9431..fe38f87 100644
--- a/src/Pages/ProductPage/ProductPage.css
+++ b/src/Pages/ProductPage/ProductPage.css
@@ -1,4 +1,4 @@
-.App {
+.App1 {
     min-height: 100vh;
     background-color: rgb(211, 254, 255);
     font-family: 'Times New Roman', Times, serif;
@@ -6,40 +6,40 @@
     padding: 0;
     text-align: center;
   }
-
-  header {
-    text-align: left;
-    background-color:aqua;
-    color: black;
-    font-size:x-large;
-    margin: none;
-    border-radius: none;
-    padding: 10%;
+  .panel1 {
+    font-family: 'Times New Roman', Times, serif;
+    margin: 0;
+    padding: 0;
+    text-align: center;
   }
 
-  button {
-    color: black;
-    padding: 20px 60px;
-    text-decoration: none;
-    font-size: large;
-    border: none;
-    margin: 5%;
-    background-color: rgb(183,255,207);
-  }
+.header1{
+    min-height: 10vh;
+    background-color: aqua;
+    font-family: 'Times New Roman', Times, serif;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
 
-  button:hover {
-    background-color: rgb(0,141,141);
-    color: white;
-  }
+.header2{
+    position: fixed;
+    top: 110px;
+    left: 750px;
+    height: 500px;
+    width: 500px;
+    background-color: rgb(189, 207, 209);
+    font-family: 'Times New Roman', Times, serif;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+}
 
-  h2 {
-    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    text-align: center;
-    background-color: rgb(184, 227, 240);
-    color: black;
-    font-size:large;
-    margin: none;
-    border-radius: none;
-    padding: 1%;
-  }
+button{
+    position: fixed;
+    left: 550px;
+    top: 550px;
+}
+
+  
 
diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js
index acb5048..c9909fc 100644
--- a/src/Pages/ProductPage/ProductPage.js
+++ b/src/Pages/ProductPage/ProductPage.js
@@ -3,9 +3,21 @@ import "./ProductPage.css"
 function Product(){
     return(
             <div>
-                <div className = "App">
-                    <header><b>PRODUCT NAME HERE</b></header>
-                    <button>Add to Cart</button>
+                <div className = "App1">
+                    <div className = "header1">
+                        <b>WorldWide Frames</b> - <i>See A Better World</i>
+                    </div>
+                    {/* create an overall panel, with header 2, the image, and the button inside of it */}
+                    <div className = "panel1">
+                        <div className = "header2">    
+                            <header2>
+                                <p>Name: </p>
+                                <p>Manufacturer: </p>
+                                <p> Cost: </p>
+                            </header2>
+                        </div>
+                        <button>Add to Cart</button>
+                    </div>
                 </div>
             </div>
     );