Skin Newletter avec animation

LE URL du blog (Flux RSS) est le lien de votre blog que vous avez ajouter chez https://blogtrottr.com   pour que vos membres recoivent des alertes des nouveautes de votre blog  lorsqu'il s'abonneront chez vous. 

Une fois inscrit chez Blogttr votre blog Flux Rss  vous allez  copier le code qui ce trouve dans le Scroll et le mettre dans Mise en page// Html  Javascript. Ensuite remplacer dans le code URL du Blog  et mettre un fond si vous voulez. 

S'abonner

Rester à l'affût

=========== CODE crrer pour vous en  HTML Javascript ===============

<style>

    .silver-flex-center { 

        display: flex; 

        justify-content: center; 

        width: 100%; 

        padding: 20px 0; 

    }

    .silver-mauve-card {

        width: 260px;

        height: 260px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        background: linear-gradient(135deg, rgba(20, 20, 30, 0.95), rgba(42, 21, 73, 0.8)), 

                    url("URL DE L'IMAGE");

        background-size: cover; 

        background-position: center;

        border: 8px double #707070; 

        border-radius: 50%;

        padding: 20px;

        text-align: center; 

        box-shadow: 0 15px 45px rgba(0,0,0,0.9), inset 0 0 30px rgba(75, 0, 130, 0.6);

        /* Font */

        font-family: Verdana, Geneva, sans-serif;

        overflow: hidden;

    }

    .jumping-text {

        display: flex; 

        justify-content: center; 

        margin: 0 0 10px 0;

        /* Font*/

        font-family: 'Comic Sans MS', cursive, sans-serif; 

        font-size: 30px;

        color: #E6E6FA !important; 

        font-weight: bold;

        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

    }

    .jumping-text span { display: inline-block; animation: jump-crow 1.4s infinite ease-in-out; }

    @keyframes jump-crow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

    .jumping-text span:nth-child(odd) { animation-delay: 0.1s; }

    .jumping-text span:nth-child(even) { animation-delay: 0.4s; }

    .silver-mauve-card p { 

        font-size: 14px; 

        color: #C0C0C0 !important; 

        margin: 0 0 15px 0; 

        max-width: 80%;

        font-weight: bold;

    }

    .silver-mauve-card input[type='text'] {

        width: 180px; 

        padding: 10px; 

        border: 1.5px solid #4B0082; 

        border-radius: 12px;

        background: rgba(0, 0, 0, 0.5) !important; 

        color: #E6E6FA !important;

        margin-bottom: 12px; 

        box-sizing: border-box; 

        text-align: center; 

        font-family: Arial, sans-serif;

    }

    .magic-btn {

        width: 180px; 

        padding: 12px;

        background: linear-gradient(45deg, #2a1549, #4B0082) !important;

        color: #FFFFFF !important; 

        border: 1.5px solid #707070; 

        border-radius: 50px;

        font-family: Arial, sans-serif;

        font-size: 16px;

        font-weight: bold;

        cursor: pointer; 

        position: relative; 

        overflow: hidden;

        transition: 0.4s;

    }

    .magic-btn::before {

        content: '';

        position: absolute;

        top: 0;

        left: -150%;

        width: 50%;

        height: 100%;

        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);

        transform: skewX(-25deg);

        animation: neon-slide 3.5s infinite ease-in-out;

    }

    @keyframes neon-slide {

        0% { left: -150%; }

        30%, 100% { left: 150%; }

    }

    .magic-btn:hover { 

        background: #E6E6FA !important; 

        color: #2a1549 !important; 

        box-shadow: 0 0 25px #E6E6FA; 

        transform: scale(1.05); 

    }

</style>

<div class="silver-flex-center">

    <div class="silver-mauve-card">

        <h3 class="jumping-text">

            <span>S</span><span>'</span><span>a</span><span>b</span><span>o</span><span>n</span><span>n</span><span>e</span><span>r</span>

        </h3>

        <p>Rester à l'affût</p>

        <form action="https://blogtrottr.com" method="post" style="align-items: center; display: flex; flex-direction: column;">

            <input name="btr_email" placeholder="votre@email.com" required="" type="text" />

            <input name="btr_url" type="hidden" value="URL_DE_VOTRE_BLOG" />

            <button class="magic-btn" type="submit">Suivez-Moi</button>

        </form>

<!-- créé par Sorcière Corbeau en collaboration avec AI .->

    </div>

</div>