Middle Section Icon Col-X +++

Kategori

<div class="container-fluid brans indexbrans">
    @{
        int card103Col = 12;
        int card103TotalRow = 1;
        int card103CategoryOrderNumber = 14;

        if (Partial.isCategoryOrderNumber(card103CategoryOrderNumber))
        {
            IEnumerable<Category>
                card103Category = Partial.CategorySubOrderNumber(card103CategoryOrderNumber, lang);
            int card103Count = Convert.ToInt32(Math.Ceiling(card103Category.Count() / Convert.ToDouble(card103Col)));
            <div class="container">
                @for (int componen = 0; componen < card103TotalRow; componen++)
                {
                    <div class="row">
                        @foreach (Category comCategory in card103Category.Skip(componen * card103Col).Take(card103Col))
                        {
                            <div class="center-tablet-portrait sent col-md-@(12 / card103Col)">
                                <div class="iconic">
                                    <a href="@Partial.CategoryLink(comCategory.CategoryID)" style="width:100%;">
                                        <div class="resimstandart5" style="background-image: url(@comCategory.CategoryImage);height:80px !important;    background-size: contain;">
                                        </div>
                                    </a>
                                    <div class="indexbasbeyaz">
                                        <div class="coverme tip-tablo">
                                            <a class="hucre hucre-ortala fancybox" href="@Partial.CategoryLink(comCategory.CategoryID)">
                                                <h5 style="margin: 10px 0px !important; font-size: 14px;">@comCategory.CategoryTitle.HtmlEncode()</h5>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        }
    }
</div>

Makale

<div class="container-fluid brans indexbrans">
    @{
        int card107Col = 2;
        int card107TotalRow = 1;
        int card107CategoryOrderNumber = 2;

        if (Partial.isCategoryOrderNumber(card107CategoryOrderNumber))
        {
            IEnumerable<Post>
            card107Posts = Partial.PostsOrderNumber(card107CategoryOrderNumber, 0, card107Col * card107TotalRow, Partial.Order.OrderBy, true, lang);
            int card107Count = Convert.ToInt32(Math.Ceiling(card107Posts.Count() / Convert.ToDouble(card107Col)));
            <div class="container">
                @for (int componen = 0; componen < card107Count; componen++)
                {
                    <div class="row">
                        @foreach (Post comPost in card107Posts.Skip(componen * card107Col).Take(card107Col))
                        {
                            <div class="center-tablet-portrait sent col-md-@(12 / card107Col)">
                                <div class="iconic">
                                    <a href="@Partial.PostLink(comPost.PostID)" style="width:100%">
                                        <div class="resimstandart5" style="background-image: url(@comPost.PostThumbnail);height:80px !important;     background-size: contain;">
                                        </div>
                                    </a>
                                    <div class="indexbasbeyaz">
                                        <div class="coverme tip-tablo">
                                            <a class="hucre hucre-ortala fancybox" href="@Partial.PostLink(comPost.PostID)">
                                                <h5 style="margin: 10px 0px !important; font-size: 14px;">@comPost.PostTitle.HtmlEncode()</h5>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        }
    }
</div>

CSS

.sent {
        padding: 8px;
    }

    .indexbrans .iconic .coverme h5 {
        font-family: 'Open Sans', sans-serif !important;
        font-weight: normal;
        text-transform: none;
    }

    .coverme h5 {
        font-size: 14px;
        text-transform: uppercase;
        font-family: "GothamKalin", sans-serif;
    }

    .coverme h5 {
        font-size: 17px;
        text-transform: uppercase;
    }

    .indexbrans .iconic .coverme {
        min-height: 50px;
        padding: 0px;
    }

    .coverme, .coverme2, .coverme3 {
        min-height: 40px;
        margin: 0 auto;
        padding: 0 10px;
    }

    .indexbrans .iconic {
        min-height: 100px !important;
    }

    .iconic {
        width: 100%;
        border: 5px solid #fff;
        background-color: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, .15);
        -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
        overflow: hidden;
        min-height: 230px;
    }

    .indexbrans {
        padding: 30px 0px;
        background-color: #d4d5dc;
    }

    .resimstandart5 {
        width: 100%;
        height: 200px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }

http://www.antalyaspor.com.tr/tr