{% extends 'front/header.html'%}
{% block title %}Get Your Menu - Best Indian Catering Blog for Planning & Ideas{% endblock %}
{% block extra_head_content  %}
<meta name="og:title" content="Get Your Menu - Best Indian Catering Blog for Planning & Ideas"/>
<meta name="url" content="https://www.getyourmenu.in/blog"/>
<link rel="canonical" href="https://www.getyourmenu.in/blog" />
<meta name="description" content="Read our success stories and how our unique and flexible approach to catering a variety of events have helped us emerge successful in our chosen niche.
"/>
{% endblock %}

{% block content %}
{% load static %} 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
  
/*footer*/
.mobile-footer{
    display: none;
}
@media screen and (max-width: 767px){
.desktop-footer{
    display: none;
}
.mobile-footer{
    display: block;
   
}
.ftco-appointment{
    display: none;
}

#query2{
display:none;
}
.form12{
    margin-bottom:20px;
}
}


form.example{
    width:40%;

    
    
}
form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  /*border: 1px solid grey;*/
  float: left;
  width: 80%;
  background: #f1f1f1;
}


#query{
    padding:10px;
    width:340px;
    margin-right:-10px;
    border:none;
    margin-bottom:-10px;
    /*border-top-left-radius:30px;*/
    /*border-bottom-left-radius:30px;*/
    
}
#query1{
    padding:10px;
    width:270px;
    /*border-top-left-radius:30px;*/
    /*border-bottom-left-radius:30px;*/
 
    
}
#query2{
      margin-left:340px; 
      margin-bottom:10px;
}
#blog-btn{
    padding:9px;
    background:#fac564;
    width:85px;
    border:1px solid #fac564;
    
    /*border-top-right-radius:30px;*/
    /*border-bottom-right-radius:30px;*/
}

#blog-btn11{
    padding:0px;
    background:#fac564;
    width:85px;
    border:1px solid #fac564;
    font-size:30px;
    /*border-top-right-radius:30px;*/
    /*border-bottom-right-radius:30px;*/
}

#catbtn{
    /*padding:10px;*/
    width:340px;
    /*border-top-left-radius:30px;*/
    /*border-bottom-left-radius:30px;*/
    background:#fff;
    margin-left:110px;
    
}
.dropdown-item{
    color:#000;
    
    font-size:14px;
}
#mydrop{
    margin-top:310px;
    margin-left:-409px;
    width:340px;
}
.dropdown-item:hover{
    background:#fac564;
}
@media screen and (max-width: 767px){
    #catbtn{
    padding:12px;
    width:270px;
    border-top-left-radius:0px;
    border-bottom-left-radius:0px;
    background:#fff;
    margin-left:1px;
    
}
    #mydrop{
    margin-top:-2px;
    margin-left:-269px;
    width:270px;
}
  .g-recaptcha{
      margin-left:40px;
      margin-top:50px;
  }
}
</style>

   
<div class="breadcrumb-s">
<div class="container">
<ul itemscope="" itemtype="#" class="breadcrumbs">
<li itemprop="itemListElement" itemscope="" itemtype="#">
<a itemtype="https://schema.org/Thing" itemprop="item" href="#"><span class="divider" itemprop="name">Home</span></a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="#" class="active">
<a itemtype="#" itemprop="item">
<span itemprop="name" class="divider">Blog</span>
</a>
<meta itemprop="position" content="2">
</li>
 
<ul>
</div></div>


<!--<section class="ftco-section">-->
<!--<div class="container">-->
<!--<div class="row justify-content-center mb-5 pb-3">-->
<!--<div class="col-md-5 heading-section ftco-animate text-center">-->
   
<!--    </div>-->
<!--    </div>-->
<!--    </div>-->
<!--    </section>-->


<section class="ftco-section">
<div class="container">
<div class="row justify-content-center pb-3">
<div class="col-md-12 heading-section ftco-animate text-center">
<h2 class="mb-4">Read our blogs</h2>
<p>Read our success stories and get a glimpse into the latest catering trends ruling the world.</p>

</div>
</div>

<div class="row">
    <div class="col-md-6 d-flex">
<form class="form12" action={% url 'search_blogs' %} method="get">
    {% csrf_token %}
  <input type="text" placeholder="Search.."  name="q" id="query">
  <button type="submit" id="blog-btn"><i class="fa fa-search"></i></button>
</form>
</div>




<div class="col-md-6 d-flex">

<div class="btn-group">
  <button type="button" class="btn btn-primary" id="catbtn">Select Category</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="blog-btn11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only" >Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" id="mydrop">
     Dropdown menu items go here 
     {% if categories %}
	{% for category in categories %}
    <a class="dropdown-item" href="{% url 'post-by-category' category.name %}">{{ category.name }}</a>
    {% endfor %}
                                      {% else %}
                                        <li>There are no Category in the Database</li>
                                      {% endif %}
    
  </div>
</div>

   </div>
</div>

<br><br>

<div class="row d-flex" id="myproduct" >
     {% if posts %}
    {% for post in posts %}
<div class="col-md-4 d-flex ftco-animate">
<div class="blog-entry align-self-stretch" id="bllo">
<a href="{% url 'post-details' slug=post.slug %}" class="block-22" style="background-image: url({{ post.photo.url }});">
</a>
<div class="text py-4 d-block">
<div class="meta">
<div><a href="{% url 'post-details' slug=post.slug %}">{{ post.publish|date:"d M Y" }}</a></div>
<div><a href="{% url 'post-details' slug=post.slug %}">{{ post.author }}</a></div>

</div>
<h3 class="heading mt-2"><a href="{% url 'post-details' slug=post.slug %}">{{ post.title }}</a></h3>
<p>{{ post.content|safe|truncatewords:10 }}<a href="{% url 'post-details' slug=post.slug %}" class="mt-3">Read More</a></p>
              
</div>
</div>
</div>
{% endfor %}
{% else %}
 <h2>There are no Posts in the Database</h2>
{% endif %} 
            
</div>
</div>
</section>

  


    	
<section class="ftco-appointment">
      <div class="overlay"></div>
      <div class="container-wrap">
        <div class="row no-gutters d-md-flex align-items-center">
          <div class="col-md-5 d-flex">
          <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14020.262610777032!2d77.0898238!3d28.5377463!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x669a9b835b0a9403!2sGet%20Your%20Menu%20-%20Best%20Wedding%20Caterers%20in%20Delhi!5e0!3m2!1sen!2sin!4v1573883988725!5m2!1sen!2sin" 
          width="100%" height="480" frameborder="0" id="mp2" style="border:0;" allowfullscreen=""></iframe>
          
        </div>
<div class="col-md-7 appointment ftco-animate">
<h3 class="mb-3">Contact Us</h3>
<form method='POST' class="contact-form" id="subForm" onsubmit="return submitUserForm();">
  {% csrf_token %}
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="name" placeholder="Name*" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email*"required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="phone" type="tel" pattern="[0-9]{10}"  placeholder="Mobile Number*">
</div>
</div>

</div>
<div class="row">
    <div class="col-md-4">
<div class="form-group">
<input type="date" class="form-control" name="date" placeholder="Date" required>
</div>
</div>

<div class="col-md-4">
<div class="form-group">

<select class="form-control" id="cars" name="function" placeholder="Function" required>
    <option value="">Function*</option>
    <option value="Wedding Ceremony">Wedding Ceremony</option>
    <option value="Cocktail Ceremony">Cocktail Ceremony</option>
    <option value="Birthday">Birthday</option>
    <option value="Social Event">Social Event</option>
    <option value="Corporate">Corporate</option>
    <option value="Ring Ceremony">Ring Ceremony</option>
    <option value="Mehendi Ceremony">Mehendi Ceremony</option>
     <option value="Wedding Reception">Wedding Reception</option>
    <option value="Sangeet Ceremony">Sangeet Ceremony</option>
    

  </select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="budget" placeholder="Budget*">
</div>
</div>
</div>

<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="capacity" placeholder="Capacity" required>
</div>
</div>


<div class="col-md-8">
<div class="form-group">
<input type="text" class="form-control" name="venue" placeholder="Venue" required>
</div>
</div>
</div>


<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea  cols="30" rows="4" class="form-control" name="message" placeholder="Message" required></textarea>
</div>
</div>
</div>


<div class="row">
<div class="col-md-7">
<div class="form-group">
<div id="g-recaptcha-error"></div>
<div class="g-recaptcha" data-sitekey="6Lcnwp8hAAAAACraMCCh79W_qLpURkpx2xpeziHI" data-callback="verifyCaptcha" required ></div>
</div>
</div>

<div class="col-md-5">
<div class="form-group">
    <button type="submit" class="hidden btn btn-primary"  id="btnSubmit2" style= "font-size:30px;" >Submit</button>
</div>
</div>
</div>

<!--<div id="g-recaptcha-error"></div>-->
<!--<div class="g-recaptcha" data-sitekey="6LdKyp8hAAAAAJS2VG2VmuDutUResIAA4oBclb_3" data-callback="verifyCaptcha" required ></div>-->
<!--    <button type="submit" class="hidden btn btn-primary py-3 px-5" id="btnSubmit">Submit</button>-->
 
</form>
</div>          
</div>
</div>
</section>

<script>
var recaptcha_response = '';
function submitUserForm() {
    if(recaptcha_response.length == 0) {
        document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
        return false;
    }
    return true;
}
 
function verifyCaptcha(token) {
    recaptcha_response = token;
    document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>

<script>
    $(document).ready(function()
    {
        $("#myinput").on("keyup",function(){
            var value=$(this).var().toLowerCase();
        $("#bllo div").filter(function(){
            $(this).toggle($(this).text().toLowerCase().indexof(value)> -1)
        
            
        });
        });
    });
</script>

<div class="desktop-footer">
{% include 'front/footer.html'%}
    {% block content1 %}
    {% endblock %}

</div>
<div class="mobile-footer">
{% include 'front/footer-phone.html'%}
    {% block content3 %}
    {% endblock %}

</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
<script src='https://www.google.com/recaptcha/api.js'></script>

<script>
    function myFunction() {
  var input, filter, cards, cardContainer, title, i;
  input = document.getElementById("myFilter");
  filter = input.value.toUpperCase();
  cardContainer = document.getElementById("myProducts");
  cards = cardContainer.getElementsByClassName("blog-entry");
  for (i = 0; i < cards.length; i++) {
    title = cards[i].querySelector(".text");
    if (title.innerText.toUpperCase().indexOf(filter) > -1) {
      cards[i].style.display = "";
    } else {
      cards[i].style.display = "none";
    }
  }
}
</script>


<script>
var recaptcha_response = '';
function submitUserForm() {
    if(recaptcha_response.length == 0) {
        document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
        return false;
    }
    return true;
}
 
function verifyCaptcha(token) {
    recaptcha_response = token;
    document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
<script src='https://www.google.com/recaptcha/api.js'></script>



{% endblock %}