Certificado Alura (ImersãoDev Aula - 10)

certificado-alura-imersaodev-aula-10.markdown

Certificado Alura (ImersãoDev Aula - 10)

A Pen by Guilherme Giacomini Teixeira on CodePen.

License.

index.html

<section>
  <header>
    <img src="https://unavatar.now.sh/github/ggiacomini2012" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Coming+Soon&family=Fredoka+One&family=Syne+Mono&family=Yatra+One&display=swap" rel="stylesheet">
  </header>
  <h1>Guilherme Giacomini Teixeira (@guilhermegtgm)</h1>

  <div>
    <h2>Insígnias da Imersão.Dev</h2>
    <h5>✰ Clique no link para acessar o projeto:</h5>
    <ol>
      <li id='1'><a id='a0' style='' href="https://codepen.io/guilherme-giacomini-teixeira/full/zYNYEYQ"
target="_blank">💰Conversor de Moedas</a></li>
      <li id='2'><a id='a0'  href="https://codepen.io/guilherme-giacomini-teixeira/full/wvgBGzr"
target="_blank">🔢 Calculadora</a></li>
      <li id='3'><a id='a0'  href="https://codepen.io/guilherme-giacomini-teixeira/full/qBRdybZ"
target="_blank">🔮 Mentalista</a></li>
      <li id='4'><a id='a0'  href="https://codepen.io/guilherme-giacomini-teixeira/full/BapoLQE"
target="_blank">⭐ Pokemon</a></li>
      <li id='5'><a id='a0'  href="https://codepen.io/guilherme-giacomini-teixeira/full/PoWPMMM"
target="_blank">🎬 Aluraflix</a></li>
      <li id='6'><a id='a0'  href="https://codepen.io/guilherme-giacomini-teixeira/full/YzNqrrd"
target="_blank">🎬 Aluraflix Extra</a></li>
      <li id='7'><a id='a0'  href="https://codepen.io/guilherme-giacomini-teixeira/full/PoWGNqB"
target="_blank">🏆 Tabela de Classificação</a></li>
      <li id='8'><a id='a0'  href="https://codepen.io/guilherme-giacomini-teixeira/full/OJWpLYw"
target="_blank">🃏 Supertrunfo</a></li>
      <li id='9'><a id='a0'  href="https://codepen.io/guilherme-giacomini-teixeira/full/zYNoGGG"
target="_blank">🃏 Supertrunfo Extra</a></li>
      <li id='10'><a id='a0'  href="https://codepen.io/guilherme-giacomini-teixeira/details/MWJpZpo"
target="_blank">🌐 Certificard</a></li>
    </ol>
    <a class='a1' target="_blank" href="https://www.linkedin.com/in/guilherme-giacomini-teixeira-b19622b3/"
          ><img id='img2' src="https://image.flaticon.com/icons/png/512/174/174857.png" alt="LI"></a
        >
        <a class='a1' target="_blank" href="https://github.com/ggiacomini2012"
          ><img id='img3' src="https://image.flaticon.com/icons/png/512/25/25231.png" alt="Git"></a
        >
    <a class='a1' target="_blank" href="https://www.instagram.com/guilhermegtgm/"
          ><img id='img3' src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/768px-Instagram_icon.png" alt="Git"></a
        >
  </div>
  

</section>

style.css

body {
  background-image: url(https://i.pinimg.com/originals/f0/4d/6d/f04d6db0f2a3f6424031bc87412c213a.jpg);
  background-size: auto;
  /*   background-color: #3f51b5; */
  font-family: "Fredoka One", cursive;
}

section {
  /*   display: block; */
  max-width: 500px;
/*   min-height: 550px; */
  margin-top: 100px;
  background-color: whitesmoke;
  padding: 15px;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 50px 8px rgba(0, 0, 0, 0.56);
  box-shadow: 5px 5px 50px 8px rgba(0, 0, 0, 0.56);
/*     box-shadow: inset -16px -18px 50px 15px rgb(0 0 0 / 56%); */
}


section h1 {
  font-size: 20px;
}

h2 {
  margin: 10px 0px 0px 0px;
}

h5 {
  margin: 0px 0px 30px 0px;
}

header {
  background-image: url(https://media4.giphy.com/media/2ytRCunatOGfFLOMTe/source.gif);
  background-size: cover;
  height: 80px;
  border-radius: 5px;
}

div {
  padding: 15px;
  border: 1px solid black;
  background-color: #bac3d6;
  border-radius: 5px;
  min-height: 400px;
}

img {
  border-radius: 100%;
  width: 150px;
  height: 150;
  margin-left: auto;
  margin-right: auto;
  display: block;
  transform: translatey(-100px);
  border: 10px solid white;
  box-shadow: 4px 8px 6px 7px rgb(0 0 0 / 56%);

  /*   pelo que entendi da explicação: imagems 
  normalmente vem com o display inline
  o que faz com que ela ocupe toda uma linha.*/
}

a:link {
/*   display: block; */
  color:black;
  text-decoration:none;
  background-color: #67648638;
  border-radius: 15px;
/*   box-shadow: 1px 0px 1px 3px #000007; */
/*   opacity: 0.9; */
  transition: 0.7s;
  padding: 0px 10px;
  
}

a:visited {
  color:black;
  text-decoration:none;
}
a:hover {
  color:black;
  font-size: 1.1rem;
/*   transition-duration: 200sm; */
/*   opacity: 1; */
/*   text-decoration: underline wavy #2d4098; */
}
a:active {
  color:black;
  text-decoration:underline;
  background-color:#000000;
}

#img2, #img3{
  padding: 1px;
  width: 20px;
  height: 20px;
  padding: 0px 0px;
  margin: 0px;
  vertical-align:baseline;
  list-style:none;
  border: 0px solid white;
  background-color: none;
  border-radius: 100%;
/*   box-shadow: 0; */
  display: inline;
  transform: translatey(0px);
  box-shadow: 4px 6px 6px 1px rgb(0 0 0 / 56%);
  transition: 0.7s;
}

a.a1:link{
  /*   display: block; */
  color: transparent;
  text-decoration:none;
  background-color: #0000ff00;
  border-radius: 15px;
  box-shadow: 0px 0px 1px 0px #00000700;
/*   opacity: 0.9; */
  transition: 0.7s;
  padding: 0px 0px 0px 9px;
}

a.a1:hover{
  transform: scale(0);
}

#img3:hover{
  transform: scale(1.4);
}

#img2:hover{
  transform: scale(1.4);
}