Section Mixed Box

index.cshtml

<section id="nelerYapiyoruz" class="bg-white">
    @{
        int card118CategoryOrderNumber = 345;

        if (Partial.isCategoryOrderNumber(card118CategoryOrderNumber))
        {
            IEnumerable<Post> card118Posts = Partial.PostsOrderNumber(card118CategoryOrderNumber, 0, 6, Partial.Order.OrderBy, true, lang);
            Category category118title = Partial.Category(card118CategoryOrderNumber, lang);
            int card118Count = Convert.ToInt32(Math.Ceiling(card118Posts.Count() / Convert.ToDouble(6)));
            <div class="container">
                <h2 class="title title-border mt0">
                    @category118title.CategoryTitle.HtmlEncode()
                </h2>
                <article class="content mw80">
                    <div class="title-after tj">
                        <p>@category118title.CategoryContent.HtmlEncode()</p>

                    </div>
                </article>

                @for (int componen = 0; componen < card118Count; componen++)
                {
                <div class="row">
                    <div class="col-sm-6 boxes-left">
                        @foreach (Post comPost in card118Posts.Skip(0).Take(2)) // makale sırasında 0 den başla 2 tane makale getir
                        {
                            <div class="box box1" style="background-color: @(Partial.PostMeta(comPost.PostID, "Color")); background-image: url(@comPost.PostThumbnail);">
                                <a href="@Partial.PostLink(comPost.PostID)">
                                    <h3>@comPost.PostTitle.HtmlEncode()</h3><div class="box-content">
                                        <p>@Partial.PostShortContent(comPost.PostID, 420)</p>
                                    </div>
                                </a>
                            </div>
                            <!--/.box -->
                        }
                        </div>
                        <!--/.col-sm-6 -->
                    <div class="col-sm-6 boxes-right">
                        @foreach (Post comPost in card118Posts.Skip(2).Take(2)) // makale sırasında 2 den başla 2 tane makale getir
                        {
                        <div class="box box2" style="background-color: @(Partial.PostMeta(comPost.PostID, "Color")); background-image: url(@comPost.PostThumbnail);">
                            <a href="@Partial.PostLink(comPost.PostID)">
                                <h3>@comPost.PostTitle.HtmlEncode()</h3><div class="box-content">
                                    <p>@Partial.PostShortContent(comPost.PostID, 105)</p>
                                </div>
                            </a>
                        </div>
                        }
                            <!--/.box -->
                            <div class="row">
                                @foreach (Post comPost in card118Posts.Skip(4).Take(2)) // makale sırasında 4 den başla 2 tane makale getir
                                {
                                    <div class="col-sm-6">
                                        <div class="box box1" style="background-color: @(Partial.PostMeta(comPost.PostID, "Color")); background-image: url(@comPost.PostThumbnail);">
                                            <a href="@Partial.PostLink(comPost.PostID)">
                                                <h3>@comPost.PostTitle.HtmlEncode()</h3><div class="box-content">
                                                    <p>@Partial.PostShortContent(comPost.PostID, 105)</p>
                                                </div>
                                            </a>
                                        </div>
                                        <!--/.box -->
                                    </div>
                                }
                                    <!--/.col-sm-6 -->
                                </div>
                            <!--/.row -->
                        </div>
                    
                    <!--/.col-sm-6 -->
                </div>
                }
                <!--/.row -->

            </div>
        }
    }
    <!--/.container -->
</section>

CSS

.mw80 {
        max-width: 80%;
        margin: auto;
    }
    .title, .title-after {
        text-align: center;
    }

    .title {
        font-size: 25px;
        font-weight: 800;
        letter-spacing: 0;
        margin: 20px 0;
    }
    .title-after {
        margin: 40px auto;
    }
    .title-border::after {
        border-bottom: 3px solid;
        content: "";
        display: block;
        height: 0;
        margin: 10px auto;
        width: 80px;
    }
    .box {
        background: #666e78;
        background-repeat: no-repeat;
        color: #fff;
        display: block;
        height: 100%;
        margin-bottom: 15px;
        padding: 35px;
        position: relative;
        width: 100%;
        transition: .3s ease;
        -moz-transition: .3s ease;
        -webkit-transition: .3s ease;
    }

        .box:hover {
            color: #fff;
            box-shadow: 0 0 15px #aaa;
            transition: .3s ease;
            -moz-transition: .3s ease;
            -webkit-transition: .3s ease;
        }

        .box h3 {
            font-size: 23px;
            font-weight: 900;
            letter-spacing: 1px;
            line-height: 30px;
            margin: 0 0 10px;
        }

    .boxes-right, .boxes-right .row > div:last-child {
        padding-left: 0;
    }

    .box1 {
        background-position: right top;
    }

    .box2 {
        background-position: right bottom;
    }

    .boxes-left {
        padding-left: 0;
    }

        .boxes-left .box {
            height: auto;
        }

    .boxes-right {
        padding-right: 0;
    }

        .boxes-right .box {
            height: auto;
        }

        .boxes-right .row .box {
            height: auto;
        }

    .box .box-content a {
        color: #fff;
        font-weight: bold;
    }

    .box .box-content p {
        margin-bottom: 5px;
    }

    .box > a {
        color: #fff;
        display: block;
    }

    .box h3 {
        font-family: museo_sans;
        font-size: 23px;
        font-weight: 900;
        letter-spacing: 1px;
        line-height: 30px;
        margin: 0 0 10px;
    }
    .box .box-content p {
        margin-bottom: 5px;
    }


    @@media (max-width: 768px) {
        #nelerYapiyoruz .col-sm-6 {
            margin: 0;
            padding: 0 15px;
        }

            #nelerYapiyoruz .col-sm-6, #nelerYapiyoruz .col-sm-6 .box {
                height: auto !important;
                width: 100%;
            }
    }

https://www.tudem.com/