Kategori

<section class="plane m-0 bg-white">
    @{
        int card101Col = 2;
        int card101Row = 2;
        int card101CategoryOrderNumber = 3;

        if (Partial.isCategoryOrderNumber(card101CategoryOrderNumber))
        {
            IEnumerable<Category> card101Categories = Partial.CategorySubOrderNumber(card101CategoryOrderNumber, lang);

            Category card101PostCategory = Partial.Category(card101CategoryOrderNumber, lang);
            int card101Count = Convert.ToInt32(Math.Ceiling(card101Categories.Count() / Convert.ToDouble(card101Col)));
            <div class="container">
                <div class="row">
                    <div class="anatitle text-center">
                        <div class="anahead p-3">
                            <h1>@card101PostCategory.CategoryTitle.HtmlEncode()</h1>
                            <h2><small> @card101PostCategory.CategoryContent.HtmlEncode() </small></h2>
                        </div>
                        <div class="titleshadowL hidden-xs"></div>
                        <div class="titleshadowR hidden-xs"></div>
                    </div>
                </div>
                @for (int componen = 0; componen < card101Row; componen++)
                {
                    <div class="row">
                        @foreach (Category comCategory in card101Categories.Skip(componen * card101Col).Take(card101Col))
                        {
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <a href="@Partial.CategoryLink(comCategory.CategoryID)">
                                    <div class="questions-list question wow fadeIn animated" data-wow-duration="1000ms" data-wow-delay="0ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 0ms; animation-name: fadeIn;">
                                        <div class="row">
                                            <div class="col-md-2 knr hidden-xs">
                                                <span>
                                                    <img src="@comCategory.CategoryThumbnail" class="img-responsive">
                                                </span>
                                            </div>
                                            <div class="col-md-10">
                                                <div class="que-details">
                                                    <h3> @comCategory.CategoryTitle.HtmlEncode() </h3>
                                                    <div class="katozetplane">
                                                        <p>@Partial.CategoryShortContent(comCategory.CategoryID, 100)</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        }
                    </div>
                }
            </div>
        }
    }
</section>

Makale

<section class="plane m-0 bg-white">
    @{
        int card102Col = 3;
        int card102Row = 1;
        int card102CategoryOrderNumber = 3;

        if (Partial.isCategoryOrderNumber(card102CategoryOrderNumber))
        {
            IEnumerable<Post>
            card102Posts = Partial.PostsOrderNumber(card102CategoryOrderNumber, 0, card102Col * card102Row, Partial.Order.OrderBy, true, lang);

            Category card102PostCategory = Partial.Category(card102CategoryOrderNumber, lang);
            int card102Count = Convert.ToInt32(Math.Ceiling(card102Posts.Count() / Convert.ToDouble(card102Col)));
            <div class="container">
                <div class="row">
                    <div class="anatitle text-center">
                        <div class="anahead p-3">
                            <h1>@card102PostCategory.CategoryTitle</h1>
                            <h2><small> @card102PostCategory.CategoryContent </small></h2>
                        </div>
                        <div class="titleshadowL hidden-xs"></div>
                        <div class="titleshadowR hidden-xs"></div>
                    </div>
                </div>
                @for (int componen = 0; componen < card102Row; componen++)
                {
                    <div class="row">
                        @foreach (Post comPost in card102Posts.Skip(componen * card102Col).Take(card102Col))
                        {
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <a href="@Partial.PostLink(comPost.PostID)">
                                    <div class="questions-list question wow fadeIn animated" data-wow-duration="1000ms" data-wow-delay="0ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 0ms; animation-name: fadeIn;">
                                        <div class="row">
                                            <div class="col-md-2 knr hidden-xs">
                                                <span>
                                                    <img src="@comPost.PostThumbnail" class="img-responsive">
                                                </span>
                                            </div>
                                            <div class="col-md-10">
                                                <div class="que-details">
                                                    <h3> @comPost.PostTitle.HtmlEncode() </h3>
                                                    <div class="katozetplane">
                                                        <p>@Partial.PostShortContent(comPost.PostID, 100)</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        }
                    </div>
                }
            </div>
        }
    }
</section>

CSS

.plane {
        margin: 0px;
    }

    .plane {
        margin: 30px 0px;
    }

    .anatitle {
        position: relative;
        margin: -55px 0 0;
        inline-size: -webkit-fill-available;
    }

        .anatitle .anahead {
            display: block;
            position: relative;
            width: 100%;
            margin: 0px 0px 40px 0px;
            -webkit-border-radius: 7px 7px 0 0;
            border-radius: 7px 7px 0 0;
            border: 1px solid #fff;
            min-height: 116px;
            background: -moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.95) 30%,#FFFFFF 100%);
            background: -webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.95) 30%,#FFFFFF 100%);
            background: linear-gradient(to bottom,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.95) 30%,#FFFFFF 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff',endColorstr='#ffffff',GradientType=0);
        }

            .anatitle .anahead h1 {
                margin-bottom: -5px;
                color: #000000;
                font-family: 'Oregano', cursive;
                font-size: 30px !important;
            }

            .anatitle .anahead h2 {
                margin-top: 5px;
                font-family: 'Oregano', cursive;
                text-transform: none;
            }

                .anatitle .anahead h2 small {
                    display: inline-block;
                    position: relative;
                    padding: 10px;
                    color: #037498;
                }

        .anatitle .titleshadowL {
            display: block;
            top: auto;
            right: 100%;
            bottom: 0;
            position: absolute;
            width: 57px;
            height: 130px;
            z-index: 1;
            background: url(/Content/Tema/Standart/images/shadow-ls.png) no-repeat right bottom;
        }

        .anatitle .titleshadowR {
            display: block;
            top: auto;
            left: 100%;
            bottom: 0;
            position: absolute;
            width: 57px;
            height: 130px;
            z-index: 1;
            background: url(/Content/Tema/Standart/images/shadow-rs.png) no-repeat left bottom;
        }

    .questions-list span {
        width: 64px;
        height: 64px;
        display: table-cell;
        position: relative;
        z-index: 9;
    }

    .knr > span::before {
        background: #FFFFFF none repeat scroll 0 0;
        -webkit-box-shadow: 0 4px 4px -1px #ededed;
        -moz-box-shadow: 0 4px 4px -1px #ededed;
        -ms-box-shadow: 0 4px 4px -1px #ededed;
        -o-box-shadow: 0 4px 4px -1px #ededed;
        box-shadow: 0 4px 4px -1px #ededed;
        content: "";
        height: 50px;
        left: 6px;
        position: absolute;
        top: 6px;
        -webkit-transform: rotate(40deg);
        -moz-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
        -o-transform: rotate(40deg);
        transform: rotate(40deg);
        width: 50px;
        z-index: -1;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    @media (min-width: 1200px) .questions-list img {
        padding: 18px;
    }

    @media (min-width: 992px) .questions-list img {
        padding: 16px 5px 0px 15px;
    }

    @media (min-width: 768px) .questions-list img {
        padding: 15px 17px 0px 15px;
    }

    .questions-list img {
        width: 100%;
        padding: 18px;
    }

    .carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    @media (min-width: 992px) .knr > span::after {
        top: 12px;
        left: 24px;
    }

    .knr > span::after {
        border-color: #037498 !important;
    }

    .knr > span::after {
        border-right: 3px solid;
        border-top: 3px solid;
        content: "";
        height: 38px;
        position: absolute;
        right: 3px;
        top: 10px;
        -webkit-transform: rotate(40deg);
        -moz-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
        -o-transform: rotate(40deg);
        transform: rotate(40deg);
        width: 38px;
    }

    .que-details {
        display: table-cell;
    }

        .que-details h3 {
            font-size: 18px;
            color: #6f6f6f;
            font-weight: 600;
        }

    .plane .katozetplane {
        min-height: 70px;
        max-height: 70px;
        overflow: hidden;
    }

    .que-details p {
        color: #888888;
        line-height: 1.7;
        font-size: 14px;
        font-weight: 400;
    }

    .question:hover span::before {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        background: #cadfe6;
    }

    .knr > span::before {
        background: #FFFFFF none repeat scroll 0 0;
        -webkit-box-shadow: 0 4px 4px -1px #ededed;
        -moz-box-shadow: 0 4px 4px -1px #ededed;
        -ms-box-shadow: 0 4px 4px -1px #ededed;
        -o-box-shadow: 0 4px 4px -1px #ededed;
        box-shadow: 0 4px 4px -1px #ededed;
        content: "";
        height: 50px;
        left: 6px;
        position: absolute;
        top: 6px;
        -webkit-transform: rotate(40deg);
        -moz-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
        -o-transform: rotate(40deg);
        transform: rotate(40deg);
        width: 50px;
        z-index: -1;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .question:hover span::after {
        visibility: hidden;
    }

    @media (max-width: 568px) {
        .titleshadowL .titleshadowR {
            display: none !important;
        }
    }

http://www.antalyainternetreklam.com/tr

İndex Bileşenleri