fade-up

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Widget</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        /* تنسيق عناصر واجهة المستخدم */
        .social-media-container {
            /* تحديد موضع العناصر */
            position: fixed;
            right: 40px;
            bottom: 30px;
            display: flex;
            align-items: center;
        }
        .socialButton {
            /* تنسيق زر وسائل التواصل الاجتماعي */
            background: linear-gradient(to bottom right, #22c2b5, #14375B);
            color: #ffffff;
            font-size: 35px;
            width: 60px;
            height: 60px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 300ms ease;
        }
        .socialButton:hover,
        .socialButton:active {
            /* تغيير خلفية الزر عند تحويل الماوس فوقه */
            background: linear-gradient(to bottom right, #3888B0, #22c2b5);
        }

        /* تنسيق النبضة النقطية */
        .dot-pulse-container {
            position: fixed;
            right: 130px;
            bottom: 50px;
        }
        .dot-pulse {
            position: relative;
            left: -9999px;
            width: 10px;
            height: 10px;
            border-radius: 5px;
			background-color: #22c2b5;
            color: #3888B0;
            box-shadow: 9999px 0 0 -5px;
            animation: dot-pulse 1.5s infinite linear;
            animation-delay: 0.25s;
        }
        /* تنسيق النبضة القبلية */
        .dot-pulse::before {
            content: "";
            display: inline-block;
            position: absolute;
            top: 0;
            width: 10px;
            height: 10px;
            border-radius: 5px;
			background-color: #F1F4F1;
            color: #22c2b5;
            box-shadow: 9984px 0 0 -5px;
            animation: dot-pulse-before 1.5s infinite linear;
            animation-delay: 0s;
        }
        /* تنسيق النبضة اللاحقة */
        .dot-pulse::after {
            content: "";
            display: inline-block;
            position: absolute;
            top: 0;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #3888B0;
            color: #14375B;
            box-shadow: 10014px 0 0 -5px;
            animation: dot-pulse-after 1.5s infinite linear;
            animation-delay: 0.5s;
        }

        /* تحريك النبضة */
        @keyframes dot-pulse-before {
            0% {
                box-shadow: 9984px 0 0 -5px;
            }
            30% {
                box-shadow: 9984px 0 0 2px;
            }
            60%,
            100% {
                box-shadow: 9984px 0 0 -5px;
            }
        }
        @keyframes dot-pulse {
            0% {
                box-shadow: 9999px 0 0 -5px;
            }
            30% {
                box-shadow: 9999px 0 0 2px;
            }
            60%,
            100% {
                box-shadow: 9999px 0 0 -5px;
            }
        }
        @keyframes dot-pulse-after {
            0% {
                box-shadow: 10014px 0 0 -5px;
            }
            30% {
                box-shadow: 10014px 0 0 2px;
            }
            60%,
            100% {
                box-shadow: 10014px 0 0 -5px;
            }
        }
    </style>
</head>
<body>
    
    <div class="social-media-container">
        <a href="https://wa.me/+966559941717" target="_blank" class="socialButton" id="socialBtn">
            <i class="fa fa-whatsapp icon"></i> 
        </a>
    </div>
    
    <div class="dot-pulse-container">
        <div class="dot-pulse"></div> 
    </div>
</body>
</html>

الموقع تحت الصيانة 

<h3 style="text-align: center;"><span style="font-size: 30px; color: rgb(16, 24, 40);"><strong>سنعود قريباً</strong></span></h3>

<p style="text-align: center;"><span style="font-size: 20px; color: rgb(71, 84, 103);">عزيزنا الزائر، شكراً لزيارتك لنا ونأسف لتعطل موقعنا حالياً للقيام بالصيانة الضرورية.</span></p>