Cartões HTML com links para redes sociais

83 adzxczdw312z

Abrir no Editor Video Publique Seu Código

Cartões HTML com links para redes sociais

Recomendado

10 December 2025

Demonstração de física ragdoll em HTML5: Playground do Matter.js

2 August 2025

Formulário de registro HTML animado

25 August 2025

Modelo HTML para site de filme

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <div id="cards">
      <div class="card">
        <div class="card-content">
          <i class="fa-brands fa-instagram"></i>
          <h2>Instagram</h2>

<p>Followers: <span>33K</span></p>

<a href="#">
            <i class="fa-solid fa-link"></i>
            <span>Follow me</span>
          </a>
        </div>
      </div>
      <div class="card">
        <div class="card-content">
          <i class="fa-brands fa-github"></i>
          <h2>GitHub</h2>

<p>Followers: <span>330</span></p>

<a href="#">
            <i class="fa-solid fa-link"></i>
            <span>Follow me</span>
          </a>
        </div>
      </div>
      <div class="card">
        <div class="card-content">
          <i class="fa-brands fa-linkedin"></i>
          <h2>Linkedin</h2>

<p>Followers: <span>550</span></p>

<a href="#">
            <i class="fa-solid fa-link"></i>
            <span>Follow me</span>
          </a>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  background-color: #060606;
  display: grid;
  place-items: center;
  color: white;
}

#cards {
  width: 100%;
  padding-inline: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.card {
  min-width: 200px;
  height: 350px;
  flex: 1 1 250px;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  position: relative;
}

#cards:hover > .card {
  background: radial-gradient(
    400px circle at var(--mouse-x) var(--mouse-y),
    hsl(var(--color) / 1),
    rgba(255, 255, 255, 0.12) 40%
  );
}

.card-content {
  position: absolute;
  inset: 1px;
  background-color: #131315;
  border-radius: inherit;
}

.card:nth-child(1) {
  --color: 348 80% 60%;
}
.card:nth-child(2) {
  --color: 0 0% 100%;
}
.card:nth-child(3) {
  --color: 220 100% 35%;
}

.card::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(
    500px circle at var(--mouse-x) var(--mouse-y),
    hsl(var(--color) / 0.35),
    transparent 40%
  );
  border-radius: inherit;
  opacity: 0;
  z-index: 2;
}

#cards:hover > .card::before {
  opacity: 1;
}

a {
  all: unset;
  cursor: pointer;
}

.card-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.card-content > i {
  font-size: 10rem;
  color: rgba(255, 255, 255, 0.5);
}

.card-content > p {
  color: rgba(255, 255, 255, 0.5);
}

.card-content > a {
  width: 90%;
  padding-block: 0.8rem;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;

display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 10;
}
.card-content > a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Recomendado

Demonstração de física ragdoll em HTML5: Playground do Matter.js

Formulário de registro HTML animado

Modelo HTML para site de filme

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS