AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | .
 

 01. modèle

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar


☾ mots échangés : 139
☾ date d'inscription : 06/05/2013
☾ where i am : Partout
☾ avatar : Je n'ai pas de visage.

Voir le profil de l'utilisateur http://olympiangods.forumactif.org
MessageSujet: 01. modèle   Dim 6 Mai - 11:28

PREMIER POST:

Code:
    <link href="https://fonts.googleapis.com/css?family=Dorsa" rel="stylesheet"><style>/*STYLES STYLES STYLES


    MISE EN FORME DU TEXTE PRINCIPAL*/.bp_adcb5, .credit_adcb5{ color: #363737; font-family: Calibri; font-size: 11px; line-height: 12px;}/*

    MISE EN FORME DU NOM DU PERSONNAGE*/.titre_adcb5{ color: #F7DDC6; font-family: 'Dorsa'; font-size: 50px; letter-spacing: 3px; line-height: 74px; font-weight: bold; text-transform: uppercase; text-align: center;}/*

    MISE EN FORME DU NOM DE LA CELEBRITE*/.citation_adcb5{ color: #E6E7E7; font-size: 10px; text-transform: lowercase;}/*

    MISE EN FORME DES ELEMENTS MIS EN EVIDENCE*/st{ color: #A14E06; text-transform: lowercase; font-variant: small-caps;}.grandbloc_adcb5{ /*

    LUMINOSITE/FOND DE L'IMAGE CENTRALE, CHANGER LE 0.2 (entre 0 et 1) POUR MODIFIER*/ background: rgba(200, 200, 200, 0.2);}.grandbloc_adcb5:hover{ /*

    LUMINOSITE/FOND DE L'IMAGE PRINCIPALE, CHANGGER LE 0.7 POUR MODIFIER*/ background: rgba(200, 200, 200, 0.7);}.bloc_adcb5{ /*

    FOND DES BLOCS DE TEXTE*/ background: #E6E6E6;}.titre_adcb5{ /*

    FOND DU PRENOM*/ background: #E66C01;}/*

    GENERAL GENERAL GENERAL*/.bp_adcb5{ width: 500px; height: 550px; box-sizing: border-box; padding: 14px; margin: auto; overflow: hidden; position: relative; text-align: justify;}.bp_adcb5 div{ box-sizing: border-box; /*

    COULEUR DES BORDURES*/ border-color: #FFFFFF;}.bp_adcb5 div::-webkit-scrollbar { opacity: 0; width: 4px; height: auto;}.bp_adcb5 div::-webkit-scrollbar-thumb { /*

    COULEUR DE LA SCROLL-BAR*/background: #A9A9A9; border-radius: 20px;}/*

    GRAND BLOC GRAND BLOC GRAND BLOC*/.grandbloc_adcb5{ width: 322px; height: 100%; border: 1px solid; border-right: 0px; transition: all 2s ease; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease;}.grandbloc_adcb5:hover .bloc_adcb5{ width: 280px; margin: 20px 0px 0px 41px; padding: 20px; opacity: 0.9;}.grandbloc_adcb5:hover .citation_adcb5{ opacity: 0.5;}.grandbloc_adcb5:hover ~ .bande_adcb5{ width: 0px; padding: 0px;}.bloc_adcb5{ width: 0px; height: 150px; margin: 20px 0px 0px 340px; opacity: 0.9; overflow-y: auto; overflow-x: hidden; transition: all .8s ease; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease;}.titre_adcb5{ width: 336px; height: 70px; margin: 55px 0px 55px -15px; padding: 0px 10px;}.citation_adcb5{ width: 322px; position: absolute; top: 320px; left: 15px; transition: all .8s ease; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; text-align: center;}.bande_adcb5{ width: 100%; height: 50px; background: rgba(255, 255, 255, 0.5); padding: 14px; filter: grayscale(100%); position: absolute; bottom: 35px; right: 0px; z-index: 4; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; text-align: center;}/*COLONNE COLONNE COLONNE*/.colonne_adcb5{ width: 150px; height: 100%; background: #FFFFFF; filter: grayscale(100%) contrast(50%) brightness(160%); border-left: 4px solid; border-right: 1px solid; position: absolute; top: 0px; right: 14px;}.credit_adcb5{ width: 500px; height: 12px; margin: 3px auto 0px; filter: grayscale(100%); text-align: center; letter-spacing: 18px;}</style><!--



    --><div class="bp_adcb5" style="background: /*


    IMAGE DE FOND PRINCIPALE
    */url(http://tinyurl.com/y83s2sgz); background-position: 50% 50%; background-size: cover;"> <div class="grandbloc_adcb5"> <div class="bloc_adcb5"><!--


    HISTOIRE DU PERSONNAGE, CHRONO, QU'IMPORTE
    -->L'histoire du personnage ici, ou son caractère, ou des faits sur lui, ou une chronologie... En fait, ce qui est bien, c'est que tu peux mettre <st>ce que tu veux</st>. N'est-ce pas formidable ? L'histoire du personnage ici, ou son caractère, ou des faits sur lui, ou une chronologie... En fait, ce qui est bien, c'est que tu peux mettre <st>ce que tu veux</st>. N'est-ce pas formidable ? L'histoire du personnage ici, ou son caractère, ou des faits sur lui, ou une chronologie... En fait, ce qui est bien, c'est que tu peux mettre <st>ce que tu veux</st>. N'est-ce pas formidable ? L'histoire du personnage ici, ou son caractère, ou des faits sur lui, ou une chronologie... En fait, ce qui est bien, c'est que tu peux mettre <st>ce que tu veux</st>. N'est-ce pas formidable ? <!--

    --></div> <div class="titre_adcb5"><!--


    NOM DU PERSONNAGE
    -->Nom du personnage<!--

    --></div> <div class="citation_adcb5"><!--

    CELEBRITE
    -->ft. célébrité<!--

    --></div> <div class="bloc_adcb5"><!--


    LISTE DES RPS
    --><center><i>c - en cours | t - terminé | a - abandonné</i></center><br/> <st><a href="">date</a> | c/t/a | titre</st> » partenaire<br/> <st><a href="">date</a> | c/t/a | titre</st> » partenaire<br/> <st><a href="">date</a> | c/t/a | titre</st> » partenaire<br/> <st><a href="">date</a> | c/t/a | titre</st> » partenaire<br/> <st><a href="">date</a> | c/t/a | titre</st> » partenaire<br/> <st><a href="">date</a> | c/t/a | titre</st> » partenaire <!--

    --></div> </div> <div class="bande_adcb5"><st><!--


    CITATION EN DEUX LIGNES
    -->la petite citation ici
    en deux lignes<!--

    --></st></div> <div class="colonne_adcb5" style="background: /*


    (automatiquement éclairée et mise en n&b)
    IMAGE DE LA COLONNE
    */url(http://tinyurl.com/ycmnv546); background-position: 30% 50%; background-size: cover;"> </div> </div><div class="credit_adcb5"><st>☾ anesidora</st></div>

LES LIENS:

Code:
    <link href="https://fonts.googleapis.com/css?family=Dorsa" rel="stylesheet"><style>/*STYLES STYLES STYLES

    MISE EN FORME DU TEXTE PRINCIPAL*/.bp_adli7, .credit_adli7{ color: #363737; font-family: Calibri; font-size: 11px; line-height: 12px;}/*

    MISE EN FORME DU NOM*/[class*=titre_adli7]{ color: #232323; letter-spacing: 3px; line-height: 14px; font-weight: bold; text-align: center;}/*

    MISE EN FORME DES ELEMENTS MIS EN EVIDENCE*/st{ color: #A14E06; text-transform: lowercase; font-variant: small-caps;}/*

    MISE EN FORME DE L'ENTETE*/.entete_adli7{ color: #F7DDC6; font-family: 'Dorsa'; font-size: 50px; letter-spacing: 3px; line-height: 74px; font-weight: bold; text-transform: uppercase; text-align: center;}/*

    MISE EN FORME DU CREDIT AVATAR*/.creditav_adli7{ color: #E6E7E7; font-size: 10px; text-transform: lowercase; opacity: 0.5;}.bp_adli7 div{ /*

    COULEUR DES BORDURES*/ border-color: #FFFFFF;}.entete_adli7, .bp_adli7{ /*

    COULEUR DES BORDURES DE LA CELLULE DES LIENS*/ border: 2px solid white;}.entete_adli7{ /*

    COULEUR DU FOND DE L'ENTETE*/ background: #E66C01;}.bp_adli7 div::-webkit-scrollbar-thumb { /*

    COULEUR DE LA SCROLL-BAR*/background: #A9A9A9;}.texte_adli7{ /*

    COULEUR DU FOND DES TEXTES*/ background: rgba(230, 230, 230, 0.7);}[class*=titre_adli7]{ /*

    FOND DU TITRE*/ background: rgba(255, 255, 255, 0.7);}/*

    GENERAL GENERAL GENERAL*/.entete_adli7{ width: 500px; box-sizing: border-box; margin: 10px auto; border: 2px solid;}.bp_adli7{ width: 500px; height: 320px; box-sizing: border-box; margin: 0px auto 10px; overflow: hidden; position: relative; text-align: justify;}.bp_adli7 div{ box-sizing: border-box;}.bp_adli7 div::-webkit-scrollbar { opacity: 0; width: 4px; height: auto;}.bp_adli7 div::-webkit-scrollbar-thumb { border-radius: 20px;}/*LIEN LIEN LIEN*/[class*=lien_adli7]{ display: inline-block; width: 200px; height: 100%; position: absolute; filter: grayscale(40%);}.gauchelien7{ top: 0px; left: 0px;}.droitlien_adli7{ top: 0px; right: 0px;}/*TEXTE TEXTE TEXTE*/.texte_adli7{ width: 160px; height: 280px; border: 1px solid; margin: 20px; overflow: auto; opacity: 0; transition: all .8s ease; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease;}.texte_adli7:hover{ opacity: 1; padding: 18px;}.texte_adli7:hover ~ .gauchetitre_adli7{ margin-left: -200px;}.texte_adli7:hover ~ .droittitre_adli7{ margin-left: 200px;}.texte_adli7:hover ~ .creditav_adli7{ display: none;}[class*=titre_adli7]{ width: 200px; height: 70px; padding: 22px 10px 0px; filter: grayscale(100%); position: absolute; bottom: 30px; left: 0px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease;}.creditav_adli7{ width: 180px; height: 15px; position: absolute; bottom: 15px; left: 10px; text-align: center;}/*COLONNE COLONNE COLONNE*/.colonne_adli7{ width: 98px; height: 100%; background: #FFFFFF; filter: grayscale(100%) contrast(50%) brightness(160%); border-left: 2px solid; border-right: 2px solid; position: absolute; top: 0px; left: 199px;}.credit_adli7{ width: 500px; height: 12px; margin: -7px auto 0px; filter: grayscale(100%); text-align: center; letter-spacing: 18px;}</style><!--



    --><div class="entete_adli7">WOMEN</div><!------ DEBUT DU LIEN



    ------><div class="bp_adli7"> <div class="gauchelien_adli7" style="background: /*


    AVATAR DE GAUCHE*/url(https://zupimages.net/up/18/03/ubsi.png); background-position: 50% 50%; background-size: cover;"> <div class="texte_adli7"><!--

    DESCRIPTION DU LIEN DE GAUCHE --> TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE<!--
    --></div> <div class="gauchetitre_adli7"><st><!--

    NOM DU LIEN DE GAUCHE -->NOM DU PERSONNAGE<br/><i><!--

    RELATION A GAUCHE -->relation</i></st></div> <div class="creditav_adli7"><!--

    CREDIT DE L'AVATAR -->(c) anesidora</div> </div> <div class="droitlien_adli7"style="background: /*


    AVATAR DE DROITE*/url(https://zupimages.net/up/18/03/5v63.png); background-position: 50% 50%; background-size: cover;"> <div class="texte_adli7"><!--

    DESCRIPTION DU LIEN DE DROITE --> TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE <!--
    --></div> <div class="droittitre_adli7"><st><!--

    NOM DU LIEN DE DROITE -->NOM DU PERSONNAGE<br/><i><!--

    RELATION A DROITE -->relation</i></st></div> <div class="creditav_adli7"><!--

    CREDIT DE L'AVATAR -->(c) anesidora</div> </div> <div class="colonne_adli7" style="background: /*


    (automatiquement éclairée et mise en n&b)
    IMAGE DE LA COLONNE*/url(http://tinyurl.com/yb2jzgv6); background-position: 30% 50%; background-size: cover;"></div></div><!------



    FIN DU LIEN ------><!------ DEBUT DU LIEN



    ------><div class="bp_adli7"> <div class="gauchelien_adli7" style="background: /*


    AVATAR DE GAUCHE*/url(https://zupimages.net/up/18/03/mubc.png); background-position: 50% 50%; background-size: cover;"> <div class="texte_adli7"><!--

    DESCRIPTION DU LIEN DE GAUCHE --> TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE<!--
    --></div> <div class="gauchetitre_adli7"><st><!--

    NOM DU LIEN DE GAUCHE -->NOM DU PERSONNAGE<br/><i><!--

    RELATION A GAUCHE -->relation</i></st></div> <div class="creditav_adli7"><!--

    CREDIT DE L'AVATAR -->(c) anesidora</div> </div> <div class="droitlien_adli7"style="background: /*


    AVATAR DE DROITE*/url(https://zupimages.net/up/18/03/gmxo.png); background-position: 50% 50%; background-size: cover;"> <div class="texte_adli7"><!--

    DESCRIPTION DU LIEN DE DROITE --> TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE <!--
    --></div> <div class="droittitre_adli7"><st><!--

    NOM DU LIEN DE DROITE -->NOM DU PERSONNAGE<br/><i><!--

    RELATION A DROITE -->relation</i></st></div> <div class="creditav_adli7"><!--

    CREDIT DE L'AVATAR -->(c) anesidora</div> </div> <div class="colonne_adli7" style="background: /*


    (automatiquement éclairée et mise en n&b)
    IMAGE DE LA COLONNE*/url(http://tinyurl.com/yb2jzgv6); background-position: 30% 50%; background-size: cover;"></div></div><!------



    FIN DU LIEN ------><div class="credit_adli7"><st>☾ anesidora</st></div>
Revenir en haut Aller en bas
 

01. modèle

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
OLYMPIAN GODS :: Faisons Connaissance :: Best Friends Forever :: Love you like a love song, baby-