diff --git a/ReactJS/alfaprentice/package-lock.json b/ReactJS/alfaprentice/package-lock.json index 7c94a9e..08c3e26 100644 --- a/ReactJS/alfaprentice/package-lock.json +++ b/ReactJS/alfaprentice/package-lock.json @@ -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", diff --git a/ReactJS/alfaprentice/package.json b/ReactJS/alfaprentice/package.json index a37fdab..fbcfa55 100644 --- a/ReactJS/alfaprentice/package.json +++ b/ReactJS/alfaprentice/package.json @@ -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": { diff --git a/ReactJS/alfaprentice/public/images/Stock.png b/ReactJS/alfaprentice/public/images/Stock.png new file mode 100644 index 0000000..0ed5d4a Binary files /dev/null and b/ReactJS/alfaprentice/public/images/Stock.png differ diff --git a/ReactJS/alfaprentice/public/images/stock2.png b/ReactJS/alfaprentice/public/images/stock2.png new file mode 100644 index 0000000..e77864f Binary files /dev/null and b/ReactJS/alfaprentice/public/images/stock2.png differ diff --git a/ReactJS/alfaprentice/public/index.html b/ReactJS/alfaprentice/public/index.html index c2a5c2f..356dd42 100644 --- a/ReactJS/alfaprentice/public/index.html +++ b/ReactJS/alfaprentice/public/index.html @@ -12,4 +12,5 @@ + diff --git a/ReactJS/alfaprentice/src/Components/CTA/CTA.js b/ReactJS/alfaprentice/src/Components/CTA/CTA.js new file mode 100644 index 0000000..b0ae250 --- /dev/null +++ b/ReactJS/alfaprentice/src/Components/CTA/CTA.js @@ -0,0 +1,24 @@ +//Modules +import React from 'react'; + +//Style +import "./Cta.css" + +class CTA extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+
+

{this.props.title}

+ {this.props.BtnText} +
+
+ ) + } +} + +export default CTA; \ No newline at end of file diff --git a/ReactJS/alfaprentice/src/Components/CTA/Cta.css b/ReactJS/alfaprentice/src/Components/CTA/Cta.css new file mode 100644 index 0000000..7e41aba --- /dev/null +++ b/ReactJS/alfaprentice/src/Components/CTA/Cta.css @@ -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; +} + diff --git a/ReactJS/alfaprentice/src/Components/Footer/Footer.css b/ReactJS/alfaprentice/src/Components/Footer/Footer.css new file mode 100644 index 0000000..eee622f --- /dev/null +++ b/ReactJS/alfaprentice/src/Components/Footer/Footer.css @@ -0,0 +1,14 @@ +Footer{ + background-color: #003581; + padding: 50px 100px 10px 100px; + color: #ffffff; +} + + +.FooterLogo{ + width: 100%; +} + +.FooterColumn{ + max-width: 300px; +} diff --git a/ReactJS/alfaprentice/src/Components/Footer/Footer.js b/ReactJS/alfaprentice/src/Components/Footer/Footer.js new file mode 100644 index 0000000..a5a2ea7 --- /dev/null +++ b/ReactJS/alfaprentice/src/Components/Footer/Footer.js @@ -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 ( + + ) + } +} + +export default Footer; \ No newline at end of file diff --git a/ReactJS/alfaprentice/src/Components/GlobalStyles.css b/ReactJS/alfaprentice/src/Components/GlobalStyles.css new file mode 100644 index 0000000..1a87faa --- /dev/null +++ b/ReactJS/alfaprentice/src/Components/GlobalStyles.css @@ -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; +} diff --git a/ReactJS/alfaprentice/src/Components/Header/Header.css b/ReactJS/alfaprentice/src/Components/Header/Header.css new file mode 100644 index 0000000..4307214 --- /dev/null +++ b/ReactJS/alfaprentice/src/Components/Header/Header.css @@ -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; +} diff --git a/ReactJS/alfaprentice/src/Components/Header/Header.js b/ReactJS/alfaprentice/src/Components/Header/Header.js index 29757d8..b9e0483 100644 --- a/ReactJS/alfaprentice/src/Components/Header/Header.js +++ b/ReactJS/alfaprentice/src/Components/Header/Header.js @@ -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 ( -
-
-
- Logo +
) } + } + + export default Header; \ No newline at end of file diff --git a/ReactJS/alfaprentice/src/Components/Hero/Hero.js b/ReactJS/alfaprentice/src/Components/Hero/Hero.js new file mode 100644 index 0000000..68b3125 --- /dev/null +++ b/ReactJS/alfaprentice/src/Components/Hero/Hero.js @@ -0,0 +1,20 @@ +import React from 'react'; + +class HeroOne extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+
+

{this.props.title}

+

{this.props.content}

+
+
+ ) + } +} + +export default HeroOne; \ No newline at end of file diff --git a/ReactJS/alfaprentice/src/Components/Layouts/DefaultLayout.js b/ReactJS/alfaprentice/src/Components/Layouts/DefaultLayout.js index 09d1639..3127a24 100644 --- a/ReactJS/alfaprentice/src/Components/Layouts/DefaultLayout.js +++ b/ReactJS/alfaprentice/src/Components/Layouts/DefaultLayout.js @@ -2,12 +2,17 @@ import react from 'react'; //Components -import { Header } from '../index'; +import { + Header, + Footer, + } from '../index'; -const DefaultLayout = () => { +const DefaultLayout = (props) => { return(
+ {props.children} +
) } diff --git a/ReactJS/alfaprentice/src/Components/Routing/Router.js b/ReactJS/alfaprentice/src/Components/Routing/Router.js index cda0b18..d86a66f 100644 --- a/ReactJS/alfaprentice/src/Components/Routing/Router.js +++ b/ReactJS/alfaprentice/src/Components/Routing/Router.js @@ -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 ( - - - + + + + + ); } diff --git a/ReactJS/alfaprentice/src/Components/images/Stock.png b/ReactJS/alfaprentice/src/Components/images/Stock.png new file mode 100644 index 0000000..0ed5d4a Binary files /dev/null and b/ReactJS/alfaprentice/src/Components/images/Stock.png differ diff --git a/ReactJS/alfaprentice/src/Components/images/stock2.png b/ReactJS/alfaprentice/src/Components/images/stock2.png new file mode 100644 index 0000000..e77864f Binary files /dev/null and b/ReactJS/alfaprentice/src/Components/images/stock2.png differ diff --git a/ReactJS/alfaprentice/src/Components/index.js b/ReactJS/alfaprentice/src/Components/index.js index 37918fb..717b460 100644 --- a/ReactJS/alfaprentice/src/Components/index.js +++ b/ReactJS/alfaprentice/src/Components/index.js @@ -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, } diff --git a/ReactJS/alfaprentice/src/Pages/HomePage.css b/ReactJS/alfaprentice/src/Pages/HomePage.css new file mode 100644 index 0000000..a75cd23 --- /dev/null +++ b/ReactJS/alfaprentice/src/Pages/HomePage.css @@ -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); +} \ No newline at end of file diff --git a/ReactJS/alfaprentice/src/Pages/HomePage.js b/ReactJS/alfaprentice/src/Pages/HomePage.js index f6bbe62..9e865d9 100644 --- a/ReactJS/alfaprentice/src/Pages/HomePage.js +++ b/ReactJS/alfaprentice/src/Pages/HomePage.js @@ -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( -
dit is de homepage
+
+ +
+

klik op je opleding en kijk welk bedrijf het meest bij jou past

+
+
+
+
+ Opleiding 1 +
+
+
+
+
+
+ Opleiding 1 +
+
+
+
+
+
+ Opleiding 1 +
+
+
+
+
+
+ Opleiding 1 +
+
+
+
+
+ +
) } }