cleanscript406 द्वारा एक कोड

1478 cleanscript406

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

अनुशंसित

28 June 2025

ytr3d3 द्वारा एक कोड

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

cleanscript406 द्वारा एक कोड

अनुशंसित

मेटे का एक कोड

मेटेहन द्वारा एक कोड

ytr3d3 द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

मेटे का एक कोड

मेटेहन द्वारा एक कोड

ytr3d3 द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS