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>

معلومات عنا

<h3><span style="color: rgb(12, 185, 171); font-size: 39px;"><strong>تعرف علينا اكثر ...</strong></span></h3>

<h2><span style="font-size: 36px; color: rgb(34, 194, 181);"><strong><span style="color: rgb(20, 55, 91);">حلول متعددة تخدم</span> أهدافك</strong></span></h2>

<p>نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة نبذة عن الشركة</p>

<p><span style="color: rgb(255, 255, 255);"><strong>لنعمل معًا</strong></span></p>

<p>تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية</p>

<p>تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية</p>

<p>تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية تفاصيل نصية</p>

تعرف علينا اكثر ...

حلول متعددة تخدم أهدافك

رؤيتنا

مهمتنا

لماذا نحن موجودون

فريقنا

اسم العضو

المسمى الوظيفي للعضو

اسم العضو

المسمى الوظيفي للعضو

اسم العضو

المسمى الوظيفي للعضو

اسم العضو

المسمى الوظيفي للعضو