[ILH] CATE v457688

In this example below you will see how to do a [ILH] CATE v457688 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by darkdreams, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright darkdreams ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>[ILH] CATE v457688</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Open+Sans:400,600|Lato|Parisienne|Roboto+Slab|Raleway:400,300,700,900|Roboto+Condensed|Schoolbell|Eater|Coming+Soon|Merriweather|Oswald:300,400|Just+Another+Hand'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="cate">
    <div class="forumlink">
        <a href="{catrow.forumrow.U_VIEWFORUM}">Devenir Harvardien !</a>
    </div>
    <div class="englob_cate">
       <div class="infos"> 
           <div class="stats">
             <div class="topics"><b>193</b><br>sujets</div>
             <div class="messages"><b>4131</b><br>messages</div>
           </div>
            <div class="lastpost">
                <span id="last"><span><a href="/t62177-f-m-let-s-face-it-i-m-pretty-adorable" title="(f/m) let's face it, i'm pretty adorable">(f/m) let's face...</a><br>Aujourd'hui à 9:26<br><strong><a href="/u2126" class="gensmall"><span style="color:#76ad23"><strong>Alexander Strudwick</strong></span></a>
                </strong>&nbsp;
                <a href="/t62177-f-m-let-s-face-it-i-m-pretty-adorable?view=newest"><img src="http://image.noelshack.com/fichiers/2016/18/1462565873-newetoile.png" alt="Voir le message le plus récent" title="Voir le message le plus récent"></a>
            </div>
            <div class="new">
              <img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=165%C3%9735&w=165&h=35" />
            </div>
        </div>
        <div class="description">
            <span style="float:left; padding-right: 5px; margin-top: -4px;"><img src="http://image.noelshack.com/fichiers/2012/47/1353453947-mini-bouton3.png"></span><span class="titredesc">Scénarios et Bottin d'avatars ✗</span> Il y a environ 20.000 étudiants à Harvard d'environ 130 nationalités différentes. Tous ces étudiants sont répartis au sein de 7 confréries différentes. Ce sont des personnes uniques aux histoires compliquées et au caractère fort.
            <br><a href="http://www.i-love-harvard.com/t13510-le-bottin-liste-des-avatars-pris-et-reserves" target="_blank">bottin</a> • <a href="http://www.i-love-harvard.com/t8868-vos-scenarios-liberez-les-reservez-les" target="_blank">vos scénarios</a> • <a href="http://www.i-love-harvard.com/t29-scenarios-regles-et-modele" target="_blank">règles &amp; modèles</a>
            <br>
        </div>
        <div class="avatar">
            <!-- BEGIN avatar -->
            <span class="lastpost-avatar"><img src="http://image.noelshack.com/fichiers/2016/20/1463733622-8dcl4cg.png"></span>
            <!-- END avatar -->
        </div>
        <div class="navig">
          <div class="hover">
            sous forums
          </div>
          <div class="hidden">
            <span class="gensmall"><a href="/f28-charles-street" title="Beacon Hill, le quartier historique ✗ Charles Street n'est autre que la rue principale et commerçante mais non moins pittoresque de Beacon Hill. On y trouve de tout, notamment des boutiques d'antiquités dans un style vintage et de nombreux restaurants divers et variés. Il s'agit là de l'endroit incontournable pour flâner, faire du shopping ou prendre un café entre amis. D'ailleurs pour les accros à la caféine, c'est ici-même que vous trouverez le fameux Starbucks Coffee." class="gensmall">Charles Street</a>, <a href="/f29-boston-common" title="Beacon Hill, le quartier historique ✗ Le Boston Common est le plus ancien jardin public de la ville de Boston et même des États-Unis. Il est bordé par les rues Tremont, Beacon, et Charles. Idéal pour prendre un vrai bol d'air frais, les amoureux de la nature et les sportifs amateurs de jogging ont fait de ce parc leur lieu de prédilection. D'un point de vue historique, de nombreuses célébrités comme Martin Luther King ont prononcés des discours dans ce coin de verdure." class="gensmall">Boston Common</a>, <a href="/f30-21st-amendement" title="Beacon Hill, le quartier historique ✗ En haut de Beacon Hill, à la limite du Downtown, on trouve le 21st Amendement (son nom correspond à l’amendement qui a aboli la Prohibition) un pub qui date de 1899 (à l’origine il s'agissait d'un hôtel). D'après les rumeurs et les dires, le président Kennedy y aurait aimé écrire ses discours au coin du feu. Il s'agirait également d'un des pubs préférés du sénateur John Kerry (un burger porte même son nom). Un lieu de renom, qui a parfois servi de lieu de tournage pour des films, où il y fait bon de s'y retrouver entre amis." class="gensmall">21st Amendement</a>, <a href="/f31-boston-athenaeum" title="Beacon Hill, le quartier historique ✗ Les curieux et les intellectuels sont servis avec cette bibliothèque, une des plus anciennes et distinguée du pays, fondée en 1807. Plus de 600 000 volumes d’histoire et de littérature américaines y sont répertoriés. Le Boston Athanaeum est qualifié de cossu de part sa décoration ancienne, ses tapis immenses recouvrant le sol et ses gros fauteuils en cuir rouge. Un vrai retour dans le temps. Bien évidemment le silence est de rigueur." class="gensmall">Boston Athenaeum</a>, <a href="/f34-massachussetts-general-hospital" title="Beacon Hill, le quartier historique ✗ Les accidents ou les petits pépins, ça arrive, heureusement pour vous, le corps médical du Massachussetts General Hospital mettra tout en œuvre pour vous remettre sur pieds. On y retrouve tous les services spécialisés comme les urgences, la cardiologie, la radiologie, médecine générale mais aussi la maternité. Les visites aux patients sont autorisées jusqu'à 21h." class="gensmall">Massachussetts General Hospital</a>, <a href="/f36-financial-district" title="Governement Center, les affaires et les théâtres ✗ Boston n'a rien à envier à New York et son fameux quartier de Wall Street. Ici aussi les buildings américains dépassent les nuages tout en côtoyant de près les anciens monuments historiques. Ce contraste rend le Financial District, très agréable et moins froid que ce qu’on pourrait imaginer d’un quartier d'affaires américain. De grandes sociétés américaines mais aussi de nombreuses start up ont leurs bureaux dans ce quartier qui ne dort jamais. Les hôtels de luxe y ont aussi leurs places." class="gensmall">Financial district</a>, <a href="/f41-theater-district" title="Governement Center, les affaires et les théâtres ✗ A proximité du Financial District, on trouve le Theater District et ses nombreuses salles de concerts et spectacles, d'immenses salles de cinéma pour les amateurs du septième art mais également un opéra. Tandis que certains feront leurs premiers pas sur scène, d'autres prendront plaisir en profitant des derniers spectacles proposés." class="gensmall">Theater District</a>, <a href="/f44-faneuil-hall-marketplace" title="Governement Center, les affaires et les théâtres ✗ Le Faneuil Hall Marketplace ou encore appelé aujourd'hui Quincy Market abritait auparavant les halles de la ville. Après son expansion dans les années 1970, il est rapidement devenu un lieu incontournable de Boston. Le bâtiment principal du Quincy Market continue d'être un lieu d'approvisionnement en nourriture pour les bostoniens, on y trouve aujourd'hui des fast-foods et des restaurants. C'est un lieu populaire le midi où les travailleurs du centre-ville viennent y déjeuner. On trouve également des marchands ambulants. Deux autres bâtiments élargissent l'espace du marché pour plus de restaurants, de boutiques spécialisées et des espaces de bureaux. Il n'est pas rare de rencontrer des artistes de rues animant les espaces ouverts de cet immense complexe." class="gensmall">Faneuil Hall Marketplace</a>, <a href="/f50-new-england-aquarium" title="Governement Center, les affaires et les théâtres ✗ Avis aux amateurs de la vie maritime (en dehors de votre assiette, bien entendue), l'Aquarium de Boston est très populaire, pour les petits comme les grands. Certains étudiants aiment y travailler à l'occasion pour financer leurs études, et d'autres aiment aller y voir les petits et gros poissons, les tortues... Vous pouvez même, d'avril à novembre, aller observer les baleines dans un bâtiment annexe du New England Aquarium, le New England Aquarium Whale Watch. Un Cinéma en IMAX se trouve également dans les bâtiments, projetant des films sur la vie marine, mais bien entendu également des films courants." class="gensmall">New England Aquarium</a>, <a href="/f52-south-station" title="Governement Center, les affaires et les théâtres ✗ Construite en 1899, La South Station est la gare principale de Boston. Elle est le point de départ des grandes lignes ferroviaires en direction de New-York, Philadelphie, Washington et Rhode Island mais aussi des lignes de bus pour partir vers le Sud de la Nouvelle-Angeterre. Comme toutes gares on y retrouve des installations permettant de se restaurer et quelques boutiques." class="gensmall">South Station</a>, <a href="/f58-td-garden" title="North End, le quartier italien ✗ Cette salle omnisports est depuis 1995 le domicile des Celtics de Boston de la NBA et des Bruins de Boston de la Ligue nationale de hockey. Elle est également le lieu de nombreuses manifestations sportives et notamment de rencontres inter universitaires. Le TD Garden ravira aussi les fans de musiques qui ont déjà pu voir s'illustrer de grandes stars internationales telles que Lady Gaga, Rihanna, Madonna, U2 ou encore les Rolling Stones." class="gensmall">TD Garden</a>, <a href="/f68-mike-s-pastries" title="North End, le quartier italien ✗ Cette pâtisserie familiale est l'une des plus réputés du quartier. Elle a ravit les palais de centaines de Bostoniens et sa renommée n'est plus à faire. Ici on met un point d'honneur sur la fraîcheur des produits et la tradition. Entre spécialités italiennes et américaines (cookies, muffins, cheesecake, tartes...) vous trouverez forcément votre bonheur. Difficile de ne pas avoir l'eau à la bouche quand on passe devant la vitrine." class="gensmall">Mike's pastries</a>, <a href="/f69-mamma-maria" title="North End, le quartier italien ✗ L'un si ce n'est pas le meilleur restaurant de toute la ville. Dans une atmosphère des plus romantique, le Mamma Maria vous invite pour un voyage gustatif en Italie. On y vient autant pour les plats divins que pour l'ambiance raffinée. Quand les beaux jours arrivent profitant en pour dîner en terrasse. Mais attention, y obtenir une table n'est pas chose facile (ni à porter de toutes les bourses), il faut s'y prendre à l'avance si vous comptez faire plaisir à votre partenaire ou à vos amis." class="gensmall">Mamma Maria</a>, <a href="/f70-les-habitations" title="Avoir un toit dans le centre ville n'est pas donner à tout le monde. Bien que Beacon Hill (aka les beaux quartiers de Boston) soit un quartier résidentiel plus qu'agréable à vivre, ses petites maisons pittoresques sont pour le moins onéreuses. C'est donc un privilège de résider dans ce havre de paix. Le quartier de Downtown avec ses lofts est assez prisé par les hommes et femmes d'affaires tandis que la population de North End est majoritairement constituée de familles." class="gensmall">Les habitations</a></span>
          </div>
        </div>
    </div>
</div>
      
      <div class="cate">
    <div class="forumlink">
        <a href="{catrow.forumrow.U_VIEWFORUM}">Devenir Harvardien !</a>
    </div>
    <div class="englob_cate">
       <div class="infos"> 
           <div class="stats">
             <div class="topics"><b>193</b><br>sujets</div>
             <div class="messages"><b>4131</b><br>messages</div>
           </div>
            <div class="lastpost">
                <span id="last"><span><a href="/t62177-f-m-let-s-face-it-i-m-pretty-adorable" title="(f/m) let's face it, i'm pretty adorable">(f/m) let's face...</a><br>Aujourd'hui à 9:26<br><strong><a href="/u2126" class="gensmall"><span style="color:#76ad23"><strong>Alexander Strudwick</strong></span></a>
                </strong>&nbsp;
                <a href="/t62177-f-m-let-s-face-it-i-m-pretty-adorable?view=newest"><img src="http://image.noelshack.com/fichiers/2016/18/1462565873-newetoile.png" alt="Voir le message le plus récent" title="Voir le message le plus récent"></a>
            </div>
            <div class="new">
              <img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=165%C3%9735&w=165&h=35" />
            </div>
        </div>
        <div class="description">
            <span style="float:left; padding-right: 5px; margin-top: -4px;"><img src="http://image.noelshack.com/fichiers/2012/47/1353453947-mini-bouton3.png"></span><span class="titredesc">Scénarios et Bottin d'avatars ✗</span> Il y a environ 20.000 étudiants à Harvard d'environ 130 nationalités différentes. Tous ces étudiants sont répartis au sein de 7 confréries différentes. Ce sont des personnes uniques aux histoires compliquées et au caractère fort.
            <br><a href="http://www.i-love-harvard.com/t13510-le-bottin-liste-des-avatars-pris-et-reserves" target="_blank">bottin</a> • <a href="http://www.i-love-harvard.com/t8868-vos-scenarios-liberez-les-reservez-les" target="_blank">vos scénarios</a> • <a href="http://www.i-love-harvard.com/t29-scenarios-regles-et-modele" target="_blank">règles &amp; modèles</a>
            <br>
        </div>
        <div class="avatar">
            <!-- BEGIN avatar -->
            <span class="lastpost-avatar"><img src="http://image.noelshack.com/fichiers/2016/20/1463733622-8dcl4cg.png"></span>
            <!-- END avatar -->
        </div>
        <div class="navig">
          <div class="hover">
            sous forums
          </div>
          <div class="hidden">
            <span class="gensmall"><a href="/f28-charles-street" title="Beacon Hill, le quartier historique ✗ Charles Street n'est autre que la rue principale et commerçante mais non moins pittoresque de Beacon Hill. On y trouve de tout, notamment des boutiques d'antiquités dans un style vintage et de nombreux restaurants divers et variés. Il s'agit là de l'endroit incontournable pour flâner, faire du shopping ou prendre un café entre amis. D'ailleurs pour les accros à la caféine, c'est ici-même que vous trouverez le fameux Starbucks Coffee." class="gensmall">Charles Street</a>, <a href="/f29-boston-common" title="Beacon Hill, le quartier historique ✗ Le Boston Common est le plus ancien jardin public de la ville de Boston et même des États-Unis. Il est bordé par les rues Tremont, Beacon, et Charles. Idéal pour prendre un vrai bol d'air frais, les amoureux de la nature et les sportifs amateurs de jogging ont fait de ce parc leur lieu de prédilection. D'un point de vue historique, de nombreuses célébrités comme Martin Luther King ont prononcés des discours dans ce coin de verdure." class="gensmall">Boston Common</a>, <a href="/f30-21st-amendement" title="Beacon Hill, le quartier historique ✗ En haut de Beacon Hill, à la limite du Downtown, on trouve le 21st Amendement (son nom correspond à l’amendement qui a aboli la Prohibition) un pub qui date de 1899 (à l’origine il s'agissait d'un hôtel). D'après les rumeurs et les dires, le président Kennedy y aurait aimé écrire ses discours au coin du feu. Il s'agirait également d'un des pubs préférés du sénateur John Kerry (un burger porte même son nom). Un lieu de renom, qui a parfois servi de lieu de tournage pour des films, où il y fait bon de s'y retrouver entre amis." class="gensmall">21st Amendement</a>, <a href="/f31-boston-athenaeum" title="Beacon Hill, le quartier historique ✗ Les curieux et les intellectuels sont servis avec cette bibliothèque, une des plus anciennes et distinguée du pays, fondée en 1807. Plus de 600 000 volumes d’histoire et de littérature américaines y sont répertoriés. Le Boston Athanaeum est qualifié de cossu de part sa décoration ancienne, ses tapis immenses recouvrant le sol et ses gros fauteuils en cuir rouge. Un vrai retour dans le temps. Bien évidemment le silence est de rigueur." class="gensmall">Boston Athenaeum</a>, <a href="/f34-massachussetts-general-hospital" title="Beacon Hill, le quartier historique ✗ Les accidents ou les petits pépins, ça arrive, heureusement pour vous, le corps médical du Massachussetts General Hospital mettra tout en œuvre pour vous remettre sur pieds. On y retrouve tous les services spécialisés comme les urgences, la cardiologie, la radiologie, médecine générale mais aussi la maternité. Les visites aux patients sont autorisées jusqu'à 21h." class="gensmall">Massachussetts General Hospital</a>, <a href="/f36-financial-district" title="Governement Center, les affaires et les théâtres ✗ Boston n'a rien à envier à New York et son fameux quartier de Wall Street. Ici aussi les buildings américains dépassent les nuages tout en côtoyant de près les anciens monuments historiques. Ce contraste rend le Financial District, très agréable et moins froid que ce qu’on pourrait imaginer d’un quartier d'affaires américain. De grandes sociétés américaines mais aussi de nombreuses start up ont leurs bureaux dans ce quartier qui ne dort jamais. Les hôtels de luxe y ont aussi leurs places." class="gensmall">Financial district</a>, <a href="/f41-theater-district" title="Governement Center, les affaires et les théâtres ✗ A proximité du Financial District, on trouve le Theater District et ses nombreuses salles de concerts et spectacles, d'immenses salles de cinéma pour les amateurs du septième art mais également un opéra. Tandis que certains feront leurs premiers pas sur scène, d'autres prendront plaisir en profitant des derniers spectacles proposés." class="gensmall">Theater District</a>, <a href="/f44-faneuil-hall-marketplace" title="Governement Center, les affaires et les théâtres ✗ Le Faneuil Hall Marketplace ou encore appelé aujourd'hui Quincy Market abritait auparavant les halles de la ville. Après son expansion dans les années 1970, il est rapidement devenu un lieu incontournable de Boston. Le bâtiment principal du Quincy Market continue d'être un lieu d'approvisionnement en nourriture pour les bostoniens, on y trouve aujourd'hui des fast-foods et des restaurants. C'est un lieu populaire le midi où les travailleurs du centre-ville viennent y déjeuner. On trouve également des marchands ambulants. Deux autres bâtiments élargissent l'espace du marché pour plus de restaurants, de boutiques spécialisées et des espaces de bureaux. Il n'est pas rare de rencontrer des artistes de rues animant les espaces ouverts de cet immense complexe." class="gensmall">Faneuil Hall Marketplace</a>, <a href="/f50-new-england-aquarium" title="Governement Center, les affaires et les théâtres ✗ Avis aux amateurs de la vie maritime (en dehors de votre assiette, bien entendue), l'Aquarium de Boston est très populaire, pour les petits comme les grands. Certains étudiants aiment y travailler à l'occasion pour financer leurs études, et d'autres aiment aller y voir les petits et gros poissons, les tortues... Vous pouvez même, d'avril à novembre, aller observer les baleines dans un bâtiment annexe du New England Aquarium, le New England Aquarium Whale Watch. Un Cinéma en IMAX se trouve également dans les bâtiments, projetant des films sur la vie marine, mais bien entendu également des films courants." class="gensmall">New England Aquarium</a>, <a href="/f52-south-station" title="Governement Center, les affaires et les théâtres ✗ Construite en 1899, La South Station est la gare principale de Boston. Elle est le point de départ des grandes lignes ferroviaires en direction de New-York, Philadelphie, Washington et Rhode Island mais aussi des lignes de bus pour partir vers le Sud de la Nouvelle-Angeterre. Comme toutes gares on y retrouve des installations permettant de se restaurer et quelques boutiques." class="gensmall">South Station</a>, <a href="/f58-td-garden" title="North End, le quartier italien ✗ Cette salle omnisports est depuis 1995 le domicile des Celtics de Boston de la NBA et des Bruins de Boston de la Ligue nationale de hockey. Elle est également le lieu de nombreuses manifestations sportives et notamment de rencontres inter universitaires. Le TD Garden ravira aussi les fans de musiques qui ont déjà pu voir s'illustrer de grandes stars internationales telles que Lady Gaga, Rihanna, Madonna, U2 ou encore les Rolling Stones." class="gensmall">TD Garden</a>, <a href="/f68-mike-s-pastries" title="North End, le quartier italien ✗ Cette pâtisserie familiale est l'une des plus réputés du quartier. Elle a ravit les palais de centaines de Bostoniens et sa renommée n'est plus à faire. Ici on met un point d'honneur sur la fraîcheur des produits et la tradition. Entre spécialités italiennes et américaines (cookies, muffins, cheesecake, tartes...) vous trouverez forcément votre bonheur. Difficile de ne pas avoir l'eau à la bouche quand on passe devant la vitrine." class="gensmall">Mike's pastries</a>, <a href="/f69-mamma-maria" title="North End, le quartier italien ✗ L'un si ce n'est pas le meilleur restaurant de toute la ville. Dans une atmosphère des plus romantique, le Mamma Maria vous invite pour un voyage gustatif en Italie. On y vient autant pour les plats divins que pour l'ambiance raffinée. Quand les beaux jours arrivent profitant en pour dîner en terrasse. Mais attention, y obtenir une table n'est pas chose facile (ni à porter de toutes les bourses), il faut s'y prendre à l'avance si vous comptez faire plaisir à votre partenaire ou à vos amis." class="gensmall">Mamma Maria</a>, <a href="/f70-les-habitations" title="Avoir un toit dans le centre ville n'est pas donner à tout le monde. Bien que Beacon Hill (aka les beaux quartiers de Boston) soit un quartier résidentiel plus qu'agréable à vivre, ses petites maisons pittoresques sont pour le moins onéreuses. C'est donc un privilège de résider dans ce havre de paix. Le quartier de Downtown avec ses lofts est assez prisé par les hommes et femmes d'affaires tandis que la population de North End est majoritairement constituée de familles." class="gensmall">Les habitations</a></span>
          </div>
        </div>
    </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/darkdreams/ilh-cate-v457688-NRWwzG */
html { color: #575757; font: 600 11px/11px 'Open Sans'; }
a, a:visited { color: #3c4348; text-decoration: none; }
a:hover, a:active { color: #7F0509; }

* { box-sizing: border-box; }
body { background-color: #EBEBED; }

.cate { position: relative; height: 180px; width: 700px; margin: 0 auto; }

.englob_cate {
  margin: 10px auto;
  position: relative;
  width: 700px;
  height: 140px;
  top: 5px;
}

.cate .new {
  position: absolute;
  bottom: 3px;
  width: 100%;
  text-align: center;
}

.cate .forumlink {
  z-index: 10;
  position: absolute;
  left: 25px;
  top: 4px;
  text-align: left;
}

.cate .forumlink a {
  font: 16px/18px 'Roboto Condensed';
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 1px 1px 0px #fff;
}


.cate .stats {
  z-index: 1;
  position: absolute;
  top: 3px;
  right: 0;
  width: 100%;
  text-align:center;
}

.cate .stats .topics,
.cate .stats .messages {
  position: absolute;
  width: 68px;
  height: 40px;
  font: 9px/9px 'Roboto Condensed';
  text-transform: uppercase;
  padding: 6px;
  text-align: center;
  border-bottom: 1px solid #ece3ec;
}
.cate .stats .topics b,
.cate .stats .messages b {
  font: 700 12px/16px 'Open Sans';
}

.cate .stats .topics { top: 0; right: 0; }
.cate .stats .messages { top: 40px; right: 0; height: 41px;}

.cate .infos {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 180px;
  height: 130px;
background: #fff;
border: 1px solid #ece3ec;
}

.cate .infos .lastpost {
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  width: 110px;
  height: 84px;
  top: 0px;
  padding: 15px 5px;
  font-weight: 300;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  border-right: 1px solid #ece3ec;
  border-bottom: 1px solid #ece3ec;
}

.cate .infos .lastpost strong,
.cate .infos .lastpost strong a.gensmall {
    font-size: 10px;
  font-family: Roboto Condensed;
    text-transform: uppercase;
}

.cate .infos .lastpost a {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    font-family: Open Sans;
    color: #9d74d6;
}

.cate .avatar {
  position: absolute;
  top: 6px;
  left: 420px;
  width:85px;
  height: 130px;
}

.cate .avatar .lastpost-avatar img {
  z-index: 10;
  position: absolute;
  height: 130px;
  border-radius: 0;
  border: 2px solid rgba(239, 240, 240,.55);
}

.cate .description {
  position: absolute;
  top: 8px;
  left: 6px;
  width: 400px;
  height: 95px;
  background: #ddd8f0;
  border: 1px solid #cbb6d6;
  font: 11px/10px Open Sans;
  text-align: justify;
  padding: 20px;
  overflow: auto;
}

.cate .description a {
    font: 11px Roboto Condensed;
  text-transform: uppercase;
}

.cate .navig {
  position: absolute;
  bottom: 6px;
  left: 5px;
  width: 400px;
  height: 25px;
}

.cate .navig .hover {
  background: #b7cdf0;
  border: 1px solid #c0c2ea;
  height: 25px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding-top: 5px;
  cursor: pointer;
}

.cate .navig .hover:hover { border-bottom: 1px solid #b7cdf0; }

.cate .navig .hidden {
  position: absolute;
  z-index: -1;
  opacity: 0;
  top: 25px;
  right: 0;
  transition: all .25s ease-in-out;
  background: #e7e8fa;
  border: 1px solid #c0c2ea;
  border-top: 1px solid #b7cdf0;
  padding: 10px;
}

.cate .navig .hover:hover ~ .hidden,
.cate .navig .hover:active ~ .hidden,
.cate .navig .hidden:hover { opacity: 1; z-index: 200; }

.cate .navig .hidden span {
  display:inline-block;
  vertical-align: middle;
  width: 100%;
  text-align: justify;
}

.cate .navig span a {
  font: 600 9px open Sans;
  text-transform: uppercase;
  text-decoration: none;
}

Comments