Device Sync

This commit is contained in:
2025-12-18 22:10:59 -05:00
parent 364f6756c2
commit 0b903ae50d
36 changed files with 3151 additions and 3151 deletions

View File

@@ -1,58 +1,58 @@
<!DOCTYPE html>
<html>
<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>
<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>
</header>
<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>
<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-->
<footer>
<p><strong>&copy; 2025</strong> | Created by <strong>Levi McLean</strong></p>
</footer>
<!DOCTYPE html>
<html>
<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>
<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>
</header>
<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>
<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-->
<footer>
<p><strong>&copy; 2025</strong> | Created by <strong>Levi McLean</strong></p>
</footer>
</html>

View File

@@ -1,176 +1,176 @@
/* Keyframe animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile design */
body {
font-family: Arial, Helvetica, sans-serif;
background: #f8f9fa;
color: #222;
margin: 0;
padding: 0 1rem;
}
h1,
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;
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;
display: block;
}
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;
}
.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;
}
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;
}
}
/* Desktop/large Screen */
@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;
}
.animal-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Keyframe animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile design */
body {
font-family: Arial, Helvetica, sans-serif;
background: #f8f9fa;
color: #222;
margin: 0;
padding: 0 1rem;
}
h1,
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;
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;
display: block;
}
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;
}
.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;
}
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;
}
}
/* Desktop/large Screen */
@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;
}
.animal-grid {
grid-template-columns: repeat(2, 1fr);
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 469 KiB

View File

@@ -1,127 +1,127 @@
<!DOCTYPE html>
<html>
<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>
<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>
</header>
<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-->
<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 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 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 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 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 -->
<footer>
<p><strong>&copy; 2025</strong> | Created by <strong>Levi McLean</strong></p>
</footer>
<!DOCTYPE html>
<html>
<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>
<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>
</header>
<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-->
<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 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 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 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 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 -->
<footer>
<p><strong>&copy; 2025</strong> | Created by <strong>Levi McLean</strong></p>
</footer>
</html>