templates/base_front.html.twig line 1

  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="en-US">
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.     <meta name="author" content="SemiColonWeb">
  7.     <meta name="description"
  8.           content="Create Corporate Construction services Websites with Canvas Template. Get Canvas to build powerful websites easily with the Highly Customizable &amp; Best Selling Bootstrap Template, today.">
  10.     <!-- Font Imports -->
  11.     <link rel="preconnect" href="https://fonts.googleapis.com">
  12.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  13.     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Source+Sans+Pro:wght@300;400;600;700&display=swap"
  14.           rel="stylesheet">
  16.     <!-- Core Style -->
  17.     <link rel="stylesheet"  href="{{ asset('front/style.css')}}">
  19.     <!-- Font Icons -->
  20.     <link rel="stylesheet" href="{{ asset('front/css/font-icons.css')}}">
  22.     <!-- Plugins/Components CSS -->
  23.     <link rel="stylesheet" href="{{asset('front/css/swiper.css')}}">
  25.     <!-- Niche Demos -->
  26.     <link rel="stylesheet" href="{{asset('front/demos/construction/construction.css')}}">
  28.     <!-- Custom CSS -->
  29.     <link rel="stylesheet" href="{{asset('front/css/custom.css')}}">
  31.     <meta name="viewport" content="width=device-width, initial-scale=1">
  33.     <!-- Document Title
  34.     ============================================= -->
  35.     <title>Université Jendouba | Site Officiel</title>
  37. </head>
  38. <style type="text/css">
  39.     
  40. </style>
  42. <body class="stretched">
  44. <!-- Document Wrapper ============================================= -->
  45. <div id="wrapper">
  49. <!-- Top Bar ============================================= -->
  50. <div id="top-bar" class="bg-white py-2 border-bottom">
  51.     <div class="container">
  52.         <div class="row align-items-center justify-content-between">
  53.             <!-- Logo et Slogan -->
  54.             <div class="col-auto">
  55.                 <div class="d-flex align-items-center">
  56.                     <a href="{{ path('app_home') }}" class="d-flex align-items-center text-decoration-none">
  57.                         <img src="/front/images/logo_tunisia.png" alt="Université Jendouba" class="me-2" style="height: 40px;">
  58.                         <img src="/front/images/republique-tunisenne.png" alt="République Tunisienne" class="me-3" style="height: 40px;">
  59.                         <div class="d-none d-md-block">
  60.                             <div class="text-dark fw-bold fs-6">République Tunisienne</div>
  61.                             <div class="text-muted small" style="font-size: 0.75rem;">Ministère de l'Enseignement supérieur et de la Recherche scientifique</div>
  62.                         </div>
  63.                     </a>
  64.                 </div>
  65.             </div>
  67.             <!-- Liens Sociaux + Bouton -->
  68.             <div class="col-auto">
  69.                 <div class="d-flex align-items-center gap-3">
  70.                     <!-- Icônes Sociales (Style moderne) -->
  71.                     <div class="d-flex gap-2 ">
  72.                         <a href="#" class="social-link facebook">
  73.                             <div class="social-cercle">
  74.                                 <i class="fab fa-facebook-f"></i>
  75.                             </div>
  76.                             <span class="social-text">Facebook</span>
  77.                         </a>
  79.                        {#  <a href="#" class="social-link twitter">
  80.                             <div class="social-cercle">
  81.                                 <i class="fab fa-x-twitter"></i>
  82.                             </div>
  83.                             <span class="social-text">Twitter</span>
  84.                         </a>
  86.                         <a href="#" class="social-link instagram">
  87.                             <div class="social-cercle">
  88.                                 <i class="fab fa-instagram"></i>
  89.                             </div>
  90.                             <span class="social-text">Instagram</span>
  91.                         </a>#}
  92.                         
  93.                     </div>
  95.                     <!-- Bouton Intranet (Style dégradé) -->
  96.                     <a href="{{ path('app_login') }}" class="btn-intranet">
  97.                         <i class="fas fa-lock me-1"></i> Espace Intranet
  98.                     </a>
  99.                 </div>
  100.             </div>
  101.         </div>
  102.     </div>
  103. </div>
  104. <!-- #top-bar end -->
  106.     <!-- Header ============================================= -->
  107.     <header id="header" class="header-size-sm" data-sticky-shrink="false">
  108.         {#<div class="container">
  109.             <div class="header-row">
  110.                 <!-- Logo ============================================= -->
  111.                 <div id="logo" class="ms-auto ms-lg-0 me-lg-auto">
  112.                     <a target="_self" href="{{ path('app_home') }}">
  113.                         <img class="logo-default" srcset="/front/images/logo-jendouba.png, /front/images/logo-jendouba.png 2x"
  114.                              src="/front/images/logo-jendouba.png" alt="Université Jendouba">
  115.                     </a>
  116.                 </div>
  117.                 <!-- #logo end -->
  118.                 <div class="header-misc d-none d-lg-flex">
  119.                     <ul class="header-extras">
  120.                         <li>
  121.                             <i class="i-plain bi-telephone m-0"></i>
  122.                             <div class="he-text">
  123.                                 Appelez-nous <span>(+216) 78 750 280</span>
  124.                             </div>
  125.                         </li>
  126.                         <li>
  127.                             <i class="i-plain bi-envelope m-0"></i>
  128.                             <div class="he-text">
  129.                                 Email <span>info@univ-jendouba.tn</span>
  130.                             </div>
  131.                         </li>
  132.                         <li>
  133.                             <i class="i-plain bi-clock m-0"></i>
  134.                             <div class="he-text">
  135.                                 Horaires de travail <span>Du lundi au samedi, de 09h à 18h</span>
  136.                             </div>
  137.                         </li>
  138.                     </ul>
  139.                 </div>
  140.             </div>
  141.         </div>#}
  143.         <div id="header-wrap">
  144.             <div class="container">
  145.                 <div class="header-row justify-content-between flex-row-reverse flex-lg-row justify-content-lg-center">
  146.                     <!-- Logo amélioré avec animation -->
  147.                     <div id="logo" class="ms-auto ms-lg-0 me-lg-auto">
  148.                         <a target="_self" href="{{ path('app_home') }}" class="logo-link" style="width: auto;">
  149.                             <img class="logo-default" srcset="/front/images/logo-jendouba.png, /front/images/logo-jendouba.png 2x"
  150.                             src="/front/images/logo-jendouba.png" alt="Université Jendouba">
  151.                             <span class="bloc-slogon-tn">
  152.                                 <text class="slogon-logo-tn">
  153.                                     Plateforme de Recherche Scientifique
  154.                                 </text>
  155.                             </span>
  156.                         </a>
  157.                     </div>
  161.                     <!-- Menu mobile amélioré -->
  162.                     <div class="primary-menu-trigger">
  163.                         <button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
  164.                             <span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
  165.                         </button>
  166.                     </div>
  168.                     <!-- Navigation principale améliorée -->
  169.                     <nav class="primary-menu with-arrows">
  170.                         <ul class="menu-container">
  171.                             <li class="menu-item ">
  172.                                 <a class="menu-link" href="{{ path('app_home') }}">
  173.                                     <div><i class="bi bi-house-door me-1"></i> Accueil</div>
  174.                                 </a>
  175.                             </li>
  176.                             <li class="menu-item">
  177.                                 <a class="menu-link" href="{{ path('app_laboratoire') }}">
  178.                                     <div><i class="bi bi-building me-1"></i> Structures</div>
  179.                                 </a>
  180.                             </li>
  181.                             <li class="menu-item">
  182.                                 <a class="menu-link" href="{{ path('app_projets') }}">
  183.                                     <div><i class="bi bi-folder me-1"></i> Projets</div>
  184.                                 </a>
  185.                             </li>
  186.                             <li class="menu-item">
  187.                                 <a class="menu-link" href="{{ path('app_chercheurs') }}">
  188.                                     <div><i class="bi bi-people me-1"></i> Chercheurs</div>
  189.                                 </a>
  190.                             </li>
  191.                             <li class="menu-item">
  192.                                 <a class="menu-link" href="{{ path('app_publications') }}">
  193.                                     <div><i class="bi bi-file-text me-1"></i> Publications</div>
  194.                                 </a>
  195.                             </li>
  196.                         </ul>
  197.                     </nav>
  198.                 </div>
  199.             </div>
  200.         </div>
  203.         <div class="header-wrap-clone"></div>
  204.     </header>
  205.     <!-- #header end -->
  206. {% block body %}
  207.     {#<section id="slider" class="slider-element slider-parallax swiper_wrapper min-vh-75" data-loop="true">
  209.         <div class="swiper swiper-parent">
  210.             <div class="swiper-wrapper">
  211.                 <div class="swiper-slide">
  212.                     <div class="container">
  213.                         <div class="row mt-6">
  214.                             <div class="col-lg-6"></div>
  215.                             
  216.                         </div>
  217.                     </div>
  218.                     <div class="swiper-slide-bg"
  219.                          style="background-image: url('front/images/uj-background.jpg'); background-position: center center;"></div>
  220.                 </div>
  221.             </div>
  223.         </div>
  225.     </section>
  227.     <!-- Content ============================================= -->
  228.     <section id="content">
  229.         <div class="content-wrap">
  231.             <div class="promo promo-light promo-full promo-uppercase p-5 mb-5 header-stick">
  232.                 <div class="container">
  233.                     <div class="row align-items-center">
  234.                         <div class="col-12 col-lg">
  235.                             <h3 style="letter-spacing: 2px;">Start Planning your New Dream Home with us</h3>
  236.                             <span>We strive to provide Our Customers with Top Notch Support to make their Theme</span>
  237.                         </div>
  238.                         <div class="col-12 col-lg-auto mt-4 mt-lg-0">
  239.                             <a href="#" class="button button-large button-circle button-black m-0">Lire la suite</a>
  240.                         </div>
  241.                     </div>
  242.                 </div>
  243.             </div>
  245.             <div class="container--  mb-6">
  246.                 <h2 class="text-center mb-5 ls-1">Some of Our Esteemed Projects:</h2>
  247.                 <div class="row justify-content-center">
  248.                     <div class="col-sm-6 col-lg-3">
  249.                         <div class="feature-box media-box">
  250.                             <div class="fbox-media">
  251.                                 <img class="rounded" src="/front/demos/construction/images/services/1.jpg"
  252.                                      alt="Why choose Us?">
  253.                             </div>
  254.                             <div class="fbox-content px-2">
  255.                                 <h3>Skilled Professionals.<span class="subtitle">Your Property in Good Hands.</span>
  256.                                 </h3>
  257.                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis
  258.                                     voluptatum est voluptatem accusamus molestiae eaque perspiciatis mollitia.</p>
  259.                             </div>
  260.                         </div>
  261.                     </div>
  263.                     <div class="col-sm-6 col-lg-3">
  264.                         <div class="feature-box media-box">
  265.                             <div class="fbox-media">
  266.                                 <img class="rounded" src="/front/images/services/1.jpg" alt="Effective Planning">
  267.                             </div>
  268.                             <div class="fbox-content px-2">
  269.                                 <h3>Effective Planning.<span class="subtitle">Construction Process Organized.</span>
  270.                                 </h3>
  271.                                 <p>Porro repellat vero sapiente amet vitae quibusdam necessitatibus consectetur, labore
  272.                                     totam. Accusamus perspiciatis asperiores labore esse.</p>
  273.                             </div>
  274.                         </div>
  275.                     </div>
  277.                     <div class="col-sm-6 col-lg-3">
  278.                         <div class="feature-box media-box">
  279.                             <div class="fbox-media">
  280.                                 <img class="rounded" src="/front/demos/construction/images/services/2.jpg"
  281.                                      alt="Why choose Us?">
  282.                             </div>
  283.                             <div class="fbox-content px-2">
  284.                                 <h3>Risk Management.<span class="subtitle">We have got you Covered.</span></h3>
  285.                                 <p>Quos, non, esse eligendi ab accusantium voluptatem. Maxime eligendi beatae, atque
  286.                                     tempora ullam. Vitae delectus quia, consequuntur rerum quo.</p>
  287.                             </div>
  288.                         </div>
  289.                     </div>
  291.                     <div class="col-sm-6 col-lg-3">
  292.                         <div class="feature-box media-box">
  293.                             <div class="fbox-media">
  294.                                 <img class="rounded" src="/front/demos/construction/images/services/2.jpg"
  295.                                      alt="Why choose Us?">
  296.                             </div>
  297.                             <div class="fbox-content px-2">
  298.                                 <h3>Risk Management.<span class="subtitle">We have got you Covered.</span></h3>
  299.                                 <p>Quos, non, esse eligendi ab accusantium voluptatem. Maxime eligendi beatae, atque
  300.                                     tempora ullam. Vitae delectus quia, consequuntur rerum quo.</p>
  301.                             </div>
  302.                         </div>
  303.                     </div>
  304.                 </div>
  305.             </div>
  306.             <!--<div class="line mt-4"></div>-->
  307.             <div class="container">
  308.                 <div class="row align-items-stretch col-mb-50">
  309.                     <div class="col-lg-4 col-md-6">
  310.                         <div class="feature-box fbox-plain">
  311.                             <div class="fbox-icon">
  312.                                 <a href="#"><img src="/front/demos/construction/images/icons/building.png"
  313.                                                  alt="Concrete Developments"></a>
  314.                             </div>
  315.                             <div class="fbox-content">
  316.                                 <h3>Concrete Developments</h3>
  317.                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem minima, facere
  318.                                     distinctio placeat.</p>
  319.                             </div>
  320.                         </div>
  321.                     </div>
  322.                     <div class="col-lg-4 col-md-6">
  323.                         <div class="feature-box fbox-plain">
  324.                             <div class="fbox-icon">
  325.                                 <a href="#"><img src="/front/demos/construction/images/icons/bank.png"
  326.                                                  alt="Finance Assistance"></a>
  327.                             </div>
  328.                             <div class="fbox-content">
  329.                                 <h3>Finance Assistance</h3>
  330.                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem minima, facere
  331.                                     distinctio placeat.</p>
  332.                             </div>
  333.                         </div>
  334.                     </div>
  335.                     <div class="col-lg-4 col-md-6">
  336.                         <div class="feature-box fbox-plain">
  337.                             <div class="fbox-icon">
  338.                                 <a href="#"><img src="/front/demos/construction/images/icons/drawer.png"
  339.                                                  alt="Interiorly Designed"></a>
  340.                             </div>
  341.                             <div class="fbox-content">
  342.                                 <h3>Interiorly Designed</h3>
  343.                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem minima, facere
  344.                                     distinctio placeat.</p>
  345.                             </div>
  346.                         </div>
  347.                     </div>
  348.                     <div class="col-lg-4 col-md-6">
  349.                         <div class="feature-box fbox-plain">
  350.                             <div class="fbox-icon">
  351.                                 <a href="#"><img src="/front/demos/construction/images/icons/paper-money.png"
  352.                                                  alt="Cost Effective Solutions"></a>
  353.                             </div>
  354.                             <div class="fbox-content">
  355.                                 <h3>Cost Effective Solutions</h3>
  356.                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem minima, facere
  357.                                     distinctio placeat.</p>
  358.                             </div>
  359.                         </div>
  360.                     </div>
  361.                     <div class="col-lg-4 col-md-6">
  362.                         <div class="feature-box fbox-plain">
  363.                             <div class="fbox-icon">
  364.                                 <a href="#"><img src="/front/demos/construction/images/icons/traffic-cone.png"
  365.                                                  alt="Smart Builders"></a>
  366.                             </div>
  367.                             <div class="fbox-content">
  368.                                 <h3>Smart Builders</h3>
  369.                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem minima, facere
  370.                                     distinctio placeat.</p>
  371.                             </div>
  372.                         </div>
  373.                     </div>
  374.                     <div class="col-lg-4 col-md-6">
  375.                         <div class="feature-box fbox-plain">
  376.                             <div class="fbox-icon">
  377.                                 <a href="#"><img src="/front/demos/construction/images/icons/paint-brush.png"
  378.                                                  alt="Quality Infrastructure"></a>
  379.                             </div>
  380.                             <div class="fbox-content">
  381.                                 <h3>Quality Infrastructure</h3>
  382.                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem minima, facere
  383.                                     distinctio placeat.</p>
  384.                             </div>
  385.                         </div>
  386.                     </div>
  387.                 </div>
  389.             </div>
  391.             <div class="container">
  392.                 <div class="line"></div>
  394.                 <div class="row col-mb-10">
  395.                     <div class="col-md-5">
  396.                         <h4>Nos Partenaires</h4>
  397.                         <p>We prize our Clients more than everything else. We strive to provide Quality Services to all
  398.                             our Clients on a Priority Basis. You are invited to join our Clients List and enjoy our
  399.                             Services. <a href="#">See more...</a></p>
  401.                         <ul class="clients-grid row row-cols-2 row-cols-sm-3 mb-0">
  402.                             <li class="grid-item" style="padding: 20px;"><a href="#"><img src="/front/images/clients/1.png"
  403.                                                                                           alt="Clients"></a></li>
  404.                             <li class="grid-item" style="padding: 20px;"><a href="#"><img src="/front/images/clients/2.png"
  405.                                                                                           alt="Clients"></a></li>
  406.                             <li class="grid-item" style="padding: 20px;"><a href="#"><img src="/front/images/clients/3.png"
  407.                                                                                           alt="Clients"></a></li>
  408.                             <li class="grid-item" style="padding: 20px;"><a href="#"><img src="/front/images/clients/4.png"
  409.                                                                                           alt="Clients"></a></li>
  410.                             <li class="grid-item" style="padding: 20px;"><a href="#"><img src="/front/images/clients/5.png"
  411.                                                                                           alt="Clients"></a></li>
  412.                             <li class="grid-item" style="padding: 20px;"><a href="#"><img src="/front/images/clients/6.png"
  413.                                                                                           alt="Clients"></a></li>
  414.                         </ul>
  415.                     </div>
  417.                     <div class="col-md-7">
  418.                         <h4>Actualités Récentes</h4>
  420.                         <div id="oc-posts" class="owl-carousel posts-carousel carousel-widget posts-md" data-margin="20"
  421.                              data-nav="true" data-pagi="true" data-items-xs="1" data-items-xl="2">
  423.                             <div class="oc-item">
  424.                                 <div class="entry">
  425.                                     <div class="entry-image">
  426.                                         <a href="/front/demos/construction/images/blog/5.jpg" data-lightbox="image"><img
  427.                                                 src="front/demos/construction/images/blog/5.jpg"
  428.                                                 alt="Standard Post with Image"></a>
  429.                                     </div>
  430.                                     <div class="entry-title title-sm text-transform-none">
  431.                                         <h3><a href="#">Upcoming Projects in Australia</a></h3>
  432.                                     </div>
  433.                                     <div class="entry-meta">
  434.                                         <ul>
  435.                                             <li>10th Feb 2021</li>
  436.                                         </ul>
  437.                                     </div>
  438.                                     <div class="entry-content">
  439.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate,
  440.                                             asperiores quod est tenetur in.</p>
  441.                                     </div>
  442.                                 </div>
  443.                             </div>
  445.                             <div class="oc-item">
  446.                                 <div class="entry">
  447.                                     <div class="entry-image">
  448.                                         <div class="fslider" data-arrows="false" data-lightbox="gallery">
  449.                                             <div class="flexslider">
  450.                                                 <div class="slider-wrap">
  451.                                                     <div class="slide"><a href="demos/construction/images/blog/2.jpg"
  452.                                                                           data-lightbox="gallery-item"><img
  453.                                                             src="/front/demos/construction/images/blog/2.jpg"
  454.                                                             alt="Standard Post with Gallery"></a></div>
  455.                                                     <div class="slide"><a href="/front/demos/construction/images/blog/1.jpg"
  456.                                                                           data-lightbox="gallery-item"><img
  457.                                                             src="/front/demos/construction/images/blog/1.jpg"
  458.                                                             alt="Standard Post with Gallery"></a></div>
  459.                                                     <div class="slide"><a href="/front/demos/construction/images/blog/3.jpg"
  460.                                                                           data-lightbox="gallery-item"><img
  461.                                                             src="/front/demos/construction/images/blog/3.jpg"
  462.                                                             alt="Standard Post with Gallery"></a></div>
  463.                                                 </div>
  464.                                             </div>
  465.                                         </div>
  466.                                     </div>
  467.                                     <div class="entry-title title-sm text-transform-none">
  468.                                         <h3><a href="#">Real Estate just got a little more Expensive</a></h3>
  469.                                     </div>
  470.                                     <div class="entry-meta">
  471.                                         <ul>
  472.                                             <li>24th Feb 2021</li>
  473.                                         </ul>
  474.                                     </div>
  475.                                     <div class="entry-content">
  476.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione,
  477.                                             voluptatem, dolorem animi nisi autem!</p>
  478.                                     </div>
  479.                                 </div>
  480.                             </div>
  482.                             <div class="oc-item">
  483.                                 <div class="entry">
  484.                                     <div class="entry-image">
  485.                                         <a href="/front/demos/construction/images/blog/4.jpg" data-lightbox="image"><img
  486.                                                 src="/front/demos/construction/images/blog/4.jpg"
  487.                                                 alt="Standard Post with Image"></a>
  488.                                     </div>
  489.                                     <div class="entry-title title-sm text-transform-none">
  490.                                         <h3><a href="#">Global Excellence Construction Award</a></h3>
  491.                                     </div>
  492.                                     <div class="entry-meta">
  493.                                         <ul>
  494.                                             <li>5th May 2021</li>
  495.                                         </ul>
  496.                                     </div>
  497.                                     <div class="entry-content">
  498.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate,
  499.                                             asperiores quod est tenetur in.</p>
  500.                                     </div>
  501.                                 </div>
  502.                             </div>
  504.                         </div>
  506.                     </div>
  507.                 </div>
  508.             </div>
  511.             <div class="section parallax scroll-detect dark" style="padding: 60px 0; margin: 1rem 0;">
  512.                 <img src="/front/demos/construction/images/slider/1.jpg" class="parallax-bg">
  514.                 <div class="fslider" data-arrows="false" style="z-index: 2;">
  515.                     <div class="owl-carousel carousel-widget text-center mw-xs mx-auto dark" data-items="1"
  516.                          data-autoplay="5000" data-nav="false">
  517.                         <div class="row">
  518.                             <div class="col-12">
  519.                                 <img class="rounded-circle mx-auto w-auto mb-4" src="/front/images/testimonials/1.jpg"
  520.                                      width="64" height="64" alt="Customer Testimonails">
  521.                                 <h3 class="mb-4 lh-base fw-normal font-secondary">Seamlessly Lorem, ipsum dolor sit amet
  522.                                     consectetur adipisicing elit. Quia rerum porro est delectus ad in vitae neque
  523.                                     nostrum nesciunt.</h3>
  524.                             </div>
  525.                             <div class="d-flex align-items-center justify-content-center">
  526.                                 <div>
  527.                                     <h4 class="h6 mb-0 fw-medium">Alex Coman</h4>
  528.                                     <small class="text-white-50">Apple Inc.</small>
  529.                                 </div>
  530.                             </div>
  531.                         </div>
  533.                         <div class="row">
  534.                             <div class="col-12">
  535.                                 <img class="rounded-circle mx-auto w-auto mb-4" src="/front/images/testimonials/2.jpg"
  536.                                      width="64" height="64" alt="Customer Testimonails">
  537.                                 <h3 class="mb-4 lh-base fw-normal font-secondary">Seamlessly conceptualize multimedia
  538.                                     based web services for optimal human capital. Collaboratively evisculate e-business
  539.                                     value.</h3>
  540.                             </div>
  541.                             <div class="d-flex align-items-center justify-content-center">
  542.                                 <div>
  543.                                     <h4 class="h6 mb-0 fw-medium">John Coman</h4>
  544.                                     <small class="text-white-50">Apple Inc.</small>
  545.                                 </div>
  546.                             </div>
  547.                         </div>
  549.                         <div class="row">
  550.                             <div class="col-12">
  551.                                 <img class="rounded-circle mx-auto w-auto mb-4" src="/front/images/testimonials/3.jpg"
  552.                                      width="64" height="64" alt="Customer Testimonails">
  553.                                 <h3 class="mb-4 lh-base fw-normal font-secondary">Lorem, ipsum dolor sit amet
  554.                                     consectetur adipisicing elit. Molestias facilis ea voluptatem cum.</h3>
  555.                             </div>
  556.                             <div class="d-flex align-items-center justify-content-center">
  557.                                 <div>
  558.                                     <h4 class="h6 mb-0 fw-medium">Ricky Coman</h4>
  559.                                     <small class="text-white-50">Apple Inc.</small>
  560.                                 </div>
  561.                             </div>
  562.                         </div>
  563.                     </div>
  564.                 </div>
  566.                 <div class="video-wrap" style="z-index: 1;">
  567.                     <div class="video-overlay" style="background: rgba(241,128,82,0.9);"></div>
  568.                 </div>
  570.             </div>
  572.             <div class="container mt-6 cleafix">
  573.                 <div class="row col-mb-50">
  574.                     <div class="col-md-8">
  576.                         <ul class="nav canvas-tabs tabs nav-tabs nav-fill mb-3" id="construction-tabs" role="tablist"
  577.                             style="--bs-nav-link-font-weight: 500;">
  578.                             <li class="nav-item" role="presentation">
  579.                                 <button class="nav-link active" id="construction-tab-1" data-bs-toggle="pill"
  580.                                         data-bs-target="#tab-1" type="button"
  581.                                         role="tab" aria-controls="construction-tab-1" aria-selected="true">Why Us?
  582.                                 </button>
  583.                             </li>
  584.                             <li class="nav-item" role="presentation">
  585.                                 <button class="nav-link" id="construction-tab-2" data-bs-toggle="pill"
  586.                                         data-bs-target="#tab-2" type="button"
  587.                                         role="tab" aria-controls="construction-tab-2" aria-selected="false">Work Ethic
  588.                                 </button>
  589.                             </li>
  590.                             <li class="nav-item" role="presentation">
  591.                                 <button class="nav-link" id="construction-tab-3" data-bs-toggle="pill"
  592.                                         data-bs-target="#tab-3"
  593.                                         type="button" role="tab" aria-controls="construction-tab-3"
  594.                                         aria-selected="false">Team
  595.                                 </button>
  596.                             </li>
  597.                             <li class="nav-item" role="presentation">
  598.                                 <button class="nav-link" id="construction-tab-4" data-bs-toggle="pill"
  599.                                         data-bs-target="#tab-4"
  600.                                         type="button" role="tab" aria-controls="construction-tab-4"
  601.                                         aria-selected="false">Locations
  602.                                 </button>
  603.                             </li>
  604.                         </ul>
  606.                         <div id="canvas-TabContent" class="tab-content">
  608.                             <div class="tab-pane show active" id="tab-1" role="tabpanel" aria-labelledby="canvas-tab-1"
  609.                                  tabindex="0">
  610.                                 <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
  611.                                     arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
  612.                                     Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor
  613.                                     ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.
  614.                                     Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et
  615.                                     mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum.
  616.                                     Phasellus ipsum. Nunc tristique tempus lectus.</p>
  617.                                 <div class="row col-mb-30">
  618.                                     <div class="col-sm-6 col-lg-3 text-center">
  619.                                         <div class="counter ls-1 fw-semibold" style="color: #D2D2D2;"><span
  620.                                                 data-from="100" data-to="964" data-refresh-interval="50"
  621.                                                 data-speed="2000"></span></div>
  622.                                         <h5>Floors Built</h5>
  623.                                     </div>
  625.                                     <div class="col-sm-6 col-lg-3 text-center">
  626.                                         <div class="counter ls-1 fw-semibold" style="color: #D2D2D2;"><span
  627.                                                 data-from="100" data-to="8514" data-refresh-interval="50"
  628.                                                 data-speed="2500"></span></div>
  629.                                         <h5>Employees</h5>
  630.                                     </div>
  632.                                     <div class="col-sm-6 col-lg-3 text-center">
  633.                                         <div class="counter ls-1 fw-semibold" style="color: #D2D2D2;"><span
  634.                                                 data-from="100" data-to="458" data-refresh-interval="50"
  635.                                                 data-speed="3500"></span></div>
  636.                                         <h5>Happy Clients</h5>
  637.                                     </div>
  639.                                     <div class="col-sm-6 col-lg-3 text-center">
  640.                                         <div class="counter ls-1 fw-semibold" style="color: #D2D2D2;"><span
  641.                                                 data-from="14" data-to="159" data-refresh-interval="15"
  642.                                                 data-speed="2700"></span></div>
  643.                                         <h5>Cities Served</h5>
  644.                                     </div>
  645.                                 </div>
  646.                             </div>
  647.                             <div class="tab-pane" id="tab-2" role="tabpanel" aria-labelledby="canvas-tab-2"
  648.                                  tabindex="0">
  649.                                 <img src="/front/demos/construction/images/projects/3.jpg" width="260" alt="Image"
  650.                                      class="img-thumbnail alignleft">
  651.                                 <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra
  652.                                     massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget
  653.                                     luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
  654.                                     aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent
  655.                                     in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare
  656.                                     consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat.
  657.                                     Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis
  658.                                     lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et
  659.                                     purus.</p>
  660.                             </div>
  661.                             <div class="tab-pane" id="tab-3" role="tabpanel" aria-labelledby="canvas-tab-3"
  662.                                  tabindex="0">
  663.                                 <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
  664.                                     pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
  665.                                     Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
  666.                                     nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
  667.                                     pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
  668.                                     enim, pretium nec, feugiat nec, luctus a, lacus.</p>
  669.                                 <div class="row col-mb-30">
  670.                                     <div class="col-sm-6 col-md-4">
  671.                                         <ul class="iconlist mb-0">
  672.                                             <li><i class="fa-solid fa-check"></i> 100% Assurance</li>
  673.                                             <li><i class="fa-solid fa-check"></i> Hard Working</li>
  674.                                             <li><i class="fa-solid fa-check"></i> Trustworthy</li>
  675.                                         </ul>
  676.                                     </div>
  677.                                     <div class="col-sm-6 col-md-4">
  678.                                         <ul class="iconlist mb-0">
  679.                                             <li><i class="fa-solid fa-check"></i> Intelligent</li>
  680.                                             <li><i class="fa-solid fa-check"></i> Always Curious</li>
  681.                                             <li><i class="fa-solid fa-check"></i> Perfectionists</li>
  682.                                         </ul>
  683.                                     </div>
  684.                                     <div class="col-sm-6 col-md-4">
  685.                                         <ul class="iconlist mb-0">
  686.                                             <li><i class="fa-solid fa-check"></i> Friendly &amp; Helpful</li>
  687.                                             <li><i class="fa-solid fa-check"></i> Accomodating Nature</li>
  688.                                             <li><i class="fa-solid fa-check"></i> Available 24x7</li>
  689.                                         </ul>
  690.                                     </div>
  691.                                 </div>
  692.                             </div>
  693.                             <div class="tab-pane" id="tab-4" role="tabpanel" aria-labelledby="canvas-tab-4"
  694.                                  tabindex="0">
  696.                                 <div class="row col-mb-30">
  697.                                     <div class="col-md-7">
  698.                                         <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut
  699.                                             pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed
  700.                                             fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut
  701.                                             tempus eros massa ut dolor.</p>
  702.                                         <div class="row col-mb-30">
  703.                                             <div class="col-md-6">
  704.                                                 <address>
  705.                                                     <strong>Headquarters:</strong><br>
  706.                                                     795 Folsom Ave, Suite 600<br>
  707.                                                     San Francisco, CA 94107<br>
  708.                                                 </address>
  709.                                             </div>
  710.                                             <div class="col-md-6">
  711.                                                 <abbr title="Phone Number"><strong>Phone:</strong></abbr> (1) 8547
  712.                                                 632521<br>
  713.                                                 <abbr title="Fax"><strong>Fax:</strong></abbr> (1) 11 4752 1433<br>
  714.                                                 <abbr title="Email Address"><strong>Email:</strong></abbr>
  715.                                                 info@canvas.com
  716.                                             </div>
  717.                                         </div>
  718.                                     </div>
  719.                                     <div class="col-md-5">
  720.                                         <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.925819998654!2d144.9613620758663!3d-37.81520647197522!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b4758afc1d%3A0x3119cc820fdfc62e!2sEnvato!5e0!3m2!1sen!2sin!4v1683119849609!5m2!1sen!2sin"
  721.                                                 width="600" height="450" style="border:0;" allowfullscreen=""
  722.                                                 loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  723.                                     </div>
  724.                                 </div>
  726.                             </div>
  728.                         </div>
  730.                     </div>
  732.                     <div class="col-md-4">
  734.                         <div class="widget quick-contact-widget form-widget">
  735.                             <h4>Contactez-Nous</h4>
  736.                             <div class="form-result"></div>
  737.                             <form id="quick-contact-form" name="quick-contact-form" action="include/form.php"
  738.                                   method="post" class="quick-contact-form mb-0">
  739.                                 <div class="form-process">
  740.                                     <div class="css3-spinner">
  741.                                         <div class="css3-spinner-scaler"></div>
  742.                                     </div>
  743.                                 </div>
  744.                                 <input type="text" class="required form-control mb-2" id="quick-contact-form-name"
  745.                                        name="quick-contact-form-name" value="" placeholder="Full Name">
  746.                                 <input type="text" class="required form-control email mb-2"
  747.                                        id="quick-contact-form-email" name="quick-contact-form-email" value=""
  748.                                        placeholder="Email Address">
  749.                                 <textarea class="required form-control mb-2 short-textarea"
  750.                                           id="quick-contact-form-message" name="quick-contact-form-message" rows="4"
  751.                                           cols="30" placeholder="Message"></textarea>
  752.                                 <input type="text" class="d-none" id="quick-contact-form-botcheck"
  753.                                        name="quick-contact-form-botcheck" value="">
  754.                                 <input type="hidden" name="prefix" value="quick-contact-form-">
  755.                                 <button type="submit" id="quick-contact-form-submit" name="quick-contact-form-submit"
  756.                                         class="button button-small button-3d m-0" value="submit">Envoyer
  757.                                 </button>
  758.                             </form>
  760.                         </div>
  762.                     </div>
  763.                 </div>
  764.             </div>
  766.             <!--<div class="line mt-4"></div>-->
  768.         </div>
  769.     </section>#}
  770.     <!-- #content end -->
  771. {% endblock %}
  772.     <!-- Footer ============================================= -->
  775.     <footer id="footer" class="dark">
  776.         <div class="container">
  778.             <!-- Footer Widgets ============================================= -->
  779.             <div class="footer-widgets-wrap" style="padding-top: 2rem;">
  781.                 <div class="row">
  782.                     <div class="col-lg-12">
  783.                         <div class="widget">
  785.                             <img src="/front/images/logo-transparent.png" alt="Image" class="alignleft">
  787.                             <h4>Contacter-nous</h4>
  788.                             <p style="text-align: justify">
  789.                                 Adresse : Campus Universitaire Mohamed Yaalaoui, Avenue de l´Union du Maghreb Arabe 8189 Jendouba Nord.
  790.                             </p>
  791.                             
  792.                             <div class="row col-mb-30">
  793.                                 <div class="col-lg-4 col-xs-12">
  794.                                     <div class="footer-big-contacts">
  795.                                         <span>Email :</span>
  796.                                         contact@uj.rnu.tn
  797.                                     </div>
  798.                                 </div>
  799.                                 <div class="col-lg-4 col-xs-12">
  800.                                     <div class="footer-big-contacts">
  801.                                         <span>Tél :</span>
  802.                                         (+216) 78 611 300
  803.                                     </div>
  804.                                 </div>
  805.                                 <div class="col-lg-4 col-xs-12">
  806.                                     <div class="footer-big-contacts">
  807.                                         <span>Fax :</span>
  808.                                         (+216) 78 611 299
  809.                                     </div>
  810.                                 </div>
  811.                             </div>
  813.                             <div class="line" style="margin: 30px 0;"></div>
  815.                             {#<div class="row col-mb-30">
  816.                                 <div class="col-lg-3 col-6 widget_links">
  817.                                     <ul>
  818.                                         <li><a href="#">Home</a></li>
  819.                                         <li><a href="#">About</a></li>
  820.                                         <li><a href="#">FAQs</a></li>
  821.                                     </ul>
  822.                                 </div>
  824.                                 <div class="col-lg-3 col-6 widget_links">
  825.                                     <ul>
  826.                                         <li><a href="#">Shop</a></li>
  827.                                         <li><a href="#">Portfolio</a></li>
  828.                                         <li><a href="#">Blog</a></li>
  829.                                     </ul>
  830.                                 </div>
  832.                                 <div class="col-lg-3 col-6 widget_links">
  833.                                     <ul>
  834.                                         <li><a href="#">Corporate</a></li>
  835.                                         <li><a href="#">Agency</a></li>
  836.                                         <li><a href="#">eCommerce</a></li>
  837.                                     </ul>
  838.                                 </div>
  840.                                 <div class="col-lg-3 col-6 widget_links">
  841.                                     <ul>
  842.                                         <li><a href="#">Restaurant</a></li>
  843.                                         <li><a href="#">Wedding</a></li>
  844.                                         <li><a href="#">App Showcase</a></li>
  845.                                     </ul>
  846.                                 </div>
  847.                             </div>#}
  849.                         </div>
  850.                     </div>
  852.                    {# <div class="col-lg-3 mt-5 mt-lg-0">
  853.                         {#<div class="widget">
  855.                             <div class="row col-mb-30">
  856.                                 <div class="col-12">
  857.                                     <div class="footer-big-contacts">
  858.                                         <span>Tél:</span>
  859.                                         (+216) 78 550 410
  860.                                     </div>
  861.                                 </div>
  863.                                 <div class="col-12">
  864.                                     <div class="footer-big-contacts">
  865.                                         <span>Email:</span>
  866.                                         info@univ-jendouba.tn
  867.                                     </div>
  868.                                 </div>
  869.                             </div>
  871.                         </div>#}
  873.                         {#<div class="widget subscribe-widget">
  875.                             <div class="row col-mb-30">
  876.                                 <div class="col-12 col-sm-6">
  877.                                     <a href="#" class="social-icon bg-dark h-bg-facebook mb-0 me-3">
  878.                                         <i class="fa-brands fa-facebook-f"></i>
  879.                                         <i class="fa-brands fa-facebook-f"></i>
  880.                                     </a>
  881.                                     <a href="#"><small class="d-block text-smaller"><strong>Abonnés</strong><br>
  882.                                         Facebook</small></a>
  883.                                 </div>
  884.                                 <div class="col-12 col-sm-6">
  885.                                     <a href="#" class="social-icon bg-dark h-bg-rss mb-0 me-3">
  886.                                         <i class="fa-solid fa-rss"></i>
  887.                                         <i class="fa-solid fa-rss"></i>
  888.                                     </a>
  889.                                     <a href="#"><small class="d-block text-smaller"><strong>Abonnés</strong><br>
  890.                                         RSS Feeds</small></a>
  891.                                 </div>
  892.                             </div>
  894.                         </div>
  895.                     </div>#}
  896.                 </div>
  898.             </div><!-- .footer-widgets-wrap end -->
  899.         </div>
  901.         <!-- Copyrights
  902.         ============================================= -->
  903.         <div id="copyrights">
  904.             <div class="container">
  906.                     <div class="col-12 col-md-auto text-white text-md-start">
  907.                         Copyrights &copy; 2024 All Rights Reserved | <a href="https://www.progress.com.tn">Progress
  908.                         Engineering</a><br>
  909.                     </div>
  911.                     
  913.             </div>
  914.         </div><!-- #copyrights end -->
  915.     </footer>
  916.     <!-- #footer end -->
  918.     
  920. </div><!-- #wrapper end -->
  922. <!-- Go To Top
  923. ============================================= -->
  924. <div id="gotoTop" class="uil uil-angle-up"></div>
  926. <!-- JavaScripts
  927. ============================================= -->
  928. <script src="{{ asset('front/js/plugins.min.js')}}"></script>
  929. <script src="{{ asset('front/js/functions.bundle.js')}}"></script>
  931. <script>
  932. document.addEventListener('DOMContentLoaded', function() {
  933.     const swiper = new Swiper('.swiper-container', {
  934.         loop: true,
  935.         autoplay: {
  936.             delay: 10000,
  937.             disableOnInteraction: false,
  938.         },
  939.         navigation: {
  940.             nextEl: '.swiper-button-next',
  941.             prevEl: '.swiper-button-prev',
  942.         },
  943.         pagination: {
  944.             el: '.swiper-pagination',
  945.             clickable: true,
  946.         },
  947.         effect: 'slide',
  948.         speed: 800,
  949.     });
  950. });
  953. </script>
  960. </body>
  961. </html>