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.


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

    Mini BN
    Mini BN
    FémininAge : 24Messages : 43

    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 : 44Messages : 300

    le Dim 15 Oct 2017 - 16:37

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

    le Dim 29 Oct 2017 - 12:34

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

    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 : 27Messages : 2102

    le Sam 23 Fév 2019 - 11:44

    Merci pour le partage :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 9 Déc 2019 - 8:57