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

0
INFO-1252 (Front End Dev)/Projects/Final Project/Final Project - Instructions1.pdf → INFO-1252 (Front End Dev)/Projects/Final Project - Instructions1.pdf
View File

2
INFO-1252 (Front End Dev)/Projects/Final Project/contact.html
View File

@@ -3,7 +3,7 @@
<head>
<title>Pet Showcase - Contact</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

155
INFO-1252 (Front End Dev)/Projects/Final Project/css/style.css Normal file
View File

@@ -0,0 +1,155 @@
/* Keyframe animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile-first design */
body {
font-family: Arial, Helvetica, sans-serif;
background: #f8f9fa;
color: #222;
margin: 0;
padding: 0 1rem;
}
h1,
h2,
h3 {
margin-top: 1rem;
margin-bottom: 0.5rem;
}
nav ul {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0;
margin: 1rem 0;
list-style: none;
}
nav a {
background: #2980b9;
color: #fff;
padding: 0.5rem;
border-radius: 4px;
text-align: center;
text-decoration: none;
font-weight: bold;
transition: background 0.3s, transform 0.3s;
}
nav a:hover {
background: #1c5a85;
transform: scale(1.07);
}
section {
background: #fff;
margin: 1rem 0;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
animation: fadeIn 1s ease
}
section img {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 0.5rem;
}
form {
background: #fff;
padding: 1rem;
border-radius: 8px;
margin: 1rem 0;
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
}
input,
textarea {
width: 100%;
padding: 0.5rem;
margin-bottom: 0.75rem;
border: 1px solid #bbb;
border-radius: 4px;
}
button {
width: 48%;
padding: 0.5rem;
margin-bottom: 0.5rem;
background: #2980b9;
color: #fff;
border: none;
border-radius: 4px;
font-weight: bold;
}
button[type="reset"] {
background: red;
}
footer {
text-align: center;
margin: 2rem 0 1rem 0;
color: #888;
font-size: 0.95rem;
}
/* Layout for larger screens */
@media (min-width: 600px) and (max-width: 899px) {
body {
padding: 0 2rem;
}
nav ul {
flex-direction: row;
justify-content: center;
gap: 1rem;
}
section,
form {
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
h1 {
font-size: 2.2rem;
}
}
@media (min-width: 900px) {
body {
padding: 0 4rem;
}
nav ul {
flex-direction: row;
justify-content: center;
gap: 2rem;
}
section,
form {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
h1 {
font-size: 3rem;
}
}

BIN
INFO-1252 (Front End Dev)/Projects/Final Project/img/rocco.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 469 KiB

2
INFO-1252 (Front End Dev)/Projects/Final Project/index.html
View File

@@ -3,7 +3,7 @@
<head>
<title>Pet Showcase - Home</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

1
INFO-1252 (Front End Dev)/Projects/Final Project/sources.txt Normal file
View File

@@ -0,0 +1 @@
All images were taken by me and uploaded to my PC from my phone, only credit to give would be to me

0
INFO-1252 (Front End Dev)/Projects/Final Project/style.css
View File

BIN
INFO-1272 (JS 1)/Projects/Final Project.zip Normal file
View File

Binary file not shown.