صناديق واردة الشكل الأول

إضافة جميلة لعرض مواضيع بشكل منسق ولطيف التصميم يحتوي فقط على أكواد سس لذلك لا داعي للقلق حول الثقل، تضم الإضافة أربعة صناديق بنفس الحجم مع بعض التعديلات تم إضافة ألوان متعددة تتناسق مع شكل الصورة، وكذلك حجم الصورة أياً كان فسيتناسب تلقائياً أترككم مع المعاينتان

• معاينة 1
 
• معاينة 2

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

1. توجه لتخطيط

2. أضف أداة HTML/JAVASCRIPT

3. ضع بها الكود التالي

<style>   
.befeature{height: 250px;overflow: hidden;width: 995px;padding: 0px 0px 0px 0px;  margin: 0 auto;}
.bebox:hover{margin-top: -180px;}
.bebox{float: right;height: 485px;margin: 0px 9px 0px 9px;margin-left: 0%;moz-transition: all .3s ease-in-out;ms-transition: all .3s ease-in-out;o-transition: all .3s ease-in-out;overflow: hidden;padding: 193px 0 0 0;transition: all .3s ease-in-out;webkit-transition: all .3s ease-in-out;width: 24%;}
.beupbox{height: 50px;margin: 0;overflow: hidden;padding: 5px 10px 0px 10px;width: 100%;}.beupbox h1{color: #fff;font-family: cursive,droid arabic kufi;font-size: 15px;font-weight: 400;margin: 0;padding: 0px 0px 0px 0px;width: 95%;text-shadow: 0 -1px 0 rgba(137, 137, 137, 0.25);}
.beupbox a{text-decoration: none;}
.bedownbox{height: 400px;margin: 0;padding: 5px 10px 0px 9px;width: 94%;}
.bedownbox p{color: #FDFDFD;font-family: cursive;font-size: 13px;font-weight: 400;  text-align: right;}
#bebox1{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox2{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox3{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox4{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
    </style>
    <div class='befeature'>
    <div class='bebox' id='bebox1'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox2'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox3'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox4'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div></div></div>

* رابط الصورة محددة باللون الأصفر 

* ألوان الصناديق محددة باللون الأخضر

* ضع بدل # رابط الموضوع

* العنوان / الوصف