Basictemplatebranch

src/App.js

@@ -2,34 +2,36 @@ import React from "react";
 import Registration from "./Pages/RegistrationPage/RegistrationPage";
 import Home from "./Pages/HomePage/HomePage"
 import Product from "./Pages/ProductPage/ProductPage"
-import SignIn from "./Pages/SignInPage/SignInPage"
 import "./GeneralStyles.css";
+import home from "../src/images/homebutton.png"
+
 import {
   BrowserRouter as Router,
   Switch,
   Route,
   Link
 } from "react-router-dom";
-
 function App() {
   const basename = process.env.REACT_APP_BASENAME || null;
   return ( 
     <Router basename={basename}>
-      <div>
+      <div style = {{background: "lightgrey"}}>
         <nav>
-          <Link to="/">Home</Link>
           &nbsp;
-          <Link to="/registration">Register</Link>
+          <Link to="/">
+            <img src = {home} alt = ""
+            width="50"
+            height="50" />
+          </Link>
           &nbsp;
-          <Link to="/product">Product</Link>
           &nbsp;
-          <Link to="/signin">Sign In</Link>
-        </nav>
+          <Link to="/registration">Registration</Link>
+          &nbsp;
+          &nbsp;
+          <Link to="/product">Product</Link>
+          </nav>
 
         <Switch>
-          <Route path="/signin">
-            <SignIn />
-          </Route>
           <Route path="/registration">
             <Registration />
           </Route>
@@ -45,4 +47,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/Pages/HomePage/HomePage.css

@@ -52,8 +52,9 @@ h3 {
 }
 
 .Frames button {
-    height: 30px;
-    width: 20%;
+    height: 100;
+    width: 100;
+
 }
 
 .hotbar-button {
@@ -71,13 +72,67 @@ h3 {
 
 .Topright {
     position: absolute;
-    top: 30px;
+    top: -3px;
     right: 16px;
     font-size: 18px
 }
 
 .Middleright {
     position: absolute;
-    top: 30px;
-    right: 80px;
-}
+    top: -3px;
+    right: 100px;
+}
+
+/* Add a black background color to the top navigation bar */
+.topnav {
+    overflow: hidden;
+    background-color: lightgrey;
+  }
+
+  /* Style the links inside the navigation bar */
+  .topnav a {
+    float: left;
+    display: block;
+    color: black;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+  }
+
+  /* Change the color of links on hover */
+  .topnav a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+
+  /* Style the "active" element to highlight the current page */
+  .topnav a.active {
+    background-color: #2196F3;
+    color: white;
+  }
+
+  /* Style the search box inside the navigation bar */
+  .topnav input[type=text] {
+    float: right;
+    padding: 6px;
+    border: none;
+    margin-top: 8px;
+    margin-right: 16px;
+    font-size: 17px;
+  }
+
+  /* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
+  @media screen and (max-width: 600px) {
+    .topnav a, .topnav input[type=text] {
+      float: none;
+      display: block;
+      text-align: left;
+      width: 100%;
+      margin: 0;
+      padding: 14px;
+    }
+    .topnav input[type=text] {
+      border: 1px solid #ccc;
+    }
+  }

src/Pages/HomePage/HomePage.js

@@ -1,44 +1,49 @@
 import "./HomePage.css"
-import image from "../../images/cartimage.png"
-import image2 from "../../images/searchbar.png"
+import React from "react";
+
+import cartImage from "../../images/cartimage.png"
+
 function Home() {
 
   return (
     <div>
+      <div className="Topright">
+        <div className="hotbar-button">
+            <img src = { cartImage } alt=""
+            width="50"
+            height="50"
+            />
+        </div>
+      </div>
+      <div className="Middleright">
+        <div className="topnav">
+          <input type="text" placeholder="Search..."></input>
+        </div>
+      </div>
+
       <div className="App">
         <header><b>WorldWide Frames</b> - <i>See A Better World</i></header>
         <h2><i>Items on Sale</i></h2>
         <div className="Frames">
           <div className="DoD">
             <h3>Deals of the Day</h3>
-            <button>frame set 1</button>
+            <button onclick = "Search">frame set 1</button>
             <button>frame set 2</button>
             <button>frame set 3</button>
           </div>
           <div className="Sunglasses">
             <h3>Sunglasses</h3>
             <button>frame set 4</button>
             <button>frame set 5</button>
+            <button>frame set 6</button>
           </div>
         </div>
       </div>
-      <div className="Topright">
-        <div className="hotbar-button">
-          <img src={image} alt=""
-            width="55"
-            height="50" />
-        </div>
-      </div>
-      <div className="Middleright">
-        <div className="hotbar-button">
-          <img src={image2} alt=""
-            width="55"
-            height="50" />
-        </div>
-      </div>
-    </div>
 
+    </div>
   );
+
 }
 
+
 export default Home;

src/index.js

@@ -15,3 +15,16 @@ ReactDOM.render(
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
+
+// getting all the images into one constant
+const IMAGES = {
+  cartImage: require('./images/cartimage.png').default,
+  earthImage: require('./images/earth.png').default,
+  earthRotate: require('./images/earthrotating.gif').default,
+  oceanImage: require('./images/oceanimage.jpg').default,
+  registerIcon: require('./images/registericon.png').default,
+  searchBar: require('./images/searchbar.png').default,
+  testGlasses: require('./images/testglasses.jpg').default,
+  homeButton: require('./images/homebutton.png').default,
+}
+export default IMAGES;