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

Front end Project done

Browse Source
This commit is contained in:
LeviM-0323
2025-12-13 13:21:25 -05:00
parent 7c58a61426
commit 364f6756c2
4 changed files with 169 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.

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

@@ -1,47 +1,53 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head lang="en">
<title>Pet Showcase - Contact</title> <title>Pet Showcase - Contact</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<h1>Contact Page</h1> <header>
<small>Contact the owner of the page with questions or concerns below</small> <h1>Contact Page</h1>
<small>Contact the owner of the page with questions or concerns below</small>
<!-- Nav that matches one from homepage--> <!-- Nav that matches one from homepage-->
<nav> <nav>
<ul> <ul>
<li> <li>
<a href="index.html">Home</a> <a href="index.html">Home</a>
</li> </li>
<li> <li>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<strong>Contact requests will be answered within &infin; business days</strong> <main>
<strong>Contact requests will be answered within &infin; business days</strong>
<!-- Form with 5 inputs and 2 buttons (assuming textarea counts as input)--> <!-- Form with 5 inputs and 2 buttons (assuming textarea counts as input)-->
<form> <form>
<fieldset> <fieldset>
<legend>Enter personal Information Below</legend> <legend>Enter personal Information Below</legend>
<label for="firstName">First Name:</label><br> <label for="firstName">First Name:</label><br>
<input type="text" name="firstName"><br> <input type="text" name="firstName"><br>
<label for="lastName">Last Name:</label><br> <label for="lastName">Last Name:</label><br>
<input type="text" name="lastName"><br> <input type="text" name="lastName"><br>
<label for="email">Email:</label><br> <label for="email">Email:</label><br>
<input type="email" name="email"><br> <input type="email" name="email"><br>
<label for="phone">Phone:</label><br> <label for="phone">Phone:</label><br>
<input type="tel" name="phone"><br> <input type="tel" name="phone"><br>
<label for="message">Message:</label><br> <label for="message">Message:</label><br>
<textarea name="message" rows="4" cols="50"></textarea><br> <textarea name="message" rows="4" cols="50"></textarea><br>
<button type="submit">Submit</button> <button type="submit">Submit</button>
<button type="reset">Reset</button> <button type="reset">Reset</button>
</fieldset> </fieldset>
</form> </form>
</main>
</body> </body>
<!-- Footer to complete semantic elements, same as homepage--> <!-- Footer to complete semantic elements, same as homepage-->

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

@@ -11,7 +11,7 @@
} }
} }
/* Mobile-first design */ /* Mobile design */
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
background: #f8f9fa; background: #f8f9fa;
@@ -21,12 +21,20 @@ body {
} }
h1, h1,
h2, h2 {
h3 {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
h3 {
font-size: 1.6rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 0.75rem;
padding-bottom: 0.4rem;
border-bottom: 3px solid #444;
}
nav ul { nav ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -58,7 +66,7 @@ section {
padding: 1rem; padding: 1rem;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05); box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
animation: fadeIn 1s ease animation: fadeIn 1s ease;
} }
section img { section img {
@@ -66,6 +74,7 @@ section img {
height: auto; height: auto;
border-radius: 8px; border-radius: 8px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
display: block;
} }
form { form {
@@ -107,7 +116,14 @@ footer {
font-size: 0.95rem; font-size: 0.95rem;
} }
/* Layout for larger screens */ .animal-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
/* Layouts for larger screens */
/* Tablet/Medium screen */
@media (min-width: 600px) and (max-width: 899px) { @media (min-width: 600px) and (max-width: 899px) {
body { body {
padding: 0 2rem; padding: 0 2rem;
@@ -131,6 +147,7 @@ footer {
} }
} }
/* Desktop/large Screen */
@media (min-width: 900px) { @media (min-width: 900px) {
body { body {
padding: 0 4rem; padding: 0 4rem;
@@ -152,4 +169,8 @@ footer {
h1 { h1 {
font-size: 3rem; font-size: 3rem;
} }
.animal-grid {
grid-template-columns: repeat(2, 1fr);
}
} }

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

@@ -1,111 +1,122 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head lang="en">
<title>Pet Showcase - Home</title> <title>Pet Showcase - Home</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<h1>Levi's Pet Showcase</h1> <header>
<small>A collection of pet images with facts about their personality</small> <h1>Levi's Pet Showcase</h1>
<small>A collection of pet images with facts about their personality</small>
<!-- Nav that will match accross all pages --> <!-- Nav that will match accross all pages -->
<nav> <nav>
<ul> <ul>
<li> <li>
<a href="index.html">Home</a> <a href="index.html">Home</a>
</li> </li>
<li> <li>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
<h2>Welcome!</h2> <main>
<p>Below will be 5 short showcases for each of my pets (past and current) featuring pictures and a small description <h2>Welcome!</h2>
of their personalities</p> <p>Below will be 5 short showcases for each of my pets (past and current) featuring pictures and a small
description
of their personalities</p>
<!-- 5 Section elements for my animals--> <!-- 5 Section elements for my animals-->
<section href="mierda"> <div class="animal-grid">
<h3>Mierda</h3> <section id="mierda">
<img src="img/Mierda.jpeg" alt="picture of Mierda" width="600" height="1000"> <h3>Mierda</h3>
<p>Mierda is 5 years old as of writing which makes her the oldest of the animals</p> <img src="img/Mierda.jpeg" alt="picture of Mierda" width="600" height="1000">
<p>Mierda likes:</p> <p>Mierda is 5 years old as of writing which makes her the oldest of the animals</p>
<ul> <p>Mierda likes:</p>
<li>Sleeping with her head in a shoe</li> <ul>
<li>Wet food</li> <li>Sleeping with her head in a shoe</li>
<li>Sleeping outside</li> <li>Wet food</li>
<li>Playing with <a href="#frank">Frank</a></li> <li>Sleeping outside</li>
</ul> <li>Playing with <a href="#frank">Frank</a></li>
<p>Although she looks very sweet (which she can be), she also has a bit of an evil genius side, which my family </ul>
loves to joke about</p> <p>Although she looks very sweet (which she can be), she also has a bit of an evil genius side, which my
</section> family
<hr> loves to joke about</p>
</section>
<section href="Frank"> <section id="Frank">
<h3>Frank</h3> <h3>Frank</h3>
<img src="img/Frank.jpeg" alt="picture of Frank" width="500" height="600"> <img src="img/Frank.jpeg" alt="picture of Frank" width="500" height="600">
<p>Frank is 3 years old and came directly after Mierda</p> <p>Frank is 3 years old and came directly after Mierda</p>
<p>Frank likes:</p> <p>Frank likes:</p>
<ul> <ul>
<li>Sleeping upside down</li> <li>Sleeping upside down</li>
<li>Wet food</li> <li>Wet food</li>
<li>Kibble</li> <li>Kibble</li>
<li>Food that falls on the floor</li> <li>Food that falls on the floor</li>
</ul> </ul>
<p>Frank LOVES food. We joke a lot about how he tends to beg like a dog, even sometimes sitting right next to <a <p>Frank LOVES food. We joke a lot about how he tends to beg like a dog, even sometimes sitting right
href="#Bo">Bo</a> while he begs.</p> next
</section> to <a href="#Bo">Bo</a> while he begs.</p>
<hr> </section>
<section href="Rocco"> <section id="Rocco">
<h3>Rocco</h3> <h3>Rocco</h3>
<img src="img/Rocco.jpeg" alt="picture of Rocco" width="500" height="700"> <img src="img/Rocco.jpeg" alt="picture of Rocco" width="500" height="700">
<p>Rocco is 3 years old and was adopted very shortly after Frank, their almost the same age</p> <p>Rocco is 3 years old and was adopted very shortly after Frank, their almost the same age</p>
<p>Rocco likes:</p> <p>Rocco likes:</p>
<ul> <ul>
<li>Cuddles in bed</li> <li>Cuddles in bed</li>
<li>Sleeping in boxes</li> <li>Sleeping in boxes</li>
<li>Scratching the cat post</li> <li>Scratching the cat post</li>
<li>Drinking tap water from the faucet</li> <li>Drinking tap water from the faucet</li>
</ul> </ul>
<p>Rocco is pretty quiet but he's got a lot of personality. He's the silliest of the animals and often even <p>Rocco is pretty quiet but he's got a lot of personality. He's the silliest of the animals and often
tends to slip and trip on himself. He's very easily startled too.</p> even
</section> tends to slip and trip on himself. He's very easily startled too.</p>
<hr> </section>
<section href="Bo"> <section id="Bo">
<h3>Bo</h3> <h3>Bo</h3>
<img src="img/Bo.jpeg" alt="picture of Bo" width="600" height="700"> <img src="img/Bo.jpeg" alt="picture of Bo" width="600" height="700">
<p>Bo is 9 months old and is the newest addition to our family</p> <p>Bo is 9 months old and is the newest addition to our family</p>
<p>Bo likes:</p> <p>Bo likes:</p>
<ul> <ul>
<li>Jumping, a lot of jumping</li> <li>Jumping, a lot of jumping</li>
<li>Walking with his backpack on</li> <li>Walking with his backpack on</li>
<li>Belly rubs</li> <li>Belly rubs</li>
<li>Dried pigs ear treats (delicious, I know)</li> <li>Dried pigs ear treats (delicious, I know)</li>
</ul> </ul>
<p>Bo is still very young and figuring out his personality but he's very hyperactive and LOVES to jump off the <p>Bo is still very young and figuring out his personality but he's very hyperactive and LOVES to jump
back of the porch and up on us when we come home. He's a Boxer-Border Collie mix.</p> off
</section> the
<hr> back of the porch and up on us when we come home. He's a Boxer-Border Collie mix.</p>
</section>
<section href="Jax"> <section id="Jax">
<h3>Jax</h3> <h3>Jax</h3>
<img src="img/Jax.jpeg" alt="picture of Jax" width="500" height="700"> <img src="img/Jax.jpeg" alt="picture of Jax" width="500" height="700">
<p>Jax was 9 years old when he past, which was about a year ago now.</p> <p>Jax was 9 years old when he past, which was about a year ago now.</p>
<p>Jax Liked:</p> <p>Jax Liked:</p>
<ul> <ul>
<li>Barking, he loved his voice</li> <li>Barking, he loved the sound of his own voice</li>
<li>The cats!</li> <li>The cats!</li>
<li>The dog park</li> <li>The dog park</li>
<li>Water, he was quite the swimmer</li> <li>Water, he was quite the swimmer</li>
</ul> </ul>
<p>Jax (or Jackie) was our first family pet, we love him and miss him but remember him everyday. Jax was a Great <p>Jax (or Jackie) was our first family pet, we love him and miss him but remember him everyday. Jax was
Pyranese mixed with a Shepherd breed of some sort. He had LOTS of fur and was very fluffy.</p> a
</section> Great
<hr> Pyranese mixed with a Shepherd breed of some sort. He had LOTS of fur and was very fluffy.</p>
</section>
</div>
</main>
</body> </body>
<!-- Footer that will match accross all pages --> <!-- Footer that will match accross all pages -->