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.

    Nyls
    Nyls
    MasculinAge : 19Messages : 28

    le Sam 9 Sep 2017 - 14:45

    merci beaucoup ! ♥
    Bilandie
    Bilandie
    FémininAge : 24Messages : 21

    le Sam 16 Sep 2017 - 17:05

    merci beaucoup ^^
    DarkWrestler.
    DarkWrestler.
    MasculinAge : 25Messages : 36

    le Sam 16 Sep 2017 - 21:50

    Thanks
    Syler
    Syler
    FémininAge : 20Messages : 32

    le Sam 23 Sep 2017 - 11:38

    Mercii *^*
    Doomdom
    Doomdom
    MasculinAge : 35Messages : 25

    le Sam 23 Sep 2017 - 12:50

    merci :omg:
    Aadelrun
    Aadelrun
    FémininAge : 21Messages : 79

    le Lun 27 Nov 2017 - 17:31

    Merci ! ^^



    Breakdown - Page 3 1502999567-ghgh-gh
    Souky Mitsu
    Souky Mitsu
    FémininAge : 30Messages : 124

    le Mar 13 Fév 2018 - 2:43

    J'aime. Merci =D
    Ouciane
    Ouciane
    FémininAge : 20Messages : 7

    le Sam 3 Nov 2018 - 0:37

    Merci !
    Yumeki
    Yumeki
    FémininAge : 28Messages : 147

    le Jeu 10 Oct 2019 - 20:23

    Merci
    ninouee
    ninouee
    FémininAge : 39Messages : 143

    le Mar 22 Oct 2019 - 20:23

    Joli travail



    Breakdown - Page 3 Robert12
    Contenu sponsorisé


      La date/heure actuelle est Jeu 29 Oct 2020 - 14:37