Mr.Combet Webshell 🔥

Edit File Name : ContentPage.cshtml

@model List<bnb.Models.ContentPageViewModel>
@{
    ViewBag.Title = "Whoweare";
    Layout = "~/Views/Shared/_Navbar.cshtml";
}

.l-breadcrumb {
        margin-bottom: 0px;
    }

.m-b {
        display: grid;
        grid-column-gap: 12px;
        text-align: justify;
    }

.m-blog {
        display: grid;
        grid-template-columns: repeat(2, 415px);
        grid-column-gap: 12px;
    }

.m-blog__post {
        margin-bottom: 30px;
        min-height: 545px;
    }

.search-container {

margin-bottom: 3%;
        margin-top: 3%;
    }

#search {
        border: none;
        background: none;
        //transform: translate(-50px, 1px);
        color: #8b8b7e;
    }

.search-container {
    width: 30%;
    height: 40px;
    @*margin-left: 80px;*@
    border: 1px solid #e2e2df;
    border-radius: calc(0.5 * 40px);
    box-shadow: 0 1px 6px 0 #e2e2df;
    }

#search-input {
        border: none;
        width: 90%;
        //margin-left: 40px;
        margin-top: 6px;
    }
    #search-input:focus {
        border: none;
        @*outline: 0px;*@
        outline: none;
    }
    .l-breadcrumb {
        margin-bottom: 0px;
    }

.l-banner__slider .carousel-item {
        min-height: 160px;
    }

@@media (min-width: 1280px) {
        .l-banner__slider .carousel-item {
            min-height: 9px;
            background-size: cover !important;
        }
    }

@*.col-xs-12 {
        width: 65%;
    }*@

table img {
        width: 100% !important;
        height: auto !important;
    }

.m-blog__post img {
        max-width: 100% !important;
        height: auto !important;
    }

.grid-container {
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(3, auto);
        grid-gap: 5px;
        text-align: center;
    }

.grid-item {
        @*background-color: #ffcc00;*@
        color: #ffffff;
        padding: 10px;
    }

@@media (max-width:500px ) {
        .grid-container {
            display: block;
            justify-content: center;
            grid-template-columns: repeat(3, auto);
            grid-gap: 5px;
            text-align: center;
        }

.grid-item {
            @*background-color: #ffcc00;
            *@ color: #ffffff;
            padding: 10px;
        }
    }

</style>

@foreach (var item in Model)
{
    <div class="l-breadcrumb pt-2 pb-2">
        <div class="container">
            <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb" class="d-flex py-3">
                <ol class="mb-0 breadcrumb align-self-center">
                    <li class="breadcrumb-item"><a href="@Url.Action("Index", "HomeUI")">Home</a></li>
                    @*<li class="breadcrumb-item"><a href="#">ContentPage</a></li>*@
                    <li class="breadcrumb-item active" aria-current="page">@item.ContentPageTitle</li>
                </ol>
            </nav>
        </div>
    </div>

<div id="inner-slider" class="l-banner__slider carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner" role="listbox">
            @foreach (var img in item.ContentImage.Take(1).Where(x => x.IsActive == true))
            {
                <div class="carousel-item active" style="background-image: url(../../Content/img/@img.ImageUrl); background-size: contain; background-repeat: no-repeat;"></div>
            }

@foreach (var img in item.ContentImage.Skip(1).Where(x => x.IsActive == true))
            {
                <div class="carousel-item " style="background-image: url(../../Content/img/ @img.ImageUrl ); background-size: contain; background-repeat: no-repeat;"></div>
            }

</div>
        <a class="carousel-control-prev text-decoration-none" href="#inner-slider" role="button" data-bs-target="#inner-slider" data-bs-slide="prev">
            <i class="fa-solid fa-angle-left"></i>
        </a>
        <a class="carousel-control-next text-decoration-none" href="#inner-slider" role="button" data-bs-target="#inner-slider" data-bs-slide="next">
            <i class="fa-solid fa-angle-right"></i>
        </a>
    </div>

<div class="container align-self-lg-center align-self-center mb-3">
        <h3 class="content__title mb-0  align-self-center fw-bold" style="text-transform: uppercase; color: #F58220;">@item.ContentPageTitle</h3>
    </div><div class="container mb-5">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-9 col-lg-8">
                <div class="m-b">
                    <div class="m-blog__post mb-5">
                        <div class="m-blog__img mb-4">
                            @if (item.Thumbnail == "")
                            {

}
                            else
                            {
                                <a href="#">
                                    <img src="~/Content/img/@item.Thumbnail" class="w-100 rounded-3">
                                </a>
                            }

</div>
                        @*<div class="m-blog__title">
                                <h3 class="m-0 pb-3">
                                    <a href="#" class="text-decoration-none"> @item.ContentPageTitle</a>
                                </h3>
                            </div>
                            <div class="m-blog__tags mb-2 text-uppercase">
                                <a class="m-blog__category text-decoration-none rounded-1" href="#">
                                    @item.ContentPageTitle
                                </a>
                            </div>
                            <ul class="list-unstyled m-blog__toolbox">
                                <li>
                                    By <span class="m-blog__author">B&B Hospital</span>
                                </li>
                                <li>
                                    <time class="date">01 Jun 2022</time>
                                </li>
                            </ul>*@
                        <div class="m-blog__img mb-4">
                            @Html.Raw(item.Description)
                        </div>

</div>
                </div>
            </div>
            @Html.Partial("_RightSideNav")
        </div>
    </div>
}

searchInput.addEventListener('input', () => {
        console.log(searchInput.value);
        const filter = searchInput.value.toLowerCase();
        showSidenavOptions();
        const valueExist = !!filter.length;

if (valueExist) {
            sidenavOptions.forEach((el) => {
                const elText = el.textContent.trim().toLowerCase();
                const isIncluded = elText.includes(filter);
                if (!isIncluded) {
                    el.style.display = 'none';
                }
            });
        }
    });

const showSidenavOptions = () => {
        sidenavOptions.forEach((el) => {
            el.style.display = 'flex';
        });
    };
</script>