index.cshtml

@{
    int card130Col = 2;
    int card130TotalRow = 1;
    int card130CategoryOrderNumber = 2;

    if (Partial.isCategoryOrderNumber(card130CategoryOrderNumber))
    {
        IEnumerable<Post> card130Posts = Partial.PostsOrderNumber(card130CategoryOrderNumber, 0, card130Col * card130TotalRow, Partial.Order.OrderBy, true, lang);
        Category categorytitle = Partial.Category(card130CategoryOrderNumber, lang);
        <div class="container-fluid text-center" style="background-color:#f2f2f2;">
            <div class="container text-center pt-3 pb-3">
                    <h3 class="title text-center">@categorytitle.CategoryTitle.HtmlEncode()</h3>
                <div class="owl-carousel-fix owl-carousel-brand3 owl-theme">
                    @foreach (Post comPost in card130Posts)
                    {
                        <div class="item">
                            <div class="row m-5 p-5" style="background-color:#fff;">
                                <div class="col-md-2 discusdatestyle">
                                    <span class="day">@comPost.PostUpdateDate.Day</span>
                                    @if (1 == comPost.PostUpdateDate.Month)
                                    {
                                        <span class="mount">Ocak</span>
                                    }
                                    else if (2 == comPost.PostUpdateDate.Month)
                                    {
                                        <span class="mount">Şubat</span>
                                    }
                                    else if (3 == comPost.PostUpdateDate.Month)
                                    {
                                        <span class="mount">Mart</span>
                                    }
                                    else if (4 == comPost.PostUpdateDate.Month)
                                    {
                                        <span class="mount">Nisan</span>
                                    }
                                    else if (5 == comPost.PostUpdateDate.Month)
                                    {
                                        <span class="mount">Mayıs</span>
                                    }
                                    else if (6 == comPost.PostUpdateDate.Month)
                                    {
                                        <span class="mount">Haziran</span>
                                    }
                                    else if (7 == comPost.PostUpdateDate.Month)
                                    {
                                        <span class="mount">Temmuz</span>
                                    }
                                    else if (8 == comPost.PostUpdateDate.Month)
                                    {
                                        <span class="mount">Ağustos</span>
                                    }
                                    else if (9 == comPost.PostUpdateDate.Month)
                                    {
                                        <span class="mount">Eylül</span>
                                    }
                                    else if (10 == comPost.PostUpdateDate.Month)
                                    {
                                        <span class="mount">Ekim</span>
                                    }
                                    else if (11 == comPost.PostUpdateDate.Month)
                                    {
                                        <span class="mount">Kasım</span>
                                    }
                                    else
                                    {
                                        <span class="mount">Aralık</span>
                                    }
                                    <span class="year">@comPost.PostUpdateDate.Year</span>
                                </div>
                                <div class="col-md-3 mt-4 mb-40">
                                    <div class="img-one-carousel">
                                        <img src="@comPost.PostThumbnail" style="width: 100%;height: 100%;object-fit: contain;">
                                    </div>
                                </div>
                                <div class="col-md-7 discusdatestyle">
                                    <div class="p-2">
                                        <h5>
                                            <a href="@Partial.PostLink(comPost.PostID)">
                                                @comPost.PostTitle </a></h5>
                                                <div class="text">
                                                    @Partial.PostShortContent(comPost.PostID, 130)</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                </div>
                </div>
                </div>
    }
}

CSS

.discusdatestyle {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
    }

    .day {
        font-size: 120px;
        color: #e16327;
        line-height: 0.75;
        font-family: "sfm-400";
        font-variant: proportional-nums;
    }

    .mount {
        background: #222;
        color: #fff;
        font-size: 13px;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 2px 35px;
        font-family: "sfm-400";
    }

    .year {
        color: #6f6f6f;
        font-size: 58px;
        line-height: 0.7;
        overflow: hidden;
        font-family: "sfm-400";
        font-variant: proportional-nums;
        padding-top: 10px;
    }

    .img-one-carousel {
        max-width: 100%;
        height: 195px;
        box-shadow: 0 0 20px rgba(0,0,0,0.05);
        padding: 10px;
    }

İndex Bileşenleri