Cartes de liens vers les réseaux sociaux HTML

1,877 tinoriojunior

Ouvrir dans l'éditeur Publiez votre code

Cartes de liens vers les réseaux sociaux HTML

Recommandé

28 September 2025

Modèle HTML pour boutique de baskets en ligne

20 September 2025

Démo de feux d'artifice animés CSS Lucioles Tournesol

10 December 2025

Jeu de clic HTML avec renaissance, améliorations et JavaScript

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: 70%;
  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);
}