AccueilDernières imagesRechercherS'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.

-50%
Le deal à ne pas rater :
-50% Baskets Nike Dunk Low
64.99 € 129.99 €
Voir le deal

    Fiche de présentation "luxe"

    Anonymous
    Invité

    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
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    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/



    Anonymous
    Invité

    Dim 29 Jan 2017 - 14:34

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

    Dim 29 Jan 2017 - 17:27

    Bonjour,

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

    Mar 31 Jan 2017 - 19:27

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



    css - Fiche de présentation "luxe" 388245alisign
    cassieonline
    cassieonline
    FémininAge : 49Messages : 48

    Jeu 27 Avr 2017 - 13:32

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

    Dim 17 Sep 2017 - 20:15

    MERCI pour le partage
    mama74
    mama74
    MasculinAge : 37Messages : 19

    Lun 25 Sep 2017 - 22:36

    merci beaucoup
    Doriand
    Doriand
    MasculinAge : 33Messages : 91

    Jeu 28 Sep 2017 - 12:48

    merci de même
    Titi | Luna
    Titi | Luna
    FémininAge : 18Messages : 51

    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
    Kokola
    Kokola
    FémininAge : 29Messages : 23

    Lun 15 Jan 2018 - 15:34

    Merci pour le partage ! ♥ Beau travail comme toujours !
    Yasashi
    Yasashi
    FémininAge : 28Messages : 74

    Jeu 28 Mar 2019 - 22:50

    Merci ! :)
    Eurybia Pyrit
    Eurybia Pyrit
    FémininAge : 32Messages : 14

    Mar 26 Mai 2020 - 18:24

    Merci
    Enalynne
    Enalynne
    FémininAge : 60Messages : 7

    Mar 26 Mai 2020 - 21:26

    Bonsoir ! Très joli, épuré et fonctionnel... Je cherche à réaliser des fiches de personnages pour mes membres justement. Si la partie code HTML ne me pose pas vraiment de problèmes, je n'ai pas encore trouvé où placer une feuille de style CSS sur le Wix Forum...

    Je suppose que sans ça, les réponses ne peuvent pas être validées...

    Je pense tester ton code, néanmoins, si j'y arrive et merci !

    Bonne soirée !
    Yoshimasa
    Yoshimasa
    FémininAge : 35Messages : 43

    Lun 1 Juin 2020 - 20:16

    Merci !
    cassieonline
    cassieonline
    FémininAge : 49Messages : 48

    Dim 5 Juil 2020 - 22:31

    Superbe Very Happy cheers
    Merci !
    Panzerblitz-1
    Panzerblitz-1
    MasculinAge : 25Messages : 63

    Dim 19 Juil 2020 - 20:12

    Merci.
    Kaguyanis
    Kaguyanis
    MasculinAge : 102Messages : 25

    Sam 26 Sep 2020 - 11:41

    Merci
    Hopyes
    Hopyes
    FémininAge : 36Messages : 92

    Dim 25 Oct 2020 - 10:04

    Merci
    Rose Noctalis
    Rose Noctalis
    FémininAge : 28Messages : 8

    Lun 17 Jan 2022 - 16:33

    Merci pour ce code ! Nous l'avons adapté pour la présentation du staff sur mon fofo Wink
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 20:58