<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://i.ibb.co/2t4V5F5/corr-logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link good-pro" href="#">Clients
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item good-pro">
<a class="nav-link" href="#">Candidates</a>
</li>
<li class="nav-item good-pro">
<a class="nav-link" href="#">Sectors</a>
</li>
<li class="nav-item good-pro">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item good-pro">
<a class="nav-link" href="#">News & Blog</a>
</li>
<li class="nav-item good-pro">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Absolute Search Box -->
<section class="search-banner text-white py-3 form-arka-plan" id="search-banner">
<div class="container py-5 my-5">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<h3 class="text-white good-pro bold">Enter your job search</h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="job" class="control-label">Job Title / Keywords</label>
<input id="job" type="text" class="form-control good-pro bold" placeholder="Machine Operators">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="sector" class="control-label">Sector</label>
<select id="sector" class="form-control good-pro bold" >
<option selected>ALL</option>
<option class="level-0" value="149">Account Managment</option>
<option class="level-0" value="3">Commercial</option>
<option class="level-0" value="248">Digital Printing</option>
<option class="level-0" value="2">Driving</option>
<option class="level-0" value="197">Engineering</option>
<option class="level-0" value="131">Health Care</option>
<option class="level-0" value="4">Industrial</option>
<option class="level-0" value="133">Information Technology</option>
<option class="level-0" value="202">Logistics</option>
<option class="level-0" value="127">Machine Operator</option>
<option class="level-0" value="213">Management</option>
<option class="level-0" value="212">Manufacturing</option>
<option class="level-0" value="134">Mechanic</option>
<option class="level-0" value="152">Recruitment</option>
<option class="level-0" value="148">Sales</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<button class="collapsible">View Advanced Search</button>
<div class="collapsible-content">
<div class="row">
<div class="form-group">
<label for="location" class="control-label">Location</label>
<select id="location" class="form-control good-pro bold" >
<option selected>ALL</option>
<option class="level-0" value="19">Andover</option>
<option class="level-0" value="124">Andover Area</option>
<option class="level-0" value="86">Basingstoke</option>
<option class="level-0" value="211">Bournemouth</option>
<option class="level-0" value="229">Bristol</option>
<option class="level-0" value="22">Eastleigh</option>
<option class="level-0" value="228">Enfield</option>
<option class="level-0" value="63">Fareham</option>
<option class="level-0" value="20">Greenford</option>
<option class="level-0" value="91">Hemel Hempstead</option>
<option class="level-0" value="13">Newbury</option>
<option class="level-0" value="62">Portsmouth</option>
<option class="level-0" value="252">Reading</option>
<option class="level-0" value="145">Salisbury</option>
<option class="level-0" value="61">Southampton</option>
<option class="level-0" value="21">Swindon</option>
<option class="level-0" value="23">Tamworth</option>
<option class="level-0" value="24">West Drayton</option>
<option class="level-0" value="165">Winchester</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<button type="button" class="float-right btn pl-5 pr-5 good-pro bold search-btn">Search</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="good-pro bold lead-text text-white">Experts in Recruiting for the:</div>
<div class="slide-wrapper">
<!-- Slide 1 -->
<div class="slide slide-1">
<section id="wrapper">
<div class="layer layer-1" data-revert="true" data-speed="0.01" style="background-image: url('https://i.ibb.co/x6ZCPrQ/background1.jpg');"></div>
<div class="layer layer-2" data-speed="0" style="background-image: url('https://i.ibb.co/wrR2T47/corr-circle.png');"></div>
<div class="layer layer-3" data-speed="0.01" style="background-image: url('https://i.ibb.co/gtZmBwX/subject1.png');"></div>
<div class="layer text-layer">
<div class="good-pro bold-italic sub-text">Industrial Sector</div>
</div>
</section>
</div>
<!-- Slide 2 -->
<div class="slide slide-2">
<section id="wrapper">
<div class="layer layer-1" data-revert="true" data-speed="0.01" style="background-image: url('https://i.ibb.co/KLFCxgK/background3.jpg');"></div>
<div class="layer layer-2" data-speed="0" style="background-image: url('https://i.ibb.co/wrR2T47/corr-circle.png');"></div>
<div class="layer layer-3 right" data-speed="0.01" style="background-image: url('https://i.ibb.co/yY4zytC/subject3.png');"></div>
<div class="layer text-layer">
<div class="good-pro bold-italic sub-text">Technology Sector</div>
</div>
</section>
</div>
<!-- Slide 3 -->
<div class="slide slide-3">
<section id="wrapper">
<div class="layer layer-1" data-revert="true" data-speed="0.01" style="background-image: url('https://i.ibb.co/t3k5dGQ/background2.jpg');"></div>
<div class="layer layer-2" data-speed="0" style="background-image: url('https://i.ibb.co/wrR2T47/corr-circle.png');"></div>
<div class="layer layer-3 right-2" data-speed="0.01" style="background-image: url('https://i.ibb.co/0K99Pk6/subject2.png');"></div>
<div class="layer text-layer">
<div class="good-pro bold-italic sub-text">Commercial Sector</div>
</div>
</section>
</div>
<!-- Slide 4 -->
<div class="slide slide-4">
<section id="wrapper">
<div class="layer layer-1" data-revert="true" data-speed="0.01" style="background-image: url('https://i.ibb.co/WgKpQYc/background4.jpg');"></div>
<div class="layer layer-2" data-speed="0" style="background-image: url('https://i.ibb.co/wrR2T47/corr-circle.png');"></div>
<div class="layer layer-3 right-3" data-speed="0.01" style="background-image: url('https://i.ibb.co/WzJ8KZy/subject4.png');"></div>
<div class="layer text-layer">
<div class="good-pro bold-italic sub-text">Driving Sector</div>
</div>
</section>
</div>
</div>
body {
background-color: #cd0f260d !important;
overflow-y:hidden;
}
@media only screen and (max-width:960px){
body{
overflow-y:scroll;
}
}
#contaianer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
overflow: hidden;
}
/* fonts */
.good-pro {
font-family: ff-good-web-pro-condensed, sans-serif;
}
.good-pro.bold-italic {
font-weight: 700;
font-style: italic;
}
.good-pro.bold {
font-weight: 700;
font-style: normal;
}
.countach {
font-family: countach, sans-serif;
font-weight: 400;
font-style: normal;
}
/* nav */
nav {
background: #fff;
}
.navbar {
border-bottom: 1px solid #ddd;
box-shadow: 0 3px 2px -2px rgba(200,200,200,0.2);
}
.navbar-brand img {
width: 6em;
}
.nav-link {
text-transform: uppercase;
font-size: 1.1em;
padding: 2em !important;
}
@media (min-width: 1200px) {
.container {
max-width: 1440px !important;
}
}
/* slides wrapper */
#wrapper {
overflow: hidden;
position: absolute;
width: 102%;
height: 100%;
z-index: 10;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#wrapper .layer {
position: absolute;
background-position: center center;
background-size: cover;
}
/* layers */
.layer-1 {
width: 100%;
height: 100%;
z-index: 6;
}
.layer-2 {
width: 1467px;
height: 1394px;
z-index: 8;
left: -460px;
top: -80px;
animation: zoomInFaster 24s linear infinite 0s;
-o-animation: zoomInFaster 24s linear infinite 0s;
-moz-animation: zoomInFaster 24s linear infinite 0s;
-webkit-animation: zoomInFaster 24s linear infinite 0s;
}
.layer-3 {
width: 46%;
height: 1179px;
z-index: 10;
right: 7%;
top: -116px;
/*animation*/
animation: zoomOut 24s linear infinite 0s;
-o-animation: zoomOut 24s linear infinite 0s;
-moz-animation: zoomOut 24s linear infinite 0s;
-webkit-animation: zoomOut 24s linear infinite 0s;
}
.layer-3.right {
width: 76%;
height: 939px;
z-index: 10;
right: 0;
top: -10px;
}
.layer-3.right-2 {
width: 46%;
height: 1009px;
z-index: 10;
right: 60px;
top: -140px;
}
.layer-3.right-3 {
width: 48%;
height: 1079px;
z-index: 10;
right: 13px;
top: -140px;
}
.lead-text {
position: absolute;
font-size: 4em;
z-index: 9;
text-transform: uppercase;
top: 25%;
left: 11%;
line-height: 1em;
}
.text-layer {
font-weight: 900;
color: #fff;
font-size: 4em;
top: 26%;
margin-top: 0;
left: 3.5em;
width: 100%;
text-align: left;
z-index: 10;
text-transform: uppercase;
animation: fadeInFromRight 6s linear infinite 0s;
-o-animation: fadeInFromRight 6s linear infinite 0s;
-moz-animation: fadeInFromRight 6s linear infinite 0s;
-webkit-animation: fadeInFromRight 6s linear infinite 0s;
}
/* slides */
* {
margin: 0;
padding: 0;
}
.slide-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
/*animation*/
animation: fadeIn 24s linear infinite 0s;
-o-animation: fadeIn 24s linear infinite 0s;
-moz-animation: fadeIn 24s linear infinite 0s;
-webkit-animation: fadeIn 24s linear infinite 0s;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.slide-1 {
opacity: 1;
}
.slide-2, .slide-2 .layer {
animation-delay: 6s;
-o-animation-delay: 6s;
-moz--animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.slide-3, .slide-3 .layer {
animation-delay: 12s;
-o-animation-delay: 12s;
-moz--animation-delay: 12s;
-webkit-animation-delay: 12s;
}
.slide-4, .slide-4 .layer {
animation-delay: 18s;
-o-animation-delay: 18s;
-moz--animation-delay: 18s;
-webkit-animation-delay: 18s;
}
/* Marketing text*/
.sub-text {
font-size: 1.5em;
line-height: 0;
}
/* Search Banner */
.search-banner {
position: absolute;
z-index: 99;
width: 40%;
left: 12.4em;
top: 40%;
}
.search-banner .card {
background-color: #010101ba;
}
.search-btn {
color: #AC272F;
background: #fff;
border-radius: 0;
text-transform: uppercase;
}
/* Collapsible for Advanced Search */
.collapsible {
color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
background: none;
}
.collapsible:after {
content: '\003e';
color: white;
font-weight: bold;
float: left;
margin-right: 5px;
}
.collapsible.active:after {
content: "\2228";
}
.collapsible-content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/* keyframes */
/* ZoomIn */
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale(1);
-ms-transform: scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
transform: scale(1.1);
-ms-transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(1);
-ms-transformm: scale(1);
}
}
/* fadeIn */
@keyframes fadeIn {
0% {
opacity: 0;
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* ZoomOut */
@keyframes zoomOut {
0% {
transform: scale(1.1);
-ms-transform: scale(1.1);
}
30% {
transform: scale(1);
-ms-transform: scale(1);
}
100% {
transform: scale(1.1);
-ms-transformm: scale(1.1);
}
}
@-o-keyframes zoomOut {
0% {
transform: scale(1);
-ms-transform: scale(1);
}
30% {
transform: scale(0.9);
-ms-transform: scale(0.9);
}
100% {
transform: scale(1);
-ms-transformm: scale(1);
}
}
@-moz-keyframes zoomOut {
0% {
transform: scale(1);
-ms-transform: scale(1);
}
30% {
transform: scale(0.9);
-ms-transform: scale(0.9);
}
100% {
transform: scale(1);
-ms-transformm: scale(1);
}
}
@-webkit-keyframes zoomOut {
0% {
transform: scale(1);
-ms-transform: scale(1);
}
30% {
transform: scale(0.9);
-ms-transform: scale(0.9);
}
100% {
transform: scale(1);
-ms-transformm: scale(1);
}
}
/* zoomInFaster */
@keyframes zoomInFaster {
0% {
transform: scale(1);
-ms-transform: scale(1);
}
30% {
transform: scale(1.15);
-ms-transform: scale(1.15);
}
100% {
transform: scale(1);
-ms-transformm: scale(1);
}
}
@-o-keyframes zoomInFaster {
0% {
transform: scale(1);
-ms-transform: scale(1);
}
30% {
transform: scale(1.15);
-ms-transform: scale(1.15);
}
100% {
transform: scale(1);
-ms-transformm: scale(1);
}
}
@-moz-keyframes zoomInFaster {
0% {
transform: scale(1);
-ms-transform: scale(1);
}
30% {
transform: scale(1.15);
-ms-transform: scale(1.15);
}
100% {
transform: scale(1);
-ms-transformm: scale(1);
}
}
@-webkit-keyframes zoomInFaster {
0% {
transform: scale(1);
-ms-transform: scale(1);
}
30% {
transform: scale(1.15);
-ms-transform: scale(1.15);
}
100% {
transform: scale(1);
-ms-transformm: scale(1);
}
}
/* fadeInFromRight */
@keyframes fadeInFromRight {
0% {
opacity: 0;
margin-left: 0.5em;
}
10% {
opacity: 0;
margin-left: 0.5em;
}
35% {
opacity: 1;
margin-left: 0;
}
100% {
opacity: 1;
margin-left: 0;
}
}
// Mouse hover parallax
$('html').mousemove(function(e){
var wx = $(window).width();
var wy = $(window).height();
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var newx = x - wx/2;
var newy = y - wy/2;
$('span').text(newx + ", " + newy);
$('#wrapper div').each(function(){
var speed = $(this).attr('data-speed');
if($(this).attr('data-revert')) speed *= -1;
TweenMax.to($(this), 1, {x: (1 - newx*speed), y: (1 - newy*speed)});
});
});
// Animated Collapsibles
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}