AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-25%
Le deal à ne pas rater :
Abonnement PS Plus de 12 mois
44.99 € 59.99 €
Voir le deal

    Fiche de présentation simple,gris&bleu, géométrique

    Mini BN
    Mini BN
    FémininAge : 25Messages : 44

    le Dim 15 Oct 2017 - 6:07

    Bonjour bonjour ~

    J'étais tranquillement en train de coder pour mon forum, et je me suis dit que je pouvais partager ma création, vu comment Never Utopia m'a aidé à progresser dans le codage :pompom:

    Voici donc une fiche de présentation assez simple mais que je trouve très jolie.

    Un petit aperçu juste ici (le fond blanc est le fond de mon forum !)


    Désolée pour la qualité, je ne suis pas super douée en screen :s
    Les couleurs sont personnalisable comme vous le souhaitez, les polices également. N'enlevez pas le copyright par contre ♥

    Si vous êtes administrateur : code à ajouter dans la feuille de style css

    Code:
    .cadre_pres
    {
      width: 580px;
      border: 2px solid #627764;
      background: #d0cdc8; /* Couleur du fond de la fiche */
      margin: auto;
    }
    .text_gras
    {
      font-family: 'Alegreya Sans SC', sans-serif;
      font-size: 20px;
      color: #627764;
    }
    img.image_pres
    {
      width: 580px;
      height: 300px;
      border-bottom: 2px solid #627764;
    }
    .titre_pres
    {
      font-size: 40px;
      color: #ffffff; /* Couleur de la police du titre*/
      font-weight: bold;
      font-family: 'Shadows Into Light Two', cursive; /*Police du titre*/
      font-variant: small-caps; /* Transforme les minuscules en petites majuscules*/
      width: 550px;
      padding: 15px;
      margin: auto;
      text-align: center;
      margin-bottom: -15px;
      background: #16768e; /* Couleur du fond du titre */
    }
    .citation_pres
    {
      font-family: 'Alegreya Sans SC', sans-serif;
      font-size: 15px;
      font-style: italic;
      margin: auto;
      text-align: center;
      border-bottom: 1px dotted #627764;
      padding-left: 5px;
      padding-right: 5px;
    }
    .tableau_pres
    {
      margin-left: 40px;
      margin-right: 40px;
      height: 400px;
    }
    img.image_pres_2
    {
      widht: 200px;
      height: 400px;
      border: 2px solid #627764;
    }
    .cadre_pres_infos
    {
      width: 220px;
      height: 380px;
      background: #fafafa; /*Couleur de fond du cadre à côté de l'image*/
      border-left: 8px solid #16768e; /* bordure bleue à gauche du cadre à côté de l'image*/
      padding: 10px;
      margin-left: 40px;
      overflow: auto;
      line-height: 1.3; /*agrandit l'interligne*/
    }
    .sous_titre_pres
    {
      background: #16768e; /* Couleur des fonds des sous-titres */
      color: #ffffff; /*Couleur de police des sous-titres*/
      padding: 5px;
      position: relative;
      left: 40px;
      bottom: 8px;
      font-family: 'Alegreya Sans SC', sans-serif; /*Police des sous-titres*/
      font-size: 25px;
    }
    .cadre_pres_description
    {
      width: 500px;
      background: #fafafa; /*couleur de fond des cadres larges*/
      border-left: 8px solid #16768e;  /*bordures bleues au niveau des cadres larges*/
      border-right: 8px solid #16768e;
      padding: 10px;
      margin: auto;
    }

    Si vous êtes membres : code à placer en haut de votre message

    Code:
    <style> .cadre_pres {width: 580px; border: 2px solid #627764; background: #d0cdc8; margin: auto;} .text_gras {font-family: 'Alegreya Sans SC', sans-serif; font-size: 20px; color: #627764;} img.image_pres {width: 580px; height: 300px; border-bottom: 2px solid #627764;} .titre_pres {font-size: 40px; color: #ffffff; font-weight: bold; font-family: 'Shadows Into Light Two', cursive; font-variant: small-caps; width: 550px; padding: 15px; margin: auto; text-align: center; margin-bottom: -15px;} .citation_pres {font-family: 'Alegreya Sans SC', sans-serif; font-size: 15px; font-style: italic; margin: auto; text-align: center; border-bottom: 1px dotted #627764; padding-left: 5px; padding-right: 5px;} .tableau_pres {margin-left: 40px; margin-right: 40px; height: 400px;} img.image_pres_2 {widht: 200px; height: 400px; border: 2px solid #627764;} .cadre_pres_infos {width: 220px; height: 380px; background: #fafafa; border-left: 8px solid #16768e; padding: 10px; margin-left: 40px; overflow: auto; line-height: 1.3;} .sous_titre_pres {background: #16768e; color: #ffffff; padding: 5px; position: relative; left: 40px; bottom: 8px; font-family: 'Alegreya Sans SC', sans-serif; font-size: 25px;} .cadre_pres_description {width: 500px; background: #fafafa; border-left: 8px solid #16768e; border-right: 8px solid #16768e; padding: 10px; margin: auto;}</style>


    Polices utilisées :

    Code:
     <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two|Alegreya+Sans+SC' rel='stylesheet' type='text/css'>


    Code à mettre dans votre message

    Code:
    <div class="cadre_pres"><img src="https://img15.hostingpics.net/pics/743831hautpres.png" class="image_pres"/>
    <div class="titre_pres bleu">Nom&Prénom</div>
    <center><span class="citation_pres">Citation qui tue</span></center>

    <table class="tableau_pres"><tr><td style="width: 200px;"><img src="https://img15.hostingpics.net/pics/445476vavapres.png" class="image_pres_2"/></td>
    <td><div class="cadre_pres_infos"><span class="text_gras">Nom:</span>
    <span class="text_gras">Prénom:</span>
    <span class="text_gras">Race:</span>
    <span class="text_gras">Age:</span>
    etc
     </div></td></tr></table>


    <span class="sous_titre_pres">Apparence</span>
    <div class="cadre_pres_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tempor ipsum eu imperdiet. Cras tristique ipsum orci, in pellentesque magna luctus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dignissim ante, eget placerat ante varius non. Proin iaculis lacus leo, non finibus felis malesuada eget. Aliquam orci justo, maximus ut volutpat et, finibus sit amet diam. Sed tempus non lacus at lobortis. In vehicula odio ac quam aliquet porttitor. In porttitor neque nisl, vitae auctor augue tincidunt at. Suspendisse placerat est non neque mattis, eget lobortis justo dignissim. Quisque volutpat turpis nec hendrerit interdum.</div>


    <span class="sous_titre_pres">Caractère</span>
    <div class="cadre_pres_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tempor ipsum eu imperdiet. Cras tristique ipsum orci, in pellentesque magna luctus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dignissim ante, eget placerat ante varius non. Proin iaculis lacus leo, non finibus felis malesuada eget. Aliquam orci justo, maximus ut volutpat et, finibus sit amet diam. Sed tempus non lacus at lobortis. In vehicula odio ac quam aliquet porttitor. In porttitor neque nisl, vitae auctor augue tincidunt at. Suspendisse placerat est non neque mattis, eget lobortis justo dignissim. Quisque volutpat turpis nec hendrerit interdum.</div>


    <span class="sous_titre_pres">Histoire</span>
    <div class="cadre_pres_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tempor ipsum eu imperdiet. Cras tristique ipsum orci, in pellentesque magna luctus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dignissim ante, eget placerat ante varius non. Proin iaculis lacus leo, non finibus felis malesuada eget. Aliquam orci justo, maximus ut volutpat et, finibus sit amet diam. Sed tempus non lacus at lobortis. In vehicula odio ac quam aliquet porttitor. In porttitor neque nisl, vitae auctor augue tincidunt at. Suspendisse placerat est non neque mattis, eget lobortis justo dignissim. Quisque volutpat turpis nec hendrerit interdum.</div>


    <div class="titre_pres bleu">Et IRL ? </div>

    <div class="cadre_pres_description"><span class="text_gras">Votre pseudo ?</span>
    <span class="text_gras">Expérience en RP ? </span>
    etc
    </div>

    <center><span style="font-size: 11px; color: #ffffff; text-shadow: 0 0 5px #000000;">©️ codage par Mini BN sur <a href="http://www.never-utopia.com/">Never Utopia</a></span></center>
    </div>


    J'espère que ce code vous plaira ^-^
    Melle Lena
    Melle Lena
    FémininAge : 45Messages : 308

    le Dim 15 Oct 2017 - 16:37

    Coucou mini BN c'est à croquer Wink . Merci beaucoup pour le partage. :hug:
    Kaguyanis
    Kaguyanis
    MasculinAge : 99Messages : 23

    le Dim 29 Oct 2017 - 12:34

    Merci, c'est excellent !
    Onyx
    Onyx
    FémininAge : 26Messages : 3318

    le Sam 23 Fév 2019 - 3:44

    C'est super joli !

    Tout semble bon, donc je déplace dans le Libre Service ^^
    Merci de ton partage ♥



    Kelalin
    Kelalin
    FémininAge : 28Messages : 2416

    le Sam 23 Fév 2019 - 11:44

    Merci pour le partage :)
    Lamorne
    Lamorne
    FémininAge : 27Messages : 14

    le Dim 17 Mai 2020 - 17:15

    Merci pour cette création, c'est vraiment joli :3
    Eurybia Pyrit
    Eurybia Pyrit
    FémininAge : 28Messages : 14

    le Mar 26 Mai 2020 - 18:11

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Mer 25 Nov 2020 - 6:57