''Sobre mim'' personalizado: Pink Lines

fevereiro 21, 2018


Konnichiwaa fadinhas e elfos! Como vocês estão? Chegando com mais um modelo personalizado de perfil do autor, ou mais conhecido como, ''sobre mim'' do blog! É exatamente como a imagem acima, tem duas linhas de borda com foto redondinha e cores meigas, suaves (podendo ser alterada se preferir)! Enfim, vem ver como faz! É super simpleees, let's go!


Vamos lá! Vá em TemaEditar Html e procure por </b:skin> , ACIMA dele cole o seguinte css:

 @import url(https://fonts.googleapis.com/css?family=Parisienne|Prata);
.about-me {
  width: 250px !important;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/greyzz.png); /* imagem de plano de fundo */
  border: 2px solid pink;
  outline: 5px solid pink;
  outline-offset: 10px;
  padding: 1em;
  margin: 12px; /* apague se quiser centralizado na sidebar*/
}

.about-me h2 {
  font-family: 'Parisienne', sans-serif; /* fonte do titulo */
  text-align: center;
  font-size: 3em;
  margin: 0;
  color: pink; /* cor do titulo */
  text-shadow: 1px 1px 0px rgba(0,0,0, .2);
}
.about-me img {
  border: 5px solid pink;
  border-radius: 50%;
  box-shadow: 1px 1px 1px gray;
  display: block;
  margin: 0 auto;
}

.about-me p {
  text-align: justify;
  line-height: 1.5;
  font-size: 14px; /* tamanho da fonte de descrição */
  font-family: 'Prata', serif; /* cor da fonte de descrição */


} 

Agora vá em Layout e Adicione um Gadget HTML/Javascript e cole:

<link href="https://fonts.googleapis.com/css?family=Parisienne|Prata" rel="stylesheet" type="text/css" />

<div class="about-me">

  <h2>Sobre mim</h2>

  <img src="https://imgur.com/mY2rEr1.jpg" />

    <p>Olá! Eu sou Dorothy. Gosto de usar cercas como feixes de equilíbrio, sair com meu cachorro, Toto e andar de balões de ar quente.</p>

    <p>Meu blog está cheio de dicas & idéias para ajudá-lo a lembrar que não há lugar como nossa casa!
</p>

</div>

- Altere ao seu gosto! Substitua pela sua descrição, e a imagem do perfil em ''https://imgur.com/mY2rEr1.jpg''! Recomendo hospedar no imgur no tamanho 150x150.

- Gostaria de mudar a cor? Procure por ''pink'' substitua pela cor que quiser, (exemplo: black, lavanda, green) para saber os nomes de todas cores consulte esse site: https://htmlcolorcodes.com/color-names/
- Qualquer duvida é só perguntar nos comentários, ok?

Imagem relacionada
Off: Aquela chuvinha gostosa depois de um dia abafado

Créditos: Codepen | Por hoje é só! Espero que tenham gostado. Até mais e Kissus! Tem postagem toda segunda, quarta e sexta então segue o bloguinho e visite sempre! Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest * 

Leia também:

2 comentários

  1. Hello my friend! So cute! Eu coloquei no meu blog, ficou bem fofo, e já coloquei os créditos. Faz mais tutoriais deste género, assim personalizo melhor o meu bloguinho.
    Bjs! https://y-ukinoyume.blogspot.pt/

    ResponderExcluir
    Respostas
    1. Oláa Inêes! Quanto tempo menina!
      Eu vi que colocou, e combinou demais! * - *
      Que bom que gostou, vou tentar trazer mais tutorias assim sim, já tenho outra em mente, quando postar te aviso! Kissus e até mais!

      Excluir

© 2017 Sweet Magic. Re-Design: JD Design. Tecnologia do Blogger.