Section Bg-Image and Col-3 Box +++

Kategori

@{
    int card87Col = 3;
    int card87Row = 1;
    int card87CategoryOrderNumber = 14;

    if (Partial.isCategoryOrderNumber(card87CategoryOrderNumber))
    {
        IEnumerable<Category>
            card87Category = Partial.CategorySubOrderNumber(card87CategoryOrderNumber, lang);
        Category card87categorytitle = Partial.Category(card87CategoryOrderNumber, lang);
        int card87Count = Convert.ToInt32(Math.Ceiling(card87Category.Count() / Convert.ToDouble(card87Col)));
        <section class="sect charlie" style="background-image: url(@card87categorytitle.CategoryThumbnail);">
            <div class="table-cell-align">
                <div class="container pbox">
                    @for (int componen = 0; componen < card87Row; componen++)
                    {
                        <div class="row">
                            @foreach (Category comCategory in card87Category.Skip(componen * card87Row).Take(card87Col))
                            {
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center plusbox">
                                    <div class="plusboxholder animated fadeInUp">
                                        <div class="text-content">
                                            <h5><a href="@Partial.CategoryLink(comCategory.CategoryID)"> @comCategory.CategoryTitle.HtmlEncode() </a></h5>
                                            <div class="plus-border"></div>
                                            <div class="katozet">
                                                <p>@Partial.CategoryShortContent(comCategory.CategoryID, 140)</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="read-more" href="@Partial.CategoryLink(comCategory.CategoryID)">@Partial.Translate("Devami", lang)</a>
                                </div>
                            }
                        </div>
                    }
                </div>
            </div>
        </section>
    }
}

Makale

@{
    int card85Col = 3;
    int card85Row = 1;
    int card85CategoryOrderNumber = 3;

    if (Partial.isCategoryOrderNumber(card85CategoryOrderNumber))
    {
        IEnumerable<Post>
        card85Posts = Partial.PostsOrderNumber(card85CategoryOrderNumber, 0, card85Col * card85Row, Partial.Order.OrderBy, true, lang);

        Category card85PostCategory = Partial.Category(card85CategoryOrderNumber, lang);
        int card85Count = Convert.ToInt32(Math.Ceiling(card85Posts.Count() / Convert.ToDouble(card85Col)));
        <section class="sect charlie" style="background-image: url(@card85PostCategory.CategoryThumbnail);">
            <div class="table-cell-align">
                <div class="container pbox">
                    @for (int componen = 0; componen < card85Row; componen++)
                    {
                        <div class="row">
                            @foreach (Post comPost in card85Posts.Skip(componen * card85Col).Take(card85Col))
                            {
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center plusbox">
                                    <div class="plusboxholder animated fadeInUp">
                                        <div class="text-content">
                                            <h5><a href="@Partial.PostLink(comPost.PostID)"> @comPost.PostTitle.HtmlEncode() </a></h5>
                                            <div class="plus-border"></div>
                                            <div class="katozet">
                                                <p>@Partial.PostShortContent(comPost.PostID, 140)</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="read-more" href="@Partial.PostLink(comPost.PostID)">@Partial.Translate("Devami", lang)</a>
                                </div>
                            }
                        </div>
                    }
                </div>
            </div>
        </section>
    }
}

CSS

.charlie {
        background-color: #9abdc1;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        width: 100%;
        height: 100vh;
        color: #222;
        display: table;
    }

    .plusbox {
        margin: 15px 0px;
    }

        .plusbox .read-more {
            font-size: 11px;
            font-weight: 700;
            background-color: #BF1E2D;
            padding: 5px 10px;
            color: #ffffff;
            text-decoration: none;
            display: inline-block;
            position: relative;
            top: -15px;
        }

    .plus-border {
        height: 11px;
        width: 100%;
        background: transparent url(/Upload/File/2020/2/10/plusborder.png) center center no-repeat;
        border: none;
        margin-bottom: 5px;
    }

    .plusboxholder .katozet {
        height: 85px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 15px;
    }

    .plusboxholder .text-content a {
        text-transform: capitalize;
        color: #FFFFFF;
        font-size: 24px;
    }

    .katozet p {
        margin: 0 0 10px;
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        font-weight: 300;
        line-height: 1.42857143;
    }

    .charlie p {
        color: #FFFFFF;
    }

http://www.akmproje.com.tr/tr

https://www.alanyaliahsap.com.tr/