Front end Project done
This commit is contained in:
BIN
INFO-1252 (Front End Dev)/Projects/Final Project.zip
Normal file
BIN
INFO-1252 (Front End Dev)/Projects/Final Project.zip
Normal file
Binary file not shown.
@@ -1,47 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<head lang="en">
|
||||
<title>Pet Showcase - Contact</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Contact Page</h1>
|
||||
<small>Contact the owner of the page with questions or concerns below</small>
|
||||
<header>
|
||||
<h1>Contact Page</h1>
|
||||
<small>Contact the owner of the page with questions or concerns below</small>
|
||||
|
||||
<!-- Nav that matches one from homepage-->
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- Nav that matches one from homepage-->
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<strong>Contact requests will be answered within ∞ business days</strong>
|
||||
<main>
|
||||
<strong>Contact requests will be answered within ∞ business days</strong>
|
||||
|
||||
<!-- Form with 5 inputs and 2 buttons (assuming textarea counts as input)-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Enter personal Information Below</legend>
|
||||
<label for="firstName">First Name:</label><br>
|
||||
<input type="text" name="firstName"><br>
|
||||
<label for="lastName">Last Name:</label><br>
|
||||
<input type="text" name="lastName"><br>
|
||||
<label for="email">Email:</label><br>
|
||||
<input type="email" name="email"><br>
|
||||
<label for="phone">Phone:</label><br>
|
||||
<input type="tel" name="phone"><br>
|
||||
<label for="message">Message:</label><br>
|
||||
<textarea name="message" rows="4" cols="50"></textarea><br>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<!-- Form with 5 inputs and 2 buttons (assuming textarea counts as input)-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Enter personal Information Below</legend>
|
||||
<label for="firstName">First Name:</label><br>
|
||||
<input type="text" name="firstName"><br>
|
||||
<label for="lastName">Last Name:</label><br>
|
||||
<input type="text" name="lastName"><br>
|
||||
<label for="email">Email:</label><br>
|
||||
<input type="email" name="email"><br>
|
||||
<label for="phone">Phone:</label><br>
|
||||
<input type="tel" name="phone"><br>
|
||||
<label for="message">Message:</label><br>
|
||||
<textarea name="message" rows="4" cols="50"></textarea><br>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<!-- Footer to complete semantic elements, same as homepage-->
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile-first design */
|
||||
/* Mobile design */
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background: #f8f9fa;
|
||||
@@ -21,12 +21,20 @@ body {
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -58,7 +66,7 @@ section {
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
|
||||
animation: fadeIn 1s ease
|
||||
animation: fadeIn 1s ease;
|
||||
}
|
||||
|
||||
section img {
|
||||
@@ -66,6 +74,7 @@ section img {
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
form {
|
||||
@@ -107,7 +116,14 @@ footer {
|
||||
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) {
|
||||
body {
|
||||
padding: 0 2rem;
|
||||
@@ -131,6 +147,7 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop/large Screen */
|
||||
@media (min-width: 900px) {
|
||||
body {
|
||||
padding: 0 4rem;
|
||||
@@ -152,4 +169,8 @@ footer {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.animal-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -1,111 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<head lang="en">
|
||||
<title>Pet Showcase - Home</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Levi's Pet Showcase</h1>
|
||||
<small>A collection of pet images with facts about their personality</small>
|
||||
<header>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- Nav that will match accross all pages -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<h2>Welcome!</h2>
|
||||
<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>
|
||||
<main>
|
||||
<h2>Welcome!</h2>
|
||||
<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-->
|
||||
<section href="mierda">
|
||||
<h3>Mierda</h3>
|
||||
<img src="img/Mierda.jpeg" alt="picture of Mierda" width="600" height="1000">
|
||||
<p>Mierda is 5 years old as of writing which makes her the oldest of the animals</p>
|
||||
<p>Mierda likes:</p>
|
||||
<ul>
|
||||
<li>Sleeping with her head in a shoe</li>
|
||||
<li>Wet food</li>
|
||||
<li>Sleeping outside</li>
|
||||
<li>Playing with <a href="#frank">Frank</a></li>
|
||||
</ul>
|
||||
<p>Although she looks very sweet (which she can be), she also has a bit of an evil genius side, which my family
|
||||
loves to joke about</p>
|
||||
</section>
|
||||
<hr>
|
||||
<!-- 5 Section elements for my animals-->
|
||||
<div class="animal-grid">
|
||||
<section id="mierda">
|
||||
<h3>Mierda</h3>
|
||||
<img src="img/Mierda.jpeg" alt="picture of Mierda" width="600" height="1000">
|
||||
<p>Mierda is 5 years old as of writing which makes her the oldest of the animals</p>
|
||||
<p>Mierda likes:</p>
|
||||
<ul>
|
||||
<li>Sleeping with her head in a shoe</li>
|
||||
<li>Wet food</li>
|
||||
<li>Sleeping outside</li>
|
||||
<li>Playing with <a href="#frank">Frank</a></li>
|
||||
</ul>
|
||||
<p>Although she looks very sweet (which she can be), she also has a bit of an evil genius side, which my
|
||||
family
|
||||
loves to joke about</p>
|
||||
</section>
|
||||
|
||||
<section href="Frank">
|
||||
<h3>Frank</h3>
|
||||
<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 likes:</p>
|
||||
<ul>
|
||||
<li>Sleeping upside down</li>
|
||||
<li>Wet food</li>
|
||||
<li>Kibble</li>
|
||||
<li>Food that falls on the floor</li>
|
||||
</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
|
||||
href="#Bo">Bo</a> while he begs.</p>
|
||||
</section>
|
||||
<hr>
|
||||
<section id="Frank">
|
||||
<h3>Frank</h3>
|
||||
<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 likes:</p>
|
||||
<ul>
|
||||
<li>Sleeping upside down</li>
|
||||
<li>Wet food</li>
|
||||
<li>Kibble</li>
|
||||
<li>Food that falls on the floor</li>
|
||||
</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 href="#Bo">Bo</a> while he begs.</p>
|
||||
</section>
|
||||
|
||||
<section href="Rocco">
|
||||
<h3>Rocco</h3>
|
||||
<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 likes:</p>
|
||||
<ul>
|
||||
<li>Cuddles in bed</li>
|
||||
<li>Sleeping in boxes</li>
|
||||
<li>Scratching the cat post</li>
|
||||
<li>Drinking tap water from the faucet</li>
|
||||
</ul>
|
||||
<p>Rocco is pretty quiet but he's got a lot of personality. He's the silliest of the animals and often even
|
||||
tends to slip and trip on himself. He's very easily startled too.</p>
|
||||
</section>
|
||||
<hr>
|
||||
<section id="Rocco">
|
||||
<h3>Rocco</h3>
|
||||
<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 likes:</p>
|
||||
<ul>
|
||||
<li>Cuddles in bed</li>
|
||||
<li>Sleeping in boxes</li>
|
||||
<li>Scratching the cat post</li>
|
||||
<li>Drinking tap water from the faucet</li>
|
||||
</ul>
|
||||
<p>Rocco is pretty quiet but he's got a lot of personality. He's the silliest of the animals and often
|
||||
even
|
||||
tends to slip and trip on himself. He's very easily startled too.</p>
|
||||
</section>
|
||||
|
||||
<section href="Bo">
|
||||
<h3>Bo</h3>
|
||||
<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 likes:</p>
|
||||
<ul>
|
||||
<li>Jumping, a lot of jumping</li>
|
||||
<li>Walking with his backpack on</li>
|
||||
<li>Belly rubs</li>
|
||||
<li>Dried pigs ear treats (delicious, I know)</li>
|
||||
</ul>
|
||||
<p>Bo is still very young and figuring out his personality but he's very hyperactive and LOVES to jump off the
|
||||
back of the porch and up on us when we come home. He's a Boxer-Border Collie mix.</p>
|
||||
</section>
|
||||
<hr>
|
||||
<section id="Bo">
|
||||
<h3>Bo</h3>
|
||||
<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 likes:</p>
|
||||
<ul>
|
||||
<li>Jumping, a lot of jumping</li>
|
||||
<li>Walking with his backpack on</li>
|
||||
<li>Belly rubs</li>
|
||||
<li>Dried pigs ear treats (delicious, I know)</li>
|
||||
</ul>
|
||||
<p>Bo is still very young and figuring out his personality but he's very hyperactive and LOVES to jump
|
||||
off
|
||||
the
|
||||
back of the porch and up on us when we come home. He's a Boxer-Border Collie mix.</p>
|
||||
</section>
|
||||
|
||||
<section href="Jax">
|
||||
<h3>Jax</h3>
|
||||
<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 Liked:</p>
|
||||
<ul>
|
||||
<li>Barking, he loved his voice</li>
|
||||
<li>The cats!</li>
|
||||
<li>The dog park</li>
|
||||
<li>Water, he was quite the swimmer</li>
|
||||
</ul>
|
||||
<p>Jax (or Jackie) was our first family pet, we love him and miss him but remember him everyday. Jax was a Great
|
||||
Pyranese mixed with a Shepherd breed of some sort. He had LOTS of fur and was very fluffy.</p>
|
||||
</section>
|
||||
<hr>
|
||||
<section id="Jax">
|
||||
<h3>Jax</h3>
|
||||
<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 Liked:</p>
|
||||
<ul>
|
||||
<li>Barking, he loved the sound of his own voice</li>
|
||||
<li>The cats!</li>
|
||||
<li>The dog park</li>
|
||||
<li>Water, he was quite the swimmer</li>
|
||||
</ul>
|
||||
<p>Jax (or Jackie) was our first family pet, we love him and miss him but remember him everyday. Jax was
|
||||
a
|
||||
Great
|
||||
Pyranese mixed with a Shepherd breed of some sort. He had LOTS of fur and was very fluffy.</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<!-- Footer that will match accross all pages -->
|
||||
|
||||
Reference in New Issue
Block a user