templates/default/timeline.html.twig line 1

Open in your IDE?
  1. <div class="container">
  2.     <div class="sec-title centered mt-5">
  3.         <div class="separator"></div>
  4.         <h2>INTERVENTIONS</h2>
  5.     </div>
  6.     <div class="main-timeline">
  8.         <!-- start experience section-->
  9.         {% for item in inter1 %}
  10.             {% if item.langue == 'fr_fr' and '/fr/' in app.request.uri %}
  11.                 <div class="timeline">
  12.                     <div class="icon"></div>
  13.                     <div class="date-content">
  14.                         <div class="date-outer">
  15.                                     <span class="date">
  16. {#                                            <span class="month">150 000</span>#}
  17.                                     <span class="year">{{ item.title }}</span>
  18.                                     </span>
  19.                         </div>
  20.                     </div>
  21.                     <div class="timeline-content">
  22.                         <h5 class="title">{{item.summary | raw}}</h5>
  23. {#                        <p class="description">#}
  24. {#                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa#}
  25. {#                            scelerisque#}
  26. {#                            scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus#}
  27. {#                            dolor felis,#}
  28. {#                            eu ultrices elit molestie.#}
  29. {#                        </p>#}
  30.                     </div>
  31.                 </div>
  32.                 <!-- end experience section-->
  33.             {% elseif item.langue == 'en_en' and '/en/' in app.request.uri %}
  34.                 <div class="timeline">
  35.                     <div class="icon"></div>
  36.                     <div class="date-content">
  37.                         <div class="date-outer">
  38.                                     <span class="date">
  39. {#                                            <span class="month">150 000</span>#}
  40.                                     <span class="year">2014</span>
  41.                                     </span>
  42.                         </div>
  43.                     </div>
  44.                     <div class="timeline-content">
  45.                         <h5 class="title">Opération de titrisation de grande envergure</h5>
  46. {#                        <p class="description">#}
  47. {#                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa#}
  48. {#                            scelerisque#}
  49. {#                            scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus#}
  50. {#                            dolor felis,#}
  51. {#                            eu ultrices elit molestie.#}
  52. {#                        </p>#}
  53.                     </div>
  54.                 </div>
  55.                 <!-- end experience section-->
  56.             {% endif %}
  57.         {% endfor %}
  60.         <!-- start experience section-->
  61.         {% for item in inter2 %}
  62.             {% if item.langue == 'fr_fr' and '/fr/' in app.request.uri %}
  63.                 <div class="timeline">
  64.                     <div class="icon"></div>
  65.                     <div class="date-content">
  66.                         <div class="date-outer">
  67.                                     <span class="date">
  68. {#                                            <span class="month">150 000</span>#}
  69.                                     <span class="year">{{ item.title }}</span>
  70.                                     </span>
  71.                         </div>
  72.                     </div>
  73.                     <div class="timeline-content">
  74.                         <h5 class="title">{{item.summary | raw}}</h5>
  75.                         {#                        <p class="description">#}
  76.                         {#                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa#}
  77.                         {#                            scelerisque#}
  78.                         {#                            scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus#}
  79.                         {#                            dolor felis,#}
  80.                         {#                            eu ultrices elit molestie.#}
  81.                         {#                        </p>#}
  82.                     </div>
  83.                 </div>
  84.                 <!-- end experience section-->
  85.             {% elseif item.langue == 'en_en' and '/en/' in app.request.uri %}
  86.                 <div class="timeline">
  87.                     <div class="icon"></div>
  88.                     <div class="date-content">
  89.                         <div class="date-outer">
  90.                                     <span class="date">
  91. {#                                            <span class="month">150 000</span>#}
  92.                                     <span class="year">2015</span>
  93.                                     </span>
  94.                         </div>
  95.                     </div>
  96.                     <div class="timeline-content">
  97.                         <h5 class="title">Opération de titrisation de grande envergure</h5>
  98.                         <p class="description">
  99.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa
  100.                             scelerisque
  101.                             scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus
  102.                             dolor felis,
  103.                             eu ultrices elit molestie.
  104.                         </p>
  105.                     </div>
  106.                 </div>
  107.                 <!-- end experience section-->
  108.             {% endif %}
  109.         {% endfor %}
  111.         <!-- start experience section-->
  112.         {% for item in inter3 %}
  113.             {% if item.langue == 'fr_fr' and '/fr/' in app.request.uri %}
  114.                 <div class="timeline">
  115.                     <div class="icon"></div>
  116.                     <div class="date-content">
  117.                         <div class="date-outer">
  118.                                     <span class="date">
  119. {#                                            <span class="month">150 000</span>#}
  120.                                     <span class="year">{{ item.title }}</span>
  121.                                     </span>
  122.                         </div>
  123.                     </div>
  124.                     <div class="timeline-content">
  125.                         <h5 class="title">{{item.summary | raw}}</h5>
  126.                         {#                        <p class="description">#}
  127.                         {#                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa#}
  128.                         {#                            scelerisque#}
  129.                         {#                            scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus#}
  130.                         {#                            dolor felis,#}
  131.                         {#                            eu ultrices elit molestie.#}
  132.                         {#                        </p>#}
  133.                     </div>
  134.                 </div>
  135.                 <!-- end experience section-->
  136.             {% elseif item.langue == 'en_en' and '/en/' in app.request.uri %}
  137.                 <div class="timeline">
  138.                     <div class="icon"></div>
  139.                     <div class="date-content">
  140.                         <div class="date-outer">
  141.                                     <span class="date">
  142. {#                                            <span class="month">150 000</span>#}
  143.                                     <span class="year">2016</span>
  144.                                     </span>
  145.                         </div>
  146.                     </div>
  147.                     <div class="timeline-content">
  148.                         <h5 class="title">Opération de titrisation de grande envergure</h5>
  149.                         <p class="description">
  150.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa
  151.                             scelerisque
  152.                             scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus
  153.                             dolor felis,
  154.                             eu ultrices elit molestie.
  155.                         </p>
  156.                     </div>
  157.                 </div>
  158.                 <!-- end experience section-->
  159.             {% endif %}
  160.         {% endfor %}
  162.         <!-- start experience section-->
  163.         {% for item in inter4 %}
  164.             {% if item.langue == 'fr_fr' and '/fr/' in app.request.uri %}
  165.                 <div class="timeline">
  166.                     <div class="icon"></div>
  167.                     <div class="date-content">
  168.                         <div class="date-outer">
  169.                                     <span class="date">
  170. {#                                            <span class="month">150 000</span>#}
  171.                                     <span class="year">{{ item.title }}</span>
  172.                                     </span>
  173.                         </div>
  174.                     </div>
  175.                     <div class="timeline-content">
  176.                         <h5 class="title">{{item.summary | raw}}</h5>
  177.                         {#                        <p class="description">#}
  178.                         {#                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa#}
  179.                         {#                            scelerisque#}
  180.                         {#                            scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus#}
  181.                         {#                            dolor felis,#}
  182.                         {#                            eu ultrices elit molestie.#}
  183.                         {#                        </p>#}
  184.                     </div>
  185.                 </div>
  186.                 <!-- end experience section-->
  187.             {% elseif item.langue == 'en_en' and '/en/' in app.request.uri %}
  188.                 <div class="timeline">
  189.                     <div class="icon"></div>
  190.                     <div class="date-content">
  191.                         <div class="date-outer">
  192.                                     <span class="date">
  193. {#                                            <span class="month">150 000</span>#}
  194.                                     <span class="year">2023</span>
  195.                                     </span>
  196.                         </div>
  197.                     </div>
  198.                     <div class="timeline-content">
  199.                         <h5 class="title">Opération de titrisation de grande envergure</h5>
  200.                         <p class="description">
  201.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa
  202.                             scelerisque
  203.                             scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus
  204.                             dolor felis,
  205.                             eu ultrices elit molestie.
  206.                         </p>
  207.                     </div>
  208.                 </div>
  209.                 <!-- end experience section-->
  210.             {% endif %}
  211.         {% endfor %}
  213.     </div>
  214. </div>
  216. <style>
  217.     .main-timeline {
  218.         position: relative
  219.     }
  221.     .main-timeline:before {
  222.         content: "";
  223.         display: block;
  224.         width: 2px;
  225.         height: 100%;
  226.         background: #c6c6c6;
  227.         margin: 0 auto;
  228.         position: absolute;
  229.         top: 0;
  230.         left: 0;
  231.         right: 0
  232.     }
  234.     .main-timeline .timeline {
  235.         margin-bottom: 40px;
  236.         position: relative
  237.     }
  239.     .main-timeline .timeline:after {
  240.         content: "";
  241.         display: block;
  242.         clear: both
  243.     }
  245.     .main-timeline .icon {
  246.         width: 18px;
  247.         height: 18px;
  248.         line-height: 18px;
  249.         margin: auto;
  250.         position: absolute;
  251.         top: 0;
  252.         left: 0;
  253.         bottom: 0;
  254.         right: 0
  255.     }
  257.     .main-timeline .icon:before,
  258.     .main-timeline .icon:after {
  259.         content: "";
  260.         width: 100%;
  261.         height: 100%;
  262.         border-radius: 50%;
  263.         position: absolute;
  264.         top: 0;
  265.         left: 0;
  266.         transition: all 0.33s ease-out 0s
  267.     }
  269.     .main-timeline .icon:before {
  270.         background: #fff;
  271.         border: 2px solid #b53d55;
  272.         left: -3px
  273.     }
  275.     .main-timeline .icon:after {
  276.         border: 2px solid #c6c6c6;
  277.         left: 3px
  278.     }
  280.     .main-timeline .timeline:hover .icon:before {
  281.         left: 3px
  282.     }
  284.     .main-timeline .timeline:hover .icon:after {
  285.         left: -3px
  286.     }
  288.     .main-timeline .date-content {
  289.         width: 50%;
  290.         float: left;
  291.         margin-top: 22px;
  292.         position: relative
  293.     }
  295.     .main-timeline .date-content:before {
  296.         content: "";
  297.         width: 36.5%;
  298.         height: 2px;
  299.         background: #c6c6c6;
  300.         margin: auto 0;
  301.         position: absolute;
  302.         top: 0;
  303.         right: 10px;
  304.         bottom: 0
  305.     }
  307.     .main-timeline .date-outer {
  308.         width: 125px;
  309.         height: 125px;
  310.         font-size: 16px;
  311.         text-align: center;
  312.         margin: auto;
  313.         z-index: 1
  314.     }
  316.     .main-timeline .date-outer:before,
  317.     .main-timeline .date-outer:after {
  318.         content: "";
  319.         width: 125px;
  320.         height: 125px;
  321.         margin: 0 auto;
  322.         border-radius: 50%;
  323.         position: absolute;
  324.         top: 0;
  325.         left: 0;
  326.         right: 0;
  327.         transition: all 0.33s ease-out 0s
  328.     }
  330.     .main-timeline .date-outer:before {
  331.         background: #fff;
  332.         border: 2px solid #b53d55;
  333.         left: -6px
  334.     }
  336.     .main-timeline .date-outer:after {
  337.         border: 2px solid #c6c6c6;
  338.         left: 6px
  339.     }
  341.     .main-timeline .timeline:hover .date-outer:before {
  342.         left: 6px
  343.     }
  345.     .main-timeline .timeline:hover .date-outer:after {
  346.         left: -6px
  347.     }
  349.     .main-timeline .date {
  350.         width: 100%;
  351.         margin: auto;
  352.         position: absolute;
  353.         top: 35%;
  354.         left: 0
  355.     }
  357.     .main-timeline .month {
  358.         font-size: 18px;
  359.         font-weight: 700
  360.     }
  362.     .main-timeline .year {
  363.         display: block;
  364.         font-size: 30px;
  365.         font-weight: 700;
  366.         color: #232323;
  367.         line-height: 36px
  368.     }
  370.     .main-timeline .timeline-content {
  371.         width: 50%;
  372.         padding: 20px 0 20px 50px;
  373.         float: right
  374.     }
  376.     .main-timeline .title {
  377.         font-size: 19px;
  378.         font-weight: 700;
  379.         line-height: 24px;
  380.         margin: 0 0 15px 0;
  381.         margin-top: 30px;
  382.     }
  384.     .main-timeline .description {
  385.         margin-bottom: 0
  386.     }
  388.     .main-timeline .timeline:nth-child(2n) .date-content {
  389.         float: right
  390.     }
  392.     .main-timeline .timeline:nth-child(2n) .date-content:before {
  393.         left: 10px
  394.     }
  396.     .main-timeline .timeline:nth-child(2n) .timeline-content {
  397.         padding: 20px 50px 20px 0;
  398.         text-align: right
  399.     }
  401.     @media only screen and (max-width: 991px) {
  402.         .main-timeline .date-content {
  403.             margin-top: 35px
  404.         }
  406.         .main-timeline .date-content:before {
  407.             width: 22.5%
  408.         }
  410.         .main-timeline .timeline-content {
  411.             padding: 10px 0 10px 30px
  412.         }
  414.         .main-timeline .title {
  415.             font-size: 17px
  416.         }
  418.         .main-timeline .timeline:nth-child(2n) .timeline-content {
  419.             padding: 10px 30px 10px 0
  420.         }
  421.     }
  423.     @media only screen and (max-width: 767px) {
  424.         .main-timeline:before {
  425.             margin: 0;
  426.             left: 7px
  427.         }
  429.         .main-timeline .timeline {
  430.             margin-bottom: 20px
  431.         }
  433.         .main-timeline .timeline:last-child {
  434.             margin-bottom: 0
  435.         }
  437.         .main-timeline .icon {
  438.             margin: auto 0
  439.         }
  441.         .main-timeline .date-content {
  442.             width: 95%;
  443.             float: right;
  444.             margin-top: 0
  445.         }
  447.         .main-timeline .date-content:before {
  448.             display: none
  449.         }
  451.         .main-timeline .date-outer {
  452.             width: 110px;
  453.             height: 110px
  454.         }
  456.         .main-timeline .date-outer:before,
  457.         .main-timeline .date-outer:after {
  458.             width: 110px;
  459.             height: 110px
  460.         }
  462.         .main-timeline .date {
  463.             top: 30%
  464.         }
  466.         .main-timeline .year {
  467.             font-size: 24px
  468.         }
  470.         .main-timeline .timeline-content,
  471.         .main-timeline .timeline:nth-child(2n) .timeline-content {
  472.             width: 95%;
  473.             text-align: center;
  474.             padding: 10px 0
  475.         }
  477.         .main-timeline .title {
  478.             margin-bottom: 10px
  479.         }
  480.     }
  481. </style>