Certificard

certificard.markdown

Certificard

A Pen by Diego Loiola on CodePen.

License.

index.html

<section>
  <header>
    <img src="https://unavatar.now.sh/github/didi-loiola" />
  </header>
<h1>Diego Loiola @didi.loiola</h1>
<div>
  <h2>Insígnias na ImersãoDev</h2>
  <ol>
    <li>💰 Conversor de moedas</li>
    <li>🔢 Calculadora</li>
    <li>🔮 Mentalista</li>
    <li>🎬 AluraFlix</li>
    <li>🏆 Tabela de Classificação</li>
    <li>🃏 Supertrunfo</li>
    <li>🌐 Certificard</li>
  </ol>
</div>
  </section>

style.css

@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');

body{
  background-color: #009688;
  font-family: 'New Tegomin', serif;
}
section{
  -webkit-box-shadow: 0px 3px 17px 0px rgba(0,0,0,0.61); 
box-shadow: 0px 3px 17px 0px rgba(0,0,0,0.61);
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  margin-top: 100px;
  background-color: white;
  padding: 15px;
  border: 1px solid black;
  border-radius: 7px;
}

section h1{
  font-size: 22px;
  text-align: center;
}

section h2{
  text-align: center;
}

header{
  background-image: url('https://coverfiles.alphacoders.com/339/33995.jpg');
  background-size: cover;
  border: 1px solid orange;
  heigth: 80px;
  border-radius: 7px;
}

div{
  background-color: #bac3d6;
  border: 1px solid orange;
  padding: 15px;
  border-radius: 7px;
}

img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(-50%);
  border: 5px solid white;
  width: 150px;
  heigth: 150px;
  border-radius: 100%
}