Catégories #6

Codes

Code:

<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;1,400&display=swap" rel="stylesheet"/>
   <!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="title_cate_salva">
   {catrow.tablehead.L_FORUM}
</div>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <div class="categories_content">
   <div class="description_img_block"></div>
   <div class="title_and_desc">
      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
      <p>
         {catrow.forumrow.FORUM_DESC}
      </p>
   </div>
   <div class="stats_salva">
      <div class="last_message">
         {catrow.forumrow.LAST_POST}
      </div>
      <div class="mess_topic">
         {catrow.forumrow.TOPICS} topics et {catrow.forumrow.POSTS} messages
      </div>
   </div>
   <div class="img_etat_salva">
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
   </div>
</div>
<div class="subforums_salva">
   {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>

   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Code:

/* CATEGORIES - ARTEMIS */
:root
{
 --couleur-fond: #42c19a;
 --couleur-fond2: #bd6bc0;
}

a:hover
{
 text-decoration: none !important;
}

a
{
 text-decoration: none !important;
}

a:link
{
 text-decoration: none;
}

a:visited
{
 text-decoration: none;
}

.title_cate_salva
{
 width: 830px;
 height: 120px;
 margin: 10px auto;
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 outline: 1px solid white;
 outline-offset:-10px;
 background: url(https://data.whicdn.com/images/294508291/original.png);
 -webkit-filter: grayscale(1);
 filter: grayscale(1);
 background-size: 100%;
 background-position: center top;
 background-repeat: no-repeat;
}

.title_cate_salva h2
{
 text-align: center;
 margin: 0 auto;
 color: white;
 font: 50px barlow condensed;
 text-transform: uppercase;
}

.categories_content
{
 width: 830px;
 height: 125px;
 margin: auto;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
 background: #f5f5f5;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 border: 1px solid #C5C5C5;
 margin-top: 10px;
 padding: 10px;
 position: relative;
}

.description_img_block
{
 width: 220px;
 height: 100px;
 background: #fafafa;
 border: 1px solid #e8e8e8;
 position: relative;
 z-index: 3;
}

.title_and_desc
{
 width: 415px;
 height: 100px;
}

.title_and_desc > a
{
 width: 100%;
 text-align: left;
 text-decoration: none;
 display: block;
 background: -webkit-linear-gradient(var(--couleur-fond), var(--couleur-fond2));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 font: 25px barlow condensed;
 text-transform: uppercase;
 font-style: oblique;
 height: 35px;
 margin-top: -5px;
 line-height: 35px;
}

.title_and_desc > a:before
{
 content: "||";
 margin-right: 5px;
}

.title_and_desc p
{
 width: 100%;
 margin: 0;
 font: 12px calibri;
 height: 70px;
 overflow: auto;
 line-height: 12px;
 text-align: justify;
 color: #8E8E8E;
}

.title_and_desc > p img
{
 width: 199px;
 height: 80px;
 position: absolute;
 top: 20px;
 left: 22px;
 -o-object-fit: cover;
 object-fit: cover;
 -webkit-filter: grayscale(1);
 filter: grayscale(1);
 z-index: 99;
}

.title_and_desc > p img:hover
{
 -webkit-filter: none;
 filter: none;
}

.stats_salva
{
 width: 160px;
 height: 100px;
 background: #fafafa;
 border: 1px solid #e8e8e8;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 text-align: center;
 padding-top: 15px;
}

.last_message
{
 box-sizing: border-box;
 width: 100%;
 height: 65px;
 font: 10px calibri;
 color: gray;
 text-transform: lowercase;
 font-style: oblique;
 padding-top: 5px;
}

.last_message a
{
 text-transform: uppercase;
 text-decoration: none;
 font-size: 10px;
 color: var(--couleur-fond2);
 font-style: normal;
}

.mess_topic
{
 width: 100%;
 height: 20px;
 margin-top: -5px;
 text-align: center;
 font: 8px calibri;
 text-transform: uppercase;
 /* font-weight: bold;
 */
 line-height: 20px;
 border-top: 1px solid #e8e8e8;
 color: gray;
}

.img_etat_salva
{
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: 2;
}

.subforums_salva
{
 width: 830px;
 height: 23px;
 background: -webkit-gradient(linear, left top, left bottom, from(var(--couleur-fond)), to(var(--couleur-fond2)));
 background: -o-linear-gradient(var(--couleur-fond), var(--couleur-fond2));
 background: linear-gradient(to left, var(--couleur-fond), var(--couleur-fond2));
 margin: auto;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 0 5px;
 font-size: 0;
}

.subforums_salva a
{
 color: var(--couleur-fond2);
 text-decoration: none;
 font: 10px calibri;
 text-transform: uppercase;
 font-style: oblique;
 background: #fafafa;
 display: block;
 padding: 0 5px;
 margin: 0 2px;
}

.descFRM
{
 display: none;
}

Code:

:root
{
 --couleur-fond: #42c19a;
 --couleur-fond2: #bd6bc0;
}