Basictemplatebranch

src/App.js

@@ -17,8 +17,7 @@ function App() {
           <Link to="/">Home</Link>
           &nbsp;
           <Link to="/registration">Register</Link>
-        </nav>
-
+          </nav>
         <Switch>
           <Route path="/registration">
             <Registration />

src/Pages/HomePage/HomePage.css

@@ -6,13 +6,14 @@
     padding: 0;
     text-align: center;
   }
-  .Homepage {
-    text-align: center;
-  }
 
   header {
     text-align: left;
-    background-color:aqua;
+    background-image: url(../../images/oceanimage.jpg);
+    background-blend-mode:lighten;
+    background-position: center;
+    background-size:cover;
+    opacity:1;
     color: black;
     font-size:x-large;
     margin: none;
@@ -48,17 +49,35 @@
     font-size: large;
     border: none;
     margin: 5%;
-    background-color: rgb(183,255,207);
+    background-color: rgb(102, 255, 0);
+  }
+
+  .hotbar-button {
+    color: black;
+    padding: 5px 5px;
+    text-decoration: none;
+    font-size: large;
+    border: none;
+    margin: 1%;
+  }
+  .hotbar-button:hover {
+    cursor:pointer;
   }
 
   button:hover {
     background-color: rgb(0,141,141);
     color: white;
   }
-  
+
   .Topright {
     position: absolute;
-    top: 8px;
+    top: 30px;
     right: 16px;
-    font-size:18px;
+    font-size:18px
+  }
+
+  .Middleright {
+    position: absolute;
+    top:30px;
+    right:80px;
   }

src/Pages/HomePage/HomePage.js

@@ -1,4 +1,6 @@
 import "./HomePage.css"
+import image  from "../../images/cartimage.png"
+import image2 from "../../images/searchbar.png"
 function Home() {
     return (
       <div>
@@ -14,7 +16,18 @@ function Home() {
           <button>frame set 5</button>
         </div>
         <div className="Topright">
-          <button style={{backgroundColor: "lightblue"}}>Shopping Cart</button>
+          <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>