106 lines
4.1 KiB
HTML
106 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title></title>
|
|
<link rel="stylesheet" href="main.css">
|
|
</head>
|
|
<body>
|
|
<div style="display: none;"></div>
|
|
<header class="bg-dark text-white py-3">
|
|
<div class="container d-flex justify-content-between align-items-center">
|
|
<a href="#" class="text-white h4 mb-0">ModernKit</a>
|
|
<nav>
|
|
<ul class="list-unstyled d-flex mb-0">
|
|
<li class="ml-3"><a href="#" class="text-white">Home</a></li>
|
|
<li class="ml-3"><a href="#" class="text-white">About</a></li>
|
|
<li class="ml-3"><a href="#" class="text-white">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<main class="container py-5">
|
|
<h1>UI Components Showcase</h1>
|
|
|
|
<section>
|
|
<h2>Tabs</h2>
|
|
<div class="tabs">
|
|
<div class="tab-headers">
|
|
<button class="tab-button active" data-tab="tab1">Tab 1</button>
|
|
<button class="tab-button" data-tab="tab2">Tab 2</button>
|
|
<button class="tab-button" data-tab="tab3">Tab 3</button>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div id="tab1" class="tab-pane active">
|
|
<h3>Content for Tab 1</h3>
|
|
<p>This is the content for the first tab. It can contain any HTML elements.</p>
|
|
</div>
|
|
<div id="tab2" class="tab-pane">
|
|
<h3>Content for Tab 2</h3>
|
|
<p>This is the content for the second tab. More information here.</p>
|
|
</div>
|
|
<div id="tab3" class="tab-pane">
|
|
<h3>Content for Tab 3</h3>
|
|
<p>This is the content for the third tab. Even more details.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Slider (Swiper)</h2>
|
|
<!-- Slider main container -->
|
|
<div class="swiper">
|
|
<!-- Additional required wrapper -->
|
|
<div class="swiper-wrapper">
|
|
<!-- Slides -->
|
|
<div class="swiper-slide">Slide 1</div>
|
|
<div class="swiper-slide">Slide 2</div>
|
|
<div class="swiper-slide">Slide 3</div>
|
|
</div>
|
|
<!-- If we need pagination -->
|
|
<div class="swiper-pagination"></div>
|
|
|
|
<!-- If we need navigation buttons -->
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
|
|
<!-- If we need scrollbar -->
|
|
<div class="swiper-scrollbar"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Modal (Micromodal)</h2>
|
|
<button data-micromodal-trigger="modal-1">Open Modal</button>
|
|
|
|
<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
|
|
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
|
|
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
|
|
<header class="modal__header">
|
|
<h2 class="modal__title" id="modal-1-title">
|
|
Micromodal Example
|
|
</h2>
|
|
<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
|
|
</header>
|
|
<div class="modal__content" id="modal-1-content">
|
|
<p>This is a simple modal window powered by Micromodal.</p>
|
|
<p>You can put any content here.</p>
|
|
</div>
|
|
<footer class="modal__footer">
|
|
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-dark text-white py-3 mt-5">
|
|
<div class="container text-center">
|
|
<p class="mb-0">© 2025 ModernKit. All rights reserved.</p>
|
|
</div>
|
|
</footer> <script src="js/main.js"></script>
|
|
</body>
|
|
</html> |