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
ReactJS/alfaprentice/src/Pages/HomePage.css
+61
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);
}
ReactJS/alfaprentice/src/Pages/HomePage.js
+46 -1
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>
)
}
}