Un código de cleanscript406

904 cleanscript406

Abrir en el editor Publica tu código

Recomendado

15 May 2025

Panel de administración de AdminHub

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

Un código de cleanscript406

Recomendado

Un código de Mete

Animación de botones sin CSS

Panel de administración de AdminHub

HTML

CSS

JS

Recomendado

Un código de Mete

Animación de botones sin CSS

Panel de administración de AdminHub

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS