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.


    Street Dance is an Art (light)

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

    le Sam 14 Mar 2015 - 10: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 ^^

    avatar
    Equestria
    FémininAge : 21Messages : 118

    le Jeu 9 Avr 2015 - 18:06

    merci
    avatar
    Deed01
    MasculinAge : 40Messages : 340

    le Jeu 7 Mai 2015 - 14:31

    merci
    avatar
    Punisher
    MasculinAge : 29Messages : 12

    le Lun 11 Mai 2015 - 8:01

    merci
    avatar
    mon-etoile
    FémininAge : 29Messages : 140

    le Mar 11 Aoû 2015 - 13:36

    Merci
    avatar
    Kelalin
    FémininAge : 25Messages : 1888

    le Mar 11 Aoû 2015 - 14:17

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

    le Sam 29 Aoû 2015 - 12:52

    Merci
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 167

    le Sam 19 Mar 2016 - 1:15

    Merci
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 167

    le Dim 20 Mar 2016 - 13:43

    Merci!
    Divas/Marion
    FémininAge : 18Messages : 44

    le Sam 28 Mai 2016 - 18:41

    Merci Very Happy
    avatar
    Sukinette
    FémininAge : 33Messages : 1191

    le Sam 26 Nov 2016 - 15:25

    Merci ♥



      Merci pour les avatars Clémentine & Narakye ♥♥
    avatar
    Little Ghost
    FémininAge : 28Messages : 86

    le Mar 29 Nov 2016 - 10:33

    Merci ♥
    avatar
    Raween
    FémininAge : 26Messages : 110

    le Mar 29 Nov 2016 - 17:31

    Merci beaucoup :)
    Darouine Lius
    MasculinAge : 28Messages : 65

    le Sam 10 Déc 2016 - 12:23

    merci :)
    avatar
    Chadot
    FémininAge : 29Messages : 176

    le Lun 8 Mai 2017 - 5:11

    Merci



    avatar
    Leelo
    FémininAge : 26Messages : 147

    le Dim 21 Mai 2017 - 15:48

    merci
    Hane
    FémininAge : 19Messages : 59

    le Mer 31 Mai 2017 - 19:10

    merci
    avatar
    Yamoto
    FémininAge : 16Messages : 28

    le Mar 18 Juil 2017 - 12:05

    Mercii
    avatar
    Sigril
    MasculinAge : 19Messages : 10

    le Jeu 27 Juil 2017 - 13:39

    merci
    avatar
    Thanos
    MasculinAge : 22Messages : 83

    le Sam 17 Mar 2018 - 4:44

    merci
    avatar
    alysszen
    FémininAge : 22Messages : 16

    le Mer 21 Mar 2018 - 10:39

    Merci !
    avatar
    Mattyew
    MasculinAge : 24Messages : 88

    le Dim 25 Mar 2018 - 10:04

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 5:23