Html шаблоны

Отладочная страница


  Описание кода

VScode

Эта страница разработаны для автономного, более тщательного, отлаживания html кода публикуемых страниц. Страница запускается автономно непосредствено в браузере или отладчике кода например VScode. Достаточно запустить страницу и вставить в тело тэга <body> отлаживаемый код. Для примера в расположенный ниже коде вставлен код этой страницы. Вы также можете свободно пользоваться этим кодом в диалогах при разработки с использованием ИИ.


Code example

                                
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TutoCito CMS</title>
    <meta name="description" content="Современная система управления контентом TutoCito CMS на ASP.NET Core. Управляйте сайтом в реальном времени, безопасно и удобно.">
    <meta name="keywords" content="CMS, React .Net Core CMS, система управления контентом, SPA, редактор WYSIWYG, SEO, безопасность, мобильная адаптация">
<style>
       /* Target the active nav-pill background color */
        .nav-pills .nav-link.active {
            background-color: #ffc107;/*#007bff; /* Example: Bootstrap primary blue */
            color: #fff; /* Example: White text for active pill */
        }

        /* Target the default nav-link text color */
        .nav-pills .nav-link {
            color: #000/*#6c757d; /* Example: Bootstrap secondary gray */
        }

        /* Target the hover state of nav-links */
        .nav-pills .nav-link:hover:not(.active) {
            background-color: #e9ecef; /* Example: Light gray on hover */
            color: #495057; /* Example: Darker gray text on hover */
        }
</style>
</head>
<body>
<!--Begin of bugging code++++++++++++++++++++++++++++++++++++++++++++++-->

<!--Insert here-->

<!--End of bugging code++++++++++++++++++++++++++++++++++++++++++++++-->
    </div>
    <div class="col-2"></div>
</div>
    <footer>
        <div class="fixed-bottom">
            <div class="row">
                <div class="col-4 bg-success text-center text-dark">
                    <a class="text-dark fs-6" href="#"><small>TutoCito React ASP.Net Core CMS pro - v.8.18.4</small></a>
                </div>
                <div class="col-4 bg-success text-center">
                    <a class="text-dark fs-6" href="https://tutocito.com"><small>Copyright © TutoCito.com</small></a>
                </div>
                <div class="col-4 bg-success text-end">
                    <i class="bi bi-telegram text-info"></i> <a class="text-dark fs-6" href="https://t.me/tutocitocom"><small>TutoCito.com   </small></a>
                </div>
            </div>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
    <script>
      hljs.highlightAll();
    </script>
</body>
</html>