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

    Rappel du premier message :


    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.

    leviarthrite
    leviarthrite
    FémininAge : 33Messages : 26

    le Sam 26 Nov 2016 - 20:55

    Merci
    Little Ghost
    Little Ghost
    FémininAge : 30Messages : 86

    le Mar 29 Nov 2016 - 11:24

    Merci ♥
    Sylfaen
    Sylfaen
    FémininAge : 22Messages : 69

    le Dim 4 Déc 2016 - 14:19

    thanks ! =)
    Chadot
    Chadot
    FémininAge : 32Messages : 230

    le Mer 7 Déc 2016 - 8:10

    Merci



    Breakdown - Page 2 2mo6y5k
    Bowtie
    Bowtie
    FémininAge : 30Messages : 62

    le Lun 12 Déc 2016 - 22:42

    Merci =D
    Nathouille
    Nathouille
    FémininAge : 28Messages : 70

    le Dim 29 Jan 2017 - 22:48

    Je vais essayer, merci ^^ Et idem, les liens sont morts...
    Kirito
    Kirito
    MasculinAge : 24Messages : 207

    le Jeu 16 Fév 2017 - 18:26

    Joli *^*
    Donquichotte
    Donquichotte
    MasculinAge : 24Messages : 48

    le Ven 17 Fév 2017 - 3:06

    merci
    Pretty Girl
    Pretty Girl
    FémininAge : 22Messages : 29

    le Sam 18 Fév 2017 - 12:14

    Sublime :innocent:
    Loo
    Loo
    FémininAge : 26Messages : 22

    le Mar 7 Mar 2017 - 14:08

    Merci pour le partage :)
    madame-al
    madame-al
    FémininAge : 29Messages : 12

    le Mar 7 Mar 2017 - 15:17

    :love:
    Mashi Hozuki
    Mashi Hozuki
    MasculinAge : 23Messages : 28

    le Mer 8 Mar 2017 - 11:33

    merci!
    Christtinne
    Christtinne
    FémininAge : 34Messages : 200

    le Dim 12 Mar 2017 - 23:51

    Sugoeeeee, merci ^^
    Dacina moe
    Dacina moe
    FémininAge : 42Messages : 171

    le Sam 8 Avr 2017 - 22:22

    Jolie :)
    Namco
    Namco
    FémininAge : 28Messages : 115

    le Jeu 13 Avr 2017 - 13:43

    très jolie !
    Chadot
    Chadot
    FémininAge : 32Messages : 230

    le Lun 8 Mai 2017 - 7:06

    Merci



    Breakdown - Page 2 2mo6y5k
    Leelo
    Leelo
    FémininAge : 29Messages : 157

    le Dim 21 Mai 2017 - 18:28

    très jolie
    Enelia
    Enelia
    FémininAge : 21Messages : 30

    le Mer 24 Mai 2017 - 12:39

    L'image d'aperçu ne marche pas :/ Mais merci quand même :3
    Stronger
    Stronger
    MasculinAge : 26Messages : 277

    le Dim 28 Mai 2017 - 7:12

    rip les liens d’aperçus :3



    Breakdown - Page 2 Strong13
    Jealous
    Jealous
    MasculinAge : 22Messages : 7

    le Dim 28 Mai 2017 - 10:24

    Merci pour le partage :)
    Gieve
    Gieve
    FémininAge : 31Messages : 123

    le Dim 28 Mai 2017 - 13:30

    Merci <3
    defenrir
    defenrir
    MasculinAge : 37Messages : 76

    le Sam 3 Juin 2017 - 11:41

    merci o/
    Nélie Reinart
    Nélie Reinart
    FémininAge : 21Messages : 44

    le Sam 5 Aoû 2017 - 19:00

    merci
    Lamire
    Lamire
    FémininAge : 27Messages : 96

    le Mar 5 Sep 2017 - 16:34

    Merci~
    Selmacke
    Selmacke
    FémininAge : 30Messages : 100

    le Sam 9 Sep 2017 - 9:56

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 20 Oct 2020 - 10:16