إضافة كارت تعريفي 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 كرره واضبطه على أى أيقونة تريد من المكتبة

ويمكنك طبعا حذف سطر ايقونة او اضافة سطر جديد