Merge pull request #8 from TartejBrothers/Changes

Fixed Image Positioning

src/components/home.jsx

@@ -3,6 +3,9 @@ import "./styles/home.css";
 import eye from "./images/eye.png";
 import homeleft from "./images/homeleft.png";
 import homeright from "./images/homeright.png";
+import vector1 from "./images/vectors/vector1.png";
+import vector2 from "./images/vectors/vector2.png";
+import vector3 from "./images/vectors/vector3.png";
 export default function homepage() {
   const changeType = () => {
     var passwordfield = document.getElementById("password");
@@ -57,13 +60,22 @@ export default function homepage() {
           </div>
         </form>
       </div>
-      <h2>Sit back and let us do all the heavy work</h2>
-      <div className="imgleft">
+      <h2 className="bottomtext">Sit back and let us do all the heavy work</h2>
+      <div className="imgleft" id="vectorimg">
         <img src={homeleft} alt="home" />
       </div>
-      <div className="imgright">
+      <div className="imgright" id="vectorimg">
         <img src={homeright} alt="home" />
       </div>
+      <div className="vector1" id="vectorimg">
+        <img src={vector1} alt="vector" />
+      </div>
+      <div className="vector2" id="vectorimg">
+        <img src={vector2} alt="vector" />
+      </div>
+      <div className="vector3" id="vectorimg">
+        <img src={vector3} alt="vector" />
+      </div>
     </div>
   );
 }

src/components/styles/home.css

@@ -2,6 +2,8 @@
 * {
   font-family: "Poppins", sans-serif;
 }
+html {
+}
 .homebody {
   background-color: #222831;
   padding: 0px;
@@ -28,6 +30,7 @@
   font-size: 24px;
 }
 .homeform form {
+  z-index: 10;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -112,6 +115,28 @@ form input::placeholder {
   font-size: 20px;
   margin-bottom: 80px;
 }
+.bottomtext {
+  font-size: 24px;
+  padding: 0px;
+  margin-bottom: 50px;
+  text-align: center;
+}
+#vectorimg {
+  position: absolute;
+  z-index: 0;
+}
+.imgright {
+  right: 50px;
+  bottom: 0px;
+}
+.imgleft {
+  left: 50px;
+  bottom: 0px;
+}
+.imgright img,
+.imgleft img {
+  max-height: 25vw;
+}
 @media screen and (max-width: 1000px) {
   .homeheader h1 {
     font-size: 30px;
@@ -133,4 +158,23 @@ form input::placeholder {
   .loginbutton {
     font-size: 18px;
   }
+  .bottomtext {
+    font-size: 20px;
+  }
+  .imgright {
+    display: none;
+  }
+  #vectorimg {
+    position: static;
+  }
+  .imgleft {
+    width: 100%;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    position: static;
+  }
+  .imgleft img {
+    max-height: 80vw;
+  }
 }