Creating Footer & Finishing the Landing Page

src/App.css

@@ -6,10 +6,10 @@
 }
 
 body {
-    background: #00171f;
     margin: 0 auto
 }
 
-.z-index {
-    z-index: 1;
+a {
+    text-decoration: none !important;
+    color: inherit
 }

src/App.js

@@ -2,8 +2,8 @@ import React from 'react'
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 
 import LandingPage from './components/pages/LandingPage'
-import SignUpPage from './components/pages/SignUpPage'
-import SignInPage from './components/pages/SignInPage'
+import LoginPage from './components/pages/LoginPage'
+import RegisterPage from './components/pages/RegisterPage'
 import ForgetPasswordPage from './components/pages/ForgetPasswordPage'
 import HomePage from './components/pages/HomePage'
 
@@ -15,12 +15,31 @@ export default function App() {
             <div>
                 <Switch>
                     <Route exact path="/" component={ LandingPage } />
-                    <Route path="/signup" component={ SignUpPage } />
-                    <Route path="/signin" component={ SignInPage } />
+                    <Route path="/login" component={ LoginPage } />
+                    <Route path="/register" component={ RegisterPage } />
                     <Route path="/forget-password" component={ ForgetPasswordPage } />
                     <Route path="/home" component={ HomePage } />
                 </Switch>
+                <Footer />
             </div>
         </Router>
     )
 }
+
+const Footer = () => {
+    return (
+        <p className="text-center" style={ FooterStyle }>Designed & coded by <a href="https://izemspot.netlify.com" target="_blank" rel="noopener noreferrer">IZEMSPOT</a></p>
+    )
+}
+
+const FooterStyle = {
+    background: "#222",
+    fontSize: ".8rem",
+    color: "#fff",
+    position: "absolute",
+    bottom: 0,
+    padding: "1rem",
+    margin: 0,
+    width: "100%",
+    opacity: ".5"
+}

src/assets/css/landing-page.css

@@ -0,0 +1,54 @@
+h1, p {
+    color: #f1f1f1
+}
+
+h1 {
+    padding-top: 10rem;
+    font-size: 5rem;
+    font-family: 'Fascinate', cursive;
+    text-transform: uppercase
+}
+
+p {
+    font-size: 2.5rem;
+    text-Transform: capitalize
+}
+
+#log_btn,
+#reg_btn {
+    margin-top: 5rem;
+    margin-right: 1rem;
+    padding: .6rem;
+    width: 10rem;
+    background: #222;
+    border: none;
+    color: #fff;
+    font-size: 1.2rem;
+    transition: all .5s;
+    cursor: pointer;
+    text-transform: capitalize
+}
+
+#reg_btn span {
+    display: inline-block;
+    position: relative;
+    transition: 0.5s;
+}
+
+#reg_btn span:after {
+    content: '\00bb';
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: -20px;
+    transition: 0.5s;
+}
+
+#reg_btn:hover span {
+  padding-right: 25px;
+}
+
+#reg_btn:hover span:after {
+  opacity: 1;
+  right: 0;
+}

src/components/pages/LandingPage.js

@@ -1,13 +1,26 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 
+import '../../assets/css/landing-page.css'
 import BackgroundImage from '../../assets/images/bg.png'
 
 export default function LandingPage() {
     return (
         <header style={ HeaderStyle }>
-            <h1 className="text-center text-uppercase" style={ TitleStyle }>
-                Welcome
-            </h1>
+            <h1 className="text-center">login / register page</h1>
+            <p className="text-center">join us now and don't waste time</p>
+            <div className="buttons text-center">
+                <Link to="/login">
+                    <button href="https://google.com" id="log_btn">
+                        login
+                    </button>
+                </Link>
+                <Link to="/register">
+                    <button href="https://google.com" id="reg_btn">
+                        <span>register </span>
+                    </button>
+                </Link>
+            </div>
         </header>
     )
 }
@@ -20,8 +33,3 @@ const HeaderStyle = {
     backgroundRepeat: "no-repeat",
     backgroundSize: "cover"
 }
-
-const TitleStyle = {
-    paddingTop: "10rem",
-    color: "#f1f1f1"
-}

src/components/pages/LoginPage.js

@@ -3,7 +3,7 @@ import React from 'react'
 export default function SignInPage() {
     return (
         <div>
-            <h1>Sign In Page</h1>
+            <h1>Login Page</h1>
         </div>
     )
 }

src/components/pages/RegisterPage.js

@@ -3,7 +3,7 @@ import React from 'react'
 export default function SignUpPage() {
     return (
         <div>
-            <h1>Sign Up Page</h1>
+            <h1>Register Page</h1>
         </div>
     )
 }