Desafio CSS – iMasters Cube

Update: Confira aqui o resultado do Desafio CSS – iMasters Cube

Por que fazer um desafio de CSS?

Sempre fiquei admirado pelos desafios que o grande amigo Maujor fazia em seu blog, nos fazendo pensar em cima da CSS↳CSS31 conteúdosArquitetura CSS: CSS FuncionalDev (Back & Front) · set 2019Entendendo posicionamento com CSS de uma vez por todasDev (Back & Front) · jul 2025Sites que combinam estética e usabilidade: reflexos da evolução do CSSDev (Back & Front) · fev 2025Ver tudo em Dev (Back & Front) → e propor a criatividade com diversão. Achei que seria talvez o momento de eu continuar essa proposta, trazendo recursos novos e que precisam ser praticados.

Outro fator importante, que inclusive cito em minhas palestras, é que precisamos brincar mais, voltar a fazer uma internet mais divertida, e nada melhor do que participar de desafios para aprender e se divertir um pouco, saindo do ambiente carregado do trabalho, mesmo que seja por alguns minutos. Assim sendo, nasceu a ideia de criar desafios loucos.

Fiz um desafio no meu blog, de apenas um dia de prazo, e teve em torno de 78 propostas, o segundo foi bem mais difícil e mesmo assim passamos de 20 propostas, o que mostra o quanto a comunidade de front-end no Brasil está aquecida e como ainda podemos aumentá-la ainda mais.

Agora os desafios começam a ser publicados aqui no iMasters também.

Quem pode participar? Como participar?

Qualquer pessoa pode participar, pois do junior até o senior, todos nós estamos sempre aprendendo, e nada melhor do que aprender se divertindo.

Para participar, você deve enviar a sua proposta para o meu email(citado em regras). Embora não faça parte da regra, tente realizar a tarefa no tempo proposto – isso é importante para medirmos melhor o nosso próprio desempenho! Ao diminuir a sua própria marca, a evolução fica ainda mais perceptível!

Os iniciantes têm o objetivo de conseguir cumprir a tarefa, os intermediários de cumprir a tarefa antes do tempo proposto, os mais avançados têm o desafio de tentar superar a minha marca!

Ganho alguma coisa se participar?

Sim! Todos que participarem e acertarem o desafio/cumprirem a meta ganharão um presente 🙂 Ao final de cada desafio será feito um sorteio entre os acertadores.

Neste primeiro, os 3 primeiros sorteados ganharão um par de convites para o InterCon 2012! Todos os outros acertadores ganharão um super desconto para usar em qualquer curso online do iMasters PRO.

Mãos à obra!

Nível: Avançado

Tempo em que foi criado: 42 minutos

Tempo estimado proposto: 120 minutos

Deadline do desafio: 16/10 as 18h

Regras

1. Cada participante só pode submeter uma única proposta
2. O participante PRECISA utilizar dentro do body APENAS o HTML proposto nesse post.
3. O CSS deve ser inserido internamente no arquivo HTML
4. O arquivo HTML deverá vir com o nome do participante, ex: “bernard-de-luna.html”
5. Não serão aceitos zips nem outros tipos compactados
6. Para participar, o interessado deve mandar o desafio feito para o email deluna@bernarddeluna.com – Caso o seu e-mail não seja respondido em até 1 dia com um “recebido”, entre em contato novamente, pois algo pode ter acontecido; como vocês sabem, os ETs estão entre nós e nunca sabemos o que pode acontecer!
7. O e-mail precisa ser enviado com o assunto “Desafio Bernard De Luna”
8. Por favor, não divulgue a solução na internet até terminar o desafio, a principal missão aqui é propor uma forma divertida de praticar CSS.
9. As medidas deverão ser o mais próximas possíveis ou “pixel perfect”, se ficar muito distante do proposto, será desconsiderado.
10. Divirta-se!

HTML para ser usado dentro do body

 <div id="container">
  <div id="imasters-cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="right"></div>
    <div class="bottom"></div>
    <div class="left"></div>
  </div>
</div>