Levi/IWD2-01
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Front end project

Browse Source
This commit is contained in:
LeviM-0323
2025-12-01 23:54:45 -05:00
parent ffad8e4e61
commit 22f7347a2a
12 changed files with 368 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
INFO-1252 (Front End Dev)/Labs/Lab-6.zip Normal file
View File

Binary file not shown.

186
INFO-1252 (Front End Dev)/Labs/Lab-6/index.html Normal file
View File

@@ -0,0 +1,186 @@
<!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>

24
INFO-1252 (Front End Dev)/Labs/Lab-6/style.css Normal file
View File

@@ -0,0 +1,24 @@
body {
background-color: crimson;
font-family: "Inter", sans-serif;
padding: 20px;
}
h1,
h2 {
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}
form {
margin-top: 30px;
background: #ffffff;
padding: 25px;
border-radius: 14px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}
label {
font-weight: 600;
}

BIN
INFO-1252 (Front End Dev)/Labs/Lab-6/synthwave.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB