[ILH] PA v457688

In this example below you will see how to do a [ILH] PA 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
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>[ILH] PA 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://sd-2.archive-host.com/membres/up/184686991814117660/jquerymCustomScrollbarmin.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.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="pa">

  <!-- Introduction -->
  <div class="intro">
    <div class="onglets">
      <a href="#" class="onglet active" data-intro-onglet="contexte"></a>
      <a href="#" class="onglet" data-intro-onglet="intrigue"></a>
    </div>
    <div class="contents">
      <div class="content contexte active scroll">
        Comme chaque fois depuis bon nombre d'années, le classement 2014 des meilleures universités du monde a statufié que la première place revenait à l'université d'Harvard, située à Cambridge dans le Massachusetts. La plus grande université des États-Unis,
        probablement la plus demandée et surtout la plus spectaculaire en tout point. L'ancienne et prestigieuse école accueille chaque année des étudiants du monde entier. La diversité de cette université est parfaitement caractérisée par ses maisons
        emblématiques, chacune possédant des caractéristiques bien à elles. A Harvard, on s'aime, on se déchire, des alliances, des rivalités, des romances et des conflits se forment, mais au travers de ces aléas, Harvard, c'est avant tout l'histoire
        de personnes bien différentes dont les chemins se croisent et s'accrochent parfois, dans le bon sens... Ou le mauvais. <a href="#">› suite</a>

      </div>
      <div class="content intrigue scroll">
        Vous vous demandez surement ou est-ce que vous allez atterrir pour ces deux mois de vacances ? La Nouvelle-Écosse vous recevra pour le Summer Camp de 2016. Vous vous demandez surement où est-ce que se situe cet endroit ? Nouvelle-Écosse, vers l’Écosse
        ? Et bien non, c'est situé à l'est du Canada. Cette année, contrairement à l'année dernière où il n'y avait pas de compétition, nous avons décidé de changer, d'innover une fois de plus, en remettant au gout du jour les épreuves par équipes, mais
        en organisant ça sous forme de chasse au trésor, de petites épreuves agréables et pas trop ennuyante, quelque chose de drôle. Ce qui change vraiment cette année, c'est que vous n'êtes pas obligé de faire partie d'une équipe, plus bas, nous allons
        vous laisser le choix d'être un Vacancier. Un Vacancier, c'est une personne qui se rend au Summer Camp juste pour bronzer et faire sa vie, sans participer à la vie des équipes qui seront formées ainsi qu'à leurs petites épreuves. La Nouvelle-Écosse
        est une province dans la région des maritimes, sur la côte atlantique du Canada, bordée par le Nouveau-Brunswick au nord. Elle couvre une superficie de 55 500 km2. La partie continentale de la province est une péninsule entourée de l'océan Atlantique,
        qui a façonné sa côte de plusieurs baies et estuaires. Aucun endroit de Nouvelle-Écosse ne se trouve à plus de 50 km de la mer. L'île du Cap-Breton, une grande île au nord-est de la partie continentale, fait aussi partie de la province, de même
        que l'île de Sable, une petite île célèbre pour ses naufrages. Alors, qui sera le prochain naufragé ? Vous allez pouvoir vous baigner autant de fois que vous le voulez, et, nous vous conseillons la baie de Fundy pour profiter encore plus du paysage.
        Et, pour vous aider à vous souvenir d'où vous venez, vous aurez la Piste Cabot, une route de plus de 300km, autour de la pointe du nord de l'île. Êtes-vous prêts pour l'aventure, pour avoir les pieds dans le sable, pour découvrir un nouveau lieu,
        pour vous allonger au soleil, bronzer, danser, mais aussi faire gagner votre équipe ? Rendez-vous au Summer Camp.

      </div>
    </div>
  </div>

  <!-- Fiches dans le besoin -->
  <div class="besoin">
    <div class="girls">
      <div class="wrap">
        <div class="crop">
          <a href="#">
            <img src="http://image.noelshack.com/fichiers/2016/34/1472204913-tom.jpg">
          </a>
        </div>
      </div>
      <div class="wrap">
        <div class="crop">
          <a href="#">
            <img src="http://image.noelshack.com/fichiers/2016/34/1472204913-tom.jpg">
          </a>
        </div>
      </div>
      <div class="wrap">
        <div class="crop">
          <a href="#">
            <img src="http://image.noelshack.com/fichiers/2016/34/1472204913-tom.jpg">
          </a>
        </div>
      </div>
      <div class="wrap">
        <div class="crop">
          <a href="#">
            <img src="http://image.noelshack.com/fichiers/2016/34/1472204913-tom.jpg">
          </a>
        </div>
      </div>
      <div class="wrap">
        <div class="crop">
          <a href="#">
            <img src="http://image.noelshack.com/fichiers/2016/34/1472204913-tom.jpg">
          </a>
        </div>
      </div>
    </div>
    <div class="title">Fiches dans le besoin</div>
    <div class="boys">
      <div class="wrap">
        <div class="crop">
          <a href="#">
            <img src="http://image.noelshack.com/fichiers/2016/34/1472204913-tom.jpg">
          </a>
        </div>
      </div>
      <div class="wrap">
        <div class="crop">
          <a href="#">
            <img src="http://image.noelshack.com/fichiers/2016/34/1472204913-tom.jpg">
          </a>
        </div>
      </div>
      <div class="wrap">
        <div class="crop">
          <a href="#">
            <img src="http://image.noelshack.com/fichiers/2016/34/1472204913-tom.jpg">
          </a>
        </div>
      </div>
      <div class="wrap">
        <div class="crop">
          <a href="#">
            <img src="http://image.noelshack.com/fichiers/2016/34/1472204913-tom.jpg">
          </a>
        </div>
      </div>
      <div class="wrap">
        <div class="crop">
          <a href="#">
            <img src="http://image.noelshack.com/fichiers/2016/34/1472204913-tom.jpg">
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Liens importants -->
  <div class="menu">
    <a href="http://www.i-love-harvard.com/t8841-reglement-du-forum">Règlement</a>
    <a href="http://www.i-love-harvard.com/t50-le-petit-contexte">Contexte</a>
    <a href="http://www.i-love-harvard.com/t13510-le-bottin-liste-des-avatars-pris-et-reserves">Avatars</a>
    <a href="http://www.i-love-harvard.com/f7-devenir-harvardien">Scénarios</a>
    <a href="http://www.i-love-harvard.com/f6-les-sponsors-de-l-universite">Partenariat</a>
    <a href="http://www.i-love-harvard.com/f113-parrainage">Parrainage</a>
  </div>

  <!-- Membres du mois -->
  <div class="members">
    <div class="member">
      <div class="img" style="background-image:url('http://image.noelshack.com/fichiers/2016/21/1464080399-4vm5sip2.png');"></div>
      <div class="details">
        <span class="titre">Membre du mois (m)</span>
        <span class="pseudo mather">Alexander Strudwick</span>
        <br/><br/><br/>
        <div><a href="http://www.i-love-harvard.com/u5918"><span class="fa fa-user"></span></a> | <a href="http://www.i-love-harvard.com/t57289-dante-diego-basini-henry-cavill"><span class="fa fa-file-text"></span></a> |
          <a href="http://www.i-love-harvard.com/t57340-le-sort-fait-les-parents-le-choix-fait-les-amis-dante-d-basini"><span class="fa fa-comments"></span></a>
        </div>
      </div>
    </div>
    <div class="member">
      <div class="img" style="background-image:url('http://image.noelshack.com/fichiers/2016/21/1464080399-4vm5sip2.png');"></div>
      <div class="details">
        <span class="titre">Membre du mois (f)</span>
        <span class="pseudo mather">Azraël-Sky Strudwick</span>
        <br/><br/><br/>
        <div><a href="http://www.i-love-harvard.com/u5918"><span class="fa fa-user"></span></a> | <a href="http://www.i-love-harvard.com/t57289-dante-diego-basini-henry-cavill"><span class="fa fa-file-text"></span></a> |
          <a href="http://www.i-love-harvard.com/t57340-le-sort-fait-les-parents-le-choix-fait-les-amis-dante-d-basini"><span class="fa fa-comments"></span></a>
        </div>
      </div>
    </div>
    <div class="member">
      <div class="img" style="background-image:url('http://image.noelshack.com/fichiers/2016/21/1464080399-4vm5sip2.png');"></div>
      <div class="details">
        <span class="titre">Duo du mois</span>
        <span class="pseudo mather">Alezael</span>
        <br/><br />
        <a href="http://www.i-love-harvard.com/u5918"><span class="fa fa-user"></span></a> | <a href="http://www.i-love-harvard.com/t57289-dante-diego-basini-henry-cavill"><span class="fa fa-file-text"></span></a> |
        <a href="http://www.i-love-harvard.com/t57340-le-sort-fait-les-parents-le-choix-fait-les-amis-dante-d-basini"><span class="fa fa-comments"></span></a><br/><br/><a href="http://www.i-love-harvard.com/u5918"><span class="fa fa-user"></span></a> | <a href="http://www.i-love-harvard.com/t57289-dante-diego-basini-henry-cavill"><span class="fa fa-file-text"></span></a>        | <a href="http://www.i-love-harvard.com/t57340-le-sort-fait-les-parents-le-choix-fait-les-amis-dante-d-basini"><span class="fa fa-comments"></span></a>
      </div>
    </div>
    <div class="member">
      <div class="img" style="background-image:url('http://image.noelshack.com/fichiers/2016/21/1464080399-4vm5sip2.png');"></div>
      <div class="details">
        <span class="titre">Maison du mois</span>
        <span class="pseudo mather">+105%</span>
      </div>
    </div>
  </div>

  <!-- Animateurs -->
  <div class="actu">
    <span>Actualités</span>
    <div class="activities">
      <a href="http://www.i-love-harvard.com/t63904-les-compteurs-et-le-top-rpgiste-quel-avenir#2208711">Les rpgistes de la semaine </a> <a href="http://www.i-love-harvard.com/f307-lachatte-a-ta-mer">Sachatte à ta mère, le blog de l'été ! </a> <a href="http://www.i-love-harvard.com/t63911-summer-camp-2016-programme#2208721">Le Programme du Summer Camp 2016 ! </a>      <a href="http://www.i-love-harvard.com/t63909-la-chasse-au-tresor-explications">Les explications de la Chasse au Trésor ! </a>
    </div>
  </div>

  <!-- Staff -->
  <div class="staff">
    <div class="onglets">
      <a href="#" data-name="default" class="active"></a>
      <a href="#" data-name="jude"></a>
      <a href="#" data-name="nevada"></a>
      <a href="#" data-name="alek"></a>
      <a href="#" data-name="sophia"></a><br>
      <a href="#" data-name="sacha"></a>
      <a href="#" data-name="feldt"></a>
      <a href="#" data-name="alaska"></a>
      <a href="#" data-name="tamsin"></a>
      <a href="#" data-name="dante"></a>
      <a href="#" data-name="athena"></a>
    </div>
    <div class="contents">
      <div class="content default">
        <span class="perso">Les têtes de staffiens</span><br><br>Toujours prêts à servir sur leur licorne couleur cacao des bois, une cape dans le dos et leur clavier à la main, ils sont là, tous réunis dans des onglets pour ton plus grand plaisir !
        <br><br>
        <center>Découvre la dream team !</center>
      </div>
      <div class="content jude">
        <div class="left">
          <img src="http://image.noelshack.com/fichiers/2016/35/1472739475-penn-badgley.png" alt="" />

          <div class="statut">présent</div>
          <div class="profil"><a href="#">profil</a></div>
          <div class="mc"><a href="#">double compte</a></div>
        </div>
        <div class="right">
          <div class="perso">N. Jude S-Montgomery</div>
          <div class="more"><span class="pseudo">L O V E B U G</span> • <span class="rang">Administratrice</span></div>
          <div class="infos scroll">Un vétéran du forum, une des premières inscrites, Marie est arrivée sur le forum que vous n'étiez même pas encore nés. Comment ça, j'exagère ? Plus sérieusement, Marie, c'est l'admin aux mille et unes idées. Elle fourmille d'envies diverses,
            et ne tarde jamais à les mettre en application. Elle fait preuve d'une rigueur et d'une organisation qui peuvent parfois lui donner des airs durs, mais derrière ce fort caractère se cache une fille adorable, qui ne demande qu'à faire plaisir
            aux membres, nouveaux comme anciens. Bon, elle est aussi un peu sadique, que ce soit avec ses personnages ou de façon globale. Surtout, n'allez pas parler de films d'horreur avec elle, sinon, on la perd pour de bon. Son nouveau trip ? American
            Horror Story. Erk.</div>
        </div>
      </div>
      <div class="content nevada">
        <div class="left">
          <img src="http://image.noelshack.com/fichiers/2016/35/1472739475-penn-badgley.png" alt="" />

          <div class="statut">présent</div>
          <div class="profil"><a href="#">profil</a></div>
          <div class="mc"><a href="#">double compte</a></div>
        </div>
        <div class="right">
          <div class="perso">C. Nevada Lewis-Kennedy</div>
          <div class="more"><span class="pseudo">L O V E B U G</span> • <span class="rang">Administratrice</span></div>
          <div class="infos scroll">Un vétéran du forum, une des premières inscrites, Marie est arrivée sur le forum que vous n'étiez même pas encore nés. Comment ça, j'exagère ? Plus sérieusement, Marie, c'est l'admin aux mille et unes idées. Elle fourmille d'envies diverses,
            et ne tarde jamais à les mettre en application. Elle fait preuve d'une rigueur et d'une organisation qui peuvent parfois lui donner des airs durs, mais derrière ce fort caractère se cache une fille adorable, qui ne demande qu'à faire plaisir
            aux membres, nouveaux comme anciens. Bon, elle est aussi un peu sadique, que ce soit avec ses personnages ou de façon globale. Surtout, n'allez pas parler de films d'horreur avec elle, sinon, on la perd pour de bon. Son nouveau trip ? American
            Horror Story. Erk.</div>
        </div>
      </div>
      <div class="content alek">
        <div class="left">
          <img src="http://image.noelshack.com/fichiers/2016/35/1472739475-penn-badgley.png" alt="" />

          <div class="statut">présent</div>
          <div class="profil"><a href="#">profil</a></div>
          <div class="mc"><a href="#">double compte</a></div>
        </div>
        <div class="right">
          <div class="perso">Alek E. Lewis-Kennedy</div>
          <div class="more"><span class="pseudo">L O V E B U G</span> • <span class="rang">Administratrice</span></div>
          <div class="infos scroll">Un vétéran du forum, une des premières inscrites, Marie est arrivée sur le forum que vous n'étiez même pas encore nés. Comment ça, j'exagère ? Plus sérieusement, Marie, c'est l'admin aux mille et unes idées. Elle fourmille d'envies diverses,
            et ne tarde jamais à les mettre en application. Elle fait preuve d'une rigueur et d'une organisation qui peuvent parfois lui donner des airs durs, mais derrière ce fort caractère se cache une fille adorable, qui ne demande qu'à faire plaisir
            aux membres, nouveaux comme anciens. Bon, elle est aussi un peu sadique, que ce soit avec ses personnages ou de façon globale. Surtout, n'allez pas parler de films d'horreur avec elle, sinon, on la perd pour de bon. Son nouveau trip ? American
            Horror Story. Erk.</div>
        </div>
      </div>
      <div class="content sophia">
        <div class="left">
          <img src="http://image.noelshack.com/fichiers/2016/35/1472739475-penn-badgley.png" alt="" />

          <div class="statut">présent</div>
          <div class="profil"><a href="#">profil</a></div>
          <div class="mc"><a href="#">double compte</a></div>
        </div>
        <div class="right">
          <div class="perso">Sophia B. Vanderbilt</div>
          <div class="more"><span class="pseudo">L O V E B U G</span> • <span class="rang">Administratrice</span></div>
          <div class="infos scroll">Un vétéran du forum, une des premières inscrites, Marie est arrivée sur le forum que vous n'étiez même pas encore nés. Comment ça, j'exagère ? Plus sérieusement, Marie, c'est l'admin aux mille et unes idées. Elle fourmille d'envies diverses,
            et ne tarde jamais à les mettre en application. Elle fait preuve d'une rigueur et d'une organisation qui peuvent parfois lui donner des airs durs, mais derrière ce fort caractère se cache une fille adorable, qui ne demande qu'à faire plaisir
            aux membres, nouveaux comme anciens. Bon, elle est aussi un peu sadique, que ce soit avec ses personnages ou de façon globale. Surtout, n'allez pas parler de films d'horreur avec elle, sinon, on la perd pour de bon. Son nouveau trip ? American
            Horror Story. Erk.</div>
        </div>
      </div>
      <div class="content sacha">
        <div class="left">
          <img src="http://image.noelshack.com/fichiers/2016/35/1472739475-penn-badgley.png" alt="" />

          <div class="statut">présent</div>
          <div class="profil"><a href="#">profil</a></div>
          <div class="mc"><a href="#">double compte</a></div>
        </div>
        <div class="right">
          <div class="perso">Sacha C. Angharad</div>
          <div class="more"><span class="pseudo">L O V E B U G</span> • <span class="rang">Administratrice</span></div>
          <div class="infos scroll">Un vétéran du forum, une des premières inscrites, Marie est arrivée sur le forum que vous n'étiez même pas encore nés. Comment ça, j'exagère ? Plus sérieusement, Marie, c'est l'admin aux mille et unes idées. Elle fourmille d'envies diverses,
            et ne tarde jamais à les mettre en application. Elle fait preuve d'une rigueur et d'une organisation qui peuvent parfois lui donner des airs durs, mais derrière ce fort caractère se cache une fille adorable, qui ne demande qu'à faire plaisir
            aux membres, nouveaux comme anciens. Bon, elle est aussi un peu sadique, que ce soit avec ses personnages ou de façon globale. Surtout, n'allez pas parler de films d'horreur avec elle, sinon, on la perd pour de bon. Son nouveau trip ? American
            Horror Story. Erk.</div>
        </div>
      </div>
      <div class="content feldt">
        <div class="left">
          <img src="http://image.noelshack.com/fichiers/2016/35/1472739475-penn-badgley.png" alt="" />

          <div class="statut">présent</div>
          <div class="profil"><a href="#">profil</a></div>
          <div class="mc"><a href="#">double compte</a></div>
        </div>
        <div class="right">
          <div class="perso">Feldt Crossroad</div>
          <div class="more"><span class="pseudo">L O V E B U G</span> • <span class="rang">Administratrice</span></div>
          <div class="infos scroll">Un vétéran du forum, une des premières inscrites, Marie est arrivée sur le forum que vous n'étiez même pas encore nés. Comment ça, j'exagère ? Plus sérieusement, Marie, c'est l'admin aux mille et unes idées. Elle fourmille d'envies diverses,
            et ne tarde jamais à les mettre en application. Elle fait preuve d'une rigueur et d'une organisation qui peuvent parfois lui donner des airs durs, mais derrière ce fort caractère se cache une fille adorable, qui ne demande qu'à faire plaisir
            aux membres, nouveaux comme anciens. Bon, elle est aussi un peu sadique, que ce soit avec ses personnages ou de façon globale. Surtout, n'allez pas parler de films d'horreur avec elle, sinon, on la perd pour de bon. Son nouveau trip ? American
            Horror Story. Erk.</div>
        </div>
      </div>
      <div class="content alaska">
        <div class="left">
          <img src="http://image.noelshack.com/fichiers/2016/35/1472739475-penn-badgley.png" alt="" />

          <div class="statut">présent</div>
          <div class="profil"><a href="#">profil</a></div>
          <div class="mc"><a href="#">double compte</a></div>
        </div>
        <div class="right">
          <div class="perso">Alaska Hamilton</div>
          <div class="more"><span class="pseudo">L O V E B U G</span> • <span class="rang">Administratrice</span></div>
          <div class="infos scroll">Un vétéran du forum, une des premières inscrites, Marie est arrivée sur le forum que vous n'étiez même pas encore nés. Comment ça, j'exagère ? Plus sérieusement, Marie, c'est l'admin aux mille et unes idées. Elle fourmille d'envies diverses,
            et ne tarde jamais à les mettre en application. Elle fait preuve d'une rigueur et d'une organisation qui peuvent parfois lui donner des airs durs, mais derrière ce fort caractère se cache une fille adorable, qui ne demande qu'à faire plaisir
            aux membres, nouveaux comme anciens. Bon, elle est aussi un peu sadique, que ce soit avec ses personnages ou de façon globale. Surtout, n'allez pas parler de films d'horreur avec elle, sinon, on la perd pour de bon. Son nouveau trip ? American
            Horror Story. Erk.</div>
        </div>
      </div>
      <div class="content tamsin">
        <div class="left">
          <img src="http://image.noelshack.com/fichiers/2016/35/1472739475-penn-badgley.png" alt="" />

          <div class="statut">présent</div>
          <div class="profil"><a href="#">profil</a></div>
          <div class="mc"><a href="#">double compte</a></div>
        </div>
        <div class="right">
          <div class="perso">Tamsin B. Watts</div>
          <div class="more"><span class="pseudo">L O V E B U G</span> • <span class="rang">Administratrice</span></div>
          <div class="infos scroll">Un vétéran du forum, une des premières inscrites, Marie est arrivée sur le forum que vous n'étiez même pas encore nés. Comment ça, j'exagère ? Plus sérieusement, Marie, c'est l'admin aux mille et unes idées. Elle fourmille d'envies diverses,
            et ne tarde jamais à les mettre en application. Elle fait preuve d'une rigueur et d'une organisation qui peuvent parfois lui donner des airs durs, mais derrière ce fort caractère se cache une fille adorable, qui ne demande qu'à faire plaisir
            aux membres, nouveaux comme anciens. Bon, elle est aussi un peu sadique, que ce soit avec ses personnages ou de façon globale. Surtout, n'allez pas parler de films d'horreur avec elle, sinon, on la perd pour de bon. Son nouveau trip ? American
            Horror Story. Erk.</div>
        </div>
      </div>
      <div class="content dante">
        <div class="left">
          <img src="http://image.noelshack.com/fichiers/2016/35/1472739475-penn-badgley.png" alt="" />

          <div class="statut">présent</div>
          <div class="profil"><a href="#">profil</a></div>
          <div class="mc"><a href="#">double compte</a></div>
        </div>
        <div class="right">
          <div class="perso">Dante D. Basini</div>
          <div class="more"><span class="pseudo">L O V E B U G</span> • <span class="rang">Administratrice</span></div>
          <div class="infos scroll">Un vétéran du forum, une des premières inscrites, Marie est arrivée sur le forum que vous n'étiez même pas encore nés. Comment ça, j'exagère ? Plus sérieusement, Marie, c'est l'admin aux mille et unes idées. Elle fourmille d'envies diverses,
            et ne tarde jamais à les mettre en application. Elle fait preuve d'une rigueur et d'une organisation qui peuvent parfois lui donner des airs durs, mais derrière ce fort caractère se cache une fille adorable, qui ne demande qu'à faire plaisir
            aux membres, nouveaux comme anciens. Bon, elle est aussi un peu sadique, que ce soit avec ses personnages ou de façon globale. Surtout, n'allez pas parler de films d'horreur avec elle, sinon, on la perd pour de bon. Son nouveau trip ? American
            Horror Story. Erk.</div>
        </div>
      </div>
      <div class="content athena">
        <div class="left">
          <img src="http://image.noelshack.com/fichiers/2016/35/1472739475-penn-badgley.png" alt="" />

          <div class="statut">présent</div>
          <div class="profil"><a href="#">profil</a></div>
          <div class="mc"><a href="#">double compte</a></div>
        </div>
        <div class="right">
          <div class="perso">Athena V. Campbell</div>
          <div class="more"><span class="pseudo">L O V E B U G</span> • <span class="rang">Administratrice</span></div>
          <div class="infos scroll">Un vétéran du forum, une des premières inscrites, Marie est arrivée sur le forum que vous n'étiez même pas encore nés. Comment ça, j'exagère ? Plus sérieusement, Marie, c'est l'admin aux mille et unes idées. Elle fourmille d'envies diverses,
            et ne tarde jamais à les mettre en application. Elle fait preuve d'une rigueur et d'une organisation qui peuvent parfois lui donner des airs durs, mais derrière ce fort caractère se cache une fille adorable, qui ne demande qu'à faire plaisir
            aux membres, nouveaux comme anciens. Bon, elle est aussi un peu sadique, que ce soit avec ses personnages ou de façon globale. Surtout, n'allez pas parler de films d'horreur avec elle, sinon, on la perd pour de bon. Son nouveau trip ? American
            Horror Story. Erk.</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Partenaires -->
  <div class="partners">
    <select name="toppartners" id="toppartners" onchange="window.open(this.options[this.selectedIndex].value,'_blank')">
       <option selected="selected">Top partenaires</option>
       <option value="http://www.i-love-harvard.com">I Love Harvard</option>
   </select>
  </div>

  <!-- Twitter -->
  <div class="twitter">
    <div class="button"></div>
    <div class="panel">
      <a class="twitter-timeline" href="https://twitter.com/ILoveHarvard1" data-widget-id="346258748320391168">Tweets de @ILoveHarvard1</a>
      <script>
        !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
      </script>
    </div>
  </div>

</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://sd-2.archive-host.com/membres/up/184686991814117660/jquerymCustomScrollbarconcatmin.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/darkdreams/ilh-pa-v457688-dXBdjg */
* { box-sizing: border-box; }
html { color: #575757; font: 600 11px/11px 'Open Sans'; }
a, a:visited { color: #2b3131; text-decoration: none;}
a:hover, a:active { color: #7F0509; }

.pa {
  position: relative;
  width: 724px;
  height: 600px;
  margin: 0 auto;
  background: url('http://image.noelshack.com/fichiers/2016/32/1471111716-pa-ilh-finale.png');
}

/* PA - Introduction */
.pa .intro {
  position: absolute; 
  top: 35px; left: 60px; 
  text-align: justify;
}

.pa .intro .onglets {
  position: absolute;
  top: 0; left: 0;
  width: 20px;
}

.pa .intro .onglets .onglet {
  display: block;
  width: 18px; height: 18px;
  margin-bottom: 5px;
  border-radius: 50%;
  background-color: #7aabf7;
  border: 1px solid rgba(255,255,255,.25);
}

.pa .intro .onglets .onglet.active {
  background-color: #fff;
}

.pa .intro .contents .content {
  opacity: 0;
  position: absolute;
  left: 25px;
  width: 220px; height: 195px;
  padding-right: 15px;
  text-align: justify;
  z-index: 1;
}
.pa .intro .contents .content.active {
  opacity: 1;
  z-index: 10;
}

/* PA - Fiches dans le besoin */
.pa .besoin {
  position: absolute;
  right: 50px;
  top: 80px;
}

.pa .besoin .title {
    text-transform: uppercase;
    text-align: center;
    height: 30px;
    margin-bottom: 30px;
}

.pa .besoin .girls, .pa .besoin .boys {
    height: 30px;
    margin-bottom: 20px;
}

.pa .besoin .wrap {
  -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
          transform: rotate(45deg) translate3d(0, 0, 0);
  display: inline-block;
  transition: -webkit-transform 300ms ease-out;
  transition: transform 300ms ease-out;
  transition: transform 300ms ease-out, -webkit-transform 300ms ease-out;
  width: 60px;
}
.pa .besoin .wrap:hover {
  transition: -webkit-transform 700ms ease-out;
  transition: transform 700ms ease-out;
  transition: transform 700ms ease-out, -webkit-transform 700ms ease-out;
  -webkit-transform: rotate(45deg) translate3d(10px, 10px, 0);
          transform: rotate(45deg) translate3d(10px, 10px, 0);
}
.pa .besoin .wrap:nth-child(even) {
  width: 15px;
  -webkit-transform: rotate(225deg) translate3d(25px, 60px, 0);
          transform: rotate(225deg) translate3d(25px, 60px, 0);
}
.pa .besoin .wrap:nth-child(even) .crop img {
  -webkit-transform: skew(-20deg, -20deg) rotate(-225deg);
          transform: skew(-20deg, -20deg) rotate(-225deg);
}
.pa .besoin .wrap:nth-child(even):hover {
  -webkit-transform: rotate(225deg) translate3d(35px, 70px, 0);
          transform: rotate(225deg) translate3d(35px, 70px, 0);
}

.pa .besoin .wrap .crop {
  position: relative;
  width: 75px;
  height: 75px;
  margin: 0;
  display: block;
  overflow: hidden;
  -webkit-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
          transform: skew(20deg, 20deg) translate3d(0, 0, 0);
}
.pa .besoin .wrap .crop img {
  width: 75px;
  height: 75px;
  position: absolute;
  left: -50%;
  margin-top: 15px;
  margin-left: 15px;
  top: -50%;
  -webkit-transform: skew(-20deg, -20deg) rotate(-45deg);
          transform: skew(-20deg, -20deg) rotate(-45deg);
  transition: opacity 300ms ease-in-out;
  border: 5px solid white;
}
/* PA - Menu */
.pa .menu {
  position: absolute;
  z-index: 10;
  top: 260px; left: 100px;
  width: 200px; height: 150px;
}

.pa .menu a {
  display: block;
  margin-bottom: 2px;
  font: 400 18px Roboto Condensed;
  text-transform: uppercase;
  color: #34393d;
  text-decoration: none;
}

.pa .menu a:nth-child(2) { padding-left: 15px; }
.pa .menu a:nth-child(3) { padding-left: 30px; }
.pa .menu a:nth-child(4) { padding-left: 45px; }
.pa .menu a:nth-child(5) { padding-left: 60px; }
.pa .menu a:nth-child(6) { padding-left: 75px; }

.pa .menu a:hover { font-weight: 700; text-shadow: 1px 1px 0px #fff; }
.pa .menu a:first-child:hover    { color: #70a3f5; }
.pa .menu a:nth-child(2):hover   { color: #e66aeb; }
.pa .menu a:nth-child(3):hover   { color: #f99e8d; }
.pa .menu a:nth-child(4):hover   { color: #e7a800; }
.pa .menu a:nth-child(5):hover   { color: #a2ddd3; }
.pa .menu a:nth-child(6):hover   { color: #70a3f5; }

/* PA - Membres du mois */

.pa .members {
  z-index: 1;
  position: absolute; 
  bottom: 235px;
  right: 75px;
  width: 260px;
  height: 100px;
  display: flex;
  justify-content: space-between;
}

.pa .member {
    position: relative;
    width: 58px;
    height: 76px;
}

.pa .member .img {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 116px;
  height: 152px;
  background-position: top center;
    -webkit-transform: scale(.5);
            transform: scale(.5);
    transition: all 500ms ease-in-out 500ms;
}

.pa .member .img:hover,
.pa .member:hover .img {
  z-index: 5;
  width: 100px;
  height: 160px;
    -webkit-transform: scale(1);
            transform: scale(1);
  transition: all 500ms ease-in-out;
}

.pa .member .img ~ .details {
  visibility: hidden;
  z-index: 1;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 160px;
  background: white;
  transition: all 500ms ease-in-out;
  text-align: center;
  padding: 20px 10px;
}

.pa .member .img:hover ~ .details,
.pa .member .img ~ .details:hover {
  visibility: visible;
  z-index: 3;
  opacity: 1;
  left: 100px;
  width: 200px;
  height: 160px;
  transition: all 500ms ease-in-out 500ms;
}

.pa .member .details .titre {
  font: 900 16px Raleway;
  text-transform: uppercase;
  display: block;
}

.pa .member .details .pseudo {
  font: 18px Parisienne;
}

.pa .member .details span.fa { font-size: 18px; width: 20px; display: inline-block; }


/* PA - Actualités */ 
.pa .actu {
  position: absolute;
  bottom: 80px;
  right: 8px;
  width: 290px;
  height: 100px;
}

.pa .actu .activities {
    font: 700 10px/10px Open Sans;
    text-align: justify;
    padding-right: 10px;
}

.pa .actu .activities a { text-transform: uppercase; display:block; }
.pa .actu .activities a:hover { color: #e4a500; }

.pa .actu span {
  display: block;
  font: 300 16px 'Roboto Condensed';
  text-transform: uppercase;
  padding: 5px 5px 5px 0;
  margin: 0;
}

/* PA - Staff */
.pa .staff {
  position: absolute;
  left: 20px; bottom: 20px; 
  width: 383px;
  height: 150px;
  z-index: 50;
}

.pa .staff .onglets {
  position: absolute;
  top: -50px;
  z-index: 100;
  width: 145px;
  height: 50px;
}

.pa .staff .onglets a {
  position: relative; 
  display: inline-block;
  width: 15px; height: 15px; 
  margin: 0 6px 6px 0;
  background: rgba(255,255,255,0);
  border-radius: 50%;
}

.pa .staff .onglets a.active { background: rgba(255,255,255,0.75); }

.pa .staff .contents {
  width: 100%;
  height: 155px;
  position: relative;
}

.pa .staff .content {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  padding: 8px 0;
  z-index: -1;
}

.pa .staff .content.default {
  padding: 10px;
}

.pa .staff .content.active { opacity: 1; z-index: 10; }
.pa .staff .content .left {
  width: 110px;
  height: 130px;
  float: left;
  padding: 0 10px;
  border-right: 1px solid #e7e8f9;
}

.pa .staff .content .left img {
  display: block;
  width: 65px;
  border-radius: 50%;
  border: 5px solid #84b1ed;
  margin: 0 auto 5px;
}

.pa .staff .content .left div {
  width: 80px;
  font: 400 10px Roboto Condensed;
  text-transform: uppercase;
  text-align: center;
  padding: 2px 0;
  margin: 0 auto 2px;
}

.pa .staff .content .left .statut { background: #b3cbf0;}
.pa .staff .content .left .profil { background: #c7d8f5;}
.pa .staff .content .left .mc { background: #dee2f8;}

.pa .staff .content .right {
  width: 265px;
  height: 130px;
  float: left;
  padding: 5px 10px; 
}

.pa .staff .content .perso,
.pa .staff .content .right .perso {
  font: 16px Roboto Condensed;
  text-transform: uppercase;
  color: #bce101;
}

.pa .staff .content .right .more {
  font: 11px Roboto Condensed;
  color: #262c30;
}

.pa .staff .content .right .rang { text-transform: uppercase; }

.pa .staff .content .right .infos {
  margin-top: 5px;
  height: 90px;
  overflow: auto;
  text-align: justify;
  padding-right: 15px;
}

/* PA - Partenaires */
.pa .partners {
  position: absolute;
  width: 205px; height: 50px;
  bottom: 29px;
  right: 97px;
  padding: 13px 20px;
  text-align: center;
}

.pa .partners select {
  width: 100%;
  padding: 3px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* PA - Twitter */
.pa .twitter {
  position: absolute;
  bottom: 20px; right: 20px;
  width: 60px; height: 60px;
}

.pa .twitter .button {
  width: 60px; height: 60px;
}

.pa .twitter .panel {
  z-index: -1;
  opacity: 0;
  width: 200px;
  height: 230px;
  position: absolute;
  bottom: 110px;
  right: 0px;
  transition: all .25s ease-in-out;
}
.pa .twitter .panel iframe { width: 100%; }

.pa .twitter .button:hover ~ .panel,
.pa .twitter .button:active ~ .panel,
.pa .twitter .panel:hover { opacity: 1; z-index: 200; }

/*Downloaded from https://www.codeseek.co/darkdreams/ilh-pa-v457688-dXBdjg */
$(document).ready(function(){
  	$(".scroll").mCustomScrollbar({
  		theme: 'minimal-dark',
  		advanced:{ updateOnContentResize: true }
  	});
  
    $('.pa .intro .onglet').on('click', function(e) {
      e.preventDefault();
      $('.pa .intro .onglet').removeClass('active');
      $(this).toggleClass('active');
      
      var classSelected = '.'.concat($(this).data('intro-onglet'));
      $(".pa .intro .content" + classSelected).addClass(' active ').siblings().removeClass(' active ');
    });
  
  $(".pa .staff .contents .content:first-child").addClass('active');

  var $tabs = $(" .pa .staff .onglets a "); 

  $tabs.on("click touchend", function(e) {
    e.preventDefault();
    var classSelected = '.'.concat($(this).data('name'));

    $tabs.removeClass(' active ');
    $(this).addClass(' active ');
    $(".pa .staff .contents .content" + classSelected).animate({
      opacity: 1, duration: 1000 
    }).addClass(' active ').siblings().animate({
      opacity: 0, duration: 1000
    }).removeClass(' active ');
  });
});

Comments