Webleb - Snippet di Codice -

Pubblica il Tuo Codice

Consigliato

28 August 2025

Modulo di registrazione di Matrix Login HTML CSS

5 October 2024

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

Consigliato

Modulo di registrazione di Matrix Login HTML CSS

Input HTML animato

Un codice di Metehan

index.html

styles.css

main.js

Consigliato

Modulo di registrazione di Matrix Login HTML CSS

Input HTML animato

Un codice di Metehan

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js