<div class="container">
  <div class="logo">MOUNTAIN<br>HOME</div>
  <video loop muted autoplay fullscreen  class="fullscreen-bg__video" poster="https://wallpaperaccess.com/full/428865.jpg">
        <source src="https://assets.codepen.io/1651485/Camping+At+A+Forest.mp4" type="video/mp4">
    </video>
  <div class="left"></div>
  <div class="right" data-animation="to-bottom">
    <a data-text="ABOUT US" href="#">ABOUT US</a>
    <a data-text="EQUIPMENT" href="#">EQUIPMENT</a>
    <a data-text="TOURS" href="#">TOURS</a>
    <a data-text="CONTACT" href="#">CONTACT</a>
  </div>
  <div id="menuBtn">
    <input type="checkbox" />
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

//******************************************************
// This is for desktop only
// Like it if you like it :) Thank you 
// Best viewed in fullscreen
// https://codepen.io/nocni_sovac/full/qBZbGoq

//******************************************************

* {
  padding:0;
  margin:0;
}
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');


body{
  background: #3d3d3d;
  font-family: 'Poppins', sans-serif;
}


.container {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  
  .logo {
    position: absolute;
    top: 14px;
    left: 30px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    line-height: 21px;
    z-index: 99;
    color: white;
  }
  
  .fullscreen-bg__video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover;
  }
  
  #menuBtn {
    position: absolute;
    top:15px;
    right:25px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99;
    height: auto;
    
    input {
      display: block;
      cursor: pointer;
      position: absolute;
      height: 100%;
      width: 100%;
      opacity:0;
      z-index:9;
      
      &:checked ~ span {      
        &:nth-child(2){
          opacity:0;
          transform: translateY(-5px)
        }
        &:nth-child(3){
         transform: rotate(45deg)
        }
        
        &:nth-child(4){
          display: block;
          transform: rotate(135deg);
          opacity:1;
          margin-top: -3px;
        }
        &:nth-child(5){
          opacity:0;
          transform: translateY(5px)
        }
        
       
      }
    }
    
    span {
      width:35px;
      height:3px;
      background: white;
      position:relative;
      display:block;
      margin: 4px 0;
      border-radius: 2px;
      transition: all .2s linear;
      
      &:nth-child(3) {
        width:25px;
        margin-bottom: auto;
      }
      &:nth-child(4) {
        width:25px;
        opacity:0;
        margin:0;
      }
    }
       
  }
      
  .left {
    height: 100vh;
    width:50vw;
    position: relative;
    transition: all .4s linear;
    transform: translateY(100vh);
    background-color: #363636;
    background: url('https://images.unsplash.com/photo-1583138605411-f85466f61638?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
     background-repeat: no-repeat;
   background-size: cover !important;
    z-index: 9;
  }

  .right { 
    height: 100vh;
    width:50vw;
    position: relative;
    transition: all .4s linear;
    transform: translateY(-100vh);
    background: RGBA(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9;
    
    a {
      text-decoration: none;
      display:block;
      font-weight: 900;
      font-size: 70px;
      -webkit-text-stroke: 2px white;
      text-stroke: 2px white;
      -webkit-text-fill-color: transparent;
       background-size: 200% 100%;
      background-position: 100%;
      position: relative;
      opacity:0.5;
      transition: all .2s linear;
      
      &:hover {
         opacity:1;
         animation: shake 0.2s;
        
      }
      
      @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
       
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
     
        100% { transform: translate(1px, -2px) rotate(-1deg); }
      }
    }
  }
  
  
  
  
  

}
  

let btn = document.getElementById('menuBtn');
let left = document.querySelector('.left');
let right = document.querySelector('.right');

let links = document.querySelectorAll('.right a');
let backs = ["url(https://cdn.runrepeat.com/storage/uploads/research/Award%20-%20Most%20Livable%20Hiking%20Towns/Hiking%20Town%201.jpg)", 
             "url(https://www.emsoutdoors.com/wp-content/uploads/2013/08/ice-1.jpg)",
             "url(https://q-cf.bstatic.com/xdata/images/xphoto/2048x1536/25154224.jpg?k=b0efd520781f5b2e88c4e707b80b7c1a483be914278b68a5df4fc5a3a13280e9&o=)",
             "url(https://www.wallpaperflare.com/static/679/34/554/nature-landscape-mountains-cabin-wallpaper.jpg)"
]

let flag = true;

btn.addEventListener("click", ()=>{
    flag = !flag;
    if(!flag){
      left.style.transform = "translateY(0)";
      right.style.transform = "translateY(0)"; 
    } else {
      left.style.transform = "translateY(100vh)";
      right.style.transform = "translateY(-100vh)";
    }
    left.style.background = "url('https://images.unsplash.com/photo-1583138605411-f85466f61638?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"; 
})


for(let i = 0; i < links.length; i++){
   links[i].addEventListener("mousemove", ()=>{
      left.style.background = backs[i]; 
   })
}