Modello HTML CSS per scheda profilo neumorfica

1015 alejandrokundrah

Apri nell'Editor Video Pubblica il Tuo Codice

Modello HTML CSS per scheda profilo neumorfica

Consigliato

11 August 2025

Raccolta di animazioni circolari CSS

18 December 2025

Gioco HTML5 Canvas: "Basta premere il pulsante"

12 December 2024

Slider di immagini per Blogspot CSS3

HTML

CSS

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

.profile-card {
  width: 300px;
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: 20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.profile-card:hover {
  box-shadow: 10px 10px 30px #bebebe,
             -10px -10px 30px #ffffff;
}

.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto 20px;
  overflow: hidden;
  box-shadow: inset 5px 5px 10px #bebebe,
              inset -5px -5px 10px #ffffff;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info h2 {
  margin: 10px 0;
  color: #333;
}

.profile-info p {
  color: #666;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.social-link {
  text-decoration: none;
  color: #333;
  padding: 8px 15px;
  border-radius: 20px;
  background: #e0e0e0;
  box-shadow: 5px 5px 10px #bebebe,
             -5px -5px 10px #ffffff;
  transition: all 0.3s ease;
}

.social-link:hover {
  box-shadow: inset 5px 5px 10px #bebebe,
              inset -5px -5px 10px #ffffff;
}

#contact-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  background: #e0e0e0;
  color: #333;
  box-shadow: 5px 5px 10px #bebebe,
             -5px -5px 10px #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

#contact-btn:hover {
  box-shadow: inset 5px 5px 10px #bebebe,
              inset -5px -5px 10px #ffffff;
}

Consigliato

Raccolta di animazioni circolari CSS

Gioco HTML5 Canvas: "Basta premere il pulsante"

Slider di immagini per Blogspot CSS3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS