Ein Code von cleanscript406

678 cleanscript406

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

29 November 2024

Ein Code von Metehan

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

Ein Code von cleanscript406

Empfohlen

Ein Code von efficientapp58

Ein Code durch Neumorphismus

Ein Code von Metehan

HTML

CSS

JS

Empfohlen

Ein Code von efficientapp58

Ein Code durch Neumorphismus

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS