midias-sociais-oficiais.html

HTML icon midias-sociais-oficiais.html — HTML, 2 KB (2290 bytes)

Conteúdo do arquivo

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Social Media Icons</title>
      <script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
  <style>
    body{
    background: #f1f1f1;
}

.social-menu ul{
    position: absolute;
    top: 1%;
    left: 0%;
    padding: 0;
    margin: 0;
    display: flex;
}

.social-menu ul li{
    list-style: none;
    margin: 0 15px;
}

.social-menu ul li .fab{
    font-size: 25px;
    line-height: 50px;
    transition: .3s;
    color: #000;
}

.social-menu ul li .fab:hover{
    color: #fff;
}

.social-menu ul li a{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    transition: .6s;
    box-shadow: 0 5px 4px rgba(0,0,0,.5);
}

.social-menu ul li a:hover{
    transform: translate(0, -10%);
}

.social-menu ul li:nth-child(1) a:hover{
    background-color: #0a46a1;
}
.social-menu ul li:nth-child(2) a:hover{
    background-color: #188efd;
}
.social-menu ul li:nth-child(3) a:hover{
    background-color: #9b00a0;
}
.social-menu ul li:nth-child(4) a:hover{
    background-color: #f70707;
}
.social-menu ul li:nth-child(5) a:hover{
    background-color: rgb(5, 189, 36);
}
  </style>
  </head>
  <body>
      <div class="social-menu">
          <ul>
              <li><a href="https://www.facebook.com/CamaraCubatao/" target="blank"><i class="fab fa-facebook"></i></i></a></li>              
              <li><a href="https://twitter.com/camaracubatao" target="blank"><i class="fab fa-twitter"></i></a></li>
              <li><a href="https://www.instagram.com/camaracubatao/" target="blank"><i class="fab fa-instagram"></i></a></li>
              <li><a href="https://www.youtube.com/c/TvC%C3%A2maraCubat%C3%A3o1/featured" target="blank"><i class="fab fa-youtube"></i></a></li>
              <li><a href="http://api.whatsapp.com/send?phone=551333621000&text=Ol%C3%A1%2C%20escreva%20sua%20mensagem%20com%20clareza%2C%20em%20breve%20retornaremos."><i class="fab fa-whatsapp" target="blank"></i></a></li>
          </ul>
      </div>
  </body>
  </html>