WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Profil d'information
1401
Andev.web
Ouvrir dans l'éditeur
Publiez votre code
21 September 2024
Ajouter un bouton pour ouvrir l'ajout de données de profil avec validation
28 October 2024
Conception de carte de profil
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