Fiche de Liens - Milo LD - Fiche

In this example below you will see how to do a Fiche de Liens - Milo LD - Fiche with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Fiche de Liens - Milo LD - Fiche</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'><link href='https://codepen.io/devnerdgirl/pen/azymPp.css' rel='stylesheet' type='text/css'><div class="gly-fiche-02-wd"><div class="body"><div class="title-img"><img src="http://fc02.deviantart.net/fs70/f/2014/292/0/e/0e1335790f13a0986ea1496000ff4686-d7mv1gp.gif" alt="" width="250px"/></div><div class="title"><span class="primary">Hacking is</span><br/><span class="secondary">my Weapon</span></div><!-- START --><div class="identity-holder"><div class="left-panel"><div class="app"><span class="name">Profiler_App</span><span class="ver">v0.3.0.1</span></div><div class="img"><img src="http://img15.hostingpics.net/pics/65980020150127221755.jpg" alt="" /><div class="topleft-arrow"></div><div class="botright-arrow"></div></div><div class="flavour"><div class="primary"></div><div class="secondary"></div></div></div><div class="right-panel"><div class="description"><div class="desc-block"><span class="text-desc">$_=ERR0R 401___Un4uth0r1z3d_4cc3ss_d3t3ct3d <br/>Retry : 5s<br/>Retry : 4s<br/>Retry : 3s<br/>Retry : 2s <br/> C0nn3ct10n_L0st</span></div></div><div class="name"><span class="text">%$_D3f4lt_//</span></div><div class="interest"><div class="arrow"></div><span class="text">#~C4tCh_//M3\@1f%_Y0u$\_C4n//</span></div><div class="stats"><div class="stats-desc"><span class="text-invert">Age: $%</span></div><div class="stats-desc"><span class="text-invert">Occupation: /$%\\!@_#\\!@/&/$%_#/&%$%$</span></div><div class="stats-desc"><span class="text-invert">Interests: /$%\\/$%\\!@_#/&%$!@_#/&%$</span></div></div></div><div class="clear"></div></div><!-- END --><div class="title"><span class="primary">...</span><br/><span class="primary">You'll know me</span><br/><span class="secondary">Only if I let you</span></div><!-- START --><div class="identity-holder"><div class="left-panel"><div class="app"><span class="name">Profiler_App</span><span class="ver">v0.3.0.1</span></div><div class="img"><img src="http://img11.hostingpics.net/pics/96697620150128131922.jpg" alt="" /><div class="topleft-arrow"></div><div class="botright-arrow"></div></div><div class="flavour"><div class="primary"><a href="http://lindwuen-daemon.superforum.fr/u584">Profil</a> ♦ <a href="http://lindwuen-daemon.superforum.fr/t3427-kovac-i-ve-got-thick-skin-and-an-elastic-heart#55636">Fiche</a></div><div class="secondary"><a href="http://lindwuen-daemon.superforum.fr/privmsg?mode=post&u=584">Contact</a></div></div></div><div class="right-panel"><div class="description"><div class="desc-block"><span class="text-desc">Calme ♦ A tendance paranoïaque ♦ Protecteur (surtout envers son daemon) ♦ Mystérieux ♦ Ne parle pas beaucoup de lui ♦ Garde très bien un secret ♦ Déterre aussi très bien les secrets ♦ A fait de longues études, en grande partie pour réussir à maîtriser au mieux son don ♦ N'aime pas les orages ♦ Aime les endroits sombres et tranquilles ♦ Fait de temps en temps un voyage en campagne pour se "décharger" de toutes ses ondes négatives ♦ Handicapé ♦ Porte pas mal de cicatrices, certaines visibles, d'autres non ♦ Ambitieux et dévoué à la rébellion ♦ Refuse d'être recensé ♦ Défend la liberté de tout un chacun ♦ ...</span></div></div><div class="name"><span class="text">Milo Kovac</span></div><div class="interest"><div class="arrow"></div><span class="text">Hacker, Espion, Croate, Rebel, Criminel, Junkie...</span></div><div class="stats"><div class="stats-desc"><span class="text-invert">Age: 28</span></div><div class="stats-desc"><span class="text-invert">Occupation: Détective privé (avec une plaque et tout !)</span></div><div class="stats-desc"><span class="text-invert">Interests: Emmerder et espionner le Conseil et ses minions</span></div></div></div><div class="clear"></div></div><!-- END --><div class="block"><div class="block-text"><div style="max-height: 200px; padding: 0 5px; overflow: auto;">Milo est plutôt grand (1m80) _ Il est gaucher _ Ses yeux sont bleus _ Il boite légèrement de la jambe gauche, mais ce n'est vraiment visible que lorsqu'il court _ Il ne peut rien soulever de lourd via son bras droit et à la main droite disfonctionnelle (manque de force et spasmes récurents) _ Son bras droit le fait régulièrement souffrir _ Souvent en manque de sommeil, il est accro à toute sorte de substances analgésique _ Sa pire addiction est le Fentanyl, il résiste souvent à l'envie d'en prendre _ Mais parfois, il craque _ Il n'a jamais fait d'overdose _ Il pirate des ordonances électroniques pour se procurer ses médicaments _ Il est officiellement détective privé _ Mais en réalité c'est un hacker _ Il commence à être en manque d'argent car il consacre son temps à aider la rébellion _ Il est très méfiant, mais une fois qu'il fait confiance, c'est une confiance presque aveugle _ Il est arrivé aux Etats-Unis pour ses études, il y a 10 ans, à New York _ Il a réussi à pirater la CIA une fois _ Et depuis il est sur "Black List" pour s'être fait prendre _ Il s'est fait torturé par des clients après un casse foireux et la découverte qu'il était daemonien _ Il en a gardé des cicatrices physiques et mentales (et un bras droit disfonctionnel) _ Il est arrivé à Merkeley il y a à peu près 2 ans, juste après sa sortie d'hôpital _ Et il s'en est fait mettre à la porte comme les autres.</div></div></div><!-- START --><div class="identity-holder"><div class="left-panel"><div class="app"><span class="name">Profiler_App</span><span class="ver">v0.3.0.1</span></div><div class="img"><img src="http://img11.hostingpics.net/pics/96176420150128132414.jpg" alt="" /><div class="topleft-arrow"></div><div class="botright-arrow"></div></div><div class="flavour"><div class="primary"></div><div class="secondary"></div></div></div><div class="right-panel"><div class="description"><div class="desc-block"><span class="text-desc">Ne vole pas ♦ Ne parle pas beaucoup non plus (sauf à Milo) ♦ Est très méfiante envers les humains, ainsi qu'envers les daemoniens ♦ Est la plus parano des deux ♦ A un lien très (trop ?) fort avec Milo et ne peut pas le quitter de plus d'une centaine de mètres ♦ Son incapacité de voler est liée aux injures physiques de Milo ♦ Elle boite donc un peu aussi de la patte gauche ♦ Ne supporte pas quand Milo la surprotège ♦ Affective envers Milo, même en public ♦ Adore les noix de cajou ♦ S'amuse à résoudre des casse-têtes et aide Milo dans le craquage de sécurité informatique ♦ Ne supporte pas l'addiction de son daemonien mais comprend pourquoi il ne la combat pas avec plus d'acharnement ♦ Se contente donc de le moraliser, pour la forme, et veiller sur lui quand il dort enfin ♦ ...</span></div></div><div class="name"><span class="text">Zora</span></div><div class="interest"><div class="arrow"></div><span class="text">Daemon et Garde-Fou du Junkie</span></div><div class="stats"><div class="stats-desc"><span class="text-invert">Race: Cacatoès Noir (Palm Cockactoo, Microglosse Noir)</span></div><div class="stats-desc"><span class="text-invert">Occupation: Moralisatrice et briseuse de casse-tête</span></div><div class="stats-desc"><span class="text-invert">Interests: Veiller sur Milo et vous fusiller du regard</span></div></div></div><div class="clear"></div></div><!-- END --><div class="title"><span class="primary">...</span><br/><span class="primary">If you really want to know</span><br/><span class="secondary">I search them</span></div><div class="block"><div class="block-text"><span style="color: #34dddd">// [ TAKEN ] _ Espion espionné</span><div style="max-height: 90px; padding: 0 5px; overflow: auto;">Pro-Conseil ou simple citoyen, cette personne lui colle aux basques depuis quelques semaines ou mois. Il n'arrive pas à savoir comment ni pourquoi elle en est venue à s'intéresser à lui, mais son instinct lui dit que ce n'est pas qu'une simple coïncidence et de faire gaffe à ce qu'il dit ou fait quand elle ou son daemon est dans les parages. Ses intentions et ses connaissances sont encore à définir et la rencontre est imminente...</div></div><br/><div class="block-text"><span style="color: #34dddd">// [ ♀, ♂ ] _ Nom du lien</span><div style="max-height: 90px; padding: 0 5px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cum ducimus earum, eius eos exercitationem explicabo, iure labore molestias nam neque nihil nobis odit praesentium quaerat repellat sed sequi, vero.</div></div></div></div><div class="credits">Fiche by <a href="https://devnerdgirl-rpgstuff.tumblr.com">Dev Nerd Girl</a></div></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/devnerdgirl/fiche-de-liens-milo-ld-fiche-azymPp */
.identity-holder > .left-panel > .img > .topleft-arrow, .identity-holder > .left-panel > .img > .botright-arrow { 
            display: none;
}
.gly-fiche-02-wd > .body {
            width: 500px;
            margin: auto;
            background-color: #333;
            background-image: url('http://img15.hostingpics.net/pics/57964620150829211455.png');
            font-family: 'Lato', sans-serif;
            color: #fff;
            text-align: left;
            border-radius: 5px;
            /*height: 700px;*/
            padding: 25px 0;
        }

        .gly-fiche-02-wd > .body > .title-img {
            width: 450px;
            text-align: center;
            background-color: #000;
            border-radius: 5px 5px 0 0;
            margin: auto;
        }

        .gly-fiche-02-wd > .body > .block {
            /*opacity: 0.8;*/
            /*background-image: url('https://subtlepatterns.com/patterns/binding_dark.png');*/
            padding: 10px;
            margin: 5px;
            border-radius: 5px;
        }

        .gly-fiche-02-wd > .body > .block > .block-text {
            font-family: 'Lato', sans-serif;
            text-align: justify;
            padding: 10px;
            font-size: 12px;
            font-weight: 700;
            background-color: #000;
        }

        .gly-fiche-02-wd > .body > .title {
            text-align: center;
            padding: 30px 10px 0 10px;
          width: 100%;
        }

        .gly-fiche-02-wd > .body > .title > .primary, .gly-fiche-02-wd > .body > .title > .secondary {
            font-family: 'Russo One', sans-serif;
            text-transform: uppercase;
            color: #fff;
            font-size: 15px;
            display: inline-block;
            text-shadow: 0 0 3px #000;
        }

        .gly-fiche-02-wd > .body > .title > .secondary {
            font-size: 20px;
            color: #34DDDD;
        }




        .gly-fiche-02-wd > .body > .identity-holder {
            width: 465px;
            height: auto;
            padding: 5px;
            margin: auto;
            margin-top: 20px;
            background: url('https://quirkee.sg/files/img/check-overlay.png') center center;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .app {
            font-size: 10px;
            color: #666;
            line-height: 14px;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .app > .name {
            position: relative;
            padding: 2px;
            width: 75px;
            height: 12px;
            background-color: #000;
            display: inline-block;
            color: #666;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .app > .ver {
            position: relative;
            top: 0;
            height: 12px;
            padding: 2px;
            background-color: #000;
            display: inline-block;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .img {
            position: relative;
            top: 6px;
            height: 90px;
            width: 79px;
            background-color: #fff;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .img > .topleft-arrow {
            position: relative;
            top: -94px;
            left: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px 10px 0 0;
            border-color: #000 transparent transparent transparent;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .img > .botright-arrow {
            position: relative;
            right: -70px;
            top: -43px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 20px 10px;
            border-color: transparent transparent #000 transparent;
        }
.gly-fiche-02-wd > .body > .identity-holder > .left-panel > .img > .topleft-arrow, .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .img > .botright-arrow { 
            display: none;
}
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .flavour {
            font-size: 9px;
            color: #444;
            line-height: 14px;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .flavour > .primary {
            position: relative;
            top: 14px;
            padding: 2px;
            width: 75px;
            height: 12px;
            background-color: #000;
            display: inline-block;
            text-align: center;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .flavour > .secondary {
            position: relative;
            top: 13px;
            height: 12px;
            min-width: 30px;
            padding: 2px;
            background-color: #000;
            display: inline-block;
            text-align: center;
            width: 75px;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .flavour > .secondary > a, .identity-holder > .left-panel > .flavour > .primary > a {
            color: #666;
            text-decoration: none;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel > .flavour > .secondary > a:hover, .identity-holder > .left-panel > .flavour > .primary > a:hover {
            color: #999;
            text-decoration: none;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .right-panel > .name {
            font-size: 14px;
            font-weight: 700;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .right-panel > .name > .text {
            height: 17px;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .right-panel > .interest {
            font-size: 16px;
            font-weight: 700;
            position: absolute;
            top: 0;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .right-panel > .interest > .arrow {
            position: relative;
            top: 23px;
            left: -15px;
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-bottom: 13px solid transparent;
            border-right: 15px solid #fff;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .right-panel > .interest > .text {
            padding-bottom: 4px;
            position: relative;
            top: 0;
            line-height: 20px;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .right-panel > .stats {
            position: relative;
            top: 40px;
            left: 0;
            font-size: 12px;
            font-weight: 900;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .right-panel > .stats > .stats-desc {
            float: left;
            clear: both;
            height: 22px;
        }
        .gly-fiche-02-wd .text {
            color: #000;
            background-color: #fff;
            padding: 3px;
            padding-right: 20px;
            white-space: nowrap;
            -moz-transition: width 0.35s;
            -o-transition: width 0.35s;
            -webkit-transition: width 0.35s;
            transition: width 0.35s;
        }
        .gly-fiche-02-wd .text-invert {
            color: #fff;
            padding: 3px;
            white-space: nowrap;
            font-weight: 700;
            background-color: #000;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .right-panel > .description {
            position: absolute;
            left: 0;
            top: -3px;
            z-index: 50;
            height: 125px;
            width: 380px;
            overflow: hidden;
          padding: 0;
          margin: 0;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .right-panel > .description > .desc-block {
            height: 115px;
            width: 370px;
            font-size: 11px;
            font-weight: 700;
            background-color: #fff;
            color: #000;
            overflow: auto;
            padding: 5px;
            -webkit-transition:all .5s;
          transition:all .5s;
            text-align: justify;
            letter-spacing: 0;
            font-family: 'Lato', sans-serif !important;
            position: relative;
            left: -380px;
        }

        .gly-fiche-02-wd > .body > .identity-holder:hover > .right-panel > .description  > .desc-block {
            left: 0;
            -webkit-transition:all .5s;
          transition:all .5s;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .left-panel {
            float: left;
            width: 80px;
        }
        .gly-fiche-02-wd > .body > .identity-holder > .right-panel {
            float: right;
            width: 380px;
            height: 100px;
            top: 41px;
            position: relative;
        }
        .clear {
            clear: both;
        }
.gly-fiche-02-wd > .credits {
            font-family: 'Russo One', sans-serif;
            text-transform: uppercase;
            color: #000;
            font-size: 8px;
            text-align: center;
        }
        .gly-fiche-02-wd > .credits > a {
          color : #222;
          font-family: 'Russo One', sans-serif;
            text-transform: uppercase;
            font-size: 8px;
          text-decoration: none;
        }

Comments