Home page implementatie
This commit is contained in:
frits000000
parent
55b7b765eb
commit
6c1247657d
104
ReactJS/alfaprentice/package-lock.json
generated
104
ReactJS/alfaprentice/package-lock.json
generated
@ -316,6 +316,21 @@
|
||||
"js-tokens": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"@babel/node": {
|
||||
"version": "7.12.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/node/-/node-7.12.6.tgz",
|
||||
"integrity": "sha512-A1TpW2X05ZkI5+WV7Aa24QX4LyGwrGUQPflG1CyBdr84jUuH0mhkE2BQWSQAlfRnp4bMLjeveMJIhS20JaOfVQ==",
|
||||
"requires": {
|
||||
"@babel/register": "^7.12.1",
|
||||
"commander": "^4.0.1",
|
||||
"core-js": "^3.2.1",
|
||||
"lodash": "^4.17.19",
|
||||
"node-environment-flags": "^1.0.5",
|
||||
"regenerator-runtime": "^0.13.4",
|
||||
"resolve": "^1.13.1",
|
||||
"v8flags": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"@babel/parser": {
|
||||
"version": "7.12.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.5.tgz",
|
||||
@ -1091,6 +1106,18 @@
|
||||
"@babel/plugin-transform-typescript": "^7.12.1"
|
||||
}
|
||||
},
|
||||
"@babel/register": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/register/-/register-7.12.1.tgz",
|
||||
"integrity": "sha512-XWcmseMIncOjoydKZnWvWi0/5CUCD+ZYKhRwgYlWOrA8fGZ/FjuLRpqtIhLOVD/fvR1b9DQHtZPn68VvhpYf+Q==",
|
||||
"requires": {
|
||||
"find-cache-dir": "^2.0.0",
|
||||
"lodash": "^4.17.19",
|
||||
"make-dir": "^2.1.0",
|
||||
"pirates": "^4.0.0",
|
||||
"source-map-support": "^0.5.16"
|
||||
}
|
||||
},
|
||||
"@babel/runtime": {
|
||||
"version": "7.12.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
|
||||
@ -6057,6 +6084,11 @@
|
||||
"strip-eof": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
|
||||
},
|
||||
"exit": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
|
||||
@ -7077,6 +7109,14 @@
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"homedir-polyfill": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
|
||||
"integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
|
||||
"requires": {
|
||||
"parse-passwd": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
@ -10267,6 +10307,22 @@
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"node-environment-flags": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/node-environment-flags/-/node-environment-flags-1.0.6.tgz",
|
||||
"integrity": "sha512-5Evy2epuL+6TM0lCQGpFIj6KwiEsGh1SrHUhTbNX+sLbBtjidPZFAnVK9y5yU1+h//RitLbRHTIMyxQPtxMdHw==",
|
||||
"requires": {
|
||||
"object.getownpropertydescriptors": "^2.0.3",
|
||||
"semver": "^5.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"node-forge": {
|
||||
"version": "0.10.0",
|
||||
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
|
||||
@ -10808,6 +10864,11 @@
|
||||
"lines-and-columns": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"parse-passwd": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
|
||||
"integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY="
|
||||
},
|
||||
"parse5": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
|
||||
@ -12439,6 +12500,22 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-modal": {
|
||||
"version": "3.11.2",
|
||||
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.2.tgz",
|
||||
"integrity": "sha512-o8gvvCOFaG1T7W6JUvsYjRjMVToLZgLIsi5kdhFIQCtHxDkA47LznX62j+l6YQkpXDbvQegsDyxe/+JJsFQN7w==",
|
||||
"requires": {
|
||||
"exenv": "^1.2.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"react-lifecycles-compat": "^3.0.0",
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
||||
@ -12555,6 +12632,17 @@
|
||||
"workbox-webpack-plugin": "5.1.4"
|
||||
}
|
||||
},
|
||||
"react-toggle-display": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-toggle-display/-/react-toggle-display-2.2.1.tgz",
|
||||
"integrity": "sha512-KadpOhjR4rwsgmHTQ/EyXHE8XcVeaiVLfBVc5bMo/evYgWSMZhkaVxTdUOtOQUizCK54vETzrhCxRBxHkk5z1A==",
|
||||
"requires": {
|
||||
"@babel/node": "^7.10.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.10.4",
|
||||
"@babel/preset-react": "^7.10.4",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
|
||||
@ -15176,6 +15264,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"v8flags": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",
|
||||
"integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==",
|
||||
"requires": {
|
||||
"homedir-polyfill": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"validate-npm-package-license": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
|
||||
@ -15239,6 +15335,14 @@
|
||||
"makeerror": "1.0.x"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.7.5",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
|
||||
|
||||
@ -9,8 +9,10 @@
|
||||
"react": "^17.0.1",
|
||||
"react-cookie": "^4.0.3",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-modal": "^3.11.2",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.0",
|
||||
"react-toggle-display": "^2.2.1",
|
||||
"web-vitals": "^0.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
BIN
ReactJS/alfaprentice/public/images/Stock.png
Normal file
BIN
ReactJS/alfaprentice/public/images/Stock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
ReactJS/alfaprentice/public/images/stock2.png
Normal file
BIN
ReactJS/alfaprentice/public/images/stock2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@ -12,4 +12,5 @@
|
||||
|
||||
|
||||
</body>
|
||||
<script src="https://kit.fontawesome.com/e1907787e3.js" crossorigin="anonymous"></script>
|
||||
</html>
|
||||
|
||||
24
ReactJS/alfaprentice/src/Components/CTA/CTA.js
Normal file
24
ReactJS/alfaprentice/src/Components/CTA/CTA.js
Normal 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
13
ReactJS/alfaprentice/src/Components/CTA/Cta.css
Normal 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
14
ReactJS/alfaprentice/src/Components/Footer/Footer.css
Normal 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
42
ReactJS/alfaprentice/src/Components/Footer/Footer.js
Normal 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
34
ReactJS/alfaprentice/src/Components/GlobalStyles.css
Normal 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
22
ReactJS/alfaprentice/src/Components/Header/Header.css
Normal 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;
|
||||
}
|
||||
@ -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
20
ReactJS/alfaprentice/src/Components/Hero/Hero.js
Normal 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;
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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
BIN
ReactJS/alfaprentice/src/Components/images/Stock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
ReactJS/alfaprentice/src/Components/images/stock2.png
Normal file
BIN
ReactJS/alfaprentice/src/Components/images/stock2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@ -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
61
ReactJS/alfaprentice/src/Pages/HomePage.css
Normal 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);
|
||||
}
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user