MAKALE

@{
    int card7Col = 3;
    int card7TotalRow = 1;
    int card7CategoryOrderNumber = 2;

    if (Partial.isCategoryOrderNumber(card7CategoryOrderNumber))
    {
        IEnumerable<Post> card7PostsID = Partial.PostsID(card7CategoryOrderNumber, 0, card7Col * card7TotalRow, Partial.Order.ID, true);
        Category categorytitle = Partial.Category(card7CategoryOrderNumber);
        int card7Count = Convert.ToInt32(Math.Ceiling(card7PostsID.Count() / Convert.ToDouble(card7Col)));
        <div class="container-fluid bg-white p-5">
            <div class="container">
                @for (int componen = 0; componen < card7Count; componen++)
                {
                    <div class="row">
                        @foreach (Post comPost in card7PostsID.Skip(componen * card7Col).Take(card7Col))
                        {
                            <div class="col-md-@(12 / card7Col) col-lg-@(12 / card7Col) pb-3 mt-2">
                                <div class="card discus-card-custom bg-white border-white border-0">
                                    <a href="@Partial.PostLink(comPost.PostID)" class="discus-card-photo">
                                        <div class="discus-card-custom-img" style="background-image: url(@comPost.PostThumbnail);"></div>
                                    </a>
                                    <div class="card-body">
                                        <h4 class="card-title">@comPost.PostTitle.HtmlEncode()</h4>
                                        <p class="card-text">@Partial.PostShortContent(comPost.PostID, 105)</p>
                                    </div>
                                    <div class="card-footer" style="background: inherit; border-color: inherit;">
                                        <a href="@Partial.PostLink(comPost.PostID)" class="btn btn-primary">@Partial.Translate("Devami", lang)</a>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
    }
}

KATEGORİ

@{
    int card8Col = 3;
    int card8TotalRow = 1;
    int card8CategoryOrderNumber = 3;

    if (Partial.isCategoryOrderNumber(card8CategoryOrderNumber))
    {

        IEnumerable<Category>
        card8Category = Partial.CategorySubID(card8CategoryOrderNumber);
        Category card42Category = Partial.Category(card8CategoryOrderNumber);
        int card8Count = Convert.ToInt32(Math.Ceiling(card8Category.Count() / Convert.ToDouble(card8Col)));
        <div class="container-fluid bg-white p-5">
            <div class="container">
                @for (int componen = 0; componen < card8TotalRow; componen++)
                {
                    <div class="row">
                        @foreach (Category comCategory in card8Category.Skip(componen * card8Col).Take(card8Col))
                        {
                            <div class="col-md-@(12 / card8Col) col-lg-@(12 / card8Col) pb-3 mt-2">
                                <div class="card discus-card-custom bg-white border-white border-0">
                                    <a href="@Partial.CategoryLink(comCategory.CategoryID)" class="discus-card-photo">
                                        <div class="discus-card-custom-img" style="background-image: url(@comCategory.CategoryThumbnail);"></div>
                                    </a>
                                    <div class="card-body">
                                        <a href="@Partial.CategoryLink(comCategory.CategoryID)">
                                            <h4 class="card-title">@comCategory.CategoryTitle.HtmlEncode()</h4>
                                            <p class="card-text">@Partial.CategoryShortContent(comCategory.CategoryID, 105)</p>
                                        </a>
                                    </div>
                                    <div class="card-footer" style="background: inherit; border-color: inherit;">
                                        <a href="@Partial.CategoryLink(comCategory.CategoryID)" class="btn btn-primary">@Partial.Translate("Devami", lang)</a>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
    }
}

CSS

/*********************** Card Basic *******************/
   .container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.bg-white {
    background-color: #fff!important;
}
.discus-card-custom {
    overflow: hidden;
    box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
}
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.discus-card-photo, .discus-card-photo:hover {
    overflow: hidden;
    color: white;
}
.discus-card-custom-img {
    height: 200px;
    min-height: 200px;
	max-height: 285px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-color: inherit;
    transition-duration: .5s;
	width: initial !important;
    max-width: 100%;
}
.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;
}
.card-body {
    padding: 0.5rem !important;
}
.card-body {
    flex: 1 1 auto;
}
.card-title {
    margin-bottom: .75rem;
}
.card-text:last-child {
    margin-bottom: 0;
    text-align: justify;
    padding: 10px;
}
.card-footer:last-child {
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
}
.card-footer {
    padding: .75rem 1.25rem;
    border-top: 1px solid rgba(0,0,0,.125);
}
.btn {
    padding-top: 9px;
    padding-bottom: 9px;
}

İndex Bileşenleri