index.html

<!DOCTYPE html>
<html>
<head>
<title> nil's cafe </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <header>
        <nav>
            <div class="row clerfix">
                <img src="images/logo.jpg" class="logo">
                   <ul class="main-nav animated jackInTheBox" id="check">
                     <li><a href="#">DELIVERY</a></li>
                     <li><a href="#">HOW TO ORDER</a></li>
                     <li><a href="#">CHECK MORE</a></li>
                     <li><a href="#">SIGN UP</a></li>

                   </ul>
                   <a href="#" class="mobile"  onclick="slideshow()"><i class="fa fa-bars"></i> </a>
            </div>
        </nav>
        <div class="main-content">
        <h1>WELCOME TO <span>HARD ROCK CAFE</span>.<br>
        EXPLORE THE WHOLE NEW WORLD OF CAFE</h1>
        <a href="#" class="btn btn-full">click for menu</a>
        <a href="#" class="btn btn-nav">book a table </a>  
          </div>
    </header>
    <script type="text/javascript">
        function slideshow()
        {

            var x=document.getElementById('check');
            if(x.style.display=="none"){
                x.style.display="block";
            }
            else{
                x.style.display="none";
            }
           }
    </script>
</body>
</html>