كل ما يخص البث المباشر جلب ملفات البث و تشغيلة علي الموقع

جدول موبيزل لعرض مواصفات الموبايل لموقعك

مرحبا بكم في مقالة جديدة وهي (عن جدول موبيزل لعرض مواصفات الموبايل لموقعك),وفي الفترات القليلة الماضية ظهرت مواقع كثيرة لعرض الموبايلات التى من دور المواقع عند نزول موبايل جديد في الاسواق تأخذه وتقوم بعمل له مراجعة من شتى الجوانب من مميزات وعيوب والاسعار في مختلف البلدان ومختلف المتاجر الالكترونية وبعض الاشياء الاخرا.

ما هو موبيزل ؟

موبيزل هو موقع يعد من افضل المواقع العربية لعرض الموبايلات والمراجعات له ,لانة يضم الكثير من انواع الموبايلات المختلفة من مختلف الشركات . 

ما هو الجدول 

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

طريقة التركيب

• تتوجة الى المظهر ثم تعديل  HTML ثم تقوم بوضع الاكواد فوق /b:skin .

ul.shdowtech_mobizil {
    width: 100%;
    margin: 0 auto;
}
ul.shdowtech_mobizil li {
    height: 50px;
    margin-bottom: 10px;
    position: relative;
    color: #fff;
    line-height: 3;
    font-weight: 700;
    list-style: none;
    background: #155a9c;
}

ul.shdowtech_mobizil li span:nth-child(1){

    float: right;
    height: 50px;
    display: inline-block;
    background: #cc0000;
    width: 50px;
    margin: 0 0 0 0;
    position: relative;
    z-index: 10;
    text-align: center;
}
ul.shdowtech_mobizil li span:nth-child(1) i{font-size: 20px;}
ul.shdowtech_mobizil li span:nth-child(2){
    float: right;
    display: block;
    height: 100%;
    text-align: right;
    padding: 2px 8px;
    max-width: 100%;
    position: relative;
    z-index: 10;
}
ul.shdowtech_mobizil li::after{
    position: absolute;
    top: 0;
    right: 0;
    background: #02a8de;
    height: 100%;
    width: 0;
    content: "";
   transition: all 2s ease;

}

ul.shdowtech_mobizil li i{
font-family:'Font Awesome 5 Pro!important';
}

ul.shdowtech_mobizil li:hover::after{width:100%}
@media screen and (max-width:550px){
ul.shdowtech_mobizil li span:nth-child(1) {height: 35px; width: 35px;}
ul.shdowtech_mobizil li {height: 35px;}
ul.shdowtech_mobizil li span:nth-child(2) {font-size: 10px;}
}

• تتوجة الى المظهر ثم تعديل  HTML ثم تقوم بوضع الاكواد اسفل b:skin .

@import url("https://pro.fontawesome.com/releases/v5.13.0/css/all.css");

• ثم عندمات تريد وضع الجدول فى موضوع على موقعك ما عليك هو ان تضيف الاكود في المكان الذي تريدة.

<ul class="shdowtech_mobizil">
<li><span><i class="fas fa-microchip"></i></span><span><strong>المعالج: </strong>ثماني النواة Snapdragon 665 تكنولوجيا 11 نانو</span></li>
<li><span><i class="fas fa-memory"></i></span><span><strong>التخزين / الرام: </strong> 128 جيجا مع 8 جيجا رام</span></li>
<li><span><i class="fas fa-camera"></i></span><span><strong>الكاميرا: </strong> خلفية رباعية 48+8+2+2 م.ب. / امامية 16 م.ب.</span></li>
<li><span><i class="fal fa-desktop"></i></span><span><strong>الشاشة: </strong>ثماني النواة Snapdragon 665 تكنولوجيا 11 نانو</span></li>
<li><span><i class="fas fa-cogs"></i></span><span><strong>نظام التشغيل: </strong>اندرويد 10.0</span></li>
<li><span><i class="fas fa-battery-three-quarters"></i></span><span><strong>البطارية: </strong>5000 مللي أمبير</span></li>
<li><span><i class="fas fa-usd-circle"></i></span><span><strong>السعر: </strong>5000$</span></li>
    </ul>

ثم قم بالتعديل على ما تريدة

شرح فيديو

fontawesome