Create a landing page

src/App.css

@@ -1 +1,11 @@
+ html {
+  width:100%;
+  height:100%;
+}
+body{
+  background-image: url('./images/image.jpg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
 
+}

src/App.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
+import Landingpage from './container/landingpage'
 import './App.css';
-import Navbar from './component/navbar'
 
 class App extends Component {
   render() {
     return (
-      <Navbar/>
+      <Landingpage/>
     );
   }
 }

src/component/footer.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+class Footer extends Component {
+    state = {  }
+    render() { 
+        return ( 
+            <div class="footer-copyright text-center">
+            <span>Keno 2018</span>
+          </div>
+         );
+    }
+}
+
+export default Footer;

src/component/login.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+class LoginForm extends Component {
+    state = {  }
+    render() { 
+        return ( 
+            <div>
+                <form >
+                    <div class="form-group">
+                        <input type="text" class="form-control border-0" placeholder="Enter Username"/>
+                    </div>
+                    <div class="form-group">
+                        <input type="password" class="form-control border-0" id="exampleInputPassword1" placeholder="Password"/>
+                    </div>
+                    <center><button type="submit" class="btn btn-success">LOGIN</button></center>
+                </form>
+
+            </div>
+         );
+    }
+}
+
+export default LoginForm;

src/component/navbar.js

@@ -3,28 +3,12 @@ class Nabar extends Component {
     state = {  }
     render() { 
         return ( 
-            <nav className="navbar navbar-expand-lg navbar-light bg-light">
-            <a className="navbar-brand" href="#"><h1>Keno</h1></a>
-            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-              <span className="navbar-toggler-icon"></span>
-            </button>
-            <div className="collapse navbar-collapse" id="navbarText">
-              <ul className="navbar-nav mr-auto">
-                {/* <li className="nav-item active">
-                  <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
-                </li>
-                <li className="nav-item">
-                  <a className="nav-link" href="#">Features</a>
-                </li>
-                <li className="nav-item">
-                  <a className="nav-link" href="#">Pricing</a>
-                </li> */}
-              </ul>
-              <span className="navbar-text font">
-                WHAT DO YOU WANT TO WRITE ABOUT TODAY...?
+            <div className="shadow-lg p-3 mb-5 rounded">
+            <a className=" heading color" href="#">Keno</a><br />
+              <span className="font">
+              {/* <i>OUR PRIVATE ONLINE FREE DIARY</i> */}
               </span>
-            </div>
-          </nav>
+          </div>
          );
     }
 }

src/component/register.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+class RegistrationForm extends Component {
+    state = {  }
+    render() { 
+        return ( 
+            <div>
+                <form >
+                   <div class="form-group">
+                        <input type="text" className="form-control border-0" placeholder="Enter Firstname"/>
+                    </div>
+                    <div class="form-group">
+                        <input type="text" class="form-control border-0" placeholder="Enter Lastname"/>
+                    </div>
+                    <div class="form-group">
+                        <input type="text" class="form-control border-0" placeholder="Enter Username"/>
+                    </div>
+                    <div class="form-group">
+                        <input type="email" class="form-control border-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"/>
+                    </div>
+                    <div class="form-group">
+                        <input type="password" class="form-control border-0" id="exampleInputPassword1" placeholder="Password"/>
+                    </div>
+                    <div class="form-group">
+                        <input type="password" class="form-control border-0" id="exampleInputPassword1" placeholder="Enter Password Again"/>
+                    </div>
+                    <center><button type="submit" class="btn btn-success">CREATE ACCOUNT</button></center>
+                </form>
+
+            </div>
+         );
+    }
+}
+
+export default RegistrationForm;

src/container/landingpage.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import Navbar from '../component/navbar'
+import Footer from '../component/footer'
+import RegistrationForm from '../component/login'
+import LoginForm from '../component/register'
+class Landingpage extends Component {
+    state = {  }
+    render() { 
+        return ( 
+            <div>
+                <Navbar />
+                <div className="container">
+
+                    <div className="row color">
+                    <div className="col-lg-3"></div>
+                    <div className="col-lg-6 welcome">
+                        <center> WELCOME TO OUR ONLINE FREE DIARY<br /> 
+                        KEEP ALL YOUR DAILY MEMORIES IN ONE PLACE </center>
+                        </div>
+                        <div className="col-lg-3"></div>
+                    </div><br />
+                    <div class ="row2">TO GET STARTED, REGISTER WITH US OR LOGIN</div>
+                    <div className="landing-row">
+                    <div class="row">
+                        <div class="col-lg-4">
+                        </div>
+                        <div class="col-lg-4">
+                            <ul class="nav nav-tabs" id="myTab" role="tablist">
+                                <li class="nav-item ">
+                                    <a class="nav-link link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">REGISTER</a>
+                                </li>
+                                <li class="nav-item ">
+                                    <a class="nav-link link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">LOGIN</a>
+                                </li>
+                            </ul>
+                                <div class="tab-content" id="myTabContent">
+                                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+                                <LoginForm />
+                                </div>
+                                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
+                                <RegistrationForm />
+                                </div>
+                                </div>
+                        </div>
+                    </div></div>
+                    <div className="fixed-bottom link">
+                <Footer />
+                </div>
+                </div>
+            </div>
+         );
+    }
+}
+
+export default Landingpage;

src/index.css

@@ -1,3 +1,38 @@
 .font{
   font-family:"Comic Sans MS"
 }
+.heading{
+  font-size:40px;
+  padding-left:5px;
+  font-weight:bold;
+
+}
+.color{
+  color:white;
+  font-weight: bold;
+}
+.welcome{
+  font-size:20px;
+  font-weight:bold!important;
+}
+.color1{
+  color:white!important;
+}
+.row2{
+text-align:center!important;
+margin-bottom:15px;
+}
+.borders{
+  border:2px solid red!important;
+}
+.link{
+  color:white!important;
+}
+.active{
+  color:black!important;
+  font-weight: bold;
+}
+.landing-row{
+  height:60vh;
+}
+