Exercicio 1 - Curso Sara

Linktree

by Danilo Metzker

HTML

<img src="https://picsum.photos/80/80" alt="Imagem">
<h1>Danilo Metzker</h1>

<div class="description">
  <p>Maecenas lobortis laoreet nibh vestibulum mollis. Etiam in lectus sem. Suspendisse egestas enim in consequat tempus. Vestibulum commodo blandit nulla non interdum.</p>
</div>

<h2>Meus links</h2>

<ul>
  <li><a href="#" class="instagram">Instagram</a></li>
  <li><a href="#" class="github">GitHub</a></li>
  <li><a href="#" class="linkedin">Linkedin</a></li>
</ul>

CSS

body{
  text-align: center;
  font-family: sans-serif;
}

img{
  border-radius: 100px;
}

h1{
  padding: 16px;
}

.description{
  margin: 16px auto;
  max-width: 300px;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 8px;
  border-radius: 8px;
  font-size: 14px;
}

ul{
 max-width: 300px;
 margin: 0 auto;
 padding: 0;
 text-align: left;
 list-style: none;
}

ul li a{
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 10px;
  display: block;
  font-weight: bold;
  text-decoration: none;
  
  color: #fff;
}

ul li a.instagram{
  background-image: linear-gradient(45deg, #405DE6, #C13584, #FCAF45);
}

ul li a.github{
  background-color: #0D1117;
}

ul li a.linkedin{
  background-color: #0B65C3;
}