Symfony Profiler

{% extends 'FrontBundle/layout.html.twig' %}
{% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
{% block description %}{{ page.metaDescription }}{% endblock %}
{% block extra_class %}stack{% endblock %}
{# {% block sub_header %}
<div class="sub-header">
<ul>
<li><a href="/{{app.request.locale }}/informations-pratiques">Informations</a></li>
<li class="active"><a href="/{{app.request.locale }}/mini-suites">Mini-suites</a></li>
<li><a href="/{{app.request.locale }}/nos-partenaires">Partenaires</a></li>
</ul>
</div>
{% endblock %} #}
{% block stylesheets %}
<link href="/front/css/owl.carousel.min.css" rel="stylesheet">
<link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
{% endblock %}
{% block body %}
<section class="espace-content full" style="margin-top: 80px;">
<div class="row fluid-menu mb-5">
<div class="nav-menu">
<div class="nav-list">
<div class="overlay" style="top: 195px; height: 37px; width: 145.922px;"></div>
<ul>
<li class=""><a href="/{{app.request.locale }}/{{ 'informations-pratiques'|getUrl(app.request.locale) }}">{{ 'infos_menu1'|tr(tr)|raw }}</a></li>
<li class="active hover"><a href="/{{app.request.locale }}/{{ 'mini-suites'|getUrl(app.request.locale) }}">{{ 'infos_menu2'|tr(tr)|raw }}</a></li>
<li class=""><a href="/{{app.request.locale }}/{{ 'nos-partenaires'|getUrl(app.request.locale) }}">{{ 'infos_menu3'|tr(tr)|raw }}</a></li>
</ul>
</div>
</div>
</div>
<div class="content">
<h1 class="mb-3">{{ 'suites_title'|tr(tr)|raw }}</h1>
<p class="p-0 text-dark" style="z-index: 99;">{{ 'suites_desc'|tr(tr)|raw }}</p>
</div>
</section>
<section class="slider p-0 mt-0">
<div class="content">
<div class="owl-carousel mini-suites">
<div class="item">
<div class="img" style="background-image: url('/front/img/mini-suites-slider1.jpg');"></div>
</div>
<div class="item">
<div class="img" style="background-image: url('/front/img/mini-suites-slider2.jpg');"></div>
</div>
<div class="item">
<div class="img" style="background-image: url('/front/img/mini-suites-slider3.jpg');"></div>
</div>
<div class="item">
<div class="img" style="background-image: url('/front/img/mini-suites-slider1.jpg');"></div>
</div>
<div class="item">
<div class="img" style="background-image: url('/front/img/mini-suites-slider2.jpg');"></div>
</div>
<div class="item">
<div class="img" style="background-image: url('/front/img/mini-suites-slider3.jpg');"></div>
</div>
</div>
</div>
<div class="buttons">
<div class="links">
<a href="#" class="active" data-day="d3">{{ 'suites_d3'|tr(tr)|raw }}</a>
<a href="#" data-day="d1">{{ 'suites_d1'|tr(tr)|raw }}</a>
</div>
<a href="#infos" class="price anchor-link" data-offset="350"><span class="amount">0 €</span> {{ 'suites_price'|tr(tr)|raw }}</a>
<a href="#infos" class="next-arrow mt-5 anchor-link" data-offset="350"><img src="/front/img/espaces-arrow-b-b.svg" alt="suivant" /></a>
</div>
</section>
<section class="p-0 mini-suites-infos" id="infos" style="margin-bottom: 180px;">
<div class="row">
<div class=" content">
<div class="title">{#<span class="title-bar"> </span>#}<p class="text-center">{{ 'suites_infos_title'|tr(tr)|raw }}</p></div>
<p class="subtitle text-center">{{ 'suites_infos1'|tr(tr)|raw }}</p>
<p class="list">
{{ 'suites_infos2'|tr(tr)|raw }}
</p>
<p class="check"><img src="/front/img/mini-suites-check.svg" alt="checkin" />{{ 'suites_infos3'|tr(tr)|raw }}</p>
<p class="annex">
{{ 'suites_infos4'|tr(tr)|raw }}
</p>
</div>
</div>
</section>
{% include 'FrontBundle/Partial/footer.html.twig' %}
{% endblock %}
{% block javascripts %}
<script src="/front/js/owl.carousel.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
hoverList(document.querySelector('.nav-list ul li.active'));
$(window).scrollTop(0);
$(".page_mini-suites .buttons a").on('click', function(e){
e.preventDefault();
console.log('minisuite');
$('.page_mini-suites .buttons .links a').removeClass('active');
$(this).addClass('active');
$('.amount').text(roomPrices[$(this).data('day')].price+' €');
});
setTimeout(function(){
$('.amount').text(roomPrices.d3.price+' €');
}, 1000);
$('.slider .owl-carousel').owlCarousel({
loop:true,
margin:80,
nav:true,
dots:false,
responsive:{
0:{
items:1
},
600:{
items:3
},
1920:{
items:3
}
}
});
if( $('.nav-list .overlay').length > 0 ){
const overlay = document.querySelector('.nav-list .overlay');
const nav_list = document.querySelectorAll('.nav-list ul li');
nav_list.forEach((list) => {
list.addEventListener('mouseover', () => {
let position = list.getBoundingClientRect();
overlay.classList.add('active');
overlay.style.left = position.x + 'px';
overlay.style.top = position.y + 'px';
overlay.style.height = position.height + 'px';
overlay.style.width = position.width + 'px';
});
list.addEventListener('mouseout', () => {
overlay.classList.remove('active');
});
});
}
});
function hoverList(list){
if( $('.nav-list .overlay').length > 0 ){
const overlay = document.querySelector('.nav-list .overlay');
let position = list.getBoundingClientRect();
overlay.classList.add('active');
overlay.style.left = position.x + 'px';
// overlay.style.top = position.y + 'px';
overlay.style.top = $('.nav-list').position().top + 20 + 'px';
overlay.style.height = position.height + 'px';
overlay.style.width = position.width + 'px';
}
}
$('.nav-list ul li').on('mouseover', function(){
$('.nav-list ul li').removeClass('hover');
$(this).addClass('hover');
});
hoverList(document.querySelector('.nav-list ul li.active'));
setTimeout( function(){hoverList(document.querySelector('.nav-list ul li.active'));} , 500);
setTimeout( function(){hoverList(document.querySelector('.nav-list ul li.active'));} , 1000);
</script>
{% endblock %}

templates/FrontBundle/Page/mini-suites.html.twig line 1