[ILH] Page d'Accueil - v53

In this example below you will see how to do a [ILH] Page d'Accueil - v53 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] Page d'Accueil - v53</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=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 prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.basic-slider/1.3/jquery.bjqs.min.css'>
<link rel='stylesheet prefetch' href='https://sd-2.archive-host.com/membres/up/184686991814117660/jquerymCustomScrollbarmin.css'>

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

  
</head>

<body>

  <div class="pa">
    <div class="menu">
        <div class="part">
            <div>
                <a href="http://www.i-love-harvard.com/t8841-reglement-du-forum">Règlement</a>
            </div>
            <div>
                <a href="http://www.i-love-harvard.com/t50-le-petit-contexte">Contexte</a>
            </div>
            <div>
                <a href="http://www.i-love-harvard.com/t13510-le-bottin-liste-des-avatars-pris-et-reserves">Bottin des avatars</a>
            </div>
            <div>
                <a href="http://www.i-love-harvard.com/f7-devenir-harvardien">Scénarios à prendre</a>
            </div>
            <div>
                <a href="http://www.i-love-harvard.com/f6-les-sponsors-de-l-universite">Partenariat</a>
            </div>
            <div>
                <a href="http://www.i-love-harvard.com/f113-parrainage">Parrainage</a>
            </div>
        </div>
    </div>
    <div class="context scroll">
        <span>Contexte</span>
        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="http://www.i-love-harvard.com/t50-le-petit-contexte">› suite</a>
    </div>
    <div class="intrigue scroll">
        <span>Intrigue</span>
        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="http://www.i-love-harvard.com/t50-le-petit-contexte">› suite</a>
    </div>
    <div class="staffiens">
        <div class="onglets">
            <a href="#" class="onglet default" data-name="default"></a>
            <a href="#" class="onglet maddy" data-name="maddy"></a>
            <a href="#" class="onglet jude" data-name="jude"></a>
            <a href="#" class="onglet nevada" data-name="nevada"></a>
            <a href="#" class="onglet alek" data-name="alek"></a>
            <a href="#" class="onglet emma" data-name="emma"></a>
            <a href="#" class="onglet sacha" data-name="sacha"></a>
            <a href="#" class="onglet feldt" data-name="feldt"></a>
            <a href="#" class="onglet alaska" data-name="alaska"></a>
            <a href="#" class="onglet tamsin" data-name="tamsin"></a>
            <a href="#" class="onglet dante" data-name="dante"></a>
            <a href="#" class="onglet athena" data-name="athena"></a>
        </div>
        <div class="contents">
            <div class="content default">
                <span class="pseudo">Les têtes de staffiens</span>
                <p>Découvre le staff</p>
            </div>
            <div class="content maddy scroll">
                <img src="http://placehold.it/130x130">
                <span class="pseudo">N. Jude S-Montgomery</span>
                <div>LOVEBUG ✱ <span class="present">Présent</span><br/> <strong>Administrateur</strong><br/>
                <a href="http://www.i-love-harvard.com/u11" target="_blank"><span class="fa fa-user"></span></a> ✱ <a href="http://www.i-love-harvard.com/privmsg?mode=post&amp;u=11" target="_blank"><span class="fa fa-envelope"></span></a></div>
                <br/><br/>
                <p>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 la modo 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. ✱ <em>Autre compte : S. Holly Connor</em></p>
            </div>
            <div class="content jude scroll">
                <img src="http://placehold.it/130x130">
                <span class="pseudo">N. Jude S-Montgomery</span>
                <div>LOVEBUG ✱ <span class="present">Présent</span><br/> <strong>Administrateur</strong><br/>
                <a href="http://www.i-love-harvard.com/u11" target="_blank"><span class="fa fa-user"></span></a> ✱ <a href="http://www.i-love-harvard.com/privmsg?mode=post&amp;u=11" target="_blank"><span class="fa fa-envelope"></span></a></div>
                <br/><br/>
                <p>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 la modo 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. ✱ <em>Autre compte : S. Holly Connor</em></p>
            </div>
            <div class="content nevada scroll">
                <img src="http://placehold.it/130x130">
                <span class="pseudo">C. Nevada Lewis-Kennedy</span>
                <div>Amantia ✱ <span class="present">Présente</span><br/> <strong>Administratrice</strong><br/>
                <a href="http://www.i-love-harvard.com/u19" target="_blank"><span class="fa fa-user"></span></a> ✱ <a href="http://www.i-love-harvard.com/privmsg?mode=post&u=19" target="_blank"><span class="fa fa-envelope"></span></a></div>
                <br/><br/>
                <p>Un autre vétéran du forum, Aurélie n'a quasiment jamais changé de personnage, et deux de ses trois comptes, Nevada et Keyla, font partie des plus anciens personnages de l'histoire d'I Love Harvard. C'est une grande fan de Demi Lovato qui, derrière ses airs angéliques, aime se proclamer avoir les "plus belles fesses d'Harvard" avec Nevada, et n'est, dans le fond, pas si sage que ça. Mais Aurélie, c'est surtout la grande prêtresse du listing des absences, une adepte de la chatbox, et une fille trèèèès ouverte aux discussions, toujours présente, même depuis son boulot. Allez, on vous autorise à lui taper les doigts et à lui dire que c'est pas bien, mais avouons le: C'est pas si mal dans le fond, qu'elle soit aussi présente  ✱ <em>Autres comptes : Keyla Haven Hepburn & Asia I. Ferrari</em></p>
            </div>
            <div class="content alek scroll">
                <span class="pseudo">Alek E. Lewis-Kennedy</span>
                
            </div>
            <div class="content emma scroll">
                <span class="pseudo">Emma J. Müller</span>
                
            </div>
            <div class="content sacha scroll">
                <span class="pseudo">Sacha C. Angharad</span>
                
            </div>
            <div class="content feldt scroll">
                <span class="pseudo">Feldt Crossroad</span>
                
            </div>
            <div class="content alaska scroll">
                <span class="pseudo">Alaska Hamilton</span>
                
            </div>
            <div class="content tamsin scroll">
                <span class="pseudo">Tamsin B. Watts</span>
                
            </div>
            <div class="content dante scroll">
                <span class="pseudo">Dante D. Basini</span>
                
            </div>
            <div class="content athena scroll">
                <span class="pseudo">Athena V. Campbell</span>
                
            </div>
        </div>
    </div>
    <div class="crush"></div>
    <div class="animators scroll">
        <span>Du côté de Cambridge's Secrets</span>
        <div class="activities">
            <a href="http://www.i-love-harvard.com/f131-cambridge-s-secret">L'actualité comme tu l'as jamais vue</a> <a href="http://www.i-love-harvard.com/t55793-http-twitter-com-cambridge-ssecret">Le twitter pour tous les potins en 140 caractères</a> <a href="http://www.i-love-harvard.com/t55791-http-instagram-com-cambridgesecrets#1958098">L'instagram qui vous montre sous votre pire jour</a><a href="http://www.i-love-harvard.com/f10-le-tinder-de-cs">Le Tinder façon bitch please</a>
        </div>
    </div>
    <div class="besoin">
      <div class="girls">
        <a href="http://www.i-love-harvard.com/t60643-coline-secrets-i-have-held-in-my-heart"><img src="http://img15.hostingpics.net/pics/2183132301.png" /></a>
        <a href="http://www.i-love-harvard.com/t60547-jezabel-she-is-a-paper-girl-in-paper-town#2112216"><img src="https://i.imgur.com/XraG2Xl.png" /></a>
        <a href="http://www.i-love-harvard.com/t60349-willow-like-i-would"><img src="https://i.imgur.com/1VzLTb3.png" /></a>
        <a href="http://www.i-love-harvard.com/t59900-hitomi-kano-fiches-identite-search-liens-rps"><img src="http://nsm08.casimages.com/img/2016/03/24//16032407351421391414088219.jpg" /></a>
        <a href="http://www.i-love-harvard.com/t59761-tessa-rocket-ship"><img src="http://image.noelshack.com/fichiers/2016/01/1452289598-untitled-5.png" /></a>
        <a href="http://www.i-love-harvard.com/t59635-luna-she-s-got-a-gun-for-a-tongue"><img src="http://image.noelshack.com/fichiers/2015/04/1422180073-ss695.png" /></a>
      </div>
      <div class="boys">
        <a href="http://www.i-love-harvard.com/t60448-on-ne-tue-pas-par-haine-mais-par-amour-esteban"><img src="http://ekladata.com/GddmV4EmnX9n7_5BummV9fp0uNg.png" /></a>
        <a href="http://www.i-love-harvard.com/t59949-you-re-ripped-at-every-edge-but-you-re-a-masterpiece"><img src="https://i.imgur.com/zHG6XsY.png" /></a>
        <a href="http://www.i-love-harvard.com/t60173-we-re-just-ghosts-inside-my-bed-thiago#2101753"><img src="https://i.imgur.com/CM5Wmv3.png" /></a>
        <a href="t59640-oliver-la-beaute-de-l-ame-se-cache-toujours-en-quelqu-un-defois-faut-une-pelteuse"><img src="http://img15.hostingpics.net/pics/8959441.png" /></a>
        <a href="http://www.i-love-harvard.com/t59262-nate-leonhart-si-le-plan-a-ne-fonctionne-pas-il-reste-encore-25-lettres-dans-l-alphabet"><img src="http://i.imgbox.com/mDft9nQl.png" /></a>
        <a href="http://www.i-love-harvard.com/t58704-sven-o-larsen-liens-et-topics"><img src="http://i84.servimg.com/u/f84/15/35/03/20/99707012.png" /></a>
      </div>
    </div>
    <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/>
          <div><a href="http://www.i-love-harvard.com/u5918"><span class="fa fa-user"></span></a> : check le profil<br/>
          <a href="http://www.i-love-harvard.com/t57289-dante-diego-basini-henry-cavill"><span class="fa fa-file-text"></span></a> : check la présentation<br/>
          <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> : check la fiche de liens</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/>
          <div><a href="http://www.i-love-harvard.com/u5918"><span class="fa fa-user"></span></a> : check le profil<br/>
          <a href="http://www.i-love-harvard.com/t57289-dante-diego-basini-henry-cavill"><span class="fa fa-file-text"></span></a> : check la présentation<br/>
          <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> : check la fiche de liens</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>
    <div class="partenaires">
        <span class="title">Les meilleurs amis d'I Love Harvard</span> <a href="http://alwayslove.forumgratuit.ca/" target="_blank">Always Love</a> <a href="http://be-u-miami.com" target="_blank">Be U Miami</a> <a href="http://www.bellum-patronum.com/" target="_blank">Bellum Patronum</a> <a href="http://blood-empire.forumgratuit.ch/" target="_blank">Blood Empire</a> <a href="http://bloodandpleasure.forumactif.com/" target="_blank">Drag me to Hell</a> <a href="http://www.goldheartofficiel.com/" target="_blank">Goldheart</a> <a href="http://good-morning-america.forumactif.com/" target="_blank">Good Morning America</a> <a href="http://greekteaparty.forumactif.org/" target="_blank">Greek Tea Party</a> <a href="http://www.hollywoodpeople.net/" target="_blank">Hollywood People</a> <a href="http://lindwuen-daemon.superforum.fr/" target="_blank">Lindwuën Dæmon</a> <a href="http://london-calling.forumactif.org/" target="_blank">London Calling</a> <a href="http://lovemelikeyoudo.1fr1.net/" target="_blank">Love me like you do</a> <a href="http://pub-rpg-design.com/" target="_blank">Pub RPG Design</a> <a href="http://yuck-it-up.forumactif.com/" target="_blank">VIP university</a> <a href="http://royal-ps.lebonforum.com/" target="_blank">Royal Private Schools</a> <a href="http://theisland.forumakers.com/" target="_blank">The Island</a> <a href="http://cougartown.forumgratuit.eu/" target="_blank">You're about forty</a> <a href="http://your-family-tree.forumactif.fr/" target="_blank">Your Family Tree</a> <a href="http://yuck-it-up.forumactif.com/" target="_blank">Yuck It Up</a> <a href="http://www.darwinsgame.net/" target="_blank">Darwin's Game</a> <a href="http://equestrianations.forumgratuit.be/" target="_blank">Equestria nations</a>
    </div>
    <div class="twitter">
        <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>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.basic-slider/1.3/jquery.bjqs.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-page-dandaposaccueil-v53-zqgwmY */
* { box-sizing: border-box; }
html { color: #575757; font: 11px Verdana; }
a, a:visited { color: #DE0615; }
a:hover, a:active { color: #7F0509; }

/* ---- PAGE D ACCUEIL ---- */

.pa {
  background: #EBEBED;
  width: 730px;
  height: 600px;
  margin: 0 auto;
  position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pa .menu {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
}

.pa .menu .part {
    width: 100%;
    display: flex;
    margin: 0;
    padding: 0;
}

.pa .menu .part div {
  flex: 1;
  text-align: center;
  height: 50px;
}

.pa .menu .part div:nth-child(3),
.pa .menu .part div:nth-child(4) { flex: 1.5; }

.pa .menu .part div a {
    text-transform: uppercase;
    font: 300 18px 'Oswald';
  line-height: 50px;
    text-decoration: none;
    display: block;
    text-shadow: 0px 0px 1px #DE0615;
    letter-spacing: -1px;
    transition: all 0.3s ease-in-out;
}

.pa .menu .part div a:hover {
  text-shadow: 0px 0px 1px #7F0509;
}
.pa .menu .part div a:before,
.pa .menu .part div a:after {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.2s ease 0s, -webkit-transform 0.3s ease 0s;
  transition: transform 0.3s ease 0s, opacity 0.2s ease 0s;
  transition: transform 0.3s ease 0s, opacity 0.2s ease 0s, -webkit-transform 0.3s ease 0s;
  color: #b40e27;
  text-shadow: 0px 0px 1px #7F0509;
}

.pa .menu .part div a:before {
  content: "[";
  margin-right: 5px;
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
}

.pa .menu .part div a:after {
  content: "]";
  margin-left: 5px;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
}

.pa .menu .part div a:hover:before,
.pa .menu .part div a:hover:after {
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.pa .context {
  position: absolute;
  width: 180px;
  height: 200px;
  top: 60px;
  left: 10px;
  overflow: auto;
  font: 400 11px/12px Lato;
  text-align: justify;
  padding: 10px;
  z-index: 0;
  background: #DBDCE1;
  border: 1px solid #D9D3D6;
}

.pa .intrigue {
  position: absolute;
  width: 185px;
  height: 200px; 
  top: 60px;
  left: 202px;
  overflow: auto;
  font: 400 11px/12px Lato;
  text-align: justify;
  padding: 10px;
  z-index: 0;
  background: #DBDCE1;
  border: 1px solid #D9D3D6;
}

.pa .context span,
.pa .intrigue span {
  display: block;
  font: 900 16px Raleway;
  text-transform: uppercase;
}

.pa .staffiens {
  position: absolute;
  top: 60px;
  right: 10px;
  width: 320px;
  height: 200px;
  z-index:200;
}
.pa .staffiens .onglets {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  z-index: 200;
  text-align: justify;
  padding-top: 0;
}

.pa .staffiens a.onglet {
  margin: 0 0px 5px;
  width: 50px;
  height: 23px;
  color: rgba(255,255,255,.5);
    border: 2px solid rgba(255,255,255,0);
  transition: border 500ms ease-in-out; 
}

.pa .staffiens .onglet:hover {
  transition: border 500ms ease-in-out; 
  border: 2px solid rgba(255,255,255,.5);
}

.pa .staffiens .onglet.active {
  border: 2px solid rgba(255,255,255,.75);
}

.onglet.default    { background-color: #FFFFFF; color: #8a8a8a !important; }
.onglet.maddy      { background-color: #6A6DA3; }
.onglet.jude       { background-color: #FF7A95; } /*CC72BD*/
.onglet.nevada     { background-color: #B39B00; }
.onglet.alek       { background-color: #509EED; } /*2289F0*/
.onglet.emma       { background-color: #965BEF; } /*7637C7*/
.onglet.sacha      { background-color: #76AD23; }
.onglet.feldt      { background-color: #ED7B34; }
.onglet.alaska     { background-color: #C92724; }
.onglet.tamsin     { background-color: #8A8A8A; }
.onglet.dante      { background-color: #6A6DA3; }
.onglet.athena     { background-color: #6A6DA3; }

.pa .staffiens .contents {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.pa .staffiens .content {
  position: absolute;
  z-index: 100;
    height: 142px;
    top: 58px;
    left: 1px;
    right: 1px;
    bottom: 0;
  background: #DBDCE1;
  border: 1px solid #D9D3D6;
  opacity: 0;
  padding: 5px;
  overflow: auto;
}

.pa .staffiens .content.active {
  opacity: 1;
  z-index: 500;
}

.pa .staffiens .content .pseudo {
  display: block;
    margin: 10px auto;
  text-align: center;
  font: 900 16px Raleway;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 5px;
}

.pa .staffiens .content img {
    margin-right: 10px;
    float: left;
}

.pa .staffiens .content div { text-align: center; }
.pa .staffiens .content p   { text-align: justify; }
.pa .staffiens .content span.fa   { font-size: 16px; }
.pa .staffiens .content strong { text-transform: uppercase; font: 12px/10px 'Roboto Slab'; }

.pa .staffiens .content .present {
    color: green;
    font-weight: bold;
    text-transform: lowercase;
    display: inline-block;
}

.pa .staffiens .content.default .pseudo {
  margin-top: 5px;
    width: 100%;
}

.pa .besoin {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 0;
  width: 345px;
  margin: 0 auto;
  padding: 5px;
}

.pa .besoin div {
  padding: 5px;
  height: 80px;
  text-align: center;
}

.pa .besoin div img {
  height: 70px;
  opacity: .5;
  padding: 1px;
  border: 1px solid transparent;
  transition: 500ms all ease-in-out;
}

.pa .besoin .girls a:hover img { opacity: 1; border: 1px solid hotpink; }
.pa .besoin .boys a:hover img  { opacity: 1; border: 1px solid steelblue;}

.pa .crush {
  position: absolute;
  top: 275px;
  left: 10px;
  width: 345px;
  height: 100px;
  background: #DBDCE1;
  border: 1px solid #D9D3D6;
  padding: 10px;
}


.pa .animators {
  position: absolute;
  top: 275px;
  right: 10px;
  width: 350px;
  height: 100px;
  background: #DBDCE1;
  border: 1px solid #D9D3D6;
  padding: 10px;
}

.pa .animators .activities {
    font:10px/10px Arial;
    text-align: justify;
    padding-right: 10px;
}

.pa .animators .activities a { text-transform: uppercase; text-decoration:none; display:block; }

.pa .animators .activities a:before {
    content: "\f02b";
    margin-right: 5px;
    margin-left: 0px;
    font-family: 'FontAwesome';
    font-size: 10px;
    color: #FFF;
}

.pa .animators span {
  display: block;
  font: 900 16px 'Raleway';
  text-transform: uppercase;
  padding: 5px 5px 5px 0;
  margin: 0 0 5px 0;
}

.pa .twitter {
  position: absolute;
  right: -290px;
  top: 15px;
  width: 255px;
}

.pa .twitter iframe {
  width: 255px !important;
}

.pa .partenaires {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 375px;
    text-align: justify;
    line-height: 8px;
  right: 10px;
  width: 350px;
  height: 150px;
  background: #DBDCE1;
  border: 1px solid #D9D3D6;
  padding: 10px;
}

.pa .partenaires .title {
  display: block;
  font: 900 16px 'Raleway';
  text-transform: uppercase;
  padding: 5px 5px 5px 0;
  margin: 0 0 5px 0; 
}

.pa .partenaires a {
    font: 10px/9px 'Roboto Condensed';
    text-transform: uppercase;
    text-decoration: none;
}

.pa .partenaires a:after {
    content: "\f004";
    margin-left: 3px;
    font-family: 'FontAwesome';
    font-size: 8px;
    color: rgba(255,255,255,.25);
}

.pa .partenaires a.warning18:after {
    content: "\f071";
    font-family: 'FontAwesome';
    font-size: 10px;
    color: rgba(255,0,0,0.5);
}

.pa .members {
  z-index: 1;
  position: absolute; 
  bottom: 192px;
  right: 46px;
  width: 350px;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

.pa .member {
    position: relative;
    width: 72px;
    height: 50px;
}

.pa .member .img {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 144px;
  height: 100px;
  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 .member .details div {
  text-align: left;
}

/*Downloaded from https://www.codeseek.co/darkdreams/ilh-page-dandaposaccueil-v53-zqgwmY */
$(document).ready(function(){
  	$(".scroll").mCustomScrollbar({
  		theme: 'minimal-dark',
  		advanced:{ updateOnContentResize: true }
  	});
});

$(document).ready(function() {
   $('#my-slideshow').bjqs({
        height : 205,
        width : 375,
        animtype : 'slide',
        animduration : 450,
        animspeed : 5000, 
        automatic : true,
        centercontrols : true,
        showmarkers: false, 
        keyboardnav : false, 
        hoverpause : true,
        nexttext : '<i class="fa fa-chevron-right"></i>', 
        prevtext : '<i class="fa fa-chevron-left"></i>'
      });
});

$(document).ready(function() {
  $(".pa .contents .content:first-child").addClass('active');

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

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

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

Comments