Single Card IE + OPERA

MAKALE

@{
    int card12Col = 3;
    int card12TotalRow = 1;
    int card12CategoryOrderNumber = 2;

    if (Partial.isCategoryOrderNumber(card12CategoryOrderNumber))
    {
        IEnumerable<Post>
        card12Posts = Partial.PostsOrderNumber(card12CategoryOrderNumber, 0, card12Col * card12TotalRow, Partial.Order.OrderBy, true, lang);
        Category categorytitle = Partial.Category(card12CategoryOrderNumber, lang);
        int card12Count = Convert.ToInt32(Math.Ceiling(card12Posts.Count() / Convert.ToDouble(card12Col)));
        <div class="container-fluid discus-parallax p-5 bg-white">
            <div class="container">
                @for (int componen = 0; componen < card12TotalRow; componen++)
                {
                    <div class="row">
                        @foreach (Post comPost in card12Posts.Skip(componen * card12Col).Take(card12Col))
                        {
                            <div class="col-sm-12 col-md-@(12 / card12Col)  mb-3">
                                <div class="box20 blue rounded">
                                    <a href="@Partial.PostLink(comPost.PostID)">
                                        <img src="@comPost.PostThumbnail" alt="">
                                    </a>
                                    <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 card13Col = 3;
    int card13TotalRow = 1;
    int card13CategoryOrderNumber = 3;

    if (Partial.isCategoryOrderNumber(card13CategoryOrderNumber))
    {
        IEnumerable<Category>
        card13Category = Partial.CategorySubOrderNumber(card13CategoryOrderNumber, lang);
        Category category13idno = Partial.Category(card13CategoryOrderNumber, lang);
        int card13Count = Convert.ToInt32(Math.Ceiling(card13Category.Count() / Convert.ToDouble(card13Col)));
        <div class="container-fluid bg-white discus-parallax">
            <div class="container p-2">
                <div class="big-title3 text-center mt-3">
                    <h2>@category13idno.CategoryTitle.HtmlEncode()</h2>
                </div>
                @for (int componen = 0; componen < card13TotalRow; componen++)
                {
                    <div class="row">
                        @foreach (Category comCategory in card13Category.Skip(componen * card13Col).Take(card13Col))
                        {
                            <div class="col-sm-12 col-md-@(12 / card13Col)  mb-3">
                                <div class="box20 blue rounded">
                                    <a href="@Partial.CategoryLink(comCategory.CategoryID)">
                                        <img src="@comCategory.CategoryThumbnail" alt="">
                                    </a>
                                    <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

<style>
        /*********************** 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: 80%;
        height: 220%;
        background: #0d428f;
        top: -40%;
        left: 10%;
        z-index: 1;
        transform: rotate(25deg);
        transform-origin: center top 0;
        transition: all .5s ease 0s;
    }

    /*
        .box20:after {
            width: 55%;
            height: 175%;
            background-color: rgba(0,0,0,.35);
            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: 24px;
        margin: 0;
        font-weight: 300;
    }

    .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;
    }

  .kanvas {
        width: 100%;
        min-height: 200px;
        max-height: 200px;
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
         /*********************** Card Box *******************/
    </style>

https://ugurhaliyikama.com.tr