log reg logo design

src/components/HomePage.js

@@ -11,6 +11,7 @@ import {
   Carousel,
 
 } from "react-bootstrap";
+import styled from 'styled-components';
 
 const ITag = styled.i`
   

src/components/LogInContainer.js

@@ -11,10 +11,17 @@ class LogInContainer extends Component {
         <BrowserRouter basename="user">
         <div className="Apper">
           <div className="Apper__Aside">
-            <div className="Apper__Aside__text">
+            <div className="Apper_logo">
-              <p>locaft</p>
+            <img src="/logo.jpg"></img>
-              
             </div>
+            <div className="Apper__Aside__text">
+              <h1 className="Apper_heading">locaft</h1>
+              <p className="Apper_quote">Sit back, let us move you</p>
+
+            </div>
+             <div className="Apper_Aside_image">
+                <img src="/skyscraper.png"></img>
+              </div>
           </div>
           <div className="Apper__Form">
               <div className="PageSwitcher">

src/components/Login.js

@@ -52,7 +52,7 @@ const Login = () => {
               </div>
 
               <div className="FormField">
-                  <button className="FormField__Button mr-20" >Sign In</button> <Link exact to="/sign-up" className="FormField__Link">Not a member?</Link>
+                  <button className="FormField__Button mr-20" >Sign In</button> <Link exact to="/register" className="FormField__Link">Not a member?</Link>
               </div>
             </form>
             

src/components/Register.js

@@ -92,7 +92,7 @@ import ErrorNotice from "./ErrorNotice";
         </div>
 
         <div className="FormField">
-          <button className="FormField__Button mr-20" type="submit">Sign Up</button> <Link to="/sign-in" className="FormField__Link">already a member?</Link>
+          <button className="FormField__Button mr-20" type="submit">Sign Up</button> <Link to="/login" className="FormField__Link">already a member?</Link>
         </div>
       </form>
     </div>

src/login_reg.css

@@ -6,10 +6,10 @@
 
 .Apper__Aside {
   width: 50%;
-  background-color: #66DAC7;
+  background-color: #66bfbf;
   display:flex;
-  align-items: center;
+  flex-direction: column;
-  justify-self: center;
+  justify-content: flex-end;
   
 
 }
@@ -26,13 +26,9 @@
   justify-content: flex-end;
   margin-bottom: 10%;
 }
-.Apper__Aside__text{
+.Apper_heading{
-  display: flex;
+  position: relative;
-  justify-content: center;
+  text-align: center;
-  align-items: center;
-}
-.Apper__Aside__text p{
-
   font-family: "Ubuntu";
   font-size: 5rem;
   font-weight: bold;
@@ -40,12 +36,30 @@
   color: white;
   text-decoration: none;
   text-transform: lowercase;
-  left: 150%;
+}
-  margin-right: -50%;
+.Apper_logo img{
-  transform: translate(-50%, -50%);
+  width:100px;
-  margin: 0;
+  display:flex;
+  align-content: flex-start;
+  justify-content: flex-start;
+  margin-bottom: 120px;
+  
+}
+
+.Apper__Aside__text {
+  text-align: center;
+  margin-bottom: 40px; 
+  
+}
+.Apper_quote{
+  color:white;
+  font-size: 1.25em;
+  font-style:italic;
+}
+.Apper__Aside_image{
+  margin-top: 600px;
+  max-width: 100%;
   
-  flex-grow: 1;
   
 }