AccueilFAQRechercherMembresGroupesS'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 "luxe"

    Partagez
    avatar
    Shaneliae
    FémininAge : 21Messages : 807

    le Jeu 29 Déc 2016 - 16:39


    Fiche de présentation "luxe"



    Bonjour à tous !

    Voici une petit fiche de présentation que j'ai faite il y a quelques temps pour un de mes personnages. Je vous la laisse donc ici et à vous d'en faire ce que vous voulez ♥

    - Voici un aperçu !
    - La fiche en direct
    - La fiche fait 500px de large et sa hauteur varie en fonction du contenu
    - L'image d'en-tête doit faire 500px de large et 250px de hauteur


    Le HTML



    Code:
    <link href="https://fonts.googleapis.com/css?family=Cinzel|Cinzel+Decorative|Open+Sans" rel="stylesheet" /><div class="astree-cadre"> <div style="background: url('http://www.imgweave.com/view/9733.png') no-repeat top center; width: 500px; height: 250px;"></div><span class="astree-nom">Prénom p²<br/>Nom</span> <div class="astree-titre">Identité</div><ul> <li><span>Âge :</span> XX ans</li><li><span>Sexe :</span> Truc</li><li><span>Race :</span> Machin</li><li><span>Rôle :</span> Bidule de chez Machin Chose</li><li><span>Célébrité utilisée :</span> Emma Stone</li></ul> <div class="astree-titre">Histoire</div><span class="astree-chapitre">Chapitre 1</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi. <a href="#">Je suis un super lien !</a></p><span class="astree-chapitre">Chapitre 2</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><div class="astree-titre">Catégorie 1</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, <q>Je suis un super texte mis en avant !</q> </p><div class="astree-titre">Catégorie 2</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, <q>Je suis un super texte mis en avant !</q> </p><div class="astree-titre">Autre</div><ul> <li><span>Lorem :</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis iure minus necessitatibus saepe totam. </li><li><span>Ipsum ?</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li></ul> <div class="astree-credits"><a href="http://www.never-utopia.com/" target="_blank">Never Utopia | Shaneliae</a></div></div>

    Le CSS


    Quand vous être membre


    Voici le code à ajouter en début de message, suivi du HTML :
    Code:
    <style>.astree-cadre{border: 2px solid #968070; background-color: #292929; max-width: 500px; margin: 20px auto; color: #ababab; font-family: 'Open Sans', sans-serif; font-size: 13px;}.astree-cadre a{color: #968070; text-decoration: none !important; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.astree-cadre a:hover{color: #8b2f32; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.astree-nom{display: block; text-align: center; margin: -15px auto 40px; color: #968070; font-family: 'Cinzel Decorative', serif; font-size: 45px; line-height: 25px; text-shadow: 0 0 2px #000;}.astree-titre{border-bottom: 2px solid #968070; color: #968070; text-shadow: 0 0 2px #000; padding: 5px 20px; font-family: 'Cinzel Decorative', serif; font-size: 30px; margin-top: 20px;}.astree-cadre ul{list-style: none; padding: 0 20px;}.astree-cadre li span{font-family: 'Cinzel', serif; color: #968070; font-size: 16px;}.astree-chapitre{display: inline-block; font-family: 'Cinzel', serif; font-size: 25px; color: #968070; margin: 25px; padding: 5px 15px; border-left: 5px solid #968070; text-shadow: 0 0 2px #000;}.astree-cadre p{margin: 10px 20px; text-align: justify;}.astree-cadre p > q{display: block; font-family: 'Cinzel', serif; color: #968070; font-size: 16px; line-height: 28px;}.astree-cadre p > q:before, .astree-cadre p > q:after{content: '';}.astree-credits a{display: block; text-align: center; font-family: 'Cinzel', serif; color: #968070; line-height: 40px;}</style>

    Quand vous êtes administrateur


    Voici le CSS à mettre dans le feuille de style CSS de votre forum :
    Code:
    /***** Fiche de présentation Luxe *****/

    .astree-cadre {
            border: 2px solid #968070;
            background-color: #292929;
            max-width: 500px;
            margin: 20px auto;
            color: #ababab;
            font-family: 'Open Sans', sans-serif;
            font-size: 13px;
        }

        .astree-cadre a {
            color: #968070;
            text-decoration: none;
            -webkit-transition: all 0.1s ease;
            transition: all 0.1s ease;
        }
        .astree-cadre a:hover {
            color: #8b2f32;
            -webkit-transition: all 0.1s ease;
            transition: all 0.1s ease;
        }

        .astree-nom {
            display: block;
            text-align: center;
            margin: -15px auto 40px;
            color: #968070;
            font-family: 'Cinzel Decorative', serif;
            font-size: 45px;
            line-height: 25px;
            text-shadow: 0 0 2px #000;
        }

        .astree-titre {
            border-bottom: 2px solid #968070;
            color: #968070;
            text-shadow: 0 0 2px #000;
            padding: 5px 20px;
            font-family: 'Cinzel Decorative', serif;
            font-size: 30px;
            margin-top: 20px;
        }

        .astree-cadre ul {
            list-style: none;
            padding: 0 20px;
        }

        .astree-cadre li span {
            font-family: 'Cinzel', serif;
            color: #968070;
            font-size: 16px;
        }

        .astree-chapitre {
            display: inline-block;
            font-family: 'Cinzel', serif;
            font-size: 25px;
            color: #968070;
            margin: 25px;
            padding: 5px 15px;
            border-left: 5px solid #968070;
            text-shadow: 0 0 2px #000;
        }

        .astree-cadre p {
            margin: 10px 20px;
            text-align: justify;
        }

        .astree-cadre p > q {
            display: block;
            font-family: 'Cinzel', serif;
            color: #968070;
            font-size: 16px;
            line-height: 28px;
        }

        .astree-cadre p > q:before, .astree-cadre p > q:after {
            content: '';
        }

        .astree-credits a {
            display: block;
            text-align: center;
            font-family: 'Cinzel', serif;
            color: #968070;
            line-height: 40px;
        }

    Il est conseillé de ne pas faire de sauts de ligne dans ce code pour obtenir le résultat attendu. Si vous avez besoin d'en faire pour question de lisibilité, je vous conseille d'éditer ce code sur un éditeur, puis de le passer sur un Minifier comme HTML Minifier avant de poster.


    Merci d'avoir lu ce LS ♥

    Vous avez une question ou un problème avec ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.


    Dernière édition par Shaneliae le Mer 1 Mar 2017 - 18:08, édité 2 fois



    Présence réduite.
    avatar
    Onyx
    FémininAge : 23Messages : 3031

    le Dim 29 Jan 2017 - 3:47

    Salut!

    J'aime, c'est simple mais pourtant très joli. Je plussois le "luxe", c'est plutôt chic comme présentation ^^

    Tout me semble beau, donc je valide et déplace le sujet au bon endroit Wink
    Merci du partage \o/



    avatar
    Kelalin
    FémininAge : 25Messages : 1676

    le Dim 29 Jan 2017 - 14:34

    Merci pour le partage !
    avatar
    Haru-Raka
    FémininAge : 30Messages : 37

    le Dim 29 Jan 2017 - 17:27

    Bonjour,

    je vais t'emprunter ta fiche de présentation pour un forum ♥
    avatar
    NekoMiaouw
    FémininAge : 21Messages : 134

    le Mar 31 Jan 2017 - 19:27

    C'est vraiment très jolie, je vais essayer de l'installer sur mon fo... Merci <3



    avatar
    cassieonline
    FémininAge : 42Messages : 33

    le Jeu 27 Avr 2017 - 13:32

    Merci Very Happy J'aime beaucoup le côté chic et sobre de ta fiche cheers
    avatar
    Soon
    FémininAge : 30Messages : 51

    le Dim 17 Sep 2017 - 20:15

    MERCI pour le partage
    avatar
    mama74
    MasculinAge : 30Messages : 11

    le Lun 25 Sep 2017 - 22:36

    merci beaucoup
    avatar
    Doriand
    MasculinAge : 26Messages : 19

    le Jeu 28 Sep 2017 - 12:48

    merci de même
    avatar
    Titi | Luna
    FémininAge : 12Messages : 16

    le Mar 10 Oct 2017 - 17:43

    Bonjour,
    Je t'emprunte cette fiche que j'ai repéré la première fois que je suis venue à Never Utopia
    Contenu sponsorisé


      La date/heure actuelle est Sam 21 Oct 2017 - 1:35