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.


    Breakdown

    A-Lice
    A-Lice
    FémininAge : 26Messages : 4939

    le Lun 16 Fév 2015 - 13:51


    Breakdown


    Voici la page d'accueil de l'ensemble de fiche Breakdown.

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

    HTML & CSS ~ Voici donc un aperçu : normal & au passage de la souris ~ phpBB2 + phpBB3 + Invision


    Et le code :
    HTML :
    Code:
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <div class="contenant"><div class="titre">Bienvenue à xxxxxxxx</div>
    <div class="news">• 00/00/00 : Lorem ipsum dolor sit amet <br />• 00/00/00 : Lorem ipsum dolor sit amet <br />• 00/00/00 : Lorem ipsum dolor sit amet <br />• 00/00/00 : Lorem ipsum dolor sit amet <br />
    </div>
    <div class="staff"><div class="staff01"><div class="staff02">XXXX - Administrateur
    Chieur de service /pan</div><img src="http://nsa34.casimages.com/img/2015/02/05/15020510425075057.png" /></div><div class="staff01"><div class="staff02">XXXX - Administrateur
    Chieur de service /pan</div><img src="http://nsa34.casimages.com/img/2015/02/05/15020510425075057.png" /></div><div class="staff01"><div class="staff02">XXXX - Administrateur
    Chieur de service /pan</div><img src="http://nsa34.casimages.com/img/2015/02/05/15020510425075057.png" /></div></div>
    <div class="topsite"><a href="LIEN"><img src="http://nsa33.casimages.com/img/2015/02/05/150205093603234468.png" /></a> <a href="LIEN"><img src="http://nsa33.casimages.com/img/2015/02/05/150205093603234468.png" /></a><br /><a href="LIEN"><img src="http://nsa33.casimages.com/img/2015/02/05/150205093603234468.png" /></a> <a href="LIEN"><img src="http://nsa33.casimages.com/img/2015/02/05/150205093603234468.png" /></a>
    </div>
    <br />
    <div class="contexte">contexte ici
    </div>
    <div class="partenaire"><a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a><br /><a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a><br /><a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a>
    </div>
    <a href="http://never-utopia.com" id="ALice">A-Lice | Never-Utopia</a>
    </div>


    CSS :
    Code:
    .contenant {
    width: 700px;
    height: 450px;
    background: firebrick;
    overflow: hidden;
    color: firebrick;
    text-align: justify;
    border: dashed burlywood 2px;
    margin: auto;
    }

    .titre {
    color: burlywood;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    font-weight: bold;
    font-family: 'Open Sans Condensed', sans-serif;
    }

    .news {
    background: burlywood;
    display: inline-block;
    height: 150px;
    overflow: auto;
    padding: 5px;
    position: relative;
    top: -90px;
    transform: rotate(-2deg);
    width: 200px;
    left: 20px;
    }

    .staff {
    background: burlywood;
    display: inline-block;
    height: 225px;
    margin-left: 10px;
    overflow: auto;
    transform: rotate(-2deg);
    width: 230px;
    position: relative;
    left: 35px;
    }

    .staff01 img {
    width: 230px;
    height: 50px;
    margin-bottom: -45px;
    position: relative;
    bottom: 50px;
    transition: 1s;
    }

    .staff01:hover img {
    bottom: 100px;
    transition: 1s;
    }

    .staff02 {
    padding: 5px;
    color: white;
    text-align: center;
    background: firebrick;
    height: 40px;
    }

    .topsite {
    background: burlywood;
    display: inline-block;
    height: 150px;
    margin-left: 10px;
    overflow: auto;
    padding: 5px;
    transform: rotate(-2deg);
    width: 150px;
    position: relative;
    top: -50px;
    left: 45px;
    }

    .contexte {
    background: burlywood;
    display: inline-block;
    height: 220px;
    overflow: auto;
    padding: 5px;
    transform: rotate(-2deg);
    width: 200px;
    position: relative;
    top: -80px;
    left: 30px;
    }

    .partenaire {
    background: burlywood;
    display: inline-block;
    height: 130px;
    margin-left: 10px;
    overflow: auto;
    padding: 5px;
    transform: rotate(-2deg);
    width: 390px;
    position: relative;
    top: -85px;
    left: 40px;
    }

    #ALice {
    color: white;
    font-size: 11px;
    text-decoration: none;
    margin-left: -80px;
    position: relative;
    top: -475px;
    }


    La class "plop" correspond aux trois images de 100px par 100px.


    La suite de l'ensemble se trouve ici :


    Règlement
    Contexte
    Annonce
    Présentation
    Prédéfini
    Page d'accueil

    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.

    megb59
    megb59
    FémininAge : 26Messages : 110

    le Dim 15 Mar 2015 - 14:57

    Cette PA est superbe!
    Anonymous
    Invité

    le Ven 20 Mar 2015 - 22:05

    Pile ce que cherchais ♥ Thanks !
    Eshon
    Eshon
    FémininAge : 39Messages : 195

    le Sam 21 Mar 2015 - 0:31

    Merci !
    Écu
    Écu
    FémininAge : 23Messages : 27

    le Mer 8 Avr 2015 - 10:44

    Cette PA est exactement ce que je recherchais ! *-*
    Hanako-chan
    Hanako-chan
    FémininAge : 19Messages : 33

    le Mer 8 Avr 2015 - 13:30

    La PA est super jolie, bien colorée, merci, c'est ce que je cherchais Wink
    Hayate747
    Hayate747
    MasculinAge : 30Messages : 196

    le Lun 4 Mai 2015 - 11:04

    Merci Wink
    Dark Fairy
    Dark Fairy
    FémininAge : 22Messages : 242

    le Mer 20 Mai 2015 - 19:20

    Merci!
    Shy Bramble
    Shy Bramble
    FémininAge : 20Messages : 6

    le Lun 25 Mai 2015 - 11:45

    C'est SU-PERBE ! Merci beaucoup ! :DD
    Heah92
    Heah92
    FémininAge : 22Messages : 88

    le Dim 31 Mai 2015 - 13:42

    merci :)
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 27Messages : 153

    le Mer 10 Juin 2015 - 22:45

    Merci du partage !
    Moses.
    Moses.
    MasculinAge : 23Messages : 552

    le Dim 14 Juin 2015 - 0:43

    Très joli PA, merci du partage :)
    avatar
    Hane
    FémininAge : 22Messages : 64

    le Lun 29 Juin 2015 - 1:38

    Toujours bien fait, merci!
    rosebleudu10
    rosebleudu10
    FémininAge : 30Messages : 189

    le Jeu 6 Aoû 2015 - 12:26

    merci
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2319

    le Jeu 6 Aoû 2015 - 16:49

    Merci (・◇・)
    Err0r
    Err0r
    FémininAge : 27Messages : 134

    le Ven 7 Aoû 2015 - 14:02

    je pique



    Breakdown 150519095409324327
    Kazumi
    Kazumi
    FémininAge : 20Messages : 45

    le Jeu 24 Sep 2015 - 22:02

    Merci ^w^/ Super boulot =w=b
    Viou
    Viou
    FémininAge : 31Messages : 181

    le Dim 10 Jan 2016 - 17:09

    Merci du partage 🎶
    Mistiny
    Mistiny
    FémininAge : 17Messages : 23

    le Jeu 28 Jan 2016 - 17:29

    Woah, super! J'aime beaucoup ta page d'accueil, merci pour ton travail! :)
    CHi1565456
    CHi1565456
    MasculinAge : 20Messages : 56

    le Sam 26 Mar 2016 - 17:33

    Merci !
    Mme Layton
    Mme Layton
    FémininAge : 23Messages : 93

    le Sam 26 Mar 2016 - 18:09

    Alice, ais-je le droit de brandir mes pompons de fan à chaque fois que vous sortez un codage ?
    luna-chan86
    luna-chan86
    FémininAge : 31Messages : 195

    le Mer 12 Oct 2016 - 18:39

    Merci beaucoup <3
    Solitude
    Solitude
    FémininAge : 45Messages : 290

    le Dim 13 Nov 2016 - 10:46

    merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Breakdown Sign510
    Edward Speleers
    Edward Speleers
    MasculinAge : 32Messages : 460

    le Jeu 24 Nov 2016 - 15:10

    J'emprunte, merci



    Breakdown Edkidd11
    Chhaya
    Chhaya
    FémininAge : 35Messages : 1213

    le Sam 26 Nov 2016 - 16:20

    Merci ♥



    Breakdown 200412081714641513

      Merci Sparrow :3
    Contenu sponsorisé


      La date/heure actuelle est Mar 20 Oct 2020 - 11:35