<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{layout}">

<th:block layout:fragment="pagetitle">
	<!--page title-->
	<div th:replace="partials/title-meta :: title-meta('Highlight')"></div>
</th:block>

<head>

</head>

<body>
	<div layout:fragment="content">
		<!-- start page title -->
		<div th:replace="partials/page-title :: page-title('Highlight','Advance UI')"></div>

		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-header align-items-center d-flex">
						<div class="flex-grow-1">
							<h4 class="card-title mb-0">HTML Highlight</h4>
						</div>
					</div><!-- end card header -->

					<div class="card-body">
						<p class="text-muted">HTML highlight is used to mark or highlight text that is of property,
							relevance, or special interest to an HTML document. here is the example shown below.</p>

						<div class="live-preview">
							<pre>
<code class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Velzon - Responsive Admin Dashboard Template&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;
            &lt;h1&gt;This is a Heading 1&lt;/h1&gt;
            &lt;h2&gt;This is a Heading 2&lt;/h2&gt;
            &lt;h3&gt;This is a Heading 3&lt;/h3&gt;
            &lt;h4&gt;This is a Heading 4&lt;/h4&gt;
        &lt;/div&gt;
        &lt;!-- end div content --&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
						</div>
					</div><!-- end card-body -->
				</div><!-- end card -->
			</div>
			<!-- end col -->
		</div>
		<!-- end row -->

		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-header align-items-center d-flex">
						<div class="flex-grow-1">
							<h4 class="card-title mb-0">CSS Highlight</h4>
						</div>
					</div><!-- end card header -->

					<div class="card-body">
						<p class="text-muted">CSS highlight is used to mark or highlight text that is of property,
							relevance, or special interest to a CSS document. Here is the example shown below.</p>
						<div class="live-preview">
							<pre>
<code class="language-css">body {
    color: #212529; 
    background-color: #f3f3f9;
    font-family: "Poppins",sans-serif;
}

.example {
    margin: 0;
    color: #74788d; 
}</code></pre>
						</div>
					</div><!-- end card-body -->
				</div><!-- end card -->
			</div>
			<!-- end col -->
		</div>
		<!-- end row -->

		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-header align-items-center d-flex">
						<div class="flex-grow-1">
							<h4 class="card-title mb-0">Javascript Highlight</h4>
						</div>
					</div><!-- end card header -->

					<div class="card-body">
						<p class="text-muted">Javascript highlight is used to mark or highlight text that is of
							property, relevance, or special interest to a Javascript document. Here is the example shown
							below.</p>
						<div class="live-preview">
							<pre>
<code class="language-js">function myFunction() {
    var divElement = document.getElementById("myDIV");
    if (divElement.style.display === "none") {
      divElement.style.display = "block";
    } else {
      divElement.style.display = "none";
    }
}</code></pre>
						</div>
					</div><!-- end card-body -->
				</div><!-- end card -->
			</div>
			<!-- end col -->
		</div>
		<!-- end row -->
	</div>

	<th:block layout:fragment="modal">

	</th:block>
	<th:block layout:fragment="pagejs">
		<!-- prismjs plugin -->
		<script src="/assets/libs/prismjs/prism.js"></script>

		<!-- rater-js plugin -->
		<script src="/assets/libs/rater-js/index.js"></script>

		<!-- swiper.init js -->
		<script src="/assets/js/pages/rating.init.js"></script>
	</th:block>
</body>

</html>