jquery crée un magnifique message d'invite de couche contextuelle effect_jquery

  corps, html
        {
            hauteur : 100%;
            taille de police : 20 px ;
            famille de polices : Source Sans Pro ;
        >
        .b, .bb
        {
            position : absolue ;
            largeur : 100 % ;
            hauteur : 100%;
            arrière-plan : url("kje4L5j.jpg");
            pièce jointe d'arrière-plan : corrigé ;
            taille du fond : couverture ;
            position d'arrière-plan : centre ;
        >
        .bb
        {
            arrière-plan : url("bDBs0et.jpg");
            pièce jointe d'arrière-plan : corrigé ;
            taille du fond : couverture ;
            position d'arrière-plan : centre ;
            affichage : aucun ;
        >
        #allez
        {
            position : absolue ;
            haut : 30px ;
            gauche : 50%;
            transformer : traduire (-50 %, 0 %);
            couleur : blanc ;
            bordure : 0;
            arrière-plan : #71c341;
            largeur : 100 px ;
            hauteur : 30px ;
            rayon de bordure : 6 px ;
            taille de police : 1rem;
            transition : facilité d'arrière-plan 0,2 s ;
            contour : aucun ;
        >
        #go:survoler
        {
            arrière-plan : #8ecf68;
        >
        #go:actif
        {
            arrière-plan : #5a9f32;
        >
        .message
        {
            position : absolue ;
            haut : -200px ;
            gauche : 50%;
            transformer : traduire (-50 %, 0 %);
            largeur : 300 px ;
            fond : blanc ;
            rayon de bordure : 8 px ;
            remplissage : 30 px ;
            text-align: center;
            poids de la police : 300 ;
            couleur : #2c2928;
            opacité : 0 ;
            transition : top 0,3 s cube-bézier (0,31, 0,25, 0,5, 1,5), opacité 0,2 s, facilité d'entrée et de sortie ;
        >
        .message .check
        {
            position : absolue ;
            haut : 0 ;
            gauche : 50%;
            transformer : traduire (-50 %, -50 %) échelle (4);
            largeur : 120 px ;
            hauteur : 110px ;
            arrière-plan : #71c341;
            couleur : blanc ;
            taille de police : 3,8rem ;
            rembourrage supérieur : 10 px ;
            rayon de bordure : 50 % ;
            opacité : 0 ;
            transition : transformation 0,2s 0,25s cube-bézier (0,31, 0,25, 0,5, 1,5), opacité 0,1s 0,25s facilité d'entrée-sortie ;
        >
        .message .scaledown
        {
            transformer : traduire (-50 %, -50 %) échelle (1);
            opacité : 1 ;
        >
        .messagep
        {
            taille de police : 1.1rem ;
            marge : 25px 0px;
            remplissage : 0 ;
        >
        .message p:ntième-enfant(2)
        {
            taille de police : 2,3rem ;
            marge : 40px 0px 0px 0px ;
        >
        .message #ok
        {
            position : relative ;
            couleur : blanc ;
            bordure : 0;
            arrière-plan : #71c341;
            largeur : 100 % ;
            hauteur : 50px ;
            rayon de bordure : 6 px ;
            taille de police : 1,2rem ;
            transition : facilité d'arrière-plan 0,2 s ;
            contour : aucun ;
        >
        .message #ok:survol
        {
            arrière-plan : #8ecf68;
        >
        .message #ok:actif
        {
            arrière-plan : #5a9f32;
        >
        .viens
        {
            haut : 150 px ;
            opacité : 1 ;
        >