gitadmin/AlfaPrentice
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Home page implementatie

Browse Source
This commit is contained in:
frits000000
2020-11-20 16:24:25 +01:00
parent 55b7b765eb
commit 6c1247657d
20 changed files with 464 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
ReactJS/alfaprentice/src/Components/CTA/CTA.js Normal file
View File

@@ -0,0 +1,24 @@
//Modules
import React from 'react';
//Style
import "./Cta.css"
class CTA extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="Cta mt-5">
<div className="container">
<h1 className="mb-5">{this.props.title}</h1>
<a className="AP-Btn-outline">{this.props.BtnText}</a>
</div>
</div>
)
}
}
export default CTA;

13
ReactJS/alfaprentice/src/Components/CTA/Cta.css Normal file
View File

@@ -0,0 +1,13 @@
.Cta{
background:linear-gradient( rgba(255, 0, 0, 0.7) 100%, rgba(255, 0, 0, 0.7)100%),url("../images/Stock.png");
background-size: cover;
padding: 50px;
text-align: center;
color: #ffffff !important;
}
.Cta h1{
color: #ffffff;
font-weight: 350 !important;
}

14
ReactJS/alfaprentice/src/Components/Footer/Footer.css Normal file
View File

@@ -0,0 +1,14 @@
Footer{
background-color: #003581;
padding: 50px 100px 10px 100px;
color: #ffffff;
}
.FooterLogo{
width: 100%;
}
.FooterColumn{
max-width: 300px;
}

42
ReactJS/alfaprentice/src/Components/Footer/Footer.js Normal file
View File

@@ -0,0 +1,42 @@
//Modules
import React from 'react';
//Style
import "./Footer.css";
//Components
import Logo from "../images/logo-licht.png";
class Footer extends React.Component {
render(){
return (
<footer>
<div className="container-fluid">
<div className="row">
<div className="col-md-4">
<div className="FooterColumn">
<img className="FooterLogo" src={Logo} />
</div>
</div>
<div className="col-md-4">
<div className="FooterColumn">
<h4 className="text-center">Contact</h4>
<p>Adres <br/> Mail <br/> Facebook,inst, twitter</p>
</div>
</div>
<div className="col-md-4">
<div className="FooterColumn">
<h4 className="text-center">Contact</h4>
<p>Adres <br/> Mail <br/> Facebook,inst, twitter</p>
</div>
</div>
</div>
</div>
<p className="text-center mt-5">Copyright © AlfaPrentice 2020 - 2021 </p>
</footer>
)
}
}
export default Footer;

34
ReactJS/alfaprentice/src/Components/GlobalStyles.css Normal file
View File

@@ -0,0 +1,34 @@
.AP-Btn-Primary {
background-color: #DE0000;
padding: 5px 10px;
color: #ffffff;
border-radius: 5px;
transition: 0.7s;
}
.AP-Btn-Primary:hover{
text-decoration: none !important;
cursor: pointer;
color: #DE0000;
background-color: #ffffff;
border: 1px solid #DE0000;
}
.AP-Btn-outline{
border: 1px solid #ffffff;
padding: 10px 15px;
color: #ffffff;
transition: 0.7s;
}
.AP-Btn-outline:hover{
text-decoration: none !important;
cursor: pointer;
background-color: #ffffff;
color: #DE0000;
opacity: 0.9;
}
.AP-color-primary{
color: #DE0000;
}

22
ReactJS/alfaprentice/src/Components/Header/Header.css Normal file
View File

@@ -0,0 +1,22 @@
/* Header Styles */
.Header{
justify-content: space-between;
align-items: center;
}
.logo img{
width: 150px;
}
.NavBar{
align-items: center;
}
.Cancel-btn{
font-size: 25px;
}
.Cancel-btn:hover{
opacity: 0.7;
color: #DE0000;
}

63
ReactJS/alfaprentice/src/Components/Header/Header.js
View File

@@ -1,22 +1,75 @@
//Modules
import React from 'react';
import ToggleDisplay from 'react-toggle-display';
//Style
import "./Header.css";
//Components
import Logo from '../images/logo.png';
import LogoLight from '../images/logo-licht.png'
class Header extends React.Component {
constructor() {
super();
this.state = { show: false };
}
handleClick() {
this.setState({
show: !this.state.show
});
}
render() {
return (
<header>
<div className="container">
<div className="row">
<img src={Logo} alt="Logo" />
<header id="Header">
<div className="d-flex Header px-4 py-3">
<div className="logo">
<img src={Logo} alt="Logo" />
</div>
</div>
<ToggleDisplay hide={this.state.show} tag="section">
<div className="NavBar d-flex">
<div className="NavItem mx-2">
<a>Home</a>
</div>
<div className="NavItem mx-2">
<a>Contact</a>
</div>
<div className="NavItem mx-2">
<a className="AP-Btn-Primary" onClick={ () => this.handleClick() }>Login</a>
</div>
</div>
</ToggleDisplay>
<ToggleDisplay show={this.state.show}>
<div className="NavBar d-flex">
<div className="NavItem mx-2">
<input placeholder="Gebruikersnaam"/>
</div>
<div className="NavItem mx-2">
<input placeholder="Wachtwoord"/>
</div>
<div className="NavItem mx-2">
<a className="AP-Btn-Primary">Login</a>
</div>
<div className="NavItem mx-2">
<a className="AP-color-primary Cancel-btn" onClick={ () => this.handleClick() }><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
</div>
</ToggleDisplay>
</div>
</header>
)
}
}
export default Header;

20
ReactJS/alfaprentice/src/Components/Hero/Hero.js Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
class HeroOne extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="HomeHero">
<div className="HeroContents">
<h1>{this.props.title}</h1>
<p>{this.props.content}</p>
</div>
</div>
)
}
}
export default HeroOne;

9
ReactJS/alfaprentice/src/Components/Layouts/DefaultLayout.js
View File

@@ -2,12 +2,17 @@
import react from 'react';
//Components
import { Header } from '../index';
import {
Header,
Footer,
} from '../index';
const DefaultLayout = () => {
const DefaultLayout = (props) => {
return(
<div className="MainLayout">
<Header/>
{props.children}
<Footer/>
</div>
)
}

11
ReactJS/alfaprentice/src/Components/Routing/Router.js
View File

@@ -7,6 +7,9 @@ import {
Link
} from "react-router-dom";
//Components
import { DefaultLayout } from '../';
//Main routes
import {HomePage} from '../';
@@ -27,9 +30,11 @@ class GlobalRouter extends React.Component {
return (
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
</Switch>
<DefaultLayout>
<Switch>
<Route exact path="/" component={HomePage} />
</Switch>
</DefaultLayout>
</Router>
);
}

BIN
ReactJS/alfaprentice/src/Components/images/Stock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
ReactJS/alfaprentice/src/Components/images/stock2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

8
ReactJS/alfaprentice/src/Components/index.js
View File

@@ -1,6 +1,9 @@
//Components imports
import GlobalRouter from "./Routing/Router";
import Header from "./Header/Header";
import HeroOne from "./Hero/Hero";
import CTA from "./CTA/CTA"
import Footer from "./Footer/Footer";
//Layout imports
import DefaultLayout from "./Layouts/DefaultLayout";
@@ -8,11 +11,16 @@ import DefaultLayout from "./Layouts/DefaultLayout";
//Pages imports
import HomePage from '../Pages/HomePage';
//Style
import "./GlobalStyles.css";
//Components exports
export {
GlobalRouter,
Header,
HeroOne,
CTA,
Footer,
}

61
ReactJS/alfaprentice/src/Pages/HomePage.css Normal file
View File

@@ -0,0 +1,61 @@
.HomeHero{
position: relative;
background-image: url("../Components/images/Stock.png");
padding: 150px 50px;
background-size: cover;
}
.HomeHero:before {
background: #ff0000;
opacity: 0.7;
clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.HeroContents{
position: absolute;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
height: 100px;
}
.HeroContents h1{
color: #ffffff;
font-size: 3.5rem !important;
font-weight: 350 !important;
}
.HeroContents p{
color: #ffffff;
font-size: 1.3rem !important;
}
.color-p2{
color: #003581;
font-weight: bold;
}
.color-white{
color: #ffffff;
}
.OpleidingItemInner{
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("../Components/images/stock2.png");
background-size: cover;
background-position: center;
height: 300px;
width: 100%;
transition: all 0.5s;
}
.OpleidingItemInner:hover{
transform: scale(1.1);
}

47
ReactJS/alfaprentice/src/Pages/HomePage.js
View File

@@ -1,10 +1,55 @@
//Modules
import React from 'react';
//Style
import "./HomePage.css";
//Components
import {
HeroOne,
CTA,
} from "../Components";
class HomePage extends React.Component {
render() {
return(
<div>dit is de homepage</div>
<div className="HomePage">
<HeroOne title="AlfaPrentice" content="De plek om je ideale stageplek te vinden"/>
<div className="container mt-5">
<h2 className="color-p2 text-center">klik op je opleding en kijk welk bedrijf het meest bij jou past</h2>
<div className="row mt-4">
<div className="col-md-3 OpleidingItem">
<div className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</div>
</div>
<div className="col-md-3 OpleidingItem">
<div className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</div>
</div>
<div className="col-md-3 OpleidingItem">
<div className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</div>
</div>
<div className="col-md-3 OpleidingItem">
<div className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</div>
</div>
</div>
</div>
<CTA title="ALfaPrentice is ontwikkeld om jou te helpen met het zoeken naar de beste match tussen jou en een bedrijf" BtnText="Login en begin met soliciteren"/>
</div>
)
}
}