Footer created; The layout of the login page set.

This commit is contained in:
FilipHalon 2020-01-13 18:16:48 +01:00
parent 9f204f4751
commit 0e92104942
4 changed files with 100 additions and 4 deletions

View File

@ -0,0 +1,9 @@
const Footer = () => {
return(
<footer>
<span>&copy; 2020 Task-O!</span>
</footer>
)
}
export default Footer;

View File

@ -0,0 +1,16 @@
import Link from 'next/link';
const LoginArea = props => {
const isDeveloperAccount = props.accountType === "developer"
return (
<Link href="/">
<span className={isDeveloperAccount ? "login-area developer-account" : "login-area company-account"}>
<span>Utwórz kontro {isDeveloperAccount ? 'programisty' : 'firmy'}</span>
{/* <span>Ikona</span> */}
</span>
</Link>
)
}
export default LoginArea

View File

@ -1,10 +1,19 @@
import "../style.css"
import Header from './components/Header'
import "../style.css";
import Header from './components/Header';
import LoginArea from './components/LoginArea';
import Footer from './components/Footer';
const Index = props => (
<div>
<div className="index">
<Header/>
<p>Hello Next.js</p>
<div className="index-content">
<h2>Rejestracja do systemu Task-O!</h2>
<span className="login-areas">
<LoginArea accountType="developer"/>
<LoginArea accountType="company"/>
</span>
</div>
<Footer />
</div>
);

View File

@ -6,8 +6,18 @@
font-family: sans-serif;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
header {
width: 100%;
position: fixed;
}
nav ul {
@ -57,3 +67,55 @@ nav ul div li a {
background-color: #5D6CED;
color: #FFF;
}
body div:first-child {
height: 100%;
}
.index-content {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.login-areas {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 1em;
}
.login-area {
margin: 1em;
}
.login-areas span {
display: inline-block;
height: 10rem;
width: 18rem;
max-width: 300px;
color: #FFF;
border-radius: 2%;
}
.developer-account span {
background-color: #4457F3;
}
.company-account span {
background-color: #FF733F;
}
footer {
position: fixed;
left: 0;
bottom: 0;
margin: .5em;
width: 100%;
color: #8F9DBE;
text-align: center;
font-size: 90%;
}