Desafio CSS – Especial revolução

Olá, pessoal! Desculpem a demora, estava logo ali, mas agora voltei! É bastante difícil sempre achar coisas legais que mereçam virar desafios 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) →, muitas vezes pela facilidade, outras pela dificuldade. Eu tenho dezenas de experimentos CSS aqui no meu computador, mas já fazê-los virar proposta de um desafio exige algo mais. Sem enrolação, vamos ao desafio:

Revolução!

Nessas últimas semanas estamos passando por mudanças significativas pelo nosso país! “Ah! Bernard, até você vai ficar falando sobre isso aqui? Nem é lugar” Ok! Ok! O fio da meada é que fomos encorajados a irmos para as ruas brigar contra o sistema graças a Turquia, um país que até então a maioria de nós só conhecia graças a novela.

Em homenagem ao povo desse país que nem sabe o quanto foi inspirador para o Brasil, vamos desenhar com CSS a bandeira da Turquia! O desafio foi feito por mim em 5 minutos 🙂

Aproveito aqui para agradecer o pessoal do grupo do FrontEnd Brasil por terem me motivado e inspirado a fazer esse desafio 🙂

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 e-mail (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.

• O primeiro sorteado vai levar digrátis um curso online do iMasters PRO mais um kit iMasters (camiseta, paper toy do cubo iMasters, bottons, etc).
• Os outros acertadores ganharão todos um super desconto em qualquer curso online do iMasters PRO.

Mãos à obra!

Desafio CSS #04: criar a bandeira da Turquia, utilizando apenas CSS

• Nível: Iniciante
• Tempo em que foi criado: 5 minutos
• Tempo estimado proposto: 15 minutos

• Deadline do desafio: 10/07 às 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 CSS 04”;
8. O deadline do desafio é dia 10 de julho, terça-feira, às 18h.
9. 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;
10. As medidas, assim como cores e efeitos deverão ser o mais próximas possíveis ou “pixel perfect”. Se ficar muito distante do proposto, será desconsiderado;
11. Divirta-se!

HTML para ser usado dentro do body

<div class="turquia"></div>