TARJETA DE CONEXIÓN

1,005 THEOPHANE

Abrir en el editor Publica tu código

Recomendado

21 June 2024

Palanca dentada

23 May 2025

Inicio de sesión con tarjeta

28 November 2024

Control deslizante horizontal puro con menú deslizante

HTML

CSS

body{
    background: linear-gradient(25deg,#8360c3,#2ebf91);

}
.image{
    border-radius: 50%;
    width: 140px;
    height: 140px;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.2);
    margin-bottom: 15px;
    border: 4px solid #fff;

}
.lili{
    background: linear-gradient(25deg,#8360c3,#2ebf91);
       border: none;
    border-radius: 25px;
    padding: 30px 20px;
    margin: 40px auto;
    color: #fff;
    font-size: 20px;
    text-align: center;
    width: 350px;
    box-shadow: 0 8px 24px rgba(44, 62, 80, 0.2);
    transition: box-shadow 0.3s;
}
.i{   background: linear-gradient(90deg, #2ebf91, #8360c3);
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 12px 32px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.15);
    margin-top: 18px;
    transition: background 0.3s, transform 0.2s;

}
.po{
     background: linear-gradient(90deg, #8360c3, #2ebf91);
    transform: scale(1.08);
    color: #fff;
        font-weight: bold;
    color: #2ebf91;
    margin-bottom: 10px;
    font-size: 1.3em;
}
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* Ajout de l'animation à la classe .lili */
.lili {
    /* ...tes styles existants... */
    animation: slideUpFadeIn 1s ease;
}
@keyframes zoomRotateIn {
    from {
        opacity: 0;
        transform: scale(0.7) rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.lili {
    /* ...tes styles existants... */
    animation: zoomRotateIn 1s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.lili {
    /* ...tes styles existants... */
    animation: bounceIn 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}