templates/Companies/article.html.twig line 1

Open in your IDE?
  2.         <meta charset="UTF-8">
  3.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.         <title>Pimcore Company</title>
  6.         
  7.        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
  8.         
  9.         
  10.         {#font awesome cdn link#}
  11.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  12.         
  13.         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" charset="utf-8"></script>
  14.         
  15.         {#custom css file link#}
  16.         <style>
  17.         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');
  18.        
  19.     :root{
  20.         --orange:#ff7800;
  21.         --black:#130f40;
  22.         --light-color:#666;
  23.         --box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
  24.         --border:.2rem solid rgba(0,0,0,.1);
  25.         --outline:.1rem solid rgba(0,0,0,.1);
  26.         --outline-hover:.2rem solid var(--black);
  27.     }
  28.     section{
  29.         padding:2rem 9%;
  30.     }
  31.        .heading{
  32.         text-align: center;
  33.         padding:2rem 0;
  34.         padding-bottom: 3rem;
  35.         font-size: 3.5rem;
  36.         color:var(--black);
  37.     }
  38.     
  39.     .heading span{
  40.         background: var(--orange);
  41.         color:#fff;
  42.         display:inline-block;
  43.         padding:.5rem 3rem;
  44.         clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
  45.     }
  46.     
  47.     .articles .box-container{
  48.         display:grid;
  49.         grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  50.         gap:1.5rem;
  51.     }
  52.     
  53.     .articles .box-container .box{
  54.         overflow: hidden;
  55.         border-radius: .5rem;
  56.         box-shadow: var(--box-shadow);
  57.         background:#fff;
  58.     }
  59.     
  60.     .articles .box-container .box img{
  61.         height:25rem;
  62.         width:100%;
  63.         object-fit:cover;
  64.     }
  65.     
  66.     .articles .box-container .box .content{
  67.         padding:2rem;
  68.     }
  69.     
  70.     .articles .box-container .box .content .icons{
  71.         display: flex;
  72.         align-items: center;
  73.         justify-content: space-between;
  74.         padding-bottom: 1.5rem;
  75.         margin-bottom: 1rem;
  76.         border-bottom: var(--border);
  77.     }
  78.     
  79.     .articles .box-container .box .content .icons a{
  80.         color:var(--light-color);
  81.         font-size:1.5rem;
  82.     }
  83.     
  84.     .articles .box-container .box .content .icons a:hover{
  85.         color:var(--black);
  86.     }
  87.     
  88.     .articles .box-container .box .content .icons a i{
  89.         color:var(--orange);
  90.         padding-right: .5rem;
  91.     }
  92.     
  93.     .articles .box-container .box .content h3{
  94.         line-height: 1.8;
  95.         color:var(--black);
  96.         font-size: 2.2rem;
  97.         padding:.5rem 0;
  98.     }
  99.     
  100.     .articles .box-container .box .content p{
  101.         line-height: 1.8;
  102.         color:var(--light-color);
  103.         font-size: 1.5rem;
  104.         padding:.5rem 0;
  105.     }
  106.     #company-articles{
  107.         width: 75%;
  108.         float: left;
  109.         background-color:#FCFFFE;
  110.     }
  111.     .p-content{
  112.         font-size: 12px;
  113.     }
  114.     </style>
  115.    
  116.         {#header section starts#}
  117.        {#{% include 'includes/company-home-header.html.twig' %}#}
  118.        {% include 'includes/company-home-header.html.twig' %}
  119.        
  120.        {% include 'includes/company-sidebar.html.twig' %}
  122.  {#article section starts#}
  123.         
  124.         <section class="articles" id="company-articles">
  125.             <h1 class="heading"><span>Articles</span></h1>
  126.             <div class="box-container">
  127.                 {% for repos in Articles %}
  128.                 <div class="box">
  129.                     {# <img src="https://pimcore.navabrinditsolutions.com/admin/asset/get-image-thumbnail?id=100" alt=""> #}
  130.                     <img src="/var/assets{{repos.ArticleImage}}" alt="" id="article-img">
  131.                     <div class="content" id="company-article">
  132.                         <div class="icons">
  133.                             <a href="#"><i class="fas fa-user"></i>{{repos.author}}</a>
  134.                             <a href="#"><i class="fas fa-calendar"></i>{{repos.articleDate}}</a>
  135.                         </div>
  136.                         <h3>{{repos.articleTitle}}</h3>
  137.                         <div class="p-content">
  138.                             {{repos.articleDescription | raw}}
  139.                         </div>
  140.                         <a href="/articleDetails?id={{repos.id}}" target="_blank" class="btn">read more</a>
  141.                     </div>
  142.                 </div>
  143.                {% endfor %} 
  144.             </div>
  145.         </section>
  146.         
  147.         {#article section ends#}
  149. {#footer section starts#}
  150.         
  151.        {% include 'includes/company-footer.html.twig' %}
  152.         
  153.         {#footer section ends#}
  154. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  155. <script>
  156. jQuery(document).ready(function(){
  157.     jQuery('.p-content').each(function(){
  158.         var myDiv = $(this);
  159.         myDiv.text(myDiv.text().substring(0,250)+'....');
  160.     });
  161.     
  162. });
  164. </script>