templates/Theme/Users/User/Billet/aviscarousel.html.twig line 1

Open in your IDE?
  1. <style>
  2. @import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
  3. figure.snip1139 {
  4.   font-family: 'Raleway', Arial, sans-serif;
  5.   position: relative;
  6.   overflow: hidden;
  7.   margin: 10px;
  8.   min-width: 220px;
  9.   max-width: 310px;
  10.   width: 100%;
  11.   color: #333;
  12.   text-align: left;
  13.   box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  14.   border-radius: 8px;
  15. }
  16. figure.snip1139 * {
  17.   -webkit-box-sizing: border-box;
  18.   box-sizing: border-box;
  19.   -webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  20.   transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  21. }
  22. figure.snip1139 img {
  23.   max-width: 100%;
  24.   vertical-align: middle;
  25. }
  26. figure.snip1139 blockquote {
  27.   position: relative;
  28.   background-color: #ffffff;
  29.   padding: 25px 50px 25px 50px;
  30.   font-size: 0.8em;
  31.   font-weight: 500;
  32.   text-align: left;
  33.   margin: 0;
  34.   line-height: 1.6em;
  35.   font-style: italic;
  36. }
  37. figure.snip1139 blockquote:before,
  38. figure.snip1139 blockquote:after {
  39.   font-family: 'FontAwesome';
  40.   content: "\201C";
  41.   position: absolute;
  42.   font-size: 50px;
  43.   opacity: 0.3;
  44.   font-style: normal;
  45. }
  46. figure.snip1139 blockquote:before {
  47.   top: 25px;
  48.   left: 20px;
  49. }
  50. figure.snip1139 blockquote:after {
  51.   content: "\201D";
  52.   right: 20px;
  53.   bottom: 0;
  54. }
  55. figure.snip1139 .arrow {
  56.   top: 100%;
  57.   width: 0;
  58.   height: 0;
  59.   border-left: 0 solid transparent;
  60.   border-right: 25px solid transparent;
  61.   border-top: 25px solid #ffffff;
  62.   margin: 0;
  63.   position: absolute;
  64. }
  65. figure.snip1139 .author {
  66.   position: absolute;
  67.   bottom: 0;
  68.   width: 100%;
  69.   padding: 5px 25px;
  70.   color: #000000;
  71.   background-color: #ffffff;
  72.   margin: 0;
  73.   text-transform: uppercase;
  74. }
  75. figure.snip1139 .author h5 {
  76.   opacity: 0.8;
  77.   margin: 0;
  78.   font-weight: 400;
  79. }
  80. .container-rating {
  81.   width: 100%;
  82.   margin: 0 auto;
  83.   margin-top: 0px;
  84.   background-color: #fff;
  85.   padding: 0px;
  86. }
  88. .inner {
  89.   padding: 0px;
  90.   background-color: white;
  91.   overflow: hidden;
  92.   position: relative;
  93.   -webkit-border-radius: 4px; 
  94.   -moz-border-radius: 4px; 
  95.   border-radius: 10px; 
  96. }
  98. .rating {
  99.   float: left;
  100.   width: 45%;
  101.   margin-right: 5%;
  102.   text-align: center;
  103. }
  105. .rating-num {
  106.   color: #333333;
  107.   font-size: 72px;
  108.   font-weight: 100;
  109.   line-height: 1em; 
  110. }
  112. .rating-stars {
  113.   font-size: 20px;
  114.   color: #E3E3E3;
  115.   margin-bottom: .5em;
  116. }
  117. .rating-stars .active {
  118.   color: #737373;
  119. }
  121. .rating-users {
  122.   font-size: 14px;
  123. }
  125. .histo {
  126.   float: left;
  127.   width: 50%;
  128.   font-size: 13px;
  129.   
  130. }
  132. .histo-star {
  133.   float: left;
  134.   padding: 1px;
  135.   margin-left: -20px!important;
  136. }
  138. .histo-rate {
  139.   width: 100%;
  140.   display: block;
  141.   clear: both;
  142. }
  144. .bar-block {
  145.   margin-left: 5px;
  146.   color: black;
  147.   display: block;
  148.   float: left;
  149.   width: 75%;
  150.   position: relative;
  151. }
  153. .bar {
  154.   padding: 1px;
  155.   display: block;
  156. }
  158. #bar-five {
  159.   width: 0;
  160.   background-color: #9FC05A;
  161. }
  163. #bar-four {
  164.   width: 0;
  165.   background-color: #ADD633;
  166. }
  168. #bar-three {
  169.   width: 0;
  170.   background-color: #FFD834;
  171. }
  173. #bar-two {
  174.   width: 0;
  175.   background-color: #FFB234;
  176. }
  178. #bar-one {
  179.   width: 0;
  180.   background-color: #FF8B5A;
  181. }
  182. @media (max-width: 1000px){
  183.     .carousse-size{
  184.         min-height: 620px!important;
  185.     }
  186. }
  187. @media (min-width: 1000px){
  188.     .item-caracteristique{
  189.         display: none;
  190.     }
  191.     .carousse-size{
  192.         min-height: 450px!important;
  193.     }
  194. }
  195. @media (min-width: 1200px){
  196.     .carousse-size{
  197.         min-height: 400px!important;
  198.     }
  199. }
  201. .title {
  202.   color: white;
  203.   text-align: center;
  204.   padding: 1em 0em;
  205.   text-transform: uppercase;
  206.   letter-spacing: 4px;
  207. }
  209. .box-el {
  210.   display: flex;
  211.   max-width: 1400px;
  212.   margin: 5px 0px;
  213. }
  215. .box-about {
  216.   height: 300px;
  217.   background: orange;
  218.   width: 100%;
  219.   margin: 0em .5em;
  220.   background-position: center;
  221.   background-size: cover;
  222.   position: relative;
  223. }
  224. .box-about:hover .the-content-box {
  225.   transform: translateY(0%);
  226.   background: rgba(0, 0, 0, 0.8);
  227. }
  228. .box-about:hover .the-content-box hr {
  229.   width: 20%;
  230.   transition-delay: 400ms;
  231. }
  232. .box-about:hover .the-content-box p {
  233.   opacity: 1;
  234.   transition: all 400ms ease;
  235.   transform: translateY(0%);
  236.   transition-delay: 600ms;
  237. }
  238. .box-about:hover .the-content-box a {
  239.   opacity: 1;
  240.   transform: translateX(0%);
  241.   transition-delay: 900ms;
  242. }
  244. .box-inner {
  245.   position: absolute;
  246.   height: 80%;
  247.   width: 90%;
  248.   top: 10%;
  249.   left: 5%;
  250.   overflow: hidden;
  251. }
  253. .the-content-box {
  254.   position: relative;
  255.   height: 100%;
  256.   width: 100%;
  257.   background: rgba(74, 137, 205, 0.6);
  258.   color: white;
  259.   transform: translateY(80%);
  260.   transition: all 600ms ease;
  261. }
  262. .the-content-box h1 {
  263.   padding: 0.2em 0em 0em 0em;
  264.   margin: 0;
  265. }
  266. .the-content-box hr {
  267.   background: #4A89CD;
  268.   height: 3px;
  269.   border: none;
  270.   margin: 1em 0em 0em 0em;
  271.   width: 0;
  272.   transition: all 400ms ease;
  273. }
  274. .the-content-box p {
  275.   letter-spacing: 1px;
  276.   opacity: 0;
  277.   transition: all 900ms ease;
  278.   transform: translateY(40%);
  279.   font-weight: lighter;
  280. }
  281. .the-content-box a {
  282.   display: inline-block;
  283.   background: #4A89CD;
  284.   padding: 0.5em 1em;
  285.   color: white;
  286.   text-decoration: none;
  287.   font-weight: bolder;
  288.   position: relative;
  289.   transition: all 600ms ease;
  290.   opacity: 0;
  291.   transform: translateX(20%);
  292. }
  293. .the-content-box a:hover {
  294.   background: #1B324B;
  295. }
  297. .content-box-inner {
  298.   padding: 0em 1em;
  299. }
  300. </style>
  301. <section class="clearfix">
  302.     <!--Row featured-->
  303.     <div class="row-featured row-free" style="padding-top: 30px;">
  304.         <div class="title-block clearfix carousse-size">
  305.             <div style="">
  306.             <div class="row" style="padding: 0px;">
  307.             <div class="col-md-8">
  308.             <h2>Ce que pensent les utilisateurs {{ site }}</h2>
  309.             Votre satisfaction est notre priorité; raison pour laquelle nous sommes toujours à l'écoute de vos suggestions et critiques pour mieux adapter nos offres à vos besoins !
  310.             </div>
  311.             <div class="col-md-4">
  312.             <div class="container-rating">
  313.               <div class="inner">
  314.                 <div class="rating">
  315.                   <span class="rating-num">
  316.                   {% if nbAvisTotal > 0 %}
  317.                     {{ (sommeAvisTotal/nbAvisTotal)|round(1, 'ceil') }}
  318.                   {% else %}
  319.                     4.0
  320.                   {% endif %}
  321.                   </span>
  322.                   
  323.                   <div class="rating-stars">
  324.                     <span><i class="active icon-star"></i></span>
  325.                     <span><i class="active icon-star"></i></span>
  326.                     <span><i class="active icon-star"></i></span>
  327.                     <span><i class="active icon-star"></i></span>
  328.                     <span><i class="icon-star"></i></span>
  329.                   </div>
  330.                   <div class="rating-users">
  331.                     <i class="icon-user"></i> {{ nbAvisTotal }} | total
  332.                   </div>
  333.                 </div>
  334.                 
  335.                 <div class="histo">
  336.                   <div class="five histo-rate">
  337.                     <span class="histo-star">
  338.                       <i class="active icon-star"></i> 5 
  339.                     </span>
  340.                     <span class="bar-block">
  341.                       <span id="bar-five" class="bar">
  342.                         <span>{{ nbFiveAvis }}</span>&nbsp;
  343.                         {% if nbAvisTotal > 0 %}
  344.                             {% set percentFive = ((nbFiveAvis/nbAvisTotal)|round(1))*100 %}
  345.                         {% else %}
  346.                             {% set percentFive = 1 %}
  347.                         {% endif %}
  348.                       </span> 
  349.                     </span>
  350.                   </div>
  351.                   
  352.                   <div class="four histo-rate">
  353.                     <span class="histo-star">
  354.                       <i class="active icon-star"></i> 4           
  355.                     </span>
  356.                     <span class="bar-block">
  357.                       <span id="bar-four" class="bar">
  358.                         <span>{{ nbFourAvis }}</span>&nbsp;
  359.                         {% if nbAvisTotal > 0 %}
  360.                             {% set percentFour = ((nbFourAvis/nbAvisTotal)|round(1))*100 %}
  361.                         {% else %}
  362.                             {% set percentFour = 1 %}
  363.                         {% endif %}
  364.                       </span> 
  365.                     </span>
  366.                   </div> 
  367.                   
  368.                   <div class="three histo-rate">
  369.                     <span class="histo-star">
  370.                       <i class="active icon-star"></i> 3           
  371.                     </span>
  372.                     <span class="bar-block">
  373.                       <span id="bar-three" class="bar">
  374.                         <span>{{ nbThreeAvis }}</span>&nbsp;
  375.                         {% if nbAvisTotal > 0 %}
  376.                             {% set percentThree = ((nbThreeAvis/nbAvisTotal)|round(1))*100 %}
  377.                         {% else %}
  378.                             {% set percentThree = 1 %}
  379.                         {% endif %}
  380.                       </span> 
  381.                     </span>
  382.                   </div>
  383.                   
  384.                   <div class="two histo-rate">
  385.                     <span class="histo-star">
  386.                       <i class="active icon-star"></i> 2           
  387.                     </span>
  388.                     <span class="bar-block">
  389.                       <span id="bar-two" class="bar">
  390.                         <span>{{ nbTwoAvis }}</span>&nbsp;
  391.                         {% if nbAvisTotal > 0 %}
  392.                             {% set percentTwo = ((nbTwoAvis/nbAvisTotal)|round(1))*100 %}
  393.                         {% else %}
  394.                             {% set percentTwo = 1 %}
  395.                         {% endif %}
  396.                       </span> 
  397.                     </span>
  398.                   </div>
  399.                   
  400.                   <div class="one histo-rate">
  401.                     <span class="histo-star">
  402.                       <i class="active icon-star"></i> 1           
  403.                     </span>
  404.                     <span class="bar-block">
  405.                       <span id="bar-one" class="bar">
  406.                         <span>{{ nbOneAvis }}</span>&nbsp;
  407.                         {% if nbAvisTotal > 0 %}
  408.                             {% set percentOne = ((nbOneAvis/nbAvisTotal)|round(1))*100 %}
  409.                         {% else %}
  410.                             {% set percentOne = 1 %}
  411.                         {% endif %}
  412.                       </span> 
  413.                     </span>
  414.                   </div>
  415.                 </div>
  416.               </div>
  417.             </div>
  418.             </div>
  419.             <script type="text/javascript">
  420.             $(document).ready(function() {
  421.               $('.bar span').hide();
  422.               $('#bar-five').animate({
  423.                  width: '{{ percentFive }}%'}, 1000);
  424.               $('#bar-four').animate({
  425.                  width: '{{ percentFour }}%'}, 1000);
  426.               $('#bar-three').animate({
  427.                  width: '{{ percentThree }}%'}, 1000);
  428.               $('#bar-two').animate({
  429.                  width: '{{ percentTwo }}%'}, 1000);
  430.               $('#bar-one').animate({
  431.                  width: '{{ percentOne }}%'}, 1000);
  432.               
  433.               setTimeout(function() {
  434.                 $('.bar span').fadeIn('slow');
  435.               }, 1000);
  436.               
  437.             });
  438.             </script>
  439.             <link rel="stylesheet" href="{{ asset('templatecms/carousel/css/style.css') }}"/>
  440.             </div>
  441.             <div class="clearfix"></div>
  442.             <div class="row">
  443.             <div class="col-md-12" >
  444.             <div class="resCarousel" data-items="1,3,4,4" data-slide="1" style="overflow: hidden; padding-left: 0px!important; padding-right: 0px!important;;">
  445.             <div class="resCarousel-inner">
  446.                 {% for review in liste_review %}
  447.                 <div class="item" style="border: none; padding-left: 0px; {% if loop.first %}margin-left: -7px;{% endif %}">
  448.                     <figure class="snip1139">
  449.                       <blockquote style="height: 100px; border-left: 2px solid #fff;">{{ review.description }} ..
  450.                       <a href="{{ path('produit_produit_afh_client_reviews', {'id': review.id}) }}" class="pull-right" style="margin-bottom: 10px; display: inline-block;">
  451.                         Lire la suite <span class="fa fa-chevron-right"></span>
  452.                         </a>
  453.                         <div class="arrow"></div>
  454.                       </blockquote>
  455.                       <div style="text-align: center; padding-bottom: 20px; background: #f4f4f4;">
  456.                       <img style="height: 150px;" src="{% if review.user != null and review.user.imgprofil != null %}{{ asset(review.user.imgprofil.getwebpath) }}{% else %}{{ asset('template/images/projets/afrique.png') }}{% endif %}" alt="sample3"/>
  457.                       </div>
  458.                       <div class="author">
  459.                         <h5 style="text-transform: capitalize;">{{ review.user.name(30) }}
  460.                         
  461.                         <div>
  462.                             <div class="star-ratings-css" style="margin-left: 0px; display: inline-block; float: left; width: 100px!important;">
  463.                               <div class="star-ratings-css-top" style="width: {{ ((review.avisuser/5)|round(2, 'ceil'))*100 }}%"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
  464.                               <div class="star-ratings-css-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
  465.                             </div>
  466.                         </div>
  467.                         
  468.                         <span style="float: right;">{{ review.avisuser }}</span>
  469.                         </h5>
  470.                       </div>
  471.                     </figure>
  472.                 </div>
  473.                 {% endfor %}
  474.                 
  475.                 <div class="item" style="border: none; padding-left: 0px; margin-left: -6px;">
  476.                     <a href="{{ path('produit_produit_afh_client_reviews') }}" >
  477.                     <figure class="snip1139">
  478.                       <div style="height: 100px; border-left: 2px solid #fff;">
  480.                       </div>
  481.                       <div style="text-align: center; padding-bottom: 70px; margin-top: -50px; background: #fff;">
  482.                       <img style="height: 150px;" src="{{ asset('template/images/plus.png') }}" alt="sample3"/>
  483.                       </div>
  484.                       <div class="author">
  485.                         <h5 style="text-transform: capitalize;">
  486.                         <div>
  487.                         Cliquez pour afficher la liste complète
  488.                         </div>
  489.                         </h5>
  490.                       </div>
  491.                     </figure>
  492.                     </a>
  493.                 </div>
  494.             </div>
  495.             <button class="btn btn-default leftLst pull-left" style="position: relative; margin-top: -200px; background: #fff; color: #333;"><i class="fa fa-fw fa-angle-left"></i></button>
  496.             <button class="btn btn-default rightLst pull-right" style="position: relative; margin-top: -200px; background: #fff; color: #333;"><i class="fa fa-fw fa-angle-right"></i></button>
  497.             </div>
  498.             </div>
  499.             </div>
  500.             
  501.             <div class="clearfix" style="padding: 7px; background: #fff;"></div>
  502.             <script type="text/javascript" src="{{ asset('templatecms/carousel/js/main.js') }}"></script>
  503.             </div>
  504.         </div>
  505.         
  506.     </div>
  507. </section>