WEBLEB
Inicio
Editora de código
Chat comunidad
Iniciar sesión
Pro
Español
English
Français
Español
Perfil de información
2,932
Andev.web
0
Remix
Abrir en el editor
Pantalla completa
Comentar
Publica tu código
2
Recomendado
2 May 2026
Interfaz de usuario HTML para la barra de herramientas de paleta de colores
14 September 2024
Animación de línea de frecuencia cardíaca
28 May 2026
Plantilla HTML de juegos desbloqueados con soporte para pantalla completa.
HTML
Copy
Andev Web
CSS
Copy
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #212121; font-family: 'Poppins', sans-serif; } /*Andev Web*/ .card { width: 280px; height: 280px; background: white; border-radius: 32px; padding: 3px; position: relative; box-shadow: #604b4a30 0px 70px 30px -50px; transition: all 0.5s ease-in-out; } .card .mail { position: absolute; right: 2rem; top: 1.4rem; background: transparent; border: none; } .card .mail svg { stroke: #fbb9b6; stroke-width: 3px; } .card .mail svg:hover { stroke: #f55d56; } .card .profile-pic { position: absolute; width: calc(100% - 6px); height: calc(100% - 6px); top: 3px; left: 3px; border-radius: 29px; z-index: 1; border: 0px solid #fbb9b6; overflow: hidden; transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s; } .card .profile-pic img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; -o-object-position: 0px 0px; object-position: 0px 0px; transition: all 0.5s ease-in-out 0s; } .card .profile-pic svg { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 0px 0px; object-position: 0px 0px; transform-origin: 45% 20%; transition: all 0.5s ease-in-out 0s; } .card .bottom { position: absolute; bottom: 3px; left: 3px; right: 3px; background: #fbb9b6; top: 80%; border-radius: 29px; z-index: 2; box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px inset; overflow: hidden; transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .card .bottom .content { position: absolute; bottom: 0; left: 1.5rem; right: 1.5rem; height: 160px; } .card .bottom .content .name { display: block; font-size: 1.2rem; color: white; font-weight: bold; } .card .bottom .content .about-me { display: block; font-size: 0.9rem; color: white; margin-top: 1rem; } .card .bottom .bottom-bottom { position: absolute; bottom: 1rem; left: 1.5rem; right: 1.5rem; display: flex; align-items: center; justify-content: space-between; } .card .bottom .bottom-bottom .social-links-container { display: flex; gap: 1rem; } .card .bottom .bottom-bottom .social-links-container svg { height: 20px; fill: white; filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333)); } .card .bottom .bottom-bottom .social-links-container svg:hover { fill: #f55d56; transform: scale(1.2); } .card .bottom .bottom-bottom .button { background: white; color: #fbb9b6; border: none; border-radius: 20px; font-size: 0.6rem; padding: 0.4rem 0.6rem; box-shadow: rgba(165, 132, 130, 0.1333333333) 0px 5px 5px 0px; } .card .bottom .bottom-bottom .button:hover { background: #f55d56; color: white; } .card:hover { border-top-left-radius: 55px; } .card:hover .bottom { top: 20%; border-radius: 80px 29px 29px 29px; transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s; } .card:hover .profile-pic { width: 100px; height: 100px; aspect-ratio: 1; top: 10px; left: 10px; border-radius: 50%; z-index: 3; border: 7px solid #fbb9b6; box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px; transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s; } .card:hover .profile-pic:hover { transform: scale(1.3); border-radius: 0px; } .card:hover .profile-pic img { transform: scale(2.5); -o-object-position: 0px 25px; object-position: 0px 25px; transition: all 0.5s ease-in-out 0.5s; } .card:hover .profile-pic svg { transform: scale(2.5); transition: all 0.5s ease-in-out 0.5s; }
JS
Copy