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.

Le Deal du moment :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    Street Dance is an Art (light)

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

    Sam 14 Mar 2015 - 11:59


    Street Dance is an Art


    Suite à ma participation au deuxième "Y a de l'ambiance" voici la version Light.

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

    HTML & CSS ~ Voici donc un aperçu : www


    Et le code :
    HTML :
    Code:
    <link href="http://fonts.googleapis.com/css?family=Keania+One|Expletus+Sans:400italic|Warnes" rel="stylesheet" type="text/css" />
    <div class="fiche">
                      
       <div class="titre">
                  Le titre du forum       
       </div><br />       
       <div class="banniere">
                         
       </div><br />       
       <div class="bloc">
                       
          <div class="soustitre">
                 Contexte   
          </div><br />   
          <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non varius lectus, et euismod enim. Fusce dui sem, congue nec quam vel, aliquet rhoncus nulla. Phasellus efficitur justo sit amet eros fringilla, nec porta dolor ultricies. Donec at felis tincidunt, sodales neque at, tincidunt ipsum. Maecenas imperdiet dui magna, in dignissim elit eleifend a. Aliquam et magna a enim elementum pulvinar ut vel magna. Nulla est justo, luctus vitae diam eu, commodo venenatis orci. Pellentesque non semper ipsum, aliquam dignissim risus. Pellentesque sodales nunc eget dui hendrerit imperdiet.   
          </p>
               
       </div>
                      
       <div class="bloc">
                       
          <div class="soustitre">
                 News   
          </div><br />   
          <p>
               00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br />00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br />00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br /> 
          </p>
               
       </div><br /><br /><a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <br /><br /><a href="http://www.never-utopia.com/" class="credit">A-Lice | Never-Utopia</a><br /><br />
    </div>


    CSS :
    Code:
    .fiche {
    width: 750px;
    padding: 10px;
    border-radius: 100px;
    background: #f1f1f1;
    margin: auto;
    border: 2px dotted white;
    }

    .titre {
    text-align: center;
    font-size: 25px;
    height: 30px;
    padding: 10px;
    color: white;
    font-family: 'Expletus Sans', cursive;
    text-shadow: 0px 0px 5px white;
    }

    .banniere {
    width: 700px;
    height: 200px;
    border-radius: 100px;
    margin: auto;
    border: 2px dotted white;
    overflow: hidden;
    background-image: url(http://nsa33.casimages.com/img/2015/03/01/150301022241788998.png);
    }

    .bloc {
    display: inline-block;
    width: 350px;
    height: 165px;
    border-radius: 80px;
    border: 2px dotted white;
    margin-right: 7px;
    margin-left: 7px;
    background: #f8ceda;
    font-size: 13px;
    text-align: justify;
    }

    .partoch { 
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 30px;
    margin-left: 7px;
    }

    a.credit {
    text-decoration: none;
    color: #f8ceda;
    text-align: center;
    display: inline-block;
    font-size: 11px;
    text-shadow: 0px 0px 5px pink;
    font-family: 'Expletus Sans', cursive;
    }

    .soustitre {
    text-align: center;
    font-size: 22px;
    height: 25px;
    color: white;
    padding: 5px;
    margin-bottom: -10px;
    font-family: 'Expletus Sans', cursive;
    }

    p {
    height: 100px;
    width: 300px;
    margin: auto;
    overflow: auto;
    }

    Les autres versions :


    Version avec transition
    Version Light
    Version Dark

    /!\ En cas de problème, c'est ici ou que ça ce passe.

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^

    Equestria
    Equestria
    FémininAge : 26Messages : 118

    Jeu 9 Avr 2015 - 20:06

    merci
    Deed01
    Deed01
    MasculinAge : 46Messages : 343

    Jeu 7 Mai 2015 - 16:31

    merci
    Punisher
    Punisher
    MasculinAge : 35Messages : 12

    Lun 11 Mai 2015 - 10:01

    merci
    mon-etoile
    mon-etoile
    FémininAge : 35Messages : 140

    Mar 11 Aoû 2015 - 15:36

    Merci
    Anonymous
    Invité

    Mar 11 Aoû 2015 - 16:17

    Merci O(≧∇≦)O
    Chèlha
    Chèlha
    FémininAge : 31Messages : 121

    Sam 29 Aoû 2015 - 14:52

    Merci
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 55Messages : 167

    Sam 19 Mar 2016 - 2:15

    Merci
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 55Messages : 167

    Dim 20 Mar 2016 - 14:43

    Merci!
    avatar
    Divas/Marion
    FémininAge : 24Messages : 44

    Sam 28 Mai 2016 - 20:41

    Merci Very Happy
    Chhaya
    Chhaya
    FémininAge : 38Messages : 1213

    Sam 26 Nov 2016 - 16:25

    Merci ♥



    Street Dance is an Art (light) 200412081714641513

      Merci Sparrow :3
    Little Ghost
    Little Ghost
    FémininAge : 33Messages : 91

    Mar 29 Nov 2016 - 11:33

    Merci ♥
    Raween
    Raween
    FémininAge : 32Messages : 112

    Mar 29 Nov 2016 - 18:31

    Merci beaucoup :)
    Darouine Lius
    Darouine Lius
    MasculinAge : 34Messages : 76

    Sam 10 Déc 2016 - 13:23

    merci :)
    Chadot
    Chadot
    FémininAge : 35Messages : 248

    Lun 8 Mai 2017 - 7:11

    Merci



    Street Dance is an Art (light) 2mo6y5k
    Leelo
    Leelo
    FémininAge : 32Messages : 157

    Dim 21 Mai 2017 - 17:48

    merci
    avatar
    Hane
    FémininAge : 25Messages : 70

    Mer 31 Mai 2017 - 21:10

    merci
    Yamoto
    Yamoto
    FémininAge : 22Messages : 29

    Mar 18 Juil 2017 - 14:05

    Mercii
    Sigril
    Sigril
    MasculinAge : 25Messages : 13

    Jeu 27 Juil 2017 - 15:39

    merci
    Thanos
    Thanos
    MasculinAge : 28Messages : 84

    Sam 17 Mar 2018 - 5:44

    merci
    alysszen
    alysszen
    FémininAge : 28Messages : 19

    Mer 21 Mar 2018 - 11:39

    Merci !
    Mattyew
    Mattyew
    MasculinAge : 30Messages : 90

    Dim 25 Mar 2018 - 12:04

    Merci :)
    Contenu sponsorisé


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