Un codice di cleanscript406

1471 cleanscript406

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

26 May 2025

Animazione di caricamento CSS Struttura HTML

8 May 2025

lanciare un razzo

HTML

CSS

/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #222727;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card-container {
  perspective: 1000px; /* For a subtle 3D effect on hover */
}

.card {
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: black;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s;
}

.card:hover {
  transform: rotateY(10deg);
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: 30px; /* Half outside the card */
  border: 5px solid #303537; /* Creates a nice border effect */
}

.info {
  text-align: center;
  padding: 20px;
}

h1 {
  color: white;
  margin: 10px 0;
}

p {
  color: #ffffff;
  font-size: 0.9em;
}

.social-icons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.social-icons img {
  width: 24px;
  height: 24px;
  margin: 0 10px;
}

.social-icons a {
  transition: transform 0.3s;
}

.social-icons a:hover {
  transform: scale(1.2);
}

Un codice di cleanscript406

Consigliato

Un codice di mironovbogdan341

Animazione di caricamento CSS Struttura HTML

lanciare un razzo

HTML

CSS

JS

Consigliato

Un codice di mironovbogdan341

Animazione di caricamento CSS Struttura HTML

lanciare un razzo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS