1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / econfoy / devam / Helper /
Filename : quick_contact.php
back
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contactez-nous</title>
    <!-- FontAwesome pour les icônes -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
    /* Style pour le bouton + */
    .toggle-button {
        position: fixed;
        right: 0;
        top: 10%;
        /*background-color: #007bff;*/
        color: white;
        padding: 10px;
        border-radius: 5%;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 50px;
        height: 50px;
        z-index: 1000;
        transition: background-color 0.3s;
        top: 60%;
        background: #1B1464;
    }

    /* Style global pour chaque icône */
    .contact-icon {
        position: fixed;
        right: 0;
        background-color: #007bff;
        color: white;
        padding: 10px;
        border-radius: 5%;
        font-size: 24px;
        transition: background-color 0.3s;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        z-index: 1000;
        /* Pour être au-dessus des autres éléments */
        display: none;
        /* Caché par défaut */
    }

    /* Espacement entre les icônes */
    .contact-icon.facebook {
        top: 20%;
        background: #1B1464;
    }

    .contact-icon.phone {
        top: 30%;
        background: #1B1464;
    }

    .contact-icon.email {
        top: 40%;
        background: #1B1464;
    }

    .contact-icon.whatsapp {
        top: 50%;
        background: #25D366;
    }


    /* Changer la couleur au survol */
    .contact-icon:hover,
    .toggle-button:hover {
        background-color: #0056b3;
    }
    </style>
</head>

<body>

    <!-- Bouton + -->
    <div class="toggle-button" onclick="toggleIcons()">
        <!--<i class="fas fa-plus"></i>-->
        <img width="50px" src="https://www.zellusmarketing.com/wp-content/uploads/2021/03/Marketing-Gif-2.gif" />
    </div>

    <!-- Icône Facebook -->
    <a href="https://www.facebook.com/profile.php?id=61571455636050" class="contact-icon facebook" target="_blank"
        title="Facebook">
        <i class="fab fa-facebook"></i>
    </a>

    <!-- Icône Téléphone -->
    <a href="tel:+21650114930" class="contact-icon phone" title="Téléphone">
        <i class="fas fa-phone"></i>
    </a>

    <!-- Icône Email -->
    <a href="mailto:cherif.amine.devam@gmail.com" class="contact-icon email" title="Email">
        <i class="fas fa-envelope"></i>
    </a>

    <!-- Icône WhatsApp -->
    <a href="https://wa.me/21650114930" class="contact-icon whatsapp" target="_blank" title="WhatsApp">
        <i class="fab fa-whatsapp"></i>
    </a>

    <script>
    function toggleIcons() {
        // Sélectionner toutes les icônes de contact
        const icons = document.querySelectorAll('.contact-icon');

        // Basculer l'affichage (afficher/masquer)
        icons.forEach(icon => {
            if (icon.style.display === 'none' || icon.style.display === '') {
                icon.style.display = 'flex';
            } else {
                icon.style.display = 'none';
            }
        });
    }
    </script>

</body>

</html>