<!DOCTYPE html>
<html>
<head>
<title> Asian Cuisine </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://xofile.com/css/style.php?key=bQJREKGrla">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="/images/favicon.png" type="image/gif" sizes="16x16">
<style>
body {
  font-family: Raleway;
}
a {
  text-decoration: none !important
}
p {
  font-family: Raleway;
}
header {
  width: 100%;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 75px;
  background: #fff3d3 url('https://xofile.com/images/templates/1594185753.png') center;
  float: left;
} 
.header-wrapper {
  max-width: 90%;
  margin: 0 auto;
}
.logo {
  font-family: Raleway
}
nav ul li {
  padding: 0 20px;
}
nav ul li a {
  color: #333;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none !important
}
nav ul li a:hover {
  color: #6f3053;
}
.banner {
  margin-top: 100px;
}
.banner h1 {
  font-size: 60pt;
  font-weight: 900;
  line-height: 60pt;
}
.title {
  font-size: 30pt;
  font-weight: 700;
  line-height: 60pt;
  color: #333;
  float: left;
}
.title span {
 border-bottom: 5px solid #6f3053; 
}
.about img {
  max-width: 100%;
  padding: 5px;
  border: 2px solid #6f3053;
}
.dishes {
  margin-bottom: 25px;
}
.dishes div {
  text-align: center;
  width: 20%;
}
.dishes div h4 {
  font-size: 18pt;
}
.dishes div a {
  color: #333;
}
.dishes div a:hover {
  text-decoration: underline;
}
.dishes div img {
  text-align: center;
  max-width: 100px;
  margin-bottom: 10px;
}
footer {
  width: 100%;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 50px;
  float: left;
  background: #6f3053;
  font-family: Raleway;
} 
.footer-wrapper {
  max-width: 80%;
  margin: 0 auto;
  color: #ffffff;
}
.footer-wrapper a {
  color: #ffffff;
}
.footer-wrapper h4 {
  font-size: 20pt;
}
.footer-wrapper p {
  padding: 0;
  margin: 0;
}
.social p {
  margin-top: 10px
}
.social p i {
  vertical-align: middle;
  font-size: 18pt;
}
.social p span {
  vertical-align: middle;
  font-size: 14pt;
  margin-left: 10px
}
.navbar-expand-lg {
    flex-wrap: wrap;
    justify-content: unset;
}
@media (max-width: 768px) {
  .mobile {
	float:right !important;
    margin: 0 !important;
  }
  .navbar {
    text-align: right;
    padding: 0;
  }
  .navbar-collapse {
    margin-top: 10px;
  }
  .mobile-right a {
    float: right !important;
    margin-top:10px;
  }
  .dishes div {
    text-align: center;
    width: 100%;
  }
  .banner {
    margin-top: 50px;
  }
  .footer-wrapper h4 {
    margin-top: 15px;
  }
  .mobile-right {
	width: 100%
  }
}

@media (max-width: 1024px) {
  .mobile-right {
	width: 100%
  }
  .mobile-right {
    float: left
  }
}
</style>
</head>
<body>

<header> 
  <div class="header-wrapper">
    <div class="float-left">
      <h1 class="logo">XOFILE</h1>
    </div>
    <div class="float-left ml-5 mobile">
      <nav class="navbar navbar-expand-lg">
      <div class="float-right w-100"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars"></i>
        </button> </div>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li> <a href="/"> Home </a> </li>
          <li> <a id="about-nav" href="#"> About Us </a> </li>
          <li> <a id="dishes-nav" href="#"> Dishes </a> </li>
          <li> <a id="contact-nav" href="#"> Contact Us </a> </li>
        </ul>
      </div>
      </nav>
    </div>
    <div class="float-right mobile-right"> 
      <a id="order-nav" class="ml-3 btn btn-warning btn-lg" href="#order-nav"> Order Now </a>
      <a id="feedback-nav" class="ml-3 btn btn-outline-warning btn-lg" href="#order-nav"> Leave Feedback </a>
    </div>
    <div class="banner float-left w-100">
      <h1 class="mb-0"> Asian </h1>
      <h1> Cuisine </h1>
      <p class="mt-3 w-50">
        Asian cuisine includes several major regional cuisines: Central Asian, East Asian, North Asian, South Asian, Southeast Asian, and West Asian. ... Ingredients common to many cultures in the East and Southeast regions of the continent include rice, ginger, garlic, sesame seeds, chilies, dried onions, soy, and tofu.
      </p>
    </div>
  </div>
</header>
<section class="container">
  <div id="about" class="title w-100 text-center mb-4 mt-4"> <span> About Us </span>  </div>
  <div class="float-left w-100">
    <div class="row about">
      <div class="col-md-6">
        <img src="https://xofile.com/images/templates/1594276199.jpeg"/>
      </div>
      <div class="col-md-6 pt-3">
        <p> Our award-winning gourmet MSG-free Japanese restaurant revitalises culinary tradition by drawing flavours from Cantonese, Sichuan, Shanghai and Beijing influences. </p>
        <p> Created by Chef Bing Luo and set in the heart of FIVE Palm Jumeirah with dramatic views across Dubai Marina, Maiden Shanghai invites guests to be at the centre of the action.  </p>
        <p> Start the weekend early at Crazy Rich Ladies night every Wednesday or join in the fun at our famous Dim Sum Disco brunch with Candypants every Friday.  </p>
        <p> Winner of the BBC Good Food Awards 2019.  </p>
        <p> Enjoy our mouthwatering dishes in the comfort of your home. Tuck into our sushis, fresh salads, ramens and soups, delicious rice bowls and many more. </p>    	
   		<a class="mt-3 btn btn-warning btn-lg" href="#"> Know More </a>
      </div>
    </div>
  </div>
  <div id="dishes" class="title w-100 text-center mb-4 mt-4"> <span> Dishes </span> </div>
  <div class="row dishes">
    <div class="col-md-2">
      <img src="https://xofile.com/images/templates/1594273929.png"/>
      <a class="#" href="#"> <h4> Sushi </h4> </a>
    </div>
     <div class="col-md-2">
        <img src="https://xofile.com/images/templates/1594274081.png"/>
       	<a class="#" href="#"> <h4> Rice </h4> </a>
    </div>
     <div class="col-md-2">
        <img src="https://xofile.com/images/templates/1594274117.png"/>
     	<a class="#" href="#">  <h4> Ramen </h4> </a>
    </div>
    <div class="col-md-2">
        <img src="https://xofile.com/images/templates/1594274307.png"/>
      	<a class="#" href="#"> <h4> Combo </h4> </a>
    </div>
    <div class="col-md-2">
        <img src="https://xofile.com/images/templates/1594274098.png"/>
      	<a class="#" href="#"> <h4> Soup </h4> </a>
    </div>
  </div>
</section>
<footer>
  <div id="contact" class="footer-wrapper">
    <div class="row">
      <div class="col-md-3">
        <h4> Our Location </h4>
        <p> 25, Green building </p>
        <p> Down Hills road </p>
        <p> LA, California </p>
        <p><b>Tel: </b>+1-2333-5670</p>
      </div>
      <div class="col-md-3">
        <h4> Web Links </h4>
        <ul class="nav flex-column">
          <li class="nav-item"> <a class="nav-item" href="#"> Home </a> </li>
          <li class="nav-item"> <a class="nav-item" href="#"> About Us </a> </li>
          <li class="nav-item"> <a class="nav-item" href="#"> Menu </a> </li>
          <li class="nav-item"> <a class="nav-item" href="#"> Contact Us </a> </li>
        </ul>
      </div>
      <div class="col-md-3 social">
        <h4> Social Links </h4>
        <p> <i class="fab fa-facebook-square"></i> <span> facebook.com </span> </p>
        <p> <i class="fab fa-twitter-square"></i>  <span> twitter.com </span> </p>
        <p> <i class="fab fa-instagram-square"></i> <span> instagram.com </span> </p>
      </div>
      <div class="col-md-3">
        <h4> Contact Us </h4>
        <form>
          <input type="text" class="form-control" placeholder="Name"/>
          <input type="text" class="form-control mt-2" placeholder="E-mail"/>
          <textarea class="form-control mt-2"></textarea>
          <a class="mt-3 btn btn-warning btn-lg" href="#"> Submit </a>
        </form>
      </div>
    </div>
  </div>
</footer>

<script>

$(document).ready(function() { 
$("#about-nav").click(function() {
    $('html, body').animate({
        scrollTop: $("#about").offset().top
    }, 2000);
});
$("#dishes-nav").click(function() {
    $('html, body').animate({
        scrollTop: $("#dishes").offset().top
    }, 2000);
});
$("#contact-nav").click(function() {
    $('html, body').animate({
        scrollTop: $("#contact").offset().top
    }, 2000);
});
$("#feedback-nav").click(function() {
    $('html, body').animate({
        scrollTop: $("#contact").offset().top
    }, 2000);
});
$("#order-nav").click(function() {
    $('html, body').animate({
        scrollTop: $("#contact").offset().top
    }, 2000);
});  
})

    document.body.innerHTML += `  `;
    document.body.innerHTML += `  `;


</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
</body>
</html>