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.


    Show me the meaning of being lonely

    Partagez
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le Ven 13 Fév 2015 - 23:49

    Rappel du premier message :


    Show me the meaning of being lonely


    Voici une page d'accueil avec transition pour le staff.

    Je précise que l'arrière plan gris correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www & au passage de la souris ~ Invision


    Et le code :
    HTML :
    Code:
    <div class="PA_fond"><div class="PA_titre02">Show me the meaning of being lonely ~</div><div class="PA_titre01">Contexte</div><div class="PA_contexte">Texte ici
    </div><div class="PA_titre01">Staff</div><div class="PA_staff"><div class="PA_staff02"><div class="PA_staff03">Pseudo - Rang - Fonction</div><img src="LIEN DE L'IMAGE" /></div>

    </div><div class="PA01"></div>
    <br />
    <div class="PA_titre01">What else ?</div><div class="PA_liens">Règlement<br />Contexte<br />Autres liens ~ 
    </div><div class="PA_titre01">News</div><div class="PA_news">00/00/00 : Cras volutpat at elit non aliquam.<br />

    </div><div class="PA01"></div>
    <div class="PA_titre01">Prédéfinis</div><div class="PA_predef"><img src="LIEN DE L'IMAGE" />

    </div>
    <a href="http://www.never-utopia.com" id="PA_alice">A-Lice | Never-Utopia</a>
    </div>


    CSS :
    Code:
    .PA01 {
    clear: both;
    }

    .PA_fond {
    width: 680px;
    height: 390px;
    padding: 10px;
    border-radius: 50px;
    border: solid 2px #b07865;
    margin: auto;
    background: #f6d7cd;
    color: #5B214F;
    font-size: 12px;
    }

    .PA_titre01 {
    text-indent: 70px;
    font-size: 20px;
    font-weight: bold;
    color: #b73d44;
    margin-top: -10px;
    }

    .PA_contexte {
    float: left;
    width: 270px;
    height: 150px;
    overflow: auto;
    background: #b07865;
    text-align: justify;
    padding: 5px;
    border-radius: 20px;
    margin-right: 20px;
    }

    .PA_titre02 {
    text-align: right;
    font-size: 35px;
    color: #d4457d;
    text-shadow: 1px 1px 0px #b07865;
    margin-top: -25px;
    margin-left: 270px;
    width: 400px;
    }

    .PA_staff {
    width: 350px;
    height: 140px;
    background: #b07865;
    text-align: justify;
    padding: 5px;
    float: right;
    overflow: auto;
    }

    div.PA_staff02 {
    width: 100px;
    height: 70px;
    overflow: hidden;
    display: inline-block;
    }

    .PA_staff02 img {
    width: 100px;
    height: 70px;
    position: relative;
    bottom: 50px;
    transition: 2s;
    }

    .PA_staff02:hover img {
    bottom: 140px;
    transition: 2s;
    }

    .PA_staff03 {
    padding: 5px;
    text-align: center;
    }

    .PA_liens {
    float: left;
    width: 270px;
    height: 80px;
    background: #b07865;
    text-align: center;
    padding: 5px;
    }

    .PA_news {
    float: right;
    width: 350px;
    height: 100px;
    background: #b07865;
    text-align: justify;
    padding: 5px;
    border-radius: 20px;
    }

    .PA_predef {
    width: 650px;
    height: 50px;
    padding: 5px;
    margin: auto;
    overflow: hidden;
    }

    #PA_alice {
    text-decoration: none;
    color: white;
    font-size: 11px;
    text-align: center;
    display: block;
    }

    Remarque : Pour une utilisation optimale, la taille des images pour le staff est de 100px par 70px, pour les prédéfinis elle est de 50px par 50px.

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.

    avatar
    MadSushi
    FémininAge : 22Messages : 25

    le Mer 4 Oct 2017 - 19:25

    Merci :)
    avatar
    Tatia38
    FémininAge : 29Messages : 306

    le Jeu 2 Nov 2017 - 14:05

    super sympa merciiii
    avatar
    Patou972
    FémininAge : 39Messages : 172

    le Mar 13 Fév 2018 - 17:18

    merci beaucoup
    avatar
    Selmacke
    FémininAge : 28Messages : 100

    le Mar 13 Fév 2018 - 17:23

    Merci :)
    avatar
    Cyra
    FémininAge : 31Messages : 42

    le Jeu 12 Avr 2018 - 14:27

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mar 25 Sep 2018 - 11:25