Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
      html, body {
        height: 100%;
        width: 100%;
      }
  
      body {
          position: relative;
      }
  
      .page-bg {
          opacity: 0;
          position: fixed;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          background: url(https://i.ytimg.com/vi/kqUR3KtWbTk/maxresdefault.jpg) no-repeat center center fixed;
          background-size: cover;
          background-color: #333;
  
          -webkit-animation-name: slideNav;
          -webkit-animation-iteration-count: 1;
          -webkit-animation-timing-function: ease-in-out;
          -webkit-animation-duration: 1s;
          -webkit-animation-fill-mode:forwards;
          
          animation-name: fadeIn;
          animation-iteration-count: 1;
          animation-timing-function: ease-in-out;
          animation-duration: 1s;
          animation-fill-mode:forwards;
      }
      
      @-webkit-keyframes fadeIn {
          0% {
              opacity: 0;
          }
          100% {
              opacity: 1;
          }
      }
  
      @keyframes fadeIn {
          0% {
              opacity: 0;
          }
          100% {
              opacity: 1;
          }
      }
    </style>
  </head>

  <body>
    <div class="page-bg"></div>
  </body>

</html>

// Code goes here

/* Styles go here */