<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="main-wrap">
<nav class="">
<div class="nav-links">
<a href="" class="link">Home</a>
<a href="" class="link">FIND WORK </a>
<a href="" class="link">FIND TALENT</a>
<a href="" class="link">SERVICES</a>
<a href="" class="link">Contact</a>
<a href="" class="link">LEADERSHIP</a>
<a href="" class="link">ABOUT US </a>
</div>
</nav>
<div class="content-main">
<header class="header" id="head">
<div class="brand-logo"><img src="https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADtA/fPvGVNzOkCo7ZMqLI6pPITE9ZF7NONmawCJoC/w185-h40-p-rw/logo.png"> </div>
<div class="menu-btn">
<div class="line line--1"></div>
<div class="line line--2"></div>
<div class="line line--3"></div>
</div>
</header>
<div class="content">
<div class="site-banner__vid">
<!--
<video muted="" autoplay="" loop="" preload="" playsinline="" data-video="0">
<source src="http://www.saxonglobal.com/wp-content/themes/saxonglobal/video/saxonglobal.mp4">
<source src="https://ic-creative.co.uk/wp-content/themes/ic-creative/assets/vid/banner.ogg" type="video/ogg">
<source src="https://ic-creative.co.uk/wp-content/themes/ic-creative/assets/vid/banner.webm" type="video/webm">
</video>
-->
<div class="overlay-bg"></div>
<div class="header-title">
<h1>Creating Better Lives For Everyone,<br> We Touch</h1>
</div>
<video muted="" autoplay="" loop="" preload="" playsinline="" data-video="0">
<source src="https://www.peopleplace.eu/wp-content/themes/peopleplace/images/intro-video-peopleplace.mp4" type="video/mp4">
</video>
</div>
</div>
<footer class="footer">
<div class="footer__leftside">
<span class="open-social"><i class="fa fa-share-alt"></i>Follow us</span>
</div>
<div class="footer__rightside">
<a class="search-link" href="">Search <i class="fa fa-search"></i></a>
</div>
</footer>
</div>
</div>
<saction class="home-wrap">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div id="f2">
<div class="inside">
<span></span>
<h3>Find Your <span class="blue-text">Dream Jobs</span></h3>
<h4>
Your Job Search Ends Here!
</h4>
</div>
</div>
</div>
<div class="col-md-6">
<div id="f3">
<div class="inside">
<span></span>
<h3>Find The <span class="blue-text">Right Talent</span></h3>
<h4>
Your Talent Search Ends Here!
</h4>
</div>
</div>
</div>
</div>
</div>
</saction>
<br>
@font-face {
font-family: 'TitilliumWeb';
src: url(../font-style/TitilliumWeb-Light.ttf) format('truetype');
}
@font-face {
font-family: 'Comfortaa';
src: url(../font-style/Comfortaa-Regular.ttf) format('truetype');
}
body{
background-color:#000;
font-family: 'TitilliumWeb';
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
display:none;
}
::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
display:none;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #b50201;
display:none;
}
/*MAIN SECTION===============================================*/
.main-wrap{
position: relative;
width:100%;
height:auto;
}
body.animation .main-wrap {
position: fixed;
}
body.animation .home-wrap {
padding-top: 550px;
display: block;
}
body.animation .content-main {
-webkit-transform: rotateX(0deg) scale(0.8);
transform: rotateX(0deg) scale(0.8);
pointer-events: none;
overflow: hidden;
}
.content-main{
webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.content-main {
position: relative;
left: 0px;
top: 0px;
z-index: 999;
height: 100%;
-webkit-transition: -webkit-transform 650ms;
transition: -webkit-transform 650ms;
transition: transform 650ms;
transition: transform 650ms, -webkit-transform 650ms;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.content{
height: 100vh;
overflow: hidden !important;
-webkit-transition: .6s;
transition: .6s;
}
.header-title {
color: #fff;
position: absolute;
margin: 0 auto;
top: 38%;
text-align: center;
left: 0px;
right: 0px;
}
.header-title h1 {
font-size: 45px;
line-height: 81px;
font-weight: bold;
font-family: 'Comfortaa';
}
.overlay-bg {
position: absolute;
left: 0;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1 !important;
transition: all 1s;
transform: translate(0, -35%);
opacity: 1;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#03000000', GradientType=0);
}
.site-banner__vid video {
width: 100%;
height: 100%;
display: block;
margin-left: auto;
object-fit: cover;
/* position: absolute; */
left: 0;
top: 0;
margin: 0 auto;
}
/*HEADER**************************/
.header{
padding:35px;
}
.header {
display: block;
position: fixed;
width: 100%;
z-index: 400;
top: 0;
}
/*Menu Button*********************/
.menu-btn{
width: 35px;
text-transform: uppercase;
font-size: .8em;
display: block;
position: absolute;
max-width: 70px;
top: 3.5em;
right: 2.5em;
height: 15px;
cursor: pointer;
-webkit-transition: all .3s;
transition: all .3s;
z-index: 2;
}
.menu-btn:before {
content: 'menu';
position: absolute;
left: 0;
bottom: 0;
top: 0;
margin: auto;
transform: translate(-80%, -1px);
font-size: 18px;
letter-spacing: 1px;
opacity: 0;
transition: all .6s;
color: #fff;
}
.menu-btn:before {
opacity: 1;
transform: translate(-130%, -1px);
}
.menu-btn .line {
padding: 0;
width: 30px;
background: #fff;
height: 2px;
margin: 5px 0;
transition: all 700ms cubic-bezier(.9, 0, .33, 1);
}
.menu-btn .line.line--1 {
width: 30px;
transform: rotate(0) translateY(0);
}
.menu-btn .line.line--1.line-cross {
width: 30px;
transform: rotate(45deg) translateY(10px);
background:#1b73bc;
}
.menu-btn .line.line--2 {
width: 28px;
transform: translateX(0);
}
.menu-btn .line.line--2.line-fade-out {
width: 28px;
transform: translate(30px);
opacity: 0;
}
.menu-btn .line.line--3 {
width: 20px;
transform: rotate(0) translateY(0);
}
.menu-btn .line.line--3.line-cross {
width: 30px;
transform: rotate(-45deg) translateY(-10px);
background: #1b73bc;
}
/*SIDE NAVBAR=================================*/
nav {
overflow: hidden;
position: fixed;
transform: translateX(-280px);
height: 100%;
width: 270px;
transition: all 800ms cubic-bezier(.8, 0, .33, 1);
border-radius: 0% 0% 100% 50%;
top: 0px;
background-color: #1b74bc;
z-index: 9999;
}
nav.nav-open {
transform: translateX(0px);
border-radius: 0% 0% 0% 0%;
/* background: rgba(255, 255, 255, 0.6);*/
background-color:#1b74bc;
}
nav .nav-links {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateX(-100px);
opacity: 0;
transition: all 900ms cubic-bezier(.9, 0, .33, 1);
}
nav .nav-links.fade-in {
opacity: 1;
transform: translateX(0px);
}
nav .nav-links .link {
margin: 20px 0;
text-decoration: none;
font-family: 'TitilliumWeb';
color: #fff;
font-weight: 700;
text-transform: uppercase;
font-size: 1.2rem;
transition: all 300ms cubic-bezier(.9, 0, .33, 1);
}
nav .nav-links .link:hover {
color: rgba(0, 0, 0, .5);
}
/*FOOTER************************/
.footer{
display:flex;
}
.header,
.footer {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
z-index: 400;
-webkit-transition: .6s;
transition: .6s;
overflow: hidden;
padding:35px;
}
.footer > * {
width: 50%;
text-transform: uppercase;
/* font-size: 0.8em; */
letter-spacing: 1px;
}
.footer__rightside {
text-align: right !important;
float: right;
}
.search-link, .open-social {
color: #fff;
cursor: pointer;
text-decoration: none;
}
.open-social .fa {
margin-right: 8px;
}
/*HOME SECTION////////////////////////////////*/
#f1 {
background: #83726b;
flex: 1;
cursor: pointer;
transition: box-shadow 1s ease;
}
#f1:hover {
box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .4);
}
.second-line {
flex: 1;
display: flex;
flex-direction: row;
}
#f2:hover {
flex: 1;
background: rgba(41, 112, 209, 0.90);
cursor: pointer;
transition: box-shadow 1s ease;
box-shadow: inset 0 0 0 10px #1b74bc;
}
#f2 {
flex: 1;
background-image: url(https://www.peopleplace.eu/wp-content/themes/peopleplace/images/bg-employer.jpg);
background-size: cover;
background-position:top center;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition: 2s;
}
#f3:hover {
flex: 1;
background: rgba(41, 112, 209, 0.90);
cursor: pointer;
transition: box-shadow 1s ease;
box-shadow: inset 0 0 0 10px #1b74bc;
}
#f3 {
flex: 1;
background-image: url(https://www.peopleplace.eu/wp-content/themes/peopleplace/images/bg-candidate.jpg);
background-size: cover;
background-position:top center;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition: 2s;
}
.inside {
width: 100%;
height: Calc(100% - 41px);
margin: 20px 0;
text-align: center;
vertical-align: middle;
color: #000;
padding: 15px 15px;
margin-top:100px;
}
blue-text{
color:#f6901f;
}
.inside:hover{
color: #fff;
}
.inside > span {
height: 1px;
width: 30%;
background: #f6911f;
display: block;
margin: 0 auto;
margin-bottom: 67px;
margin-top: 35px;
}
.inside h3 {
position: relative;
top: 0%;
color:#fff;
transform: translateY(-50%);
font-size: 38px;
padding: 15px 0px;
font-weight: bolder;
}
.inside h4 {
color: #f6911f;
position: relative;
transform: translateY(-50%);
margin-bottom: 14px;
font-size: 18px;
}
$(document).ready(function(){
var menuBtn = document.querySelector('.menu-btn');
var nav = document.querySelector('nav');
var lineOne = document.querySelector('header .menu-btn .line--1');
var lineTwo = document.querySelector('header .menu-btn .line--2');
var lineThree = document.querySelector('header .menu-btn .line--3');
var link = document.querySelector('nav .nav-links');
menuBtn.addEventListener('click', () => {
nav.classList.toggle('nav-open');
lineOne.classList.toggle('line-cross');
lineTwo.classList.toggle('line-fade-out');
lineThree.classList.toggle('line-cross');
link.classList.toggle('fade-in');
})
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$("body").addClass("animation");
} else {
$("body").removeClass("animation");
}
});
