Modèle HTML CSS de carte de profil Neumorphic

Ouvrir dans l'éditeur Publiez votre code

Recommandé

27 November 2024

Animation de notification de blob CSS

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

Modèle HTML CSS de carte de profil Neumorphic

Recommandé

Site Web de portfolio terminé

Tableau de bord interactif

Animation de notification de blob CSS

HTML

CSS

JS

Recommandé

Site Web de portfolio terminé

Tableau de bord interactif

Animation de notification de blob CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS