186 lines
8.0 KiB
HTML
186 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8" lang="en">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Lab 6</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
|
||
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
|
||
<body>
|
||
<h1>Lab 6</h1>
|
||
<h2>Bootstrap Components</h2><br>
|
||
<div class="container text-center">
|
||
<div class="row align-items-start">
|
||
<div class="col">
|
||
<strong>Accordian</strong>
|
||
<div class="accordion" id="accordionExample">
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||
Accordion Item #1
|
||
</button>
|
||
</h2>
|
||
<div id="collapseOne" class="accordion-collapse collapse show"
|
||
data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the first item’s accordion body.</strong> The base elements of the
|
||
accordian
|
||
was
|
||
taken from the Bootstrap documentation.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||
Accordion Item #2
|
||
</button>
|
||
</h2>
|
||
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the second item’s accordion body.</strong> I only changed the interior
|
||
content
|
||
of
|
||
the accordian, although content isn't all that imporant.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||
Accordion Item #3
|
||
</button>
|
||
</h2>
|
||
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the third item’s accordion body.</strong> It just saves a lot of time
|
||
instead of
|
||
writing out the code by hand to take the documentation examples.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><br>
|
||
</div>
|
||
<div class="col">
|
||
<strong>Modal (Personal favourite)</strong><br>
|
||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||
Launch demo modal
|
||
</button>
|
||
|
||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
|
||
aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal Demo</h1>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||
aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
Modal outline was also taken from the bootsrap documentation
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-primary">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><br><br>
|
||
</div>
|
||
<div class="col">
|
||
<strong>Card</strong>
|
||
<div class="card">
|
||
<img src="./synthwave.webp" class="card-img-top" alt="...">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card Demo</h5>
|
||
<p class="card-text">Just a simple card with the default image placeholder</p>
|
||
<a href="#" class="btn btn-primary">Do Something</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Container Example</h2>
|
||
<div class="container text-center">
|
||
<div class="row">
|
||
<div class="col">
|
||
Movie
|
||
</div>
|
||
<div class="col">
|
||
Genre
|
||
</div>
|
||
<div class="col">
|
||
Director
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col">
|
||
Kill Bill
|
||
</div>
|
||
<div class="col">
|
||
Action
|
||
</div>
|
||
<div class="col">
|
||
Quentin Tarantino
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col">
|
||
The Room
|
||
</div>
|
||
<div class="col">
|
||
Romance
|
||
</div>
|
||
<div class="col">
|
||
Tommy Wiseau
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col">
|
||
Star Wars
|
||
</div>
|
||
<div class="col">
|
||
Action
|
||
</div>
|
||
<div class="col">
|
||
George Lucas
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Form Demo</h2>
|
||
<form>
|
||
<div class="mb-3">
|
||
<label for="emailInput" class="form-label">Email Address</label>
|
||
<input type="email" class="form-control" id="emailInput">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="genderSelect" class="form-label">Gender</label>
|
||
<select class="form-select" aria-label="Gender Selection">
|
||
<option selected>Open this select menu</option>
|
||
<option value="Male">Male</option>
|
||
<option value="Female">Female</option>
|
||
<option value="Other">Other</option>
|
||
<option value="NotSay">Prefer not to say</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="ageSelect" class="form-label">Age</label>
|
||
<input type="range" class="form-range" min="1" max="99" id="ageSelect">
|
||
</div>
|
||
<button type="button" class="btn btn-primary btn-lg">Submit</button>
|
||
</form>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
|
||
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
|
||
crossorigin="anonymous"></script>
|
||
</body>
|
||
|
||
</html> |