scss-reset
Version:
183 lines (168 loc) • 6.34 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Layout Test</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/reset.css">
<!-- Optional: Your custom styles -->
<style>
body {
padding: 20px;
}
.test-block {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 10px;
text-align: center;
}
.offx {
overflow-x: hidden;
}
</style>
</head>
<body>
<header class="bg-primary text-white text-center py-3">
<h1>Bootstrap Layout Test Page</h1>
</header>
<main class="container mt-4">
<!-- Sticky Element -->
<div class="sticky-top bg-light p-3 mb-3">
Sticky Test
</div>
<!-- Grid System -->
<section>
<h2>Basic Grid System</h2>
<div class="row">
<div class="col-md-4 test-block">Column 1</div>
<div class="col-md-4 test-block">Column 2</div>
<div class="col-md-4 test-block">Column 3</div>
</div>
</section>
<!-- Headers Test -->
<section>
<h3>Headers Test</h3>
<h1>H1 Title</h1>
<h2>H2 Title</h2>
<h3>H3 Title</h3>
<h4>H4 Title</h4>
<h5>H5 Title</h5>
</section>
<!-- Paragraph Test -->
<section>
<h3>Paragraph Test</h3>
<p>Lorem ipsum dolor sit <a href="#">amet</a> consectetur adipisicing elit. Pariatur alias et necessitatibus amet, ut consequatur, minus dolorem ab inventore, soluta facilis nisi consequuntur velit similique quis nihil adipisci. Modi, odio.</p>
<p>Lorem <strong>ipsum</strong> dolor <b>sit</b> amet <em>consectetur</em> adipisicing <i>elit</i>. Pariatur alias et necessitatibus amet, ut consequatur, minus dolorem ab inventore, soluta facilis nisi consequuntur velit similique quis nihil adipisci. Modi, odio.</p>
</section>
<!-- Cards -->
<section class="mt-4">
<h2>Cards</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">This is a card.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">This is another card.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">And another card here.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Form Elements -->
<section class="mt-4">
<h2>Form Elements</h2>
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</section>
<!-- Table -->
<section class="mt-4">
<h2>Table Test</h2>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Doe</td>
<td>@janedoe</td>
</tr>
</tbody>
</table>
</section>
<!-- Image Test -->
<section>
<h3>Images Test</h3>
<div class="text-center">
<img src="https://picsum.photos/536/354?random=1" alt="Random Image"><img src="https://picsum.photos/536/354?random=2" alt="Random Image">
</div>
</section>
<!-- SVG Test -->
<section>
<h3>SVG Test</h3>
<div class="offx d-flex justify-content-center">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
<path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6" />
<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" />
<path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" />
<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" />
</svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
<path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6" />
<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" />
<path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" />
<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" />
</svg>
</div>
</div>
</section>
</main>
<footer class="text-center mt-4">
<p>© Your Company</p>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>