templates/blog/index.html.twig line 1

Open in your IDE?
  2. {% extends 'base.html.twig' %}
  4. {% block title %}Blog{% endblock %}
  6. {% block body %}
  7. <style>
  8.     #hea{
  9.       background: url("{{asset('assets/img/prod/wp12879271-clothes-shop-wallpapers.jpg')}}");
  10.       background-size: cover;
  11.       background-attachment: fixed;
  12.       color: white;
  13.   }
  14.   
  15.     
  16.   
  17.     .container2 {
  18.         display: flex;
  19.         max-width: 97%;
  20.         width: 100%;
  21.         overflow: hidden;
  22.         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  23.         background-color: #fff;
  24.         border-radius: 8px;
  25.         margin: 20px;
  26.     }
  27.   
  28.     .image-container {
  29.         flex: 1;
  30.         overflow: hidden;
  31.         border-radius: 8px 0 0 8px;
  32.     }
  33.   
  34.     .image-container img {
  35.         width: 100%;
  36.         height: 100%;
  37.         object-fit: cover;
  38.     }
  39.   
  40.     .form-container {
  41.         flex: 1;
  42.         padding: 20px;
  43.     }
  44.   
  45.     form {
  46.         display: flex;
  47.         flex-direction: column;
  48.     }
  49.   
  50.     label {
  51.         margin-bottom: 8px;
  52.     }
  53.   
  54.     input {
  55.         padding: 10px;
  56.         margin-bottom: 16px;
  57.         border: 1px solid #ccc;
  58.         border-radius: 4px;
  59.     }
  60.   
  61.     button {
  62.         padding: 12px;
  63.         background-color: #4caf50;
  64.         color: #fff;
  65.         border: none;
  66.         border-radius: 4px;
  67.         cursor: pointer;
  68.     }
  69.   
  70.         @media (max-width: 600px) {
  71.             .container2 {
  72.                 flex-direction: column;
  73.                 max-width: 100%;
  74.             }
  75.   
  76.           
  77.       
  78.             
  79.         .image-container,
  80.         .form-container {
  81.             border-radius: 8px;
  82.             width: 100%;
  83.         }
  84.   
  85.         .image-container {
  86.             border-radius: 8px 8px 0 0;
  87.         }
  88.   
  89.         .form-control {
  90.           height: 40px; /* Ajustez la hauteur selon vos préférences */
  91.           border: 1px solid #ccc; /* Couleur de la bordure par défaut */
  92.           transition: border-color 0.3s; /* Ajoute une transition pour l'effet de changement de couleur de bordure */
  93.       }
  94.       
  95.       /* Style pour les champs de formulaire lorsqu'ils ont le focus */
  96.       .form-control:focus {
  97.           border-color: #e61515; /* Rouge lorsqu'il est en focus */
  98.           outline: none; /* Supprime la bordure de focus par défaut de certains navigateurs */
  99.       }
  100.     }
  101.   
  102.     .form-control {
  103.       height: 40px; /* Ajustez la hauteur selon vos préférences */
  104.       height: 3.3em;
  105.       border: 1px solid #ccc; /* Couleur de la bordure par défaut */
  106.       transition: border-color 0.3s; /* Ajoute une transition pour l'effet de changement de couleur de bordure */
  107.   }
  108.   .bouge{
  109.     margin-top: 20px;
  110.     margin-bottom: 20px;
  111.     display: block;
  112.     
  113.   }
  114.   .ml {
  115.     margin: 20px;
  116.     margin-left: -1%;
  117. }
  118.   .bt{
  119.         border: 1px solid black;
  120.         width: 75%;
  121.   }
  122.   .container2 {
  123.     display: flex;
  124.      
  125.     max-width: 97%;
  126.     width: 100%;
  127.     overflow: hidden;
  128.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  129.     background-color: #fff;
  130.     border-radius: 8px;
  131.     margin: 20px;
  132. }
  133.   
  134.   </style>
  135. <div data-aos="fade" class="page-title" id="hea">
  136.     <div class="heading">
  137.       <div class="container">
  138.         <div class="row d-flex justify-content-center text-center">
  139.           <div class="col-lg-8">
  140.             <h1 style="color: white;">Notre blog</h1>
  141.             {# <p class="mb-0">Odio et unde deleniti. Deserunt numquam exercitationem. Officiis quo odio sint voluptas consequatur ut a odio voluptatem. Sit dolorum debitis veritatis natus dolores. Quasi ratione sint. Sit quaerat ipsum dolorem.</p> #}
  142.           </div>
  143.         </div>
  144.       </div>
  145.     </div>
  146.     <nav class="breadcrumbs">
  147.       <div class="container">
  148.         <ol>
  149.           <li><a href="{{path('app_home')}}">Blog</a></li>
  150.           <li class="current">Notre blog</li>
  151.         </ol>
  152.       </div>
  153.     </nav>
  154.   </div><!-- End Page Title -->
  156.     <section id="recent-posts" class="recent-posts"> 
  157.   
  158.         <!--  Section Title -->
  159.          <div class="container section-title" data-aos="fade-up">
  160.           <h2>Recent Posts</h2>
  161.           <p>Retrouvez ci-dessous nos différents posts quotidiens.</p>
  162.         </div><!-- End Section Title -->
  164.         {# <div style="float:right">
  165.           {{ articles.getTotalItemCount }} Articles(s)
  166.       
  167.       </div>  #}
  169.         <div class="container">
  170.   
  171.           <div class="row gy-4">
  172.             {% for article in articles %}
  173.             <div class="col-xl-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
  175.               <article>
  177.                 <div class="post-img">
  178.                   <img src="{{ asset('images/articles/'~ article.image) }}" alt="" class="img-fluid">
  179.                 </div>
  180.   
  181.                 <p class="post-category">eCommerce</p> 
  182.   
  183.                 <h2 class="title">
  184.                   <a href="{{path('app_admin_blog_detail',{id:article.id,'titre':article.titre |replace({' ': '_', 'é': 'e', 'è': 'e', 'ù': 'u', 'ê': 'e', '|': '_', '\'': '_'})})}}">{{ article.titre }}</a>
  185.                 </h2>   
  186.   
  187.                 <div class="d-flex align-items-center">
  188.                   <img src="{{asset('assets/img/testimonials/user.jpg')}}" alt="" class="img-fluid post-author-img flex-shrink-0">
  189.                   <div class="post-meta">
  190.                     <p class="post-author">Admin</p>
  191.                     <p class="post-date">
  192.                       <time datetime="2022-01-01">{{article.createdAt|date("d F Y")}}</time>
  193.                     </p>
  194.                   </div>
  195.                 </div>
  196.   
  197.               </article>
  198.              
  200.             </div>
  201.             {% endfor %}
  202.             <div class="navigation d-flex justify-content">
  203.               {{ knp_pagination_render(articles) }}
  204.           
  205.           </div>
  206.    </section>
  208.     
  209.    
  210.         
  211.   
  213.     {# <div class="row d-flex">
  214.         <div class="col-md-4">
  215.             <div class="card">
  216.                 <img src="{{ asset('images/articles/'~ article.image) }}" style="height: 100px; " class="card-img-top" alt="Article 1">
  217.                 <div class="card-body">
  218.                     <h5 class="card-title">{{ article.titre }}</h5>
  219.                     <p class="card-text">{{ article.miniDescription }}</p>
  220.                     <a href="#" class="btn btn-primary">Lire la suite</a>
  221.                 </div>
  222.             </div>
  223.         </div>
  225.     </div> #}
  226.     {# <div class="card text-start ml bt">
  227.         <img class="card-img-top"   
  228.                 src="{{ asset('images/articles/'~ article.image) }}" width="150px" height="150px" alt="Title">
  229.         <div class="card-body ">
  230.             <h4 class="card-title">{{ article.titre }}</h4>
  231.             <p class="card-text">{{ article.miniDescription }}</p>
  232.             <a href="{{path('app_admin_blog_detail',{id:article.id})}}" class="btn btn-primary">Lire la suite</a>
  233.         </div>
  234.     </div> #}
  235.    
  238. {% endblock %}