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</h1>
<div>
  <h2>Insígnias na ImersãoDev</h2>
  <ol>
    <li>💰 <a href="https://gist.github.com/didi-loiola/6d353cf932d3d6445b6143135dc6b351" target="_blank"><font color="white">Conversor de moedas</font></a></li>
    <li>🔢 <a href="https://gist.github.com/didi-loiola/9fc671033411ff725f3f7e979bf9760c" target="_blank"><font color="#9C27B0">Calculadora</font></a></li>
    <li>🔮 <a href="https://gist.github.com/didi-loiola/17e038ca6fe5a6aceb3fd6140f17c379" target="_blank"><font color="#C2185B">Mentalista</font></a></li>
    <li>🎬 <a href="https://gist.github.com/didi-loiola/43fe2ceaf0d0ea90598ed584250ea5e0" target="_blank"><font color="#212121">AluraFlix</font></a></li>
    <li>🎬 <a href="https://gist.github.com/didi-loiola/e5f6e0d4c444521b00f7aa58dd124d2e" target="_blank"><font color="Orange">Crunchlura</font></a></li>
    <li>🏆 <a href="https://gist.github.com/didi-loiola/f6765822adbff95e6ff5096cb314ba09" target="_blank"><font color="#FFEB3B">Tabela de Classificação</font></a></li>
    <li>🃏 <a href="https://gist.github.com/didi-loiola/44592695d6455f53519a5a10dd78b76d" target="_blank"><font color="#795548">Supertrunfo</font></a></li>
    <li>🌐 <a href="https://gist.github.com/didi-loiola/6682690dc3aa370f34d31adfcc8231ee" target="_blank"><font color="Red">Certificard</font></a></li>
  </ol>
  <p>Redes Sociais:</p>
  <p><a href="https://www.linkedin.com/in/diego-loiola/">LinkedIn</a></p>
  <p><a href="https://github.com/didi-loiola">GitHub</a></p>
</div>
  </section>

style.css

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

body{
  background-color: #8BC34A;
  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: #009688;
  padding: 15px;
  border: 1px solid black;
  border-radius: 7px;
}

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

section h2{
  text-align: center;
}

ol{
  font-size: 22px;
}

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: gray;
  border: 1px solid orange;
  padding: 15px;
  border-radius: 7px;
}

.p{
  text-align: rigth;
}

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