src/Flexy/FrontBundle/Themes/CoWorking/templates/pages/offres.html.twig line 1

  1. {% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}
  2. {% block stylesheets %}
  5. {{ parent() }}
  6.      
  7.    
  8. <style>
  10. @import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");
  11. @import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
  12. @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
  14. :root {
  15.   /* GENERAL FONT */
  16.   --font1: "Titillium Web", sans-serif;
  17.   --font2: "Roboto", sans-serif;
  18.   /* GENERAL COLOR */
  19.   --bg-col-1: #0059b3;
  20.   --bg-col-2: #dc3545;
  21.   --bg-col-3: #fff;
  22.   --bg-col-4: #024c96;
  23.   --tx-color-1: #fff;
  24.   --tx-color-2: #000;
  25.   --tx-color-3: #0059b3;
  26.   // FOCUS START
  27.   /* READ MORE COLOR */
  28.   --tx-rm-color-1: #fff;
  29.   --bg-rm-color-1: #fff;
  30.   /* TAG BOTTOM-RIGHT COLOR */
  31.   /* FOOTER CARD COLOR */
  32.   --bg-ft-col-1: #0059b3;
  33.   --tx-ft-color-1: #fff;
  34.   // focus section
  35.   --tx-focus-section-title: #212529;
  36.  
  37.   --bg-focus-card-overlay: rgba(0, 89, 179, 0.5);
  38.   --tx-focus-hover: #fff;
  39.   --tx-focus-font-weight: 400;
  40.   --tx-focus-tag-color-1: #fff;
  41.   --bg-focus-tag-color-1: #0059b3;
  42.   --bg-focus-cat: #0059b3;
  43.   --tx-focus-cat: #fff;
  44.   --bg-focus-footer: #0059b3;
  45.   --tx-focus-footer: #fff;
  46.   --bg-focus-card: #fff;
  47.   --tx-focus-card: #000;
  48.   //button arrow & archive
  49.   --tx-button: #fff;
  50.   --bg-button: #0059b3;
  51. }
  52. /*start dark mode css*/
  53. .dark-mode {
  54.   /* GENERAL COLOR */
  55.   --bg-col-1: #121212;
  56.   --tx-color-1: #fff;
  57.   //button arrow & archive
  58.   --tx-button: #fff;
  59.   --bg-button: #272727;
  60.   --bg-button-border: #272727;
  61.   --bg-button-hover: #fff;
  62.   --tx-button-hover: #272727;
  63.   --bg-button-focus: #0f0f0f40;
  64.   //focus-section
  65.   --tx-focus-section-title: #fff;
  66.   --bg-focus-section: #121212;
  67.   --bg-focus-card-overlay: rgba(0, 0, 0, 0.5);
  68.   --tx-focus-hover: #fff;
  69.   --bg-focus-card: #272727;
  70.   --tx-focus-card: #fff;
  71.   --tx-focus-font-weight: 100;
  72.   --tx-focus-tag-color-1: #fff;
  73.   --bg-focus-tag-color-1: #272727;
  74.   --tx-focus-cat: #272727;
  75.   --bg-focus-cat: #fff;
  76.   --tx-focus-tag-a: #fff;
  77.   --bg-focus-footer: #272727;
  78.   --tx-focus-footer: #fff;
  79.   --focus-border-card: 0;
  80. }
  81. /* end dark mode css */
  82. .btn-archive {
  83.   color: var(--tx-button);
  84.   background: var(--bg-button);
  85.   border-color: var(--bg-button-border);
  87.   -webkit-transition: all 0.3s linear 0s;
  88.   transition: all 0.3s linear 0s;
  90.   &:hover {
  91.     color: var(--tx-button-hover);
  92.     background-color: var(--bg-button-hover);
  93.     border-color: var(--bg-button-hover);
  94.   }
  96.   &:focus {
  97.     -webkit-box-shadow: 0 0 0 0.25rem var(--bg-button-focus);
  98.     box-shadow: 0 0 0 0.25rem var(--bg-button-focus);
  99.   }
  100. }
  102. .shadow-custom {
  103.     box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  104. }
  106. .focus-section {
  107.   background: var(--bg-focus-section);
  108.   font-family: var(--font1);
  109.   -webkit-transition: all 0.3s linear 0s;
  110.   transition: all 0.3s linear 0s;
  112.   .title-section {
  113.     font-weight: 700;
  114.     text-transform: uppercase;
  115.     color: var(--tx-focus-section-title);
  116.   }
  118.   .card {
  119.     font-size: 1rem;
  120.     /*border: var(--focus-border-card);*/
  122.     .card-body {
  123.       background: var(--bg-focus-card);
  124.       color: var(--tx-focus-card);
  126.       .card-text {
  127.         font-weight: var(--tx-focus-font-weight);
  128.       }
  129.     }
  131.     .card-image {
  132.       position: relative;
  134.       .image-overlay {
  135.         position: absolute;
  136.         top: 0;
  137.         bottom: 0;
  138.         left: 0;
  139.         right: 0;
  140.         height: 100%;
  141.         width: 100%;
  142.         opacity: 0;
  143.         transition: 0.5s ease;
  144.        
  145.       }
  147.       &:hover .image-overlay {
  148.         opacity: 1;
  149.       }
  150.     }
  152.     .text-img-over {
  153.       position: relative;
  155.       .overlay {
  156.         position: absolute;
  157.         top: 0;
  158.         bottom: 0;
  159.         left: 0;
  160.         right: 0;
  161.         height: 100%;
  162.         width: 100%;
  163.         opacity: 0;
  164.         transition: 0.5s ease;
  165.         background: var(--bg-focus-card-overlay);
  166.       }
  168.       &:hover .overlay {
  169.         opacity: 1;
  170.       }
  171.     }
  173.     .social-hover {
  174.       color: var(--tx-focus-hover);
  175.       font-size: 30px;
  176.       position: absolute;
  177.       top: 50%;
  178.       left: 50%;
  179.       -webkit-transform: translate(-50%, -50%);
  180.       -ms-transform: translate(-50%, -50%);
  181.       transform: translate(-50%, -50%);
  182.       text-align: center;
  184.       .fa-share-alt {
  185.         color: var(--tx-focus-hover);
  187.         &:hover {
  188.           color: var(--tx-color-1);
  189.         }
  190.       }
  191.     }
  193.     .hover-text {
  194.       position: relative;
  195.       text-align: center;
  196.       color: var(--tx-focus-hover);
  197.     }
  199.     .bottom-right-tag {
  200.       position: absolute;
  201.       bottom: 0;
  202.       right: 0;
  203.       background: #dfb150;
  204.       padding: 5px 10px 5px 10px;
  205.       border-top-left-radius: calc(0.25rem - 1px);
  206.       font-size: 0.8rem;
  207.       font-weight: 200;
  208.       color: var(--tx-focus-tag-color-1);
  209.       z-index: 1;
  211.       a {
  212.         color: var(--tx-focus-tag-color-1);
  213.         text-decoration: none;
  214.       }
  216.       a:hover {
  217.         color: var(--tx-focus-tag-color-1);
  218.         text-decoration: underline;
  219.       }
  220.     }
  222.     .sub-cat {
  223.       font-weight: 600;
  224.       font-size: 1rem;
  226.       .bg-category {
  227.         background: var(--bg-focus-cat);
  228.         color: var(--tx-focus-cat);
  229.       }
  231.       a {
  232.         color: var(--tx-focus-tag-a);
  233.       }
  234.     }
  236.     .card-title {
  237.       font-family: var(--font1);
  238.       font-weight: 600;
  239.       font-size: 1.3rem;
  240.       /* height: 73px;
  241.   overflow: hidden; */
  242.     }
  244.     .card-footer {
  245.       background: #dfb150;
  246.       color: var(--tx-focus-footer);
  248.       .card-footer__info {
  249.         font-size: 1rem;
  250.         font-weight: 300;
  251.         position: relative;
  252.       }
  253.     }
  255.     .read-more {
  256.       position: absolute;
  257.       right: 0;
  258.       font-weight: 600;
  259.     }
  261.     .read-more-1 {
  262.       text-decoration: none;
  263.       position: relative;
  264.       color: var(--tx-focus-footer);
  265.     }
  267.     .read-more-1::after {
  268.       content: "";
  269.       position: absolute;
  270.       left: 0;
  271.       bottom: 0;
  272.       width: 100%;
  273.       height: 2px;
  274.       background: var(--bg-rm-color-1);
  275.       transform: scaleX(0);
  276.       transform-origin: left;
  277.       transition: transform 250ms ease-in;
  278.     }
  280.     .read-more-1:hover {
  281.       color: var(--tx-focus-footer);
  282.     }
  284.     .read-more-1:hover::after {
  285.       transform: scaleX(1);
  286.       transform-origin: right;
  287.       color: var(--tx-focus-footer);
  288.     }
  290.     .read-more-2 {
  291.       text-decoration: none;
  292.       position: relative;
  293.       margin-right: 15px;
  294.       color: var(--tx-focus-footer);
  295.     }
  297.     .read-more-2::after {
  298.       content: "";
  299.       /* You should use \ and not /*/
  300.       font-family: "Font Awesome 5 Free";
  301.       /* This is the correct font-family*/
  302.       position: absolute;
  303.       right: -18px;
  304.       bottom: 0;
  305.       color: var(--tx-focus-footer);
  306.     }
  308.     .read-more-2:hover {
  309.       color: var(--tx-focus-footer);
  310.     }
  312.     .read-more-2:hover::after {
  313.       transform: translate(3px, 0);
  314.       transition: all 0.1s ease-in;
  315.       color: var(--tx-focus-footer);
  316.     }
  318.     .read-more-3 {
  319.       text-decoration: none;
  320.       position: relative;
  321.       color: var(--tx-focus-footer);
  322.     }
  324.     .read-more-3:hover {
  325.       color: var(--tx-focus-footer);
  326.       text-decoration: underline;
  327.     }
  328.   }
  329. }
  331. .custom-hr-1{
  332.      width: 3%;
  333.     border: 3px solid #555;
  334.     margin: 4px;
  335. }
  338.  .pagination {
  339.     display: flex;
  340.     justify-content: center;
  341.     margin-top: 20px;
  342. }
  344. .pagination li {
  345.     margin: 0 5px;
  346.     list-style: none;
  347. }
  349. .pagination li a {
  350.     text-decoration: none;
  351.     padding: 8px 12px;
  352.     border: 1px solid #FFCB00; /* Ajout de la couleur principale */
  353.     border-radius: 5px;
  354.     color: #FFCB00; /* Texte en couleur principale */
  355.     font-weight: 600;
  356.     transition: background-color 0.3s, color 0.3s;
  357. }
  359. .pagination li a:hover {
  360.     background-color: #FFCB00; /* Couleur au survol */
  361.     color: white; /* Texte en blanc au survol */
  362. }
  364. .pagination li.active a {
  365.     background-color: #FFCB00; /* Couleur principale pour l'élément actif */
  366.     color: white; /* Texte en blanc */
  367.     border: none; /* Supprimer la bordure */
  368. }
  370. .pagination li.disabled {
  371.     display: none; /* Cacher les boutons désactivés */
  372. }
  374. .shadow-custom:hover{
  375.      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  376. }
  378.     .shadow-custom{
  379.     box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  380. }
  382.     
  383. </style>
  385.   
  386. {% endblock  %}
  387. {% block body %}
  388.  
  391.  
  392. <div class="container" style="max-width: 1230px;">
  394.  <!--<section class="button">
  395.   <div class="container-lg py-2">
  396.     <button class="btn btn-dark btn-sm text-uppercase" onclick="myFunction()" id="btnValue" type="button">Dark mode</button>
  397.   </div>
  398. </section> -->        
  401. <section id="focus" class="focus-section">
  402.         <div class="container-lg py-5">
  403.             <div class="container px-0">
  404.                 <div class="row">
  405.                     <div class="col">
  406.                        <h1 style="font-size: 34px; color: black;" class="title-actualites ">Offres</h1>
  407.                       <hr class="custom-hr-1">
  408.                     </div>
  409.                  
  411.                 </div>
  412.             </div>
  413.             <div class="row row-cols-1 row-cols-md-3 g-4 mt-5 mb-2">
  414.             {% for news in newshome %}
  415.                 <div class="col">
  416.                     <div class="card shadow-sm h-100 shadow-custom">
  417.                         <div class="card-image">
  418.                             <div class="hover-text">
  419.                             <img class="img-article img-fluid" 
  420.                                      src="/uploads/coworking/{{ news.image }}"
  421.                                      class="card-img-top" 
  422.                                      alt="image">
  423.                                  
  424.                                 <div class="bottom-right-tag text-uppercase">
  425.                               
  426.                                 {% if news.dateFin|date('U') < 'now'|date('U') %}
  427.                               Pas active
  428.                             {% else %}
  429.                                Active 
  430.                             {% endif %}
  431.                                                             
  432.                                 </div>
  433.                             </div>
  434.                             <div class="image-overlay"></div>
  435.                         </div>
  436.                         <div class="card-body">
  438.                             <h3 class="card-title">{{ news.title }}</h3>
  439.                             <div class="text-left my-2">
  440.                                 <div class="sub-cat text-truncate"><span
  441.                                         class="badge rounded-pill bg-category text-uppercase">offre</span> <a
  442.                                         href="#">{{ news.underTitle }}</a></div>
  443.                             </div>
  444.                             <p class="card-text">{{ news.description }}.</p>
  447.                         </div>
  449.                         <div class="card-footer py-3">
  450.                             <div class="card-footer__info">
  451.                                 <span><i class="far fa-calendar-alt"></i> {{ news.dateDebut|date('d/m/Y')|default('Aucune date') }}</span>
  452.                                
  453.                                 <span class="read-more">
  454.                                      <span><i class="far fa-calendar-alt"></i> {{ news.dateFin|date('d/m/Y')|default('Aucune date') }}</span>
  455.                                 </span>
  456.                             </div>
  457.                         </div>
  459.                     </div>
  460.                 </div>
  461.                  
  462.              {% endfor   %}
  464.             </div>
  465.         </div>
  467.   
  468.    </section>
  472.     
  473.      
  474.       {% if newshome is not null %}
  475.         <div class="pagination">
  476.     {{ knp_pagination_render(newshome) }}
  477. </div>
  478.     {% endif %}
  479.  
  480.  
  481.     
  482. </div>
  486.  
  487.     
  488. {% endblock %}
  490. {% block javascripts %}
  492. {{ parent() }}
  493.  
  494.  
  495. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
  499. <script>
  500. /*function myFunction() {
  501.   var element = document.getElementById('focus');
  502.   element.classList.toggle("dark-mode");
  504.   var x = document.getElementById("btnValue");
  505.   if (x.innerHTML === "Dark mode") {
  506.     x.innerHTML = "Light mode";
  507.     x.classList.remove('btn-dark')
  508.     x.classList.toggle('btn-light')
  509.   } else {
  510.     x.innerHTML = "Dark mode";
  511.     x.classList.remove('btn-light')
  512.     x.classList.toggle('btn-dark')
  513.   }
  515. }*/
  518.  
  520. </script>
  521. {% endblock %}