Catégories #4

Codes

Code:

<link href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap" rel="stylesheet">
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="title_cate">
 {catrow.tablehead.L_FORUM}
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="content_categorie">
 <div class="title_and_description">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 <p>
 {catrow.forumrow.FORUM_DESC}
 </p>
 <div class="last_post">
 {catrow.forumrow.LAST_POST}
 </div>
 </div>
 <div class="avatar_member">
 <!-- BEGIN avatar -->
 {catrow.forumrow.avatar.LAST_POST_AVATAR}
 <!-- END avatar -->
 <div class="deco_avatar">
 <div></div>
 </div>
 </div>
 <div class="img_new_and_stats">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 <span>{catrow.forumrow.TOPICS} topics</span>
 <span>{catrow.forumrow.POSTS} réponses</span>
 </div>
</div>
<div class="subforums_cate">
 {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:

/**** CATEGORIE ARTEMIS ****/

.title_cate {
  width: 800px;
  height: 55px;
  background: #262626;
  margin: auto;
  outline: 1px solid white;
  outline-offset: -5px;
}

.title_cate > h2 {
  margin: 0;
  text-align: center;
  color: white;
  text-transform: uppercase;
  font: 22px fjalla one;
  line-height: 55px;
}

.content_categorie {
  width: 800px;
  height: 160px;
  margin: auto;
  background: #f7f7f7;
  margin-top: 5px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 260px;
}

.title_and_description {
  width: 385px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px 0;
}

.title_and_description > a {
  font: 23px fjalla one;
  text-transform: uppercase;
  text-decoration: none;
  color: #0c0c0c;
  display: block;
  margin-left: -20px;
  font-style: italic;
}

.title_and_description > p {
  height: 70px;
  margin: 0;
  font: 12px calibri;
  text-align: justify;
  line-height: 12px;
  overflow: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 10px;
}

.title_and_description > p > img {
  width: 260px;
  height: 160px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 51%, 0% 0%);
          clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 51%, 0% 0%);
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

.last_post {
  font: 11px calibri;
  text-transform: uppercase;
  margin-top: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 40px;
}

.last_post > a {
  display: block;
  text-decoration: none;
  
}

.last_post a:nth-of-type(1) {
  color: #19356b;
  margin-left: -10px !important;
}

.last_post strong {
  margin-left: 10px;
}

.avatar_member {
  width: 100px;
  height: 100px;
  margin-top: 30px;
  text-align: center;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 5px;
  margin-left: 10px;
}

.avatar_member > img {
  width: 90px;
  height: 90px;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.deco_avatar {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-animation: border infinite 5s;
          animation: border infinite 5s;
  
  
}

.deco_avatar > div {
  width: 7px;
  height: 7px;
  background: black;
  border-radius: 50%;
  position: absolute;
  right: 25px;
          
  
}

.img_new_and_stats {
  font: 12px fjalla one;
  text-transform: uppercase;
  width: 120px;
}

.img_new_and_stats > span:nth-of-type(1) {
  position: absolute;
  top: 47px;
  right: 28px;
  -webkit-transform: rotate(-29deg);
      -ms-transform: rotate(-29deg);
          transform: rotate(-29deg);
}

.img_new_and_stats > span:nth-of-type(2) {
  position: absolute;
  bottom: 38px;
  right: 15px;
  -webkit-transform: rotate(29deg);
      -ms-transform: rotate(29deg);
          transform: rotate(29deg);
}

.img_new_and_stats > img {
  position: absolute;
  right: 0;
  top: 35px;
}

.subforums_cate {
  width: 800px;
  margin: auto;
  margin-top: 3px;
  font-size: 0;
}

.subforums_cate > a {
  display: inline-block;
  font: 11px calibri;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  height: 15px;
  background: #262626;
  padding: 3px 5px;
  line-height: 15px;
  margin-right: 3px;
}

@-webkit-keyframes border {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
    
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }

@keyframes border {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
    
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }