الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> /* هنا قمنا بإزالة أي هامش خارجي أو داخلي قد يضيفه المتصفح للعناصر و كذلك قمنا بجعل الهوامش الحدود يتم حسابها كجزء من حجم العنصر */ * { margin: 0; padding: 0; box-sizing: border-box; } /* هذا الكلاس يجعل الأيقونات تظهر في الوسط و يضمن أن تظل بعيدة عن جوانب الصفحة من كل الجهات بمقدار 20 بكسل */ .web-links { text-align: center; padding: 20px; } /* يتبعد web-links موضوع في الكلاس <a> هنا جعلنا أي عنصر من اليسار و الأسفل بمقدار 5 بكسل حتى لا يظهروا بشكل متلاصق كذلك جعلنا المؤثرات التي سنضيفها عليهم تتنفذ خلال 0.3 ثانية */ .web-links a { text-decoration: none; margin-left: 5px; margin-bottom: 5px; display: inline-block; cursor: pointer; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } /* هنا جعلنا العنصر يدور دورة كاملة حول نفسه عند تمرير مؤشر الماوس فوقه و هذه العملية ستتنفذ خلال 0.3 ثانية */ .web-links a:hover { transform: rotate(360deg); } /* هنا جعلنا الأيقونات بيضاء و خلفيتها رمادية و تظهر بشكل دائري و كذلك حددنا طولها و عرضها بمقدار 38 بيكسل لتأخذ حجم مربع و من ثم جعلنا حدودها منحنية بنسبة 50% لتظهر بشكل دائري */ .web-links a i { background: #2f2f2f; height: 38px; line-height: 38px; width: 38px; border-radius: 50%; color: #fff; text-align: center; font-size: 17px; box-shadow: 0 0 1px #555 inset; } </style> </head> <body> <div class="web-links"> <a target="_blank" href="https://twitter.com/harmashcom"> <i class="fab fa-twitter"></i> </a> <a target="_blank" href="https://www.facebook.com/harmashcom"> <i class="fab fa-facebook-f"></i> </a> <a target="_blank" href="https://www.youtube.com/c/harmashcom"> <i class="fab fa-youtube"></i> </a> <a target="_blank" href="https://telegram.me/harmashcom"> <i class="fa-solid fa-paper-plane"></i> </a> </div> </body> </html>