<!-- 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";
    } 
  });
}

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
  2. https://use.typekit.net/zxx0nhz.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  3. https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js