{% extends 'front/header.html'%}
{% block title %}Our Portfolio - Get Your Menu{% endblock %}
{% block extra_head_content  %}
<!--<meta name="og:title" content="Our Portfolio - Get Your Menu"/>-->
<!--<meta name="url" content="https://www.getyourmenu.in/portfolio"/>-->
<!--<link rel="canonical" href="https://www.getyourmenu.in/portfolio" />-->

<meta name="description" content="Get Your Menu are the best wedding caterers in Delhi. We strive hard to achieve the highest standards in products and catering services offered to you."/>


  <meta name="keywords" content="catering services in delhi, caterers in south delhi, caterers in delhi"/>
<meta name="subject" content="Caterers in Delhi">
<meta name="copyright" content="Get Your Menu">
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://www.getyourmenu.in/portfolio"/>


<meta name="geo.region" content="IN-DL" /> 
<meta name="geo.placename" content="New Delhi" /> 
<meta name="geo.position" content="28.481655;77.187286" />
<meta property="og:locale" content="en_IN" />
<meta property="og:title" content="Our Portfolio - Get Your Menu">
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.getyourmenu.in/portfolio">
  <meta property="og:image" content="../../www.getyourmenu.in/images/logo.html"/>
<meta property="og:site_name" content="Get Your Menu" />
<meta property="og:description" content="Get Your Menu are the best wedding caterers in Delhi. We strive hard to achieve the highest standards in products and catering services offered to you."/>
<meta property="og:image:width" content="769" />
<meta property="og:image:height" content="511" />

{% endblock %}

{% block content %}
{% load static %} 



<link rel="stylesheet" type="text/css" href="{%static 'css/plugins.css'%}">
<link rel="stylesheet" type="text/css" href="{%static 'css/portfolio.css'%}">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lightgallery.min.css">
    
<style>
     
/* Create four equal columns that sits next to each other */


/*footer*/
.mobile-footer{
    display: none;
}
@media screen and (max-width: 767px){
.desktop-footer{
    display: none;
}
.mobile-footer{
    display: block;
   
}
.ftco-appointment{
    display: none;
}
#porrt{
    display:none;
}
}
.name1 {
    text-align: left;
    width: 292px;
    background: rgb(250, 197, 100, .8);
    padding-left: 20px;
    position:absolute;
    bottom: 50px;
    left: 190px;
    color: black;
    z-index: 1;
    margin: 0!important;
}


@media screen and (max-width: 991px){
.name1 {
    
    z-index: 2;
    position: absolute;
    bottom: 20px;
    left: 0;
   
}

}
@media (min-width:1200px) {
	.image-container {
		max-width: 1200px;
	}
	
}
    </style>

<div class="ftco-about d-md-flex port-content">
        <div class="container my-4">
            <div class="row justify-content-center pb-3">
                <div class="col-md-7 heading-section ftco-animate text-center">
                    <h2>OUR PORTFOLIO</h2>
                    <p>Without Us, Life's Tasteless</p>
                </div>
            </div>
            
  {% for i in portfolios %}        
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
    <img src="{{i.image.url}}" style="width:100%">
    <div class="txt-box" style="position:absolute;">
        <p class='name1'>
            Client Name : {{i.client_name}}<br>
            Function Date : {{i.function_date}} <br>
            Venue : {{i.venue}}<br>
        </p>
    </div>
  </div>
{% endfor %}

  <!--<div class="mySlides">-->
  <!--  <div class="numbertext">2 / 6</div>-->
  <!--  <img src="{%static 'images/uploads/portfolio/2.jpg'%}" style="width:100%">-->
  <!--  <div class="row name1">-->
  <!--      <p>-->
  <!--          Client Name : Mr. Ganga Ram<br>-->
  <!--          Function Date : 2019-01-12 <br>-->
  <!--          Venue : Private Farm<br>-->
  <!--      </p>-->
  <!--  </div>-->
  <!--</div>-->

  <!--<div class="mySlides">-->
  <!--  <div class="numbertext">3 / 6</div>-->
  <!--  <img src="{%static 'images/uploads/portfolio/3.jpg'%}" style="width:100%">-->
  <!--  <div class="row name1">-->
  <!--      <p>-->
  <!--          Client Name : Mr. Ganga Ram<br>-->
  <!--          Function Date : 2019-01-12 <br>-->
  <!--          Venue : Private Farm<br>-->
  <!--      </p>-->
  <!--  </div>-->
  <!--</div>-->
    
    
  <a class="prev" onclick="plusSlides(-1)" style="color:#fac564;">❮</a>
  <a class="next" onclick="plusSlides(1)" style="color:#fac564;">❯</a>

 

  <div class="row img-row" id="porrt">
    <div class="brand-carousel owl-carousel">
    
      {% for i in portfolios %}
      <img class="demo cursor" src="{{i.image.url}}" style="width:100%; height:80px;" onclick="currentSlide({{i.id}})" alt="The Woods">
    {% endfor %}
    
    
      <!--<img class="demo cursor" src="{%static 'images/uploads/portfolio/2.jpg'%}" style="width:100%; height:80px;" onclick="currentSlide(2)" alt="Cinque Terre">-->
    
    
      <!--<img class="demo cursor" src="{%static 'images/uploads/portfolio/3.jpg'%}" style="width:100%; height:80px;" onclick="currentSlide(3)" alt="Mountains and fjords">-->
 
    
    
</div>
</div>
</div>
</div>

<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>


<section class="ftco-bg-dark img" id="section-counter" style='background-image: url("{%static 'images/bg_2.jpg'%}");' data-stellar-background-ratio="0.5">
            <div class="overlay"></div>
      <div class="container image-container">

<div class="row justify-content-center">
<div class="col-md-7 heading-section ftco-animate text-center mt-4">
<h2 class="mb-4">GALLERY</h2>
<p>Deliciousness jumping into the mouth</p>
</div>
</div>
<div class="wrapper">
    <!-- filter Items -->
    <nav>
      <div class="items">
         <span class="item active" data-name="all">All</span>
        {% for gallery in galcats %}
        
        <span class="item " data-name="{{gallery.name}}">{{gallery.name}}</span>
        
       {% endfor %}
        <!--<span class="item" data-name="food">Food</span>-->
        <!--<span class="item" data-name="layout">Layout</span>-->
        <!--<span class="item" data-name="Services">Services</span>-->
        <!--<span class="item" data-name="beverages">Beverages</span>-->
        <!--<span class="item" data-name="dessert">Dessert</span>-->
      </div>
    </nav>
    <!-- filter Images -->
    <div class="gallery" style="height:auto;">
       
        {% for gallery in gallerys %}
        <a href="{{gallery.images.url}}" class="image" data-name="{{gallery.gallery_category}}"><img src="{{gallery.images.url}}" alt="" ></a>
        {% endfor %}
     <!--<a href="{%static 'images/gallery/1-1.jpg'%}" class="image" data-name="layout"><img src="{%static 'images/menu/main-img.jpg'%}" alt=""></a>-->
     <!--<a href="{%static 'images/menu/main-img2.jpg'%}" class="image" data-name="food"><img src="{%static 'images/menu/mocktail.jpg'%}" alt=""></a>-->
     <!-- <a href="{%static 'images/gallery/2-2.jpg'%}" class="image" data-name="food"><img src="{%static 'images/gallery/2-2.jpg'%}" alt="" ></a>-->
     <!--<a href="{%static 'images/menu/soft-drink.jpg'%}" class="image" data-name="food"><img src="{%static 'images/menu/soft-drink.jpg'%}" alt=""></a>-->
     <!--<a href="{%static 'images/gallery/3-3.jpg'%}" class="image" data-name="food"><img src="{%static 'images/gallery/3-3.jpg'%}" alt=""></a>-->
     <!--<a href="{%static 'images/gallery/4-4.jpg'%}" class="image" data-name="food"><img src="{%static 'images/gallery/4-4.jpg'%}" alt=""></a>-->
     <!--<a href="{%static 'images/gallery/5-5.jpg'%}" class="image" data-name="food"><img src="{%static 'images/gallery/5-5.jpg'%}" alt=""></a>-->
     <!--<a href="{%static 'images/gallery/1-1.jpg'%}" class="image" data-name="food"><img src="{%static 'images/gallery/1-1.jpg'%}" alt=""></a>-->
     <!--<a href="{%static 'images/menu/refreshment.jpg'%}" class="image" data-name="food"><img src="{%static 'images/menu/soft-drink.jpg'%}" alt=""></a>-->
     <!--<a href="{%static 'images/menu/soft-drink.jpg'%}" class="image" data-name="food"><img src="{%static 'images/menu/soft-drink.jpg'%}" alt=""></a>-->
     <!--<a href="{%static 'images/gallery/1-1.jpg'%}" class="image" data-name="food"><img src="{%static 'images/gallery/1-1.jpg'%}" alt=""></a>-->
     <!--<a href="{%static 'images/menu/main-img2.jpg'%}" class="image" data-name="food"><img src="{%static 'images/menu/mocktail.jpg'%}" alt=""></a>-->
     <!--<a href="{%static 'images/menu/refreshment.jpg'%}" class="image" data-name="food"><img src="{%static 'images/menu/soft-drink.jpg'%}" alt=""></a>-->
     <!--<a href="{%static 'images/menu/soft-drink.jpg'%}" class="image" data-name="food"><img src="{%static 'images/menu/soft-drink.jpg'%}" alt=""></a>-->

    </div>
  </div>
</div>
                
            </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 align-self-stretch">
          <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="text" 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" 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="form-group">
<textarea  cols="30" rows="4" class="form-control" name="message" placeholder="Message" required></textarea>
</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">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 src="{%static 'js/plugin.js'%}"></script>
<script src="{%static 'js/merge.js'%}"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/js/lightgallery.min.js" ></script>
<script>
        const filterItem = document.querySelector(".items");
const filterImg = document.querySelectorAll(".gallery .image");
window.onload = ()=>{ //after window loaded
  filterItem.onclick = (selectedItem)=>{ //if user click on filterItem div
    if(selectedItem.target.classList.contains("item")){ //if user selected item has .item class
      filterItem.querySelector(".active").classList.remove("active"); //remove the active class which is in first item
      selectedItem.target.classList.add("active"); //add that active class on user selected item
      let filterName = selectedItem.target.getAttribute("data-name"); //getting data-name value of user selected item and store in a filtername variable
      filterImg.forEach((image) => {
        let filterImges = image.getAttribute("data-name"); //getting image data-name value
        //if user selected item data-name value is equal to images data-name value
        //or user selected item data-name value is equal to "all"
        if((filterImges == filterName) || (filterName == "all")){
          image.classList.remove("hide"); //first remove the hide class from the image
          image.classList.add("show"); //add show class in image
        }else{
          image.classList.add("hide"); //add hide class in image
          image.classList.remove("show"); //remove show class from the image
        }
      });
    }
  }
  for (let i = 0; i < filterImg.length; i++) {
    filterImg[i].setAttribute("onclick", "preview(this)"); //adding onclick attribute in all available images
  }
}

</script>



<script>
        lightGallery(document.querySelector('.gallery'));
</script>

 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
    
    <script>
           $('.brand-carousel').owlCarousel({
               loop:false,
               margin:10,
               autoplay:false,
           
               responsive:{
                   0:{
                       items:3
                   },
                   600:{
                       items:3
                   },
                   1000:{
                       items:8
                   }
               }
           })
    </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>
 

<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>
{% endblock %}