Y'a de l'ambiance #4 - Le Retrogaming

Coucou tout le monde,

ce n'est pas sans émotion que je propose un thème dans cette section, une section dans laquelle je ne suis pas encore très familiarisée mais ça va venir ^^

Si je vous dit "Retrogaming" vous allez me dire : PacMan, Space Invader, les premiers Sonic, Mario Bros et j'en passe plein d'autre !

Si le retrogaming vous parle car c'est grâce à lui qu'on a toute sorte de jeu aujourd'hui sur différentes consoles alors à vous de nous pondre un petit code autour de ce thème !
La taille est libre, vous pouvez coder une PA, une fiche voire une signature si vous voulez, vous êtes libre de vos mouvements

Je vous laisse jusqu'au 2 octobre ^^ Pour me faire part de vos créations vous posterez un aperçu image, un lien vers votre forum test ainsi que le code sous balises code dans ce topic.

Bonne chance à tous

JEUX RETROOOOOOOOOOOO *w* //Eha adhère! Eha valide! Eha vénère!

si tu vénères tu vas participer alors

Totalement! Je ne peux que céder au chant des sirènes d'un sujet aussi classe <3

Personne ne veut participer ?

Je trouve ton thème très chouette Fyra, si j'ai le temps je participerais ^^

ah bah là c'est clair que je vais repousser la date parce que je n'ai pas encore de participation ^^'

donc je repousse la date au 16 octobre ^^ ça laisse deux semaines de plus

J'aimer bien le thème donc j'ai fais un petit quelque chose ^^



Bon c'est une fiche plutôt simple est basique mais bon je trouve sa sympathique x')
(les petit gifs sont de moi aussi :p)

oooooooooooooohhh !!!!!!!!!! Une participante !!!!!!!!!
Merci pour ta participation ^^

Coucou tout le monde, voici ma participation au défi


http://test-fyraliel.forumactif.org/h3-pacman-defi

Code:

<style>
  .cadre_total {
    height: 120px;
    width: 600px;
    border: 3px solid #002ADB;
    border-radius: 5px;
    background: #000;
  }
 
  .cadre_interne {
    position: relative;
    height: 105px;
    width: 585px;
    border: 2px solid #02209C;
    border-radius: 5px;
    margin: 5px;
    overflow: hidden;
  }
 
  .background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 5px;
    line-height: 105px;
    text-align: right;
    overflow: hidden;
  }
 
  .background > img {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
  }
 
  .cadre_interne:hover .background > img {
    opacity: 1;
    transition: 3s all linear 5s;
  }
 
  .pacman {
    background: #000;
    height: 105px;
    width: 595px;
    position: absolute;
    left: -575px;
  }
 
  .pacman img {
    position: absolute;
    height: 75px;
    width: 75px;
    right: -65px;
    top: 15px;
  }
 
  .cadre_interne:hover .pacman {
    left: 0;
    transition: 5s all linear;
  }
 
  .pacman img:last-of-type,
  .cadre_interne:hover .pacman img:first-of-type {
    opacity: 0;
  }
 
  .cadre_interne:hover .pacman img:last-of-type {
    opacity: 1;
  }
 
  .point,
  .point2 {
    border-radius: 10px;
    background: #fff;
    display: inline-block;
    margin-right: 20px;
    vertical-align: middle;
  }
 
  .point {
    height: 8px;
    width: 8px;
  }
 
  .point2 {
    height: 15px;
    width: 15px;
  }

</style>
<div class="cadre_total">
  <div class="cadre_interne">
    <div class="background">
      <img src="http://nsa37.casimages.com/img/2015/09/21/150921091707267740.png" />
      <div class="pacman">
        <img src="http://nsa38.casimages.com/img/2015/09/20/150920074159597319.png" />
        <img src="http://nsa38.casimages.com/img/2015/09/20/150920072853927723.gif" />
      </div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point2"></div>
    </div>
  </div>
</div>


Je lance les votes dans peu de temps ^^