diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-6.zip b/INFO-1252 (Front End Dev)/Labs/Lab-6.zip new file mode 100644 index 0000000..66276ef Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-6.zip differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-6/index.html b/INFO-1252 (Front End Dev)/Labs/Lab-6/index.html new file mode 100644 index 0000000..db11dad --- /dev/null +++ b/INFO-1252 (Front End Dev)/Labs/Lab-6/index.html @@ -0,0 +1,186 @@ + + + + + + + Lab 6 + + + + + +

Lab 6

+

Bootstrap Components


+
+
+
+ Accordian +
+
+

+ +

+
+
+ This is the first item’s accordion body. The base elements of the + accordian + was + taken from the Bootstrap documentation. +
+
+
+
+

+ +

+
+
+ This is the second item’s accordion body. I only changed the interior + content + of + the accordian, although content isn't all that imporant. +
+
+
+
+

+ +

+
+
+ This is the third item’s accordion body. It just saves a lot of time + instead of + writing out the code by hand to take the documentation examples. +
+
+
+

+
+
+ Modal (Personal favourite)
+ + +

+
+
+ Card +
+ ... +
+
Card Demo
+

Just a simple card with the default image placeholder

+ Do Something +
+
+
+
+
+ +

Container Example

+
+
+
+ Movie +
+
+ Genre +
+
+ Director +
+
+
+
+ Kill Bill +
+
+ Action +
+
+ Quentin Tarantino +
+
+
+
+ The Room +
+
+ Romance +
+
+ Tommy Wiseau +
+
+
+
+ Star Wars +
+
+ Action +
+
+ George Lucas +
+
+
+ +

Form Demo

+
+
+ + +
+
+ + +
+
+ + +
+ +
+ + + + \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-6/style.css b/INFO-1252 (Front End Dev)/Labs/Lab-6/style.css new file mode 100644 index 0000000..4611a22 --- /dev/null +++ b/INFO-1252 (Front End Dev)/Labs/Lab-6/style.css @@ -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; +} \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-6/synthwave.webp b/INFO-1252 (Front End Dev)/Labs/Lab-6/synthwave.webp new file mode 100644 index 0000000..9a941da Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-6/synthwave.webp differ diff --git a/INFO-1252 (Front End Dev)/Projects/Final Project/Final Project - Instructions1.pdf b/INFO-1252 (Front End Dev)/Projects/Final Project - Instructions1.pdf similarity index 100% rename from INFO-1252 (Front End Dev)/Projects/Final Project/Final Project - Instructions1.pdf rename to INFO-1252 (Front End Dev)/Projects/Final Project - Instructions1.pdf diff --git a/INFO-1252 (Front End Dev)/Projects/Final Project/contact.html b/INFO-1252 (Front End Dev)/Projects/Final Project/contact.html index ab54a03..21e4882 100644 --- a/INFO-1252 (Front End Dev)/Projects/Final Project/contact.html +++ b/INFO-1252 (Front End Dev)/Projects/Final Project/contact.html @@ -3,7 +3,7 @@ Pet Showcase - Contact - + diff --git a/INFO-1252 (Front End Dev)/Projects/Final Project/css/style.css b/INFO-1252 (Front End Dev)/Projects/Final Project/css/style.css new file mode 100644 index 0000000..37224d0 --- /dev/null +++ b/INFO-1252 (Front End Dev)/Projects/Final Project/css/style.css @@ -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; + } +} \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Projects/Final Project/img/rocco.jpeg b/INFO-1252 (Front End Dev)/Projects/Final Project/img/rocco.jpeg new file mode 100644 index 0000000..4dede8b Binary files /dev/null and b/INFO-1252 (Front End Dev)/Projects/Final Project/img/rocco.jpeg differ diff --git a/INFO-1252 (Front End Dev)/Projects/Final Project/index.html b/INFO-1252 (Front End Dev)/Projects/Final Project/index.html index 46de503..2164632 100644 --- a/INFO-1252 (Front End Dev)/Projects/Final Project/index.html +++ b/INFO-1252 (Front End Dev)/Projects/Final Project/index.html @@ -3,7 +3,7 @@ Pet Showcase - Home - + diff --git a/INFO-1252 (Front End Dev)/Projects/Final Project/sources.txt b/INFO-1252 (Front End Dev)/Projects/Final Project/sources.txt new file mode 100644 index 0000000..2836b51 --- /dev/null +++ b/INFO-1252 (Front End Dev)/Projects/Final Project/sources.txt @@ -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 \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Projects/Final Project/style.css b/INFO-1252 (Front End Dev)/Projects/Final Project/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/INFO-1272 (JS 1)/Projects/Final Project.zip b/INFO-1272 (JS 1)/Projects/Final Project.zip new file mode 100644 index 0000000..5b618ce Binary files /dev/null and b/INFO-1272 (JS 1)/Projects/Final Project.zip differ