Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Implementação diferente

Olá a todos. A minha implementação ficou ligeiramente diferente e eu gostaria de saber se ela é válida:

.banner-twitter {
  padding: 1rem 4.5rem;
  background-color: #3C1D3D;
  text-decoration: none;

  font-size: 50%;
  font-family: "Open Sans Condensed", sans-serif;
  color: #fff;

  position: absolute;
  top: 0;
  right: 0;

  border-style: solid;
  border-color: #000;
  border-width: thick;

  transform-origin: 0 0;
  transform: translateX(46%) translateY(-70%) rotate(45deg);
}

o link ficou como filha da tag header.

Eu não usei essa conta que foi mostrada no exercício eu fui testando as porcentagens do translate de olho mesmo. Alterando a fonte, aparentemente nada quebra. É válido dessa forma?

1 resposta
solução!

Fala, Bruno!

Não há só "um" jeito certo. Dá pra fazer de várias formas, como você mesmo conseguiu fazer. Você só precisa mesmo testar em diferentes dispositivos, navegadores e resoluções para ter certeza de que sairá como o planejado. Se conseguir isso, excelente. Testei aqui e o banner fica no mesmo lugar independente da resolução. Bastaria, agora, testar em outros dispositivos e navegadores... Aparentemente, está 100% funcional.

Abraço.