index.cshtml

<section class="bg-white">
    <div class="container">
        @{
            int card126Col = 4;
            int card126TotalRow = 1;
            int card126CategoryOrderNumber = 2;
            int sliderno = 0;

            if (Partial.isCategoryOrderNumber(card126CategoryOrderNumber))
            {
                IEnumerable<Post>
                card126Posts = Partial.PostsOrderNumber(card126CategoryOrderNumber, 0, card126Col * card126TotalRow, Partial.Order.ID, true, lang);
                Category category126title = Partial.Category(card126CategoryOrderNumber, lang);
                int card126Count = Convert.ToInt32(Math.Ceiling(card126Posts.Count() / Convert.ToDouble(card126Col)));
                <div class="row mb-2">
                    <div class="col-12 text-center pt-3">
                        <h1>@category126title.CategoryTitle</h1>
                        <p>@category126title.CategoryContent.HtmlEncode()</p>
                    </div>
                </div>

                <!--Start code-->
                <div class="row">
                    <div class="col-12 pb-5">
                        <!--SECTION START-->
                        <section class="row">
                            <!--Start slider news-->

                            <div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1">
                                <div id="featured" class="carousel slide carousel" data-ride="carousel">
                                    <!--dots navigate-->
                                    <ol class="carousel-indicators top-indicator">
                                        <li data-target="#featured" data-slide-to="0" class="active"></li>
                                        <li data-target="#featured" data-slide-to="1"></li>
                                        <li data-target="#featured" data-slide-to="2"></li>
                                        <li data-target="#featured" data-slide-to="3"></li>
                                    </ol>
                                    <!--carousel inner-->
                                    <div class="carousel-inner">
                                        <!--Item slider-->@for (int componen = 0; componen < card126Count; componen++)
                                        {
                                            foreach (Post comPost in card126Posts.Skip(componen * card126Col).Take(card126Col))
                                            {
                                                <div class="carousel-item @if (sliderno == 0) {<text>active</text>}">
                                                    <div class="card border-0 rounded-0 text-light overflow zoom">
                                                        <div class="position-relative">
                                                            <!--thumbnail img-->
                                                            <div class="ratio_left-cover-1 image-wrapper">
                                                                <a href="@Partial.PostLink(comPost.PostID)">
                                                                    <img class="img-fluid w-100"
                                                                         src="@comPost.PostThumbnail"
                                                                         alt="Bootstrap news template">
                                                                </a>
                                                            </div>
                                                            <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
                                                                <!--title-->
                                                                <a href="@Partial.PostLink(comPost.PostID)">
                                                                    <h2 class="h3 post-title text-white my-1">@comPost.PostTitle.HtmlEncode()</h2>
                                                                </a>
                                                                <!-- meta title -->
                                                                <div class="news-meta">
                                                                    <span class="news-author">@Partial.PostShortContent(comPost.PostID, 70)</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                sliderno++;
                                            }
                                        }
                                        <!--end item slider-->
                                    </div>
                                    <!--end carousel inner-->
                                </div>
                                <!--navigation-->
                                <a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#featured" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                            <!--End slider news-->
                            <!--Start box news-->
                            @{
                                int card127Col = 4;
                                int card127TotalRow = 1;
                                int card127CategoryOrderNumber = 2;

                                if (Partial.isCategoryOrderNumber(card127CategoryOrderNumber))
                                {
                                    IEnumerable<Post>
                                    card127Posts = Partial.PostsOrderNumber(card127CategoryOrderNumber, 4, card127Col * card127TotalRow, Partial.Order.ID, true, lang);

                                    int card127Count = Convert.ToInt32(Math.Ceiling(card127Posts.Count() / Convert.ToDouble(card127Col)));
                                    <div class="col-12 col-md-6 pt-2 pl-md-1 mb-3 mb-lg-4">
                                        <div class="row">
                                            <!--news box-->@for (int componen = 0; componen < card127Count; componen++)
                                            {
                                                foreach (Post comPost in card127Posts.Skip(componen * card127Col).Take(card127Col))
                                                {
                                                    <div class="col-6 pb-1 pt-0 pr-1">
                                                        <div class="card border-0 rounded-0 text-white overflow zoom">
                                                            <div class="position-relative">
                                                                <!--thumbnail img-->
                                                                <div class="ratio_right-cover-2 image-wrapper">
                                                                    <a href="@Partial.PostLink(comPost.PostID)">
                                                                        <img class="img-fluid"
                                                                             src="@comPost.PostThumbnail"
                                                                             alt="simple blog template bootstrap">
                                                                    </a>
                                                                </div>
                                                                <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
                                                                    <!-- category -->
                                                                    <a class="p-1 badge badge-primary rounded-0" href="@Partial.PostLink(comPost.PostID)">@comPost.PostTitle.HtmlEncode()</a>
                                                                    <!--title-->
                                                                    <a href="@Partial.PostLink(comPost.PostID)">
                                                                        <h2 class="h5 text-white my-1">@Partial.PostShortContent(comPost.PostID, 70)</h2>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                }
                                            }
                                            <!--end news box-->
                                        </div>
                                    </div>
                                }
                            }
                            <!--End box news-->
                        </section>
                        <!--END SECTION-->
                    </div>
                </div>
                <!--end code-->
            }
        }
    </div>
</section>

CSS

<style>


        .b-0 {
            bottom: 0;
        }

        .bg-shadow {
            background: rgba(76, 76, 76, 0);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179, 171, 171, 0)), color-stop(49%, rgba(48, 48, 48, 0.37)), color-stop(100%, rgba(19, 19, 19, 0.8)));
            background: linear-gradient(to bottom, rgba(179, 171, 171, 0) 0%, rgba(48, 48, 48, 0.71) 49%, rgba(19, 19, 19, 0.8) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
        }

        .top-indicator {
            right: 0;
            top: 1rem;
            bottom: inherit;
            left: inherit;
            margin-right: 1rem;
        }

        .overflow {
            position: relative;
            overflow: hidden;
        }

        .zoom img {
            transition: all 0.2s linear;
        }

        .zoom:hover img {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
    </style>

İndex Bileşenleri