Desafio CSS – Especial Cone

Olá, pessoal! Passado o tema de revolução, vi semana passada um vídeo clip do Cone Crew Diretoria, de que eu gosto bastante, e no meio de cenas sempre aparece o símbolo do grupo que é um cone, e fiquei pensando como seria reproduzi-lo (não o logo, e sim o símbolo) via código. Levei 12 minutos, então vamos ao desafio.

Quem pode participar? Como participar?

Qualquer pessoa pode participar, pois, do júnior até o sênior, 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 ganhar um desconto de 100% no curso Coding On Weekend, dado por mim e pelo Zeno Rocha (a escolher ou dia 10/08 no RJ ou dia 17/08 em SP).
• Os outros acertadores ganharão todos um desconto de R$ 100,00 em qualquer uma das duas datas do Coding On Weekend.

Mãos à obra!

Desafio CSS #05: criar um cone, utilizando apenas CSS

• Nível: Médio
• Tempo em que foi criado: 12 minutos
• Tempo estimado proposto: 20 minutos

• Deadline do desafio: 24/07 às 18h

Regras

1. Cada participante só pode submeter uma única proposta;
2. O participante PRECISA utilizar dentro do body APENAS o HTML↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) → proposto neste artigo;
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 05”;
8. O deadline do desafio é dia 24 de julho, à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="cone"></div>