Middle Section Reverse and Straight IE + OPERA

Kategori

@{
    int card65Col = 1;
    int card65TotalRow = 3;
    int card65CategoryOrderNumber = 3;

    if (Partial.isCategoryOrderNumber(card65CategoryOrderNumber))
    {
        IEnumerable<Category>
        card65Category = Partial.CategorySubOrderNumber(card65CategoryOrderNumber, lang);
        Category categoryidno = Partial.Category(card65CategoryOrderNumber, lang);
        int card65Count = Convert.ToInt32(Math.Ceiling(card65Category.Count() / Convert.ToDouble(card65Col)));
        <h3 class="big_title3 text-center discus-parallax bg-white">@categoryidno.CategoryTitle.HtmlEncode()</h3>
        int sayi = 0;
        for (int componen = 0; componen < card65TotalRow; componen++)
        {
            foreach (Category comCategory in card65Category.Skip(componen * card65Col).Take(card65Col))
            {
                sayi++;
                <div class="container-fluid p-0">
                    <div class="row no-gutters">
                        @if (componen % 2 != 0)
                        {
                            <!--why us right-->
                            <div class="col-lg-6 col-xs-12 bg-light" style="background: url(@comCategory.CategoryImage) no-repeat; background-size: cover; width: 100%; background-position: left center; min-height: 300px;">
                            </div>
                        }
                        <!--why us right-->
                        <div class="col-lg-6 col-xs-12 discus-bg-grad px-4 py-5 p-lg-5 all-text-white">
                            <div class="h-100">
                                <p class="p-b30">
                                    <span class="icon-count-number" style="color:#ffffff45;"><text style="color:#ffffff45;">0</text>@sayi</span>
                                    <span class="icon-count-title">@comCategory.CategoryTitle.HtmlEncode()</span>
                                </p>
                                <p style="padding-top:100px;">
                                    @Partial.CategoryShortContent(comCategory.CategoryID, 250)
                                </p>

                                <div class="col-md-12"><a class="kutu-link" href="@Partial.CategoryLink(comCategory.CategoryID)">@Partial.Translate("Devami", lang)</a></div>
                            </div>
                        </div>
                        @if (componen % 2 == 0)
                        {
                            <!--why us right-->
                            <div class="col-lg-6 col-xs-12 bg-light" style="background: url(@comCategory.CategoryImage) no-repeat; background-size: cover; width: 100%; background-position: left center; min-height: 300px;">
                            </div>
                        }
                    </div>
                </div>
            }
        }
    }
}

Makale

@{
    int card64Col = 1;
    int card64TotalRow = 3;
    int card64CategoryOrderNumber = 2;

    if (Partial.isCategoryOrderNumber(card64CategoryOrderNumber))
    {
        IEnumerable<Post>
        card64Posts = Partial.PostsOrderNumber(card64CategoryOrderNumber, 0, card64Col * card64TotalRow, Partial.Order.OrderBy, true, lang);
        Category categorytitle = Partial.Category(card64CategoryOrderNumber, lang);
        int card64Count = Convert.ToInt32(Math.Ceiling(card64Posts.Count() / Convert.ToDouble(card64Col)));
        <h3 class="big_title3 text-center discus-parallax bg-white">@categorytitle.CategoryTitle.HtmlEncode()</h3>
        int sayi = 0;
        for (int componen = 0; componen < card64Count; componen++)
        {
            foreach (Post comPost in card64Posts.Skip(componen * card64Col).Take(card64Col))
            {
                sayi++;
                <div class="container-fluid p-0">
                    <div class="row no-gutters">
                        @if (componen % 2 != 0)
                        {
                            <!--why us left-->
                            <div class="col-lg-6 col-xs-12 bg-light" style="background:url(@comPost.PostImage) no-repeat; background-size:cover; width: 100%;background-position:left center; min-height: 300px;">
                            </div>
                        }
                        <!--why us right-->
                        <div class="col-lg-6 col-xs-12 discus-bg-grad px-4 py-5 p-lg-5 all-text-white">
                            <div class="h-100">
                                <p class="p-b30">
                                    <span class="icon-count-number" style="color:#ffffff45;"><text style="color:#ffffff45;">0</text>@sayi</span>
                                    <span class="icon-count-title">@comPost.PostTitle.HtmlEncode()</span>
                                </p>
                                <p style="padding-top:100px;">
                                    @Partial.PostShortContent(comPost.PostID, 360)
                                </p>

                                @Partial.PostShortContent(comPost.PostID, 105)

                                <div class="col-md-12"><a class="kutu-link" href="@Partial.PostLink(comPost.PostID)">@Partial.Translate("Devami", lang)</a></div>
                            </div>
                        </div>
                        @if (componen % 2 == 0)
                        {
                            <!--why us right-->
                            <div class="col-lg-6 col-xs-12 bg-light" style="background:url(@comPost.PostImage) no-repeat; background-size:cover; width: 100%;background-position:left center; min-height: 300px;">
                            </div>
                        }
                    </div>
                </div>
            }
        }
    }
}

CSS


<style>
    .p-0 {
        padding: 0 !important;
    }

    .discus-bg-grad {
        background-image: linear-gradient(-45deg, #d08815, #ff9504);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 );
    }

    .discus-bg-grad2 {
        background-image: linear-gradient(-45deg, #b66b54, #f0ad99);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 );
    }

    .discus-bg-grad3 {
        background-image: linear-gradient(-45deg, #c84cb4, #ff6ce8);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 );
    }


    .discus-text-grad {
        background: -moz-linear-gradient(150deg, #056dff 0%, #ff6491 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, #056dff), color-stop(100%, #ff6491));
        background: -webkit-linear-gradient(150deg, #056dff 0%, #ff6491 100%);
        background: -o-linear-gradient(150deg, #056dff 0%, #ff6491 100%);
        background: -ms-linear-gradient(150deg, #056dff 0%, #ff6491 100%);
        background: linear-gradient(150deg, #056dff 0%, #ff6491 100%);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -ms-background-clip: text;
        -o-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color: transparent;
        -ms-text-fill-color: transparent;
        -o-text-fill-color: transparent;
        text-fill-color: transparent;
    }

    .all-text-white *, .text-all-white * {
        color: #ffffff;
    }


    .list-group .list-group-item {
        background: transparent;
    }

        .list-group .list-group-item i {
            margin-right: 5px;
            color: white;
        }

    .list-group-item {
        border: 0px;
    }

    .btn-outline-primary {
        border-color: #ffffff;
    }

    a.kutu-link {
        font-size: 20px;
        font-weight: bold;
    }

    span.icon-count-number {
        position: absolute;
        left: 50px;
        top: 20px;
        font-size: 120px;
        font-weight: 800;
        color: #ffffff;
        line-height: 120px;
    }

    span.icon-count-title {
        left: 80px;
        top: 70px;
        position: absolute;
        color: #454545;
        font-size: 40px;
        font-weight: 800;
        padding: 10px 40px;
    }
    @@media (max-width: 575.98px) {
        span.icon-count-title {
            font-size: 30px;
        }
    }
</style>

http://www.antalyateknokent.com.tr/tr/girisimcilik-ve-kulucka-merkezi

İndex Bileşenleri