Front end project
This commit is contained in:
BIN
INFO-1252 (Front End Dev)/Labs/Lab-6.zip
Normal file
BIN
INFO-1252 (Front End Dev)/Labs/Lab-6.zip
Normal file
Binary file not shown.
186
INFO-1252 (Front End Dev)/Labs/Lab-6/index.html
Normal file
186
INFO-1252 (Front End Dev)/Labs/Lab-6/index.html
Normal 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
24
INFO-1252 (Front End Dev)/Labs/Lab-6/style.css
Normal 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
BIN
INFO-1252 (Front End Dev)/Labs/Lab-6/synthwave.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Pet Showcase - Contact</title>
|
<title>Pet Showcase - Contact</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
155
INFO-1252 (Front End Dev)/Projects/Final Project/css/style.css
Normal file
155
INFO-1252 (Front End Dev)/Projects/Final Project/css/style.css
Normal 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
BIN
INFO-1252 (Front End Dev)/Projects/Final Project/img/rocco.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 469 KiB |
@@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Pet Showcase - Home</title>
|
<title>Pet Showcase - Home</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -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
|
||||||
BIN
INFO-1272 (JS 1)/Projects/Final Project.zip
Normal file
BIN
INFO-1272 (JS 1)/Projects/Final Project.zip
Normal file
Binary file not shown.
Reference in New Issue
Block a user