إضافة كارت تعريفي HTML - CSS
اضافة خفيفة إن أردت ان تضيف كارت تعريفي خاص بك في مدونتك
الإضافة لا تثقل المدونة بأى شئ ومتجاوبة ويمكن أن تعمل بشكل أفقي أو رأسي
كود الإضافة يمكنك ان تضيفه في آداة HTML/JavaScript أو في موضوع او صفحة
أو يمكنك أن تجعله أسفل جميع المواضيع مثلاً اطلع على هذا المقال لتلك النقطة من هنـــا
كود الإضافة
<style>
#mycard{position:relative;background-color:#f8f8f8;padding:15px;display:flex;gap:15px;margin:10px auto;width:fit-content;border-radius:2px;border:2px solid #456fab;}
#mycard img{width:200px!important;height:200px!important;}
#mycard strong{font-size:120%;}
#mycard ul{margin:0;padding:0;list-style:none;display:flex;gap:5px;}
#mycard li{padding:0;margin:0;list-style:none;}
#mycard li a{width:30px;height:30px;line-height:30px;display:block;text-decoration:none;text-align:center;color:#fff;border-radius:2px;transition:all .4s ease;overflow:hidden;}
#mycard li .fa-facebook {background-color:#38529A}
#mycard li .fa-twitter {background-color:#4DA6E9}
#mycard li .fa-youtube-play {background-color:#F70000}
#mycard li .fa-instagram {background-color:#8D4AC2}
#mycard li a:hover {background-color:#000;}
@media screen and (max-width : 600px) {
#mycard {flex-direction:column}
#mycard img {width: 100% !important;height: auto !important;max-width: 300px !important; margin: 0 auto;}
.carinfo {text-align: center;}
#mycard ul {justify-content: center;}
}
</style>
<div id="mycard">
<img alt="عمرو مصطفى" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcaXR1NUUzIDMB8qw_PZ7e9lCHSqRSl4aOVHzrf1A3HCqiJ19Q4EHPdM3utuChIOgyk3yDV_idsotwmQnlpNrm9zbZ2n-lQZyuBuCisCQVST9ZX9WJRwrgHlXK_JoUVcatUfCsi1B_guNMaklz9xrOl1u3aXbYsq53i6gNGO-4jJzNI45AgnRutYQFPw/s1600/amr-mustafa.jpg" />
<div class="carinfo">
<strong>عمرو مصطفى</strong>
<p>مدون وصانع محتوى , أعمل في تطوير منصة بلوجر من عام 2013 عبر مدونتي كن مدون</p>
<ul>
<li><a aria-label="Social Media" class="fa fa-facebook" href="#" target="_blank"></a></li>
<li><a aria-label="Social Media" class="fa fa-twitter" href="#" target="_blank"></a></li>
<li><a aria-label="Social Media" class="fa fa-youtube-play" href="#" target="_blank"><i></i></a></li>
<li><a aria-label="Social Media" class="fa fa-instagram" href="#" target="_blank"></a></li>
</ul>
</div>
</div>
ان أردت الإضافة أن تكون بشكل رأسي قم بإزالة الجزئين المعلمين بالأحمر
عدل الاسم والوصف بإسمك والوصف المناسب لك
باللون الاخضر هو لون الحدود الخارجية
الجزء الأزرق خاص بالأيقونات سنشرحه تالياً
بالنسبة للمواقع الإجتماعية كل سطر يعبر عن موقع اجتماعي هذا شرح تفصيلي لسطر
<li><a aria-label="Social Media" class="fa fa-facebook" href="#"></a></li>
بالأزرق هو معرف الأيقونة يمكنك الحصول على معرفات أيقونات إضافية من هنـــا
رمز # عدله بالرابط المراد فتحه عند الضغط على الزر
هناك في كل معرف fa كجزء منفصل ثم اسم المعرف نحن نستخدم الإسم وليس fa لعمل لون الأيقونة
ستجد في الكود الأزرق في الكود الأول كيف تم تطبيق اللون على أيقونة facebook كرره واضبطه على أى أيقونة تريد من المكتبة
ويمكنك طبعا حذف سطر ايقونة او اضافة سطر جديد
بارك الله فيك استاذنا الغالي
ردحذفدوما قوة وروعة والمميز ♥
شرح 100 % صحيح رووعة
ردحذفأخي منير جزيل الشكر لك على استمرارك في دعم ما نقدمه , نقدر لك كثيراً هذا يا غالي , ودي وتقديري
حذفشكرا على السرح مبدع دائما
ردحذفحبيبي الله يحفظك تسلم يا طيب
حذف