Webleb - Snippet di Codice - Schede di collegamento ai social media HTML

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

Schede di collegamento ai social media HTML

Consigliato

Accedi da TheDOC

Incorporamento del gioco HTML5 Friday Night Funkin'

Un codice di ytr3d3

HTML

CSS

JS

Consigliato

Accedi da TheDOC

Incorporamento del gioco HTML5 Friday Night Funkin'

Un codice di ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS