templates/Articles/listing.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Pimcore Company</title>
  8.         
  9.        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
  10.         
  11.         
  12.         {#font awesome cdn link#}
  13.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  14.         
  15.         {#custom css file link#}
  16.        <style>
  17.            .heading {
  18.                margin-top:5px;
  19.            }
  20.            .l-content, .a-content{
  21.                 font-size: 12px;
  22.                 color: #A0A5A5;
  23.             }
  24.        </style>
  25.         
  26.     </head>
  27.     <body>
  28.         {#header section starts#}
  29.        {% include 'includes/company-home-header.html.twig' %}
  30.     
  31.         {#header section ends#}
  32.         
  33.         {#article section starts#}
  34.         
  35.         <section class="articles" id="articles">
  36.             <h1 class="heading">Technology <span>Trends</span></h1>
  37.             <div class="box-container">
  38.                 {% for repos in Articles %}
  39.                 <div class="box">
  40.                     <img src="/var/assets{{repos.articleImage}}" alt=""><br>
  41.                     <div class="content">
  42.                         <div class="icons">
  43.                             <a href="#"><i class="fas fa-user"></i>{{repos.author}}</a>
  44.                             <a href="#"><i class="fas fa-calendar"></i>{{repos.articleDate}}</a>
  45.                         </div>
  46.                         <h3>{{repos.articleTitle}}</h3>
  47.                         <div class="a-content">
  48.                             {{repos.articleDescription | raw}}
  49.                         </div>
  50.                         {# <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, expedita.</p> #}
  51.                         <a href="/articleDetails?id={{repos.id}}" target="_blank" class="btn">read more</a>
  52.                     </div>
  53.                 </div>
  54.                {% endfor %} 
  55.             </div>
  56.         </section>
  57.         
  58.         {#article section ends#}
  59.         
  60.         {#footer section starts#}
  61.         
  62.        {% include 'includes/company-footer.html.twig' %}
  63.         
  64.         {#footer section ends#}
  65.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  66. <script>
  67. jQuery(document).ready(function(){
  68.     jQuery('.l-content').each(function(){
  69.         var myDiv = $(this);
  70.         myDiv.text(myDiv.text().substring(0,130)+'....');
  71.     });
  72.     jQuery('.a-content').each(function(){
  73.         var myDiv = $(this);
  74.         myDiv.text(myDiv.text().substring(0,130)+'....');
  75.     });
  76. });
  78. </script>
  79.     </body>
  80.     </html>