Adding Home page
This commit is contained in:
parent
5c753e4ab0
commit
a79b0d730a
36
src/App.css
36
src/App.css
@ -1,5 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
/*** General ***/
|
/*** General ***/
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -16,6 +14,20 @@ body {
|
|||||||
margin: 5rem auto
|
margin: 5rem auto
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.primary-button {
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
/*** Landing Page ***/
|
/*** Landing Page ***/
|
||||||
.main-title,
|
.main-title,
|
||||||
.main-para {
|
.main-para {
|
||||||
@ -34,21 +46,6 @@ body {
|
|||||||
text-Transform: capitalize
|
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 {
|
#reg_btn span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -138,4 +135,9 @@ form span {
|
|||||||
|
|
||||||
#reset_pass_lbl {
|
#reset_pass_lbl {
|
||||||
float: left
|
float: left
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** Home Page ***/
|
||||||
|
.home-page-title {
|
||||||
|
color: #222
|
||||||
}
|
}
|
@ -1,9 +1,13 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="text-center">
|
||||||
<h1>Home Page</h1>
|
<h1 className="main-title home-page-title">welcome to our app</h1>
|
||||||
|
<Link to="/">
|
||||||
|
<button className="primary-button">Log out</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -11,14 +11,10 @@ export default function LandingPage() {
|
|||||||
<p className="main-para text-center">join us now and don't waste time</p>
|
<p className="main-para text-center">join us now and don't waste time</p>
|
||||||
<div className="buttons text-center">
|
<div className="buttons text-center">
|
||||||
<Link to="/login">
|
<Link to="/login">
|
||||||
<button href="https://google.com" id="log_btn">
|
<button className="primary-button">log in</button>
|
||||||
login
|
|
||||||
</button>
|
|
||||||
</Link>
|
</Link>
|
||||||
<Link to="/register">
|
<Link to="/register">
|
||||||
<button href="https://google.com" id="reg_btn">
|
<button className="primary-button" id="reg_btn"><span>register </span></button>
|
||||||
<span>register </span>
|
|
||||||
</button>
|
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
Loading…
Reference in New Issue
Block a user