Yöresel Lezzetlerimiz

"Sıcak bir yemekte gizli malzeme her zaman tereyağıdır"

MAKALE

@{
    int card4Col = 4;
    int card4TotalRow = 3;
    int card4CategoryID = 1;

    if (Partial.isCategoryID(card4CategoryID))
    {
        IEnumerable<Post> card4Category = Partial.PostsID(card5CategoryID, 0, 100, Partial.Order.OrderBy, false);
        Category card44Category = Partial.Category(card4CategoryID);
        int card4Count = Convert.ToInt32(Math.Ceiling(card4Category.Count() / Convert.ToDouble(card4Col)));
        <div class="container-fluid bg-white pb-3 d-none d-sm-block">
            <div class="container">
                @for (int componen = 0; componen < card4Count; componen++)
                {
                    <div class="row">
                        @foreach (Post comCategory in card4Category.Skip(componen * card4Col).Take(card4Col))
                        {
                            <div class="col-md-@(12 / card4Col) col-lg-@(12 / card4Col) pb-3 mt-2">
                                <div class="card discus-card-custom bg-white border-white border-0">
                                    <a href="@Partial.PostLink(comCategory.PostID)" class="discus-card-photo">
                                        <div class="discus-card-custom-img" style="background-image: url(@comCategory.PostImage);"></div>
                                    </a>
                                    <div class="card-body">
                                        <h4 class="card-title">@comCategory.PostTitle.HtmlEncode()</h4>
                                        <p class="card-text">@Partial.PostShortContent(comCategory.PostID,105)</p>
                                    </div>
                                    <div class="card-footer" style="background: inherit; border-color: inherit;">
                                        <a href="@Partial.PostLink(comCategory.PostID)" class="btn btn-primary">@Partial.Translate("Devami", lang)</a>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
    }
}

KATEGORİ

@{
    int card5Col1 = 3; // yan yana 3 tane makale getirmek için kullanılır.
    int card5TotalRow1 = 3; // alt alta kaç kere tekrar edeceğini belirlemek için kullanılır.
    int card5CategoryID1 = 1; //burada belirtilen 1 id numaralı kategorinin altındaki makaleleri listelemek için kullanılır. Yukarıda 3 satır ve 3 sütun belirttiğimiz için 3x3=9 tane makale listelenecektir.

    if (Partial.isCategoryID(card5CategoryID1)) // 1 id li kategori var ise aşağıdaki kodu çalıştırmak için kullanılır. Eğer 2 id numaralı kategori yoksa hatayı önlemek için bu kontrol yapılmaktadır.
    {
        IEnumerable<Category> card5Category = Partial.CategorySubID(card5CategoryID1); // kategori altına eklenen tüm makaleleri bilgilrerini tutmak için kullanılır.
        Category card44Category = Partial.Category(card5CategoryID1); // Kategori numarasını girdiğimiz kategorinin bilgilerini tutar.
        int card5Count = Convert.ToInt32(Math.Ceiling(card5Category.Count() / Convert.ToDouble(card5Col1)));
        <div class="container-fluid mt-40 d-none d-sm-block">
            <div class="big-title3 text-center">
                <h3 class="big_title3">@card44Category.CategoryTitle.HtmlEncode()</h3>
                <p class="title-para3">" Ağzınızın tadına layık geleneksel lezzetlerimiz... "</p>
            </div>
            <div class="container">
                @for (int componen = 0; componen < card5Count; componen++)
                {
                    <div class="row mt-30">
                        @foreach (Category comCategory in card5Category.Skip(componen * card5Col1).Take(card5Col1))
                        {
                            <div class="col-sm-12 col-md-@(12 / card5Col1)">
                                <div class="box20 blue rounded">
                                    <img src="@comCategory.CategoryThumbnail" alt="">
                                    <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: 60%;
                height: 220%;
                background: #f24941;
                top: -40%;
                left: 22%;
                z-index: 1;
                transform: rotate(32deg);
                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: 22px;
                margin: 0;
                font-weight: 300;
                line-height: 1.2;
            }

            .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;
            }
        .icon {
            display: inline-block;
            height: 60px;
            width: auto;
        }
        .circle-icon {
            background: rgba(0,0,0,.1);
            width: 66px;
            height: 66px;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            vertical-align: middle;
            padding: 15px;
        }

        h2.sector {
            font-size: 26px;
            color: #555555;
        }

        .box20 {
            margin-bottom: 36px;
        }

        @@media only screen and (max-width:990px) {
            .box20 {
                margin-bottom: 30px;
            }

                .box20 .title {
                    font-size: 16px;
                }
        }

        @@media only screen and (max-width:479px) {
            .box20 .title {
                font-size: 16px;
            }
        }

        /* title */
        .big-title3 {
            margin-bottom: 3em;
        }

        h3.big_title3 {
            color: #212121;
            font-size: 3.5em;
            font-weight: 700;
            margin: 0 auto;
            text-shadow: 2px 2px 2px rgba(179, 171, 171, 0.8);
            -webkit-text-shadow: 2px 2px 2px rgba(179, 171, 171, 0.8);
            -moz-text-shadow: 2px 2px 2px rgba(179, 171, 171, 0.8);
            -o-text-shadow: 2px 2px 2px rgba(179, 171, 171, 0.8);
            -ms-text-shadow: 2px 2px 2px rgba(179, 171, 171, 0.8);
            letter-spacing: 1px;
            position: relative;
        }

        p.title-para3 {
            color: #2980B9;
            display: block;
            margin: .5em 0 1em;
            letter-spacing: 6px;
            font-size: 0.9em;
        }

        h3.big_title3:after {
            content: '';
            background:#bf2150;
            height: 4px;
            width: 27%;
            position: absolute;
            top: 160%;
            left: 36%;
        }
        /* title */

         /*********************** Card Box *******************/
    </style>