Iconos sociales con HTML

Publica tu código

Recomendado

21 July 2023

Estructura HTML del reproductor de iPod neumórfico

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Webleb</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link href="/css/styles.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
    integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <div class="card">
    <a href="https://www.instagram.com/webleb/" class="socialContainer containerOne" target="_blank">
      <i class="fa-brands fa-instagram socialIcon"></i>
    </a>
    <a href="https://discord.com/invite/SnM3Z8VJEA" class="socialContainer containerTwo" target="_blank">
      <i class="fa-brands fa-twitter socialIcon"></i>
    </a>
    <a href="https://discord.com/invite/SnM3Z8VJEA" class="socialContainer containerThree" target="_blank">
      <i class="fa-brands fa-discord socialIcon"></i>
    </a>
    <a href="https://discord.com/invite/SnM3Z8VJEA" class="socialContainer containerFour" target="_blank">
      <i class="fa-brands fa-whatsapp socialIcon"></i>
    </a>
  </div>
</body>
</html>

styles.css

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #0F2027;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.card {
  width: fit-content;
  height: fit-content;
  background-color: rgb(238, 238, 238);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 25px;
  border-radius: 15px;
  gap: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);
}

a{
  text-decoration: none!important;
}
.socialContainer {
  width: 52px;
  height: 52px;
  background: #0F2027;  /* fallback for old browsers */
  background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: .3s;
  border-radius: 15px;
}
.containerOne:hover {
  background-color: #d62976;
  transition-duration: .3s;
}
.containerTwo:hover {
  background-color: #00acee;
  transition-duration: .3s;
}
.containerThree:hover {
  background-color: #0072b1;
  transition-duration: .3s;
}
.containerFour:hover {
  background-color: #128C7E;
  transition-duration: .3s;
}
.socialContainer:active {
  transform: scale(0.9);
  transition-duration: .3s;
}
.socialIcon {
  color: white;
}
.socialContainer:hover .socialIcon {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

100% {
    transform: translateY(0);
    opacity: 1;
  }
}

Iconos sociales con HTML

Recomendado

Formulario con fondo de vídeo

Crossy Road con tres.js

Estructura HTML del reproductor de iPod neumórfico

index.html

styles.css

main.js

Recomendado

Formulario con fondo de vídeo

Crossy Road con tres.js

Estructura HTML del reproductor de iPod neumórfico

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js