MAKALE

@{
    int card4Col = 4;
    int card4TotalRow = 3;
    int card4CategoryID = 1;

    if (Partial.isCategoryID(card4CategoryID))
    {
        IEnumerable<Post> card4Category = Partial.PostsID(card5CategoryID, 0, 100, Partial.Order.OrderBy, false);
        Category card44Category = Partial.Category(card4CategoryID);
        int card4Count = Convert.ToInt32(Math.Ceiling(card4Category.Count() / Convert.ToDouble(card4Col)));
        <div class="container-fluid bg-white pb-3 d-none d-sm-block">
            <div class="container">
                @for (int componen = 0; componen < card4Count; componen++)
                {
                    <div class="row">
                        @foreach (Post comCategory in card4Category.Skip(componen * card4Col).Take(card4Col))
                        {
                            <div class="col-md-@(12 / card4Col) col-lg-@(12 / card4Col) pb-3 mt-2">
                                <div class="card discus-card-custom bg-white border-white border-0">
                                    <a href="@Partial.PostLink(comCategory.PostID)" class="discus-card-photo">
                                        <div class="discus-card-custom-img" style="background-image: url(@comCategory.PostImage);"></div>
                                    </a>
                                    <div class="card-body">
                                        <h4 class="card-title">@comCategory.PostTitle.HtmlEncode()</h4>
                                        <p class="card-text">@Partial.PostShortContent(comCategory.PostID,105)</p>
                                    </div>
                                    <div class="card-footer" style="background: inherit; border-color: inherit;">
                                        <a href="@Partial.PostLink(comCategory.PostID)" class="btn btn-primary">@Partial.Translate("Devami", lang)</a>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
    }
}

KATEGORİ

eklenecek

CSS

<style>
    /*********************** Card Basic *******************/
    p .card-text {
        font-size: 14px;
        }
    .discus-card-custom {
        overflow: hidden;
        min-height: 370px;
        box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
        }
    .discus-card-custom-img {
        height: 200px;
        min-height: 200px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-color: inherit;
        transition-duration: .5s;
        }
     .discus-card-custom-img:hover {
         transform: scale(1.2);
        }
    .discus-effect {
        transition-duration: .5s;
        }
    .discus-effect:hover {
        transform: scale(1.2);
        }
    .discus-card-custom-img:hover::after {
        position: absolute;
        content: '';
        top: 150px;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-top-width: 40px;
        border-right-width: 0;
        border-bottom-width: 0;
        border-left-width: calc(455px - 5vw);
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: inherit;
        }
    .discus-card-custom-img::after {
        transition-duration: .5s;
        position: absolute;
        content: '';
        top: 161px;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-top-width: 40px;
        border-right-width: 0;
        border-bottom-width: 0;
        border-left-width: calc(455px - 5vw);
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: inherit;
        }
    .discus-card-custom-avatar img {
        border-radius: 50%;
        box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
        position: absolute;
        top: 100px;
        left: 1.25rem;
        width: 100px;
        height: 100px;
       }
    .discus-card-photo, .discus-card-photo:hover {
       overflow: hidden;
       color: white;
       }
    /*********************** Card Basic *******************/
</style>