سلام
من این کد رو دارم
و میخوام مثل این عکس نمایش داده بشه
چه کدی باید اضافه کنم؟
<li>
<div class="banner-info1-grid" style="margin-left:10px">
<a href="#" rel="lightbox[portfolio]">
<img src="~/sliderblog/images/logo.png" alt="لوگو" title="لوگو" class="img-responsive" />
</a>
<h3>
طراحی لوگو
</h3>
<p>طراحی لوگو ( نماد ) شرکت و برند شما با ارائه بهترین طرح های خلاقانه و استاندارد جهت استفاده در برندسازی و تبلیغات</p>
</div>
</li>
<li>
<div class="banner-info1-grid">
<a href="#" rel="lightbox[portfolio]">
<img src="~/sliderblog/images/card-visit.png" alt="کارت ویزیت" title="کارت ویزیت" class="img-responsive" />
</a>
<h3>
طراحی کارت ویزیت
</h3>
<p>طراحی انواع کارت ویزیت با گرافیک بسیار حرفه ای و خیره کننده در طرح های نوین با رعایت کامل استاندارهای صنعت چاپ</p>
</div>
</li>
<li>
<div class="banner-info1-grid">
<a href="#" rel="lightbox[portfolio]">
<img src="~/sliderblog/images/support.png" alt=" مشاوره رایگان" title=" مشاوره رایگان" class="img-responsive" />
</a>
<h3>
مشاوره رایگان
</h3>
<p>ارائه خدمات مشاوره به صورت رایگان در موضوعات طراحی، تبلیغات و بازاریابی اینترنتی جهت افزایش بازدهی و فروش محصولات و خدمات شما</p>
</div>
</li>
میخوام بدین صورت نمایش داده بشه
کد css این قسمت را هم قرار دهید .
این css رو دارم فقط
.banner-info1-grid {
text-align: center;
}
.banner-info1-grid img {
border: 2px solid #fff;
border-radius: 100%;
margin: 0 auto;
}
.banner-info1-grid h3 {
font-size: 2em;
color: #F88928;
margin: 1em 0 .5em;
text-transform: capitalize;
}
.banner-info1-grid p {
font-size: 14px;
color: #000;
line-height: 1.8em;
margin: 0 auto;
width: 80%;
کد css خودتون رو به شکل زیر تغییر دهید :
body {
direction: rtl;
}
ul.box li {
display: inline-table;
border-left: 1px solid #eee;
width: 32%;
}
ul.box li:last-child {
border-left: none;
}
ul.box li img.img-responsive {
width: 50%;
height: auto;
}
.banner-info1-grid {
text-align: center;
}
.banner-info1-grid img {
border: 2px solid #eee;
border-radius: 100%;
margin: 0 auto;
}
.banner-info1-grid h3 {
font-size: 2em;
color: #F88928;
margin: 1em 0 .5em;
text-transform: capitalize;
}
.banner-info1-grid p {
font-size: 14px;
color: #000;
line-height: 1.8em;
margin: 0 auto;
width: 80%;
}
فایل ضمیمه شده به صورت کامل صفحه html به همراه css و تصاویر آن را شامل میشود.
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)