Template source: index.html

{% load i18n %} {% load thumbnail %} <!DOCTYPE html> <html ng-app="response_angular_app"> <head> <meta name="google-site-verification" content="9jbRmBudxhoCDw9RUzyHvXAVFP5Z_Duf2nxpnq-7oM8" /> <meta name="google-site-verification" content="L0LlbhGqBwsmixZEUOxu3Ae3RJHM-y4i78MruXbWtGg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% include 'meta/meta.html' %} {% for lang_code, language in available_languages %} {% if lang_code != current_language %} <link rel="alternate" href="{{ site_domain }}/{{ lang_code }}/" hreflang="{{ lang_code }}"/> {% endif %} {% endfor %} <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-K69MP2Q');</script> <!-- End Google Tag Manager --> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K69MP2Q" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <base href="/"/> {% include 'stylesheets.html' %} </head> <body ng-controller="videoController" style="padding-top: 65px"> <div id="fb-root"></div> <script>(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=105080416190561'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script> <!-- End Trustbox script --> {% include "navbar.html" %} <!-- Left & centered positioning --> <div class="ssk-sticky ssk-left ssk-center ssk-lg"> <a href="" class="ssk ssk-facebook"></a> <a href="" class="ssk ssk-twitter"></a> </div> <div style="position:relative;"> <vid-bg resources="resources" poster="poster" full-screen="fullScreen" muted="muted" z-index="zIndex" play-info="playInfo" pause-play="pausePlay" style="position:relative;"> </vid-bg> <a class="video-flash youtube" href="https://www.youtube.com/watch?v=vGN48Jj3wSo"><i class="fa fa-youtube-play" aria-hidden="true"></i>Watch our video ›</a> <div style="position:absolute; position: absolute; top: 50%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%);z-index:1;"> <div class="col-lg-6"> <button class="btn btn-default response-button" data-toggle="modal" data-target="#demo-modal-3">{% trans "Get Inspired" %} </button> </div> </div> <div id="ourRecipe"></div> </div> <div class="container-fluid well noMarginBottom" id="ourIdentity"> <div class="col-sm-10 col-sm-offset-1"> <strong><p class="lead text-center bigResponseDescription">{% trans "We are your best option for a unique trip to Peru. At RESPONSible Travel Peru we ​combine Peru's diverse nature with genuine cultural immersion, handpicked accommodations and excellent food. ​Our multicultural team of experienced travel designers who are passionate about sustainable tourism in Peru will ensure you're immersed much further into Peru than you would ever have imagined possible." %} </p></strong> </div> <div class="row"> </div> </div> </div> <div class="container-fluid well noMarginBottom"> <div class="col-sm-12"> <div class="col-sm-4"> <a href="javascript:void(0)"> <button class="btn btn-md response-button" style="display: block; margin: auto;" data-toggle="modal" data-target="#demo-modal-3"><strong><span style="color:white"><h3>{% trans "Get Inspired" %}</h3></span></strong> </button> </a> <br> <p class="regularResponseDescription" style="text-align: center">{% trans "Browse through our example itineraries" %}</p> </div> <div class="col-sm-4"> <a target="_blank" href="{{questionare_link}}"> <button class="btn btn-md response-button" style="display: block; margin: auto;" data-target="#demo-modal-3"><strong><span style="color:white"><h3>{% trans "Fill out travel request" %}</h3></span></strong> </button> </a> <br> <p class="regularResponseDescription" style="text-align: center">{% trans "The best way to start!" %}</p> </div> <div class="col-sm-4"> <a href="/contact"> <button class="btn btn-md response-button" style="display: block; margin: auto;" data-target="#demo-modal-3"><strong><span style="color:white"><h3>{% trans "Contact our team" %}</h3></span></strong> </button> </a> <br> <p class="regularResponseDescription" style="text-align: center">{% trans "Speak directly with a travel designer" %}</p> </div> </div> <div class="col-sm-10 col-sm-offset-1"> <div class="page-header text-center indexPageHeading"> <h1 id="aboutUs">100% {% trans "Tailor-Made" %}</h1> </div> <div class="col-sm-12"> {% comment %} <div class="col-sm-5"> <p class="lead text-center regularResponseDescription"> </p> <p class="regularResponseDescription"><i class="fa fa-check" aria-hidden="true"></i>{% trans "We look for innovation and originality in our travel experiences." %}</p> <p class="regularResponseDescription"><i class="fa fa-check" aria-hidden="true"></i>{% trans "Your entire holiday is designed around your time, budget and requirements." %}</p> <p class="regularResponseDescription"><i class="fa fa-check" aria-hidden="true"></i>{% trans "We are local and have a big network." %}</p> <p class="regularResponseDescription"><i class="fa fa-check" aria-hidden="true"></i>{% trans "The same specialist will handle your trip from start to finish" %}</p> </div> {% endcomment %} <div class="col-sm-2"></div> <div class="col-sm-8"> <ul> <li class="regularResponseDescription"> {% trans "Your journey is designed around your time, budget and other requirements." %} </li> <li class="regularResponseDescription"> {% trans "We ensure innovation and originality in your travel experience." %} </li> <li class="regularResponseDescription"> {% trans "Every trip is fully customized and unique." %} </li> <li class="regularResponseDescription"> {% trans "We're ready for any challenge and we've proven it!" %} </li> </ul> <div class="row portfolio"> <div class="col-sm-3 removeImagePadding"> <a href="/en/specialist/1/Guido" class=""> <img src="/media/images/Guido-new.jpg" class="img-responsive padding-top-on-small-screen"> </a> </div> <div class="clear"></div> <div class="col-sm-3 removeImagePadding"> <a href="/en/specialist/2/Annika" class=""> <img src="/media/images/Loving_our_coffee_and_chocolate_route751x751.JPG" class="img-responsive padding-top-on-small-screen"> </a> </div> <div class="clear"></div> <div class="col-sm-3 removeImagePadding"> <a href="/en/specialist/3/Alejandro" class=""> <img src="/media/images/Alex.jpg" class="img-responsive padding-top-on-small-screen"> </a> </div> <div class="clear"></div> <div class="col-sm-3 removeImagePadding"> <a href="/en/specialist/4/Agnes" class=""> <img src="/media/images/Agnes2.jpg" class="img-responsive padding-top-on-small-screen"> </a> </div> <div class="clear"></div> <div class="col-sm-3 removeImagePadding"> <a href="/en/specialist/5/Saby" class=""> <img src="/media/images/Saby.JPG" class="img-responsive padding-top-on-small-screen"> </a> </div> <div class="clear"></div> <div class="col-sm-3 removeImagePadding"> <a href="/en/specialist/7/Pauline" class=""> <img src="/media/images/Equipo_-_Pauline_2x2.jpg" class="img-responsive padding-top-on-small-screen"> </a> </div> <div class="clear"></div> <div class="col-sm-3 removeImagePadding"> <a href="/en/specialist/8/Pamela" class=""> <img src="/media/images/Pamela1.jpg" class="img-responsive padding-top-on-small-screen"> </a> </div> <div class="clear"></div> <div class="col-sm-3 removeImagePadding"> <a href="/en/specialist/9/Rosbert" class=""> <img src="/media/images/RosbertWEB_TWGd3wd.JPG" class="img-responsive padding-top-on-small-screen"> </a> </div> <div class="clear"></div> <div class="col-sm-3 removeImagePadding"> <a href="/en/specialist/10/Elena" class=""> <img src="/media/images/Elena5.jpeg" class="img-responsive padding-top-on-small-screen"> </a> </div> <div class="clear"></div> </div> {% comment %} <div class="row portfolio"> {% for travel_specialist in travel_specialists %} <div class="col-sm-3 removeImagePadding"> <a href="{% url 'travel_specialist_page' pk=travel_specialist.pk name=travel_specialist.name %}" class=""> <img src="{{ travel_specialist.images.all.0.image.url }}" class="img-responsive padding-top-on-small-screen"> </a> </div> <div class="clear"></div> {% endfor %} </div> {% endcomment %} <a href="/specialists/"> <strong><span style="text-align: center"><h3 class="indexPageHeading">{% trans "Meet our travel designers" %} </h3></span></strong></a> <br> <a href="/contact"> <button class="btn btn-md response-button" style="display: block; margin: auto;"> <h3 style="color:white"> {% trans "Let us plan your trip" %} </h3></button></a> </div> <div class="col-sm-2"></div> <div class="row"> </div> <div class="col-sm-2"> </div> <div class="col-sm-8"> {% comment %}<a href="javascript:void(0)" class="btn specialist-button" style="width: 100%"> {% trans "Meet our specialists" %}</a> {% endcomment %} <table style="width: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> {% comment %} <a href="/contact"> <button style="text-align: center" class="button btn-lg response-button">{% trans "Connect with our travel designers here" %}</button> </a> {% endcomment %} </td> </tr> </table> </div> <div class="col-sm-2"> </div> </div> </div> </div> </div> {% include "inspirational_trips_and_blog.html" %} <div class="container-fluid well noMarginBottom"> <div class="col-sm-10 col-sm-offset-1"> <div class="page-header text-center indexPageHeading"> <h1>{% trans "We have social skills" %}</h1> </div> <p class="lead text-center regularResponseDescription"> <div class="col-md-12"> {% for instagram_image in latest_instagram_photos %} <div class="col-md-3"> <a target="_blank" href="{{ instagram_image.instagram_link }}"><img class="img img-responsive padding-top-on-small-screen" src="{{ instagram_image.image_url }}"></a> </div> {% endfor %} </div> </div> </div> <div class="container-fluid well noMarginBottom" style="background-color: rgb(94, 151, 50)"> <div class="col-md-12" style="text-align: center"> <ul class="social-network social-circle"> <li><a href="https://www.facebook.com/responsibletravelperu/" class="icoInstagram" title="Facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/responsperu " class="icoInstagram" title="Twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="https://www.instagram.com/p/BZ83Rkbl0x9/" class="icoInstagram" title="Instagram"><i class="fa fa-instagram"></i></a></li> <li><a href="https://www.youtube.com/user/responsperu " class="icoInstagram" title="Youtube"><i class="fa fa-youtube"></i></a></li> <li><a href="https://www.linkedin.com/company/805044/ " class="icoInstagram" title="Linkedin"><i class="fa fa-linkedin"></i></a></li> <li> <a href="https://www.tripadvisor.com/Attraction_Review-g294314-d4079063-Reviews-Responsible_Travel_Peru-Cusco_Cusco_Region.html" class="icoInstagram" title="Tripadvisor"><i class="fa fa-tripadvisor"></i></a></li> </ul> </div> </div> <form method="POST" class="modal multi-step" id="demo-modal-3" action="."> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title step-1" data-step="1">{% trans "How?" %}</h4> <h4 class="modal-title step-2" data-step="2">{% trans "Why?" %}</h4> </div> <div class="modal-body step-1" data-step="1" style="border-bottom: 0px"> {% for how_label in how_trip_labels %} <button type="button" class="btn btn-lg step step-1" style="margin-bottom: 8px; margin-right: 8px;" data-step="1" onclick="sendEvent('#demo-modal-3', 2);activateRadioButton('how', '{{ how_label.label_code }}')">{{ how_label.label_name }}</button> {% endfor %} </div> <div class="modal-body step-2" data-step="2"> {% for why_label in why_trip_labels %} <button type="button" class="btn btn-lg step step-2 inspirationModalButton" data-step="1" onclick="activateRadioButton('why', '{{ why_label.label_code }}')">{{ why_label.label_name }}</button> {% endfor %} </div> <div class="modal-footer" style="border-top: 0px !important;"> {% comment %}<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> {% endcomment %} <button type="button" class="btn btn-primary step step-2" data-step="2" onclick="sendEvent('#demo-modal-3', 1)">Back </button> <button type="button" class="btn btn-primary step step-3" data-step="3" onclick="sendEvent('#demo-modal-3', 2)">Back </button> </div> </div> </div> </form> {% include 'testimonials.html' %} {% include 'newsletter-subscription.html' %} {% include 'footer.html' %} {% include 'javascripts.html' %} <script> var activateRadioButton = function (radioSelectorName, radioSelectorValue) { if (radioSelectorName == 'how') { window.selectedMethod = radioSelectorValue } if (radioSelectorName == 'why') { window.selectedReason = radioSelectorValue url_to_redirect = '/submitpreferences' + '?' + 'selectedMethod=' + window.selectedMethod + '&' + 'selectedReason=' + window.selectedReason; window.location.href = url_to_redirect } console.log('travel preferences: ', window.selectedCountry, window.selectedMethod, window.selectedReason); }; $(document).ready(function () { var youtubeModalWidth; var youtubeModalHeight; console.log("my window width is: ", $(window).width()); if ($(window).width() < 700) { youtubeModalWidth = 360; youtubeModalHeight = 280; } else { youtubeModalWidth = 640; youtubeModalHeight = 480; } $(".youtube").YouTubeModal({autoplay: 0, width: youtubeModalWidth, height: youtubeModalHeight}); }); </script> </body> </html>