Modèle HTML de cartes de liens pour les réseaux sociaux

1008 robustscript677

Ouvrir dans l'éditeur Video Publiez votre code

Modèle HTML de cartes de liens pour les réseaux sociaux

Recommandé

19 December 2025

Générateur de pièces gratuites Roblox - Réclamez-les maintenant !

2 March 2023

Effet de texte glissant

16 September 2025

Exemple d'animation de formes CSS

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);
}

Recommandé

Générateur de pièces gratuites Roblox - Réclamez-les maintenant !

Effet de texte glissant

Exemple d'animation de formes CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS