131 lines
4.8 KiB
HTML
131 lines
4.8 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 class="mb-4"></h1>
|
|
|
|
<section class="mb-5">
|
|
<h2 class="mb-3">Typography</h2>
|
|
<h1>Heading 1</h1>
|
|
<h2>Heading 2</h2>
|
|
<h3>Heading 3</h3>
|
|
<h4>Heading 4</h4>
|
|
<h5>Heading 5</h5>
|
|
<h6>Heading 6</h6>
|
|
<p>This is a paragraph of text. It demonstrates the default font size, line height, and color. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
<p class="small">This is a small paragraph of text.</p>
|
|
<blockquote>
|
|
<p>"The only way to do great work is to love what you do."</p>
|
|
<footer class="blockquote-footer">Steve Jobs</footer>
|
|
</blockquote>
|
|
</section>
|
|
|
|
<section class="mb-5">
|
|
<h2 class="mb-3">Grid System</h2>
|
|
<div class="row mb-3">
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="p-3 bg-light border">Column 1</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="p-3 bg-light border">Column 2</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="p-3 bg-light border">Column 3</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="p-3 bg-light border">Half Width</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3 bg-light border">Half Width</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mb-5">
|
|
<h2 class="mb-3">Buttons</h2>
|
|
<div class="mb-3">
|
|
<button type="button" class="btn btn-primary">
|
|
Primary Button
|
|
</button> <button type="button" class="btn btn-secondary">
|
|
Secondary Button
|
|
</button> <button type="button" class="btn btn-success">
|
|
Success Button
|
|
</button> <button type="button" class="btn btn-danger">
|
|
Danger Button
|
|
</button> <button type="button" class="btn btn-warning">
|
|
Warning Button
|
|
</button> <button type="button" class="btn btn-info">
|
|
Info Button
|
|
</button> <button type="button" class="btn btn-light">
|
|
Light Button
|
|
</button> <button type="button" class="btn btn-dark">
|
|
Dark Button
|
|
</button> </div>
|
|
</section>
|
|
|
|
<section class="mb-5">
|
|
<h2 class="mb-3">Utility Classes</h2>
|
|
<p class="text-primary">This text is primary colored.</p>
|
|
<p class="text-secondary">This text is secondary colored.</p>
|
|
<p class="text-success">This text is success colored.</p>
|
|
<p class="text-danger">This text is danger colored.</p>
|
|
<p class="text-warning">This text is warning colored.</p>
|
|
<p class="text-info">This text is info colored.</p>
|
|
<p class="text-light bg-dark">This text is light colored on dark background.</p>
|
|
<p class="text-dark">This text is dark colored.</p>
|
|
|
|
<div class="p-3 mb-3 bg-primary text-white">Background Primary</div>
|
|
<div class="p-3 mb-3 bg-secondary text-white">Background Secondary</div>
|
|
<div class="p-3 mb-3 bg-success text-white">Background Success</div>
|
|
<div class="p-3 mb-3 bg-danger text-white">Background Danger</div>
|
|
<div class="p-3 mb-3 bg-warning text-dark">Background Warning</div>
|
|
<div class="p-3 mb-3 bg-info text-white">Background Info</div>
|
|
<div class="p-3 mb-3 bg-light text-dark">Background Light</div>
|
|
<div class="p-3 mb-3 bg-dark text-white">Background Dark</div>
|
|
|
|
<p class="mt-5">Margin Top 5</p>
|
|
<p class="pb-4">Padding Bottom 4</p>
|
|
<p class="mx-auto d-block" style="width: 200px;">Centered Block</p>
|
|
</section>
|
|
|
|
<section class="mb-5">
|
|
<h2 class="mb-3">SVG Icons</h2>
|
|
<p>
|
|
<svg class="icon" width="24" height="24"><use xlink:href="#clock"></use></svg>
|
|
Clock Icon
|
|
</p>
|
|
<p>
|
|
<svg class="icon" width="24" height="24"><use xlink:href="#info"></use></svg>
|
|
Info Icon
|
|
</p>
|
|
</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> |