Partagez|

[HTML CSS] Carnet de RP

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


I am Pyphilia

Messages : 325
Points : 613
Date d'inscription : 03/02/2011
Age : 19

MessageSujet: [HTML CSS] Carnet de RP Ven 4 Sep - 14:09

CSS
Code:

    /**FICHE CARNET RP**/
   
    @font-face {
      font-family: 'Aguafina Script';
      font-style: normal;
      font-weight: 400;
      src: local('Aguafina Script Regular'), local('AguafinaScript-Regular'), url(http://fonts.gstatic.com/s/aguafinascript/v5/65g7cgMtMGnNlNyq_Z6CvDVi_4UGEKHjyEZCTqR5Ysg.woff) format('woff');
    }


    h2.rp_titre, h3.devise, h4.subtitre_rp { /*title color*/
      color:white;
    }

    #rp_link .perso, #carnet_rp {
      background:#1a1a1a;
      font-size: 10px;
      font-family: arial;
      line-height:10px;
    }

    #rp_link .perso, #carnet_rp .avatar1 {
      border-color: #d60000;
    }

    h2.rp_titre {
      text-align: center;
      font-size: 40px;
      font-family: 'Aguafina Script', cursive;
      margin: 0 0 -25px 0;
      padding: 0;
    }

    h3.devise    {
      font-family: arial;
      margin: 0;
      padding: 0;
      opacity: 0.6;
      font-style: italic;
      letter-spacing: 2px;
      text-align: center;
      font-size: 9px;

    }

    h4.subtitre_rp {
      padding:0;
      font-size: 23px;
      letter-spacing: 1px;
      margin: -10px 0 0;
      font-family: 'Aguafina Script', cursive;
    }

    #carnet_rp {
      text-align: center;
      padding:10px;
      width:500px;
      box-sizing:border-box;
      margin: 0 auto 20px;
    }

    #carnet_rp a {
      text-decoration: none;
      letter-spacing: 2px;
    }

    #carnet_rp .avatar1{
      border-style: solid;
      border-width: 3px 0;
    }

    #carnet_rp .infos{
      display: inline-block;
      vertical-align: top;
      width:54.6%;
      margin: 0 5px;
      box-sizing:border-box;
      text-align: center;
      color:rgba(255,255,255,0.4);
      line-height: 9.8px;
    }

    #carnet_rp .infos span {
      display: block;
      background-color: rgba(0,0,0,0.4);
      width: 100%;
      margin-bottom: 5px;
      padding:1.7px 0;
      height:20px;
    }

    #carnet_rp .infos strong {
      text-transform: uppercase;
      display: block;
      font-size: 9px;
      color:#d60000;
    }

    #carnet_rp .infos a.encours {
      color:green;
    }

    #rp_link {
      text-align: center;
      width:500px;
      margin: auto;
      box-sizing:border-box;

    }

    #rp_link .perso {
     
      vertical-align: top;
      display: inline-block;
      height:80px;
      padding:2px 0 2px 10px;
      box-sizing:border-box;
      width:49%;
      margin: 5px 0 20px;
      border-radius:0 0px 10px 0;
      border-width : 0 0 0 1px;
      border-style: solid;
    }

    #rp_link .perso img {
      width:60px;
      border-radius: 50px;
      overflow: hidden;
      float:left;
      margin: 7px 5px 7px -5px;
    }

    #rp_link .perso span {
      text-align: justify;
      color:rgba(255,255,255,0.4);
      display: block;
      overflow: auto;
      height:100%;
      width:74%;
      float:right;
    }

    #rp_link a.credits {
      margin: auto;
      text-align: center;
      display: block;
      text-decoration: none;
      text-transform: uppercase;
      opacity: 0.5;
      font-size: 10px;
  background:none;
      font-family: arial;
    }

HTML
Code:
<div style="background:black;"><br/>
  <h2 class="rp_titre">Carnet de RP</h2>
  <div id="carnet_rp"><img src="http://i.imgur.com/m22UQfz.png" class="avatar1"/><div class="infos"><span> <strong>Nom Prénom</strong> écrire ici </span><span> <strong>Âge & Naissance</strong> écrire ici </span><span> <strong>champ</strong> écrire ici </span><span> <strong>champ</strong> écrire ici </span><span style="height:140px"> <strong>Histoire & Personnalité</strong> écrire ici </span><span style="height:60px;text-align:left;"> <strong style="display:block;text-align:center">RPs en cours</strong>
  <a href="" style="color:green;"><i>nomdurp</i></a> ft. nomprenom
  <a href="" style="color:orange;"><i>nomdurp</i></a>  ft. nomprenom
  <a href=""  style="color:darkred;"><i>nomdurp</i></a> -  ft. nomprenom
  </span></div><h3 class="devise">devise, devise devise</h3>
 
  <a class="credits" href="http://creaphy.olympe.in/index.php">@pyphi(lia)</a> </div> </div>
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[HTML CSS] Carnet de RP

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

Sujets similaires

-
» [Annulée] Demande une page HTML
» [résolu] Lien dans image survolée vers page html
» Icone HTML
» besion d'aide language html lecteur de musique !! (Résolu)
» Xhtml/css: integrer une video avec html

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Essai-Fond-Pyphilia :: Créaphy :: Codages-