Thursday, 18 July 2019

Full Resposnsive project Using HTML , Css and JavaScript For Cafe




Code Here:

 <html>
<head>
    <title>Mr.Coder</title>
    <link rel="stylesheet" type="text/css"  href="style.css">
    <link href="http://fonts.googleapis.com/css?family=Flamenco "rel="stylesheet">
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <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 clearfix">
             
                <h2>Mr Coder </h2><br>
                <h2>Cafe</h2>
           
                   

            <ul class="main-nav animated slideInDown" id="check-class">
                <li><a href="#">CAKE DELEVERY</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-icon"   onclick="slideshow()"> <i style="font-size:24px" class="fa">&#xf0c9;</i></a>
            </div>
        </nav>
        <div class="main-content-header">
     
        <h1>WELCOME TO <span class="colorchange">Mr Coder Cafe</span><br>
            HOUSE OF THE CAKE LOVER OO YES.</h1>
        <a href="#" onclick="myFunction()" class="btn btn-full"  >click to order</a>
        <a href="#" class="btn btn-nav" id="btn2" >Show me more</a>
        </div>
    </header>
    <script type="text/javascript">
         function slideshow(){
             var x = document.getElementById('check-class');
             if (x.style.display === "none"){
                 x.style.display ="block";
             }else{
                x.style.display ="none";
             }

         }

    </script>

</body>

</html>

No comments:

Post a Comment