Mr.Combet Webshell 🔥

View File Name : ServiceDetail.cshtml

@model bnb.Models.ServiceViewModel
@{
    ViewBag.Title = "ServiceDetail";
    Layout = "~/Views/Shared/_Navbar.cshtml";
}

<meta name="keywords" content="private hospital in Nepal, hospital Nepal, Nepal hospital, hospital, orthopedic, urology, orthopedic Nepal, orthopedic surgery, urology Nepal, Ashok Banskota, Jagadish Baidya, B&B, BnB, Kathmandu hospital, Lalitpur hospital">

<style>
    .l-banner__slider {
        margin-top: 0px;
        margin-bottom: 40px;
    }
    .l-breadcrumb {
        margin-bottom: 0px;
    }
    .l-banner__slider .carousel-item {
        min-height: 500px;
    }

    @*.col-xs-12 {
        width: 65%;
    }*@
    .m-blog img {
        max-width: 100%;
        
    }
    .l-banner__slider .carousel-item {
        min-height: 160px;
    }

    .contain {
        position: relative;
    }

    .l-banner__slider .carousel-item .contain {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(51, 53, 61, 0.6);
        color: #f1f1f1;
        transition: .5s ease;
        font-size: 20px;
        padding: 10px;
        text-align: center;
        height: 44px;
    }

    .overlay {
        width: 100%;
        @*opacity: 0;
        *@ color: white;
    }

    .l-banner-caption {
        font-size: 14px;
    }

    @@media (min-width: 1280px) {
        .l-banner__slider .carousel-item .contain {
            height: 60px;
        }

        .l-banner__slider .carousel-item {
            min-height: 500px;
            background-size: cover !important;
        }

        .l-banner-caption {
            font-size: 25px;
        }

        .img-doctor {
            height: 275px;
            object-fit: contain;
        }
    }
</style>


<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="@Url.Action("Service","HomeUI")">Service</a></li>
                <li class="breadcrumb-item active" aria-current="page">@Model.ServiceName</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 item in Model.ServiceImage.Take(1))
        {
            <div class="carousel-item active" style="background-image: url(../../Content/img/@item.ImageUrl);  background-size:cover ; background-repeat: no-repeat;">
                <div class="contain">
                    <div class="overlay">
                        <p class="text-center l-banner-caption m-0" style="text-transform: uppercase;">@item.Caption</p>
                    </div>
                </div>
            </div>
        }

        @foreach (var item in Model.ServiceImage.Skip(1))
        {
            <div class="carousel-item" style="background-image: url(../../Content/img/@item.ImageUrl ); background-size: cover; background-repeat: no-repeat;">
                <div class="contain">
                    <div class="overlay">
                        <p class="text-center l-banner-caption m-0" style="text-transform: uppercase;">@item.Caption</p>
                    </div>
                </div>
            </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">
    @*<h1 class="content__title mb-0  align-self-center fw-bold">@Model.ServiceName</h1>*@
</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-blog mb-4 pb-2">
                <div class="m-blog__post mb-5">
                    @*<div class="m-blog__img mb-4">
                        <a href="#">
                            @foreach (var item in Model.ServiceImage.Take(1))
                            {
                                <img src="~/Content/img/@item.ImageUrl" class="w-100 rounded-3" alt="blog">
                            }

                        </a>
                    </div>*@
                    <div class="m-blog__title">
                        <h2 class="m-0 pb-3">
                            <a href="#" class="text-decoration-none" style="text-transform: uppercase; color: #F58220;"> @Model.ServiceName</a>
                        </h2>
                    </div>
                    @*<div class="m-blog__tags mb-2 text-uppercase">
                        <a class="m-blog__category text-decoration-none rounded-1" href="#">
                            @Model.ServiceName
                        </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>*@
                    @Html.Raw(Model.ServiceDescription)

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