Reino Kawaii

~Oi! Postei para vocês como 'desenhar' usando html e css uma alpaca há alguns posts né; agora, ainda na onda de ilustrar usando códigos, vamos fazer o Rilakkuma, aquele ursinho da San-x que acho que todo mundo conhece (se não, ó ele aí na imagem acima).

E para que enfeite seu blog ou onde você desejar e tenha alguma função, vou deixar os códigos que uso para transformá-lo em uma caixinha na qual você pode adicionar o que quiser, sugiro o widget do twitter ou uma mensagem, mas cê que sabe.
O código original foi encontrado no Codepen; se você visitou o link, deve ter visto que o urso era rosa, para que ele ficasse igual ao Rilakkuma, só mudei a cor para #bf6506 que já está no código que compartilho com vocês e aí se pode fazer o mesmo (mudar a cor) para quem quiser fazer o Korilakkuma =>(amiguim do Rilakkuma).
Primeiro, copie e cole todo o código dessa página em um gadget html/javascript ou onde quiser que apareça. Se não quiser mudar nada, basta substituir o texto 'adicione alguma coisa aqui' pelo que preferir.
No geral, width e height se referem à largura e altura, color a cor do texto, border-radius às bordas arredondadas, margin-top/left/bottom/right posicionam alguma coisa mais para cima, para baixo, para esquerda ou direita, assim como padding; background-color cores de plano de fundo, dos olhos, do urso... Modifique os valores caso queira personalizar alguma área como bear - urso, face - carinha, eye - olhos, ear - orelhas, mouth - boca, nose - nariz, belly - barriga.
Logo no início do código vocês podem ver a class twitis que criei para deixar o widget do twitter certinho. Se quiser adicionar a sua twitter timeline, acesse a página de widgets do Twitter e configure como preferir ou veja como fazer isso aqui. Cole o seu código do twitter onde diz 'adicione alguma coisa aqui'.
E é isso!