Twocomp Component

        @if (Partial.tumMakaleKategorileri.FirstOrDefault(a => a.MakaleKategoriSira == 1) != null && Partial.tumMakaleKategorileri.FirstOrDefault(a => a.MakaleKategoriSira == 1).MakaleKategoriID != null)
    {
        MakaleKategori kategorisitwocomp = Partial.Kategori(1, dilk);
        IEnumerable<Makale> makalelertwocomp = Partial.MakalelerSiraNo(1, 0, 1000, "sira", false, dilk);
        int dongusayPbox = Convert.ToInt32(Math.Ceiling(makalelertwocomp.Count() / Convert.ToDouble(4)));
        <section class="twocomp baslikBirSection bglight">
            <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                                    <div class="kenarlik">
                                        <div class="twocompbaslik text-center"><h3>Metin</h3></div>
                                        <div class="owl-component owl-carousel owl-theme">
                                            @foreach (Makale makalem in Partial.MakalelerSiraNo(1, 0, 1000, "sira", false, dilk))
                                            {
                                                <div class="col-sm-12 wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
                                                    <div class="kutu">

                                                        <a href="@Partial.MakaleLink(makalem.MakaleID)">
                                                            <div class="text-content text-center">
                                                                <div class="text-baslik tip-tablo">
                                                                    <div class="hucre hucre-ortala">
                                                                        <h3> @makalem.MakaleBaslik.HtmlEncode()</h3>
                                                                    </div>
                                                                </div>
                                                                <p>@Partial.MakaleOzeti(makalem.MakaleID, 300)</p>
                                                            </div>
                                                        </a>

                                                    </div>
                                                </div>
                                            }
                                        </div>
                                    </div>
                        </div>

                        @foreach (Makale makalem in makalelertwocomp.Skip(0).Take(2))
                        {
                            <div class="col-md-3 col-sm-3 col-xs-12 text-center plusbox">
                                <div class="kutu">
                                    <div class="kenarlik">
                                        <a href="@Partial.MakaleLink(makalem.MakaleID)">
                                            <div class="kanvas" style="background-image: url(@makalem.MakaleKucukResim);"></div>

                                            <div class="text-content">
                                                <div class="text-baslik tip-tablo">
                                                    <div class="hucre hucre-ortala">
                                                        <h3> @makalem.MakaleBaslik.HtmlEncode()</h3>
                                                    </div>
                                                </div>
                                                <p>@Partial.MakaleOzeti(makalem.MakaleID, 170)</p>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="buton1dark">
                                    <a href="@Partial.MakaleLink(makalem.MakaleID)">
                                        @Partial.Translate("Devami", dilk)<i class="fa fa-arrow-circle-right"></i>
                                    </a>
                                </div>
                            </div>
                        }
                        <div class="col-md-3">
                            <div class="kenarlik">
                                <div class="twocompbaslik text-center"><h3>Metin</h3></div>
                                <div class="owl-component owl-carousel owl-theme">
                                    @foreach (Makale makalem in Partial.MakalelerSiraNo(1, 0, 1000, "sira", false, dilk))
                                    {
                                        <div class="col-sm-12 wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
                                            <div class="kutu">

                                                <a href="@Partial.MakaleLink(makalem.MakaleID)">
                                                    <div class="text-content text-center">
                                                        <div class="text-baslik tip-tablo">
                                                            <div class="hucre hucre-ortala">
                                                                <h3> @makalem.MakaleBaslik.HtmlEncode()</h3>
                                                            </div>
                                                        </div>
                                                        <p>@Partial.MakaleOzeti(makalem.MakaleID, 300)</p>
                                                    </div>
                                                </a>

                                            </div>
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>



                    </div>
            </div>
        </section>
    }

/*twocomp start*/
.kts-one .twocomp .kutu {
    margin-bottom: 0px;
}
.kts-one .twocomp .kenarlik {
    border:none;
        box-shadow: 4px 4px 22px 0px rgb(156, 156, 156);
    background: #efefef;
    height: 380px;
}


.kts-one .twocomp .kanvas {
    min-height: 200px;
    max-height: 200px;
    overflow: hidden;
}

.kts-one .twocomp .twocompbaslik {
    background-color: #337ab7;
    height: 35px;
    color:white;

}

.kts-one .twocomp .twocompbaslik h3 {
    margin: 0px 0px;
    padding: 10px;
}

.kts-one .twocomp .owl-theme .owl-dots .owl-dot {
    display: none;
    zoom: 1;
}

.kts-one .twocomp .buton1dark {
    position: relative;
    top: -15px;
    margin-top: 0px;
}

.kts-one .twocomp .owl-theme .owl-controls .owl-nav [class*=owl-] {
    margin: 0px 5px;
    position: inherit;
    padding: 3px 7px;
}



/*twocomp end*/