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 : 20Messages : 790

    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



    avatar
    Onyx
    FémininAge : 23Messages : 2920

    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 : 24Messages : 1506

    le Dim 29 Jan 2017 - 14:34

    Merci pour le partage !
    avatar
    Haru-Raka
    FémininAge : 29Messages : 36

    le Dim 29 Jan 2017 - 17:27

    Bonjour,

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

    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 : 32

    le Jeu 27 Avr 2017 - 13:32

    Merci Very Happy J'aime beaucoup le côté chic et sobre de ta fiche cheers
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juin 2017 - 5:22