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>

الصفحة الرئيسية

<h2><span style="color: rgb(15, 187, 153);"><strong><span style="font-size: 36px;">مشروع حولها ...</span></strong></span></h2>

<p><strong>معلومات عنا</strong></p>

<p style="text-align: justify;">تتمثل رؤيتنا في تعزيز الوعي بأهمية الحفاظ على البيئة والاستفادة من مواردنا المستعملة قبل تعرضها للإتلاف ، والمساهمة في تغيير السلوكيات الاستهلاكية للأفراد وتشجيعهم على اعادة التفكير في كيفية التخلص السليم من ملابسهم المستعملة ، من خلال توفير خدمة مرنة وسهلة للعملاء لبيع ملابسهم المستعملة والحصول على مقابل مالي . بالإضافة إلى ذلك، نحن نقدم خيار التبرع بقيمة الملابس المباعة لصالح الجمعيات الخيرية المتعاقدة مع مشروعنا.</p>
<p>&nbsp;</p>

<p><span style="background-color: rgb(52, 73, 94); color: rgb(255, 255, 255);"><strong><span style="font-size: 18px; background-color: rgb(52, 73, 94);">نسعى من خلال شعارنا الى ترسيخ مفهوم الاستفادة للجميع فمهما كانت غايتك ستكون احد المنتفعين . </span></strong></span></p>

<h2><strong><span style="color: rgb(255, 255, 255); font-size: 36px;">حولها لمنفعة ..</span></strong></h2>

حَولّها لمنفعة :)

مشروع حولها ...

ماذا يمكنك بيعه أو التبرع به

الملابس

كافة انواع الملابس

الحقائب

الحقائب اليدوية والزينة بأنوعها

الأحذية

الاحذية بأنواعها

المنسوجات

مثل البطانيات والستائر واللحافات

حولها لمنفعة ..

كيف نحولها...

شركائنا

ماذا يقول عملاؤنا

كريس

مدير فني / بوميرانج

تشارلي ميندوزا

الشريك المؤسس / Beeply

سلمى

الرئيس التنفيذي / Newzify