न्यूमॉर्फिक प्रोफ़ाइल कार्ड HTML CSS टेम्पलेट

342 alejandrokundrah

संपादक में खोलें अपना कोड प्रकाशित करें

न्यूमॉर्फिक प्रोफ़ाइल कार्ड HTML CSS टेम्पलेट

अनुशंसित

22 August 2025

CSS हार्ट एनीमेशन कोड स्निपेट

4 May 2025

उत्तरदायी HTML और CSS नेवबार टेम्पलेट

21 July 2025

ज्यामितीय पृष्ठभूमि वाला HTML लॉगिन फ़ॉर्म

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

अनुशंसित

CSS हार्ट एनीमेशन कोड स्निपेट

उत्तरदायी HTML और CSS नेवबार टेम्पलेट

ज्यामितीय पृष्ठभूमि वाला HTML लॉगिन फ़ॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS