مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

کاربر سایت

qazali

عضویت از 1395/05/06

کد html

  • پنجشنبه 8 مهر 1395
  • 10:22
تشکر میکنم

سلام

من این کد رو دارم

و میخوام مثل این عکس نمایش داده بشه

چه کدی باید اضافه کنم؟

 <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>




میخوام بدین صورت نمایش داده بشه

پاسخ های این پرسش

تعداد پاسخ ها : 3 پاسخ
کاربر سایت

سجاد باقرزاده

عضویت از 1392/02/24

  • پنجشنبه 8 مهر 1395
  • 10:34

کد css این قسمت را هم قرار دهید .

کاربر سایت

qazali

عضویت از 1395/05/06

  • پنجشنبه 8 مهر 1395
  • 10:51

این 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%;

 

کاربر سایت

سجاد باقرزاده

عضویت از 1392/02/24

  • پنجشنبه 8 مهر 1395
  • 11:15

کد 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 و تصاویر آن را شامل میشود.

فایل های ضمیمه

کاربرانی که از این پست تشکر کرده اند

هیچ کاربری تا کنون از این پست تشکر نکرده است

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید

با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)