index.html

<!DOCTYPE html>
<html lang="en">
    <div id="preloader"></div>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tUneBOx: Follow your Passion</title>
    <link rel="stylesheet" href="Styles.css">
    <!-- <link rel="stylesheet" media="screen and (max-width:1280px)" href="phone.css"> -->
</head>
<body>
   <section id="home1">
      <nav id="navbar">
        <div id="logo">
         <h1 id="logo1">tUneBOx</h1>
        </div>
        <ul>
           <li class="item"><a href="/" class="active">Home</a></li>
           <li class="item"><a href="/instruments">Instruments</a></li>
           <li class="item"><a href="/about">About</a></li>
           <li class="item"><a href="/blog">Blog</a></li>
           <li class="item"><a href="/contact">Contact Us</a></li>
        </ul>
      </nav>
    <div id="home2"> 
     <div class="img"></div> 
     <div class="ThisMonthS" >This Month’s</div>
     <div class="para">highest jumping sessions are live now!!!!!!<br/><br/>here we came with our lots of new courses to check it out as fast as possible.........................</div>
     <button class="JoinUs" onclick="start()">JOIN US</button>
     <button class="StartAFreeTrial" onclick="coming()">start a free trial</button>
    </div>
  </section>
  <script src="https://unpkg.com/scrollreveal"></script>
  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
  <script>
      var loader = document.getElementById("preloader");

      window.addEventListener("load", function(){
      loader.style.display = "none";
      });
      function start() {
      window.location.href = "login.html";
    }
      function coming() {
      window.location.href = "blog.html";
    }
    </script>
</body>