MAKALE

@{
    int card11Col = 4;
    int card11TotalRow = 1;
    int card11CategoryOrderNumber = 2;

    if (Partial.isCategoryOrderNumber(card11CategoryOrderNumber))
    {
        IEnumerable<Post> card11PostsID = Partial.PostsID(card11CategoryOrderNumber, 0, card11Col * card11TotalRow, Partial.Order.ID, true);
        Category categorytitle = Partial.Category(card11CategoryOrderNumber);
        int card11CountID = Convert.ToInt32(Math.Ceiling(card11PostsID.Count() / Convert.ToDouble(card11Col)));
        <div class="container-fluid discus-parallax p-2 bg-white">
            <div class="big-title3 text-center">
                <h3 class="big_title3">@categorytitle.CategoryTitle.HtmlEncode()</h3>
                <p class="title-para3">@Partial.Translate("BaslikAciklama", lang)</p>
            </div>
            <div class="container">
                @for (int componen = 0; componen < card11CountID; componen++)
                {
                    <div class="row mt-30">
                        @foreach (Post comPost in card11PostsID.Skip(componen * card11Col).Take(card11Col))
                        {
                            <div class="col-sm-12 col-md-@(12 / card11Col) mb-3">
                                <div class="box20 red rounded">
                                    <img src="@comPost.PostThumbnail" alt="">
                                    <div class="box-content">
                                        <h3 class="title"><a href="@Partial.PostLink(comPost.PostID)">@comPost.PostTitle.HtmlEncode()</a></h3>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
    }
}

KATEGORİ

@{
    int card10Col = 4;
    int card10TotalRow = 1;
    int card10CategoryOrderNumber = 3;

    if (Partial.isCategoryOrderNumber(card10CategoryOrderNumber))
    {
        IEnumerable<Category> card10Category = Partial.CategorySubID(card10CategoryOrderNumber);
        Category card45Category = Partial.Category(card10CategoryOrderNumber);
        int card10Count = Convert.ToInt32(Math.Ceiling(card10Category.Count() / Convert.ToDouble(card10Col)));
        <div class="container-fluid discus-parallax p-2 bg-white">
            <div class="big-title3 text-center">
                <h3 class="big_title3">@card45Category.CategoryTitle.HtmlEncode()</h3>
                <p class="title-para3">@Partial.Translate("BaslikAciklama", lang)</p>
            </div>
            <div class="container">
                @for (int componen = 0; componen < card10TotalRow; componen++)
                {
                    <div class="row mt-30">
                        @foreach (Category comCategory in card10Category.Skip(componen * card10Col).Take(card10Col))
                        {
                            <div class="col-sm-12 col-md-@(12 / card10Col) mb-3">
                                <div class="box20 red rounded">
                                    <img src="@comCategory.CategoryThumbnail" alt="">
                                    <div class="box-content">
                                        <h3 class="title"><a href="@Partial.CategoryLink(comCategory.CategoryID)">@comCategory.CategoryTitle.HtmlEncode()</a></h3>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
    }
}

CSS

/*********************** Card Box *******************/
           .box20, .box20 .icon li a {
            overflow: hidden;
                }

           .box20 {
            box-shadow: 0 0 5px #a3a3a3;
                  }

           .box20 .post, .box20 .title {
                text-transform: capitalize;
                width: 60%;
                }

           .box20 {
            position: relative;
               }

            .box20:after, .box20:before {
                position: absolute;
                content: "";
            }

            .box20:before {
                width: 60%;
                height: 220%;
background: #0d428f;
                top: -40%;
                left: 22%;
                z-index: 1;
                transform: rotate(32deg);
                transform-origin: center top 0;
                transition: all .5s ease 0s;
            }

            .box20:after {
                width: 55%;
                height: 175%;
                bottom: -70%;
                left: 53%;
                transform: rotate(-33deg);
                transform-origin: center bottom 0;
                transition: all .8s ease 0s;
            }

            .box20 .box-content, .box20 .icon {
                width: 100%;
                padding: 0 8px;
                position: absolute;
                left: 0;
                z-index: 2;
                transition: all 1.1s ease 0s;
            }

            .box20 img {
                width: 100%;
                height: auto;
            }

            .box20 .box-content {
                top: 7%;
                color: #fff;
            }

            .box20 .title {
                font-size: 22px;
                margin: 0;
                font-weight: 300;
                line-height: 1.2;
            }

            .box20 .icon li a, .box20 .post {
                display: inline-block;
                font-size: 14px;
            }

            .box20 .post {
                margin-top: 5px;
            }

            .box20 .icon {
                list-style: none;
                margin: 0;
                bottom: 25px;
            }

            .box20 .icon li {
                    display: inline-block;
                }

             .box20 .icon li a {
                        width: 35px;
                        height: 35px;
                        line-height: 35px;
                        background: #fff;
                        border-radius: 50%;
                        margin: 0 3px;
                        color: #fff;
                        text-align: center;
                        transition: all .5s ease 0s;
                    }

            .box20 .button {
                background-color: #000000;
                border-radius: 3px;
                display: inline-block;
                padding: 6px 12px;
                margin-top: 10px;
            }

            .box20 a, box20 a:link, box20 a:visited, box20 a:hover, box20 a:active {
                color: #ffffff !important;
            }
        .icon {
            display: inline-block;
            height: 60px;
            width: auto;
        }
        .circle-icon {
            background: rgba(0,0,0,.1);
            width: 66px;
            height: 66px;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            vertical-align: middle;
            padding: 15px;
        }

        h2.sector {
            font-size: 26px;
            color: #555555;
        }

        .box20 {
            margin-bottom: 36px;
        }

        @media only screen and (max-width:990px) {
            .box20 {
                margin-bottom: 30px;
            }

                .box20 .title {
                    font-size: 16px;
                }
        }

        @media only screen and (max-width:479px) {
            .box20 .title {
                font-size: 16px;
            }
        }


İndex Bileşenleri