جدول لعرض مواصفات الموبايل بلغة الماتريال V1

Shdow Tech

01 مارس 2021

جدول لعرض مواصفات الموبايل بلغة الماتريال V1

بعد غياب فترة طويلة عن التدوين ونشر المواضيع الحصرية ,لقد رجعنا من جديد وبقوة وفي هذه التدوينة او المقالة نستعرض موضوع حصري جديد وهو عن جدول لعرض مواصفات الموبايل كما تعلمون اننا من قبل نشرنا جدول ولكن اليوم جدول جديد وحصري وافضل من اي جدول مر عليكم وهو بلغة الماتريال الاصدار الاول .

مميزات الجدول :

متجاوب مع جميع الشاشات وهذه المشكلة الرئيسية التي تواجة معظم المتابعين .
تستطيع تغيير الالوان والايقونات كما تشاء .
يتم وضع الايقونات تلقائي؟ سوف تقول كيف هذا هل تقصد انني لا احتاج اكواد لاضافتها في كل.
تدوينة اقوم بعملها . الاجابة نعم كما اخبرتك انني انشر كل ما هو حصري وهدفي الوحيد ان اساعد المتابعين واسهل علليهم كل شيء .
تستطيع اضافة عدد لا نهائي من الايقونات .
والمزييييييييد.

طريقة التركيب وهي ابسط من البساطة سوف اشرحها لك في فيديو و بي الكتابة ولكن انصحك بي الفيديو لانني قمت بشرح كل شيء بتفصيل.

قم بدخول الي المظهر ثم تعديل HTML وقم بوضع الكود اسفل <head>

<link href='https://pro.fontawesome.com/releases/v5.13.0/css/all.css' rel='stylesheet'/>

قم بدخول الي المظهر ثم تعديل HTML وقم بوضع الكود فوق ]]></b:skin>


.post-body ul {all: revert;}
.post-body ul li {
all: unset;
list-style: none;
background: #614124;/*background text*/
padding: 2px 20px 2px 0px;
margin: 16px 4px;
border-radius: 6px;
display: block;
position: relative;
color: #fff;/*color text*/
}

.post-body ul li:before {
content: "\f6ad";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 free", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Light", "Font Awesome 5 Duotone", "Font Awesome 5 Brands";
    background: #de822c;/*background icon*/
    padding: 5px 7px;
    border-radius: 8px;
    margin: 0px 0 0 5px;
    position: absolute;
    right: -20px;
    top: -12%;
    font-size: 20px;
    color: #fff;/*color icon*/
-webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.post-body ul li:hover:before{transform: scale(1.2);}

/*The Icon*/
.post-body ul li:nth-child(1):before{content: "\f10b";}/*Name*/
.post-body ul li:nth-child(2):before{content: "\f030";}/*camera*/
.post-body ul li:nth-child(3):before{content: "\f241";}/*battery*/
.post-body ul li:nth-child(4):before{content: "\f085";}/*gears*/
.post-body ul li:nth-child(5):before{content: "\f26c";}/*display*/
.post-body ul li:nth-child(6):before{content: "\f2db";}/*Cpu*/
.post-body ul li:nth-child(7):before{content: "\f7c2";}/*sd-card*/
.post-body ul li:nth-child(8):before{content: "\f155";}/*$*/
.post-body ul li:nth-child(9):before{content: "\f1c0";}/*storage*/
.post-body ul li:nth-child(10):before{content: "\f538";}/*memory*/
.post-body ul li:nth-child(11):before{content: "\f778";}/*memory*/