rescue 6

author: 1970-01-01 00:00:00 +0000
committer: 2025-01-12 07:28:30 +0000
commit: 05158207fdd9bbd1371fac856278ae3cebad5642 (patch)
tree: ec59f5bcbaabfc1d0b90a5cb4b651815b1f94f49
parent: rescue 5 (diff)
download: html-05158207fdd9bbd1371fac856278ae3cebad5642.tar
html-05158207fdd9bbd1371fac856278ae3cebad5642.tar.gz
html-05158207fdd9bbd1371fac856278ae3cebad5642.tar.bz2
html-05158207fdd9bbd1371fac856278ae3cebad5642.tar.xz
html-05158207fdd9bbd1371fac856278ae3cebad5642.zip
6 files changed, 497 insertions, 0 deletions
diff --git a/06/about.html b/06/about.html
new file mode 100644
index 0000000..ee3288f
--- /dev/null
+++ b/06/about.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<!--
+	Student: Name Surname
+	File Name: about.html
+	Date: 2024/09/23
+-->
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="css/styles.css">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Emblema+One&family=Lora&display=swap" rel="stylesheet">
+<title>Wild Rescues: About</title></head><body>
+<div id="wrapper">
+	<header>
+		<div class="tab-desk">
+			<a href="index.html">
+				<img src="i/baby-hawk.jpg" alt="rescued baby hawk">
+			</a>
+		</div>
+		<div class="mobile">
+			<h1>&#128062; Wild Rescues</h1>
+			<h3>Rescue. Rehabilitate. Release.</h3>
+		</div>
+	</header>
+
+	<nav>
+		<ul>
+			<li><a href="index.html">Home</a></li>
+			<li><a href="about.html">About Us</a></li>
+			<li><a href="partnership.html">Partnership</a></li>
+			<li><a href="gallery.html">Gallery</a></li>
+			<li><a href="faqs.html">FAQs</a></li>
+			<li><a href="contact.html">Contact</a></li>
+		</ul>
+	</nav>
+
+	<!-- Use the main area to add the main content to the webpage -->
+	<main>
+		<div id="info">
+			<h2>About Us</h2>
+			<p>Wild Rescues is a registered nonprofit wildlife
+			rescue and rehabilitation facility, located in Ocala,
+			Florida. We help injured, sick, neglected, and orphaned
+			wildlife. We help rehabilitate these animals and then
+			release them back into the wild, if possible.</p>
+			<p>Wild Rescues is a member of the
+			<a href="https://www.nwrawildlife.org" class="link">
+				National Wildlife Rehabilitators Association.</a>
+			</p>
+
+			<img class="round" src="i/tortoise.jpg"
+				alt="tortoise eating vegetation">
+
+			<h3>We help many animals, such as:</h3>
+			<ul>
+				<li>Raccoons</li>
+				<li>Squirrels</li>
+				<li>Fox</li>
+				<li>Birds</li>
+				<li>Horses</li>
+				<li>Deer</li>
+				<li>Pigs</li>
+				<li>Reptiles</li>
+			</ul>
+
+			<p class="action">Did you find an injured or orphaned animal?
+			Contact us to see if we can help.</p>
+		</div>
+	</main>
+
+	<footer>
+		<p>&copy; Copyright 2021. All Rights Reserved.</p>
+		<a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a>
+	</footer>
+</div>
+</body></html>
diff --git a/06/contact.html b/06/contact.html
new file mode 100644
index 0000000..6210b7b
--- /dev/null
+++ b/06/contact.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<!--
+	Student: Name Surname
+	File Name: contact.html
+	Date: 2024/09/23
+-->
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="css/styles.css">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Emblema+One&family=Lora&display=swap" rel="stylesheet">
+<title>Wild Rescues: Contact</title></head><body>
+<div id="wrapper">
+	<header>
+		<div class="tab-desk">
+			<a href="index.html">
+				<img src="i/baby-hawk.jpg" alt="rescued baby hawk">
+			</a>
+		</div>
+		<div class="mobile">
+			<h1>&#128062; Wild Rescues</h1>
+			<h3>Rescue. Rehabilitate. Release.</h3>
+		</div>
+	</header>
+
+	<nav>
+		<ul>
+			<li><a href="index.html">Home</a></li>
+			<li><a href="about.html">About Us</a></li>
+			<li><a href="partnership.html">Partnership</a></li>
+			<li><a href="gallery.html">Gallery</a></li>
+			<li><a href="faqs.html">FAQs</a></li>
+			<li><a href="contact.html">Contact</a></li>
+		</ul>
+	</nav>
+
+	<!-- Use the main area to add the main content to the webpage -->
+	<main>
+		<div id="contact">
+			<h2>You can reach us at:</h2>
+			<p class="tel-link round mobile"><a href="tel:8145558989">(814) 555-8989</a></p>
+			<p class="tab-desk">(814) 555-8989</p>
+			<p>Email: <a href="mailto:contact@wildrescues.net" class="link">
+			contact@wildrescues.net</a></p>
+			<p>Address: <a target="_blank" href="https://osm.org/go/ZGOXX6Y--"
+			class="link">Rescue Drive, Ocala, FL 34471</a></p>
+		</div>
+	</main>
+
+	<footer>
+		<p>&copy; Copyright 2021. All Rights Reserved.</p>
+		<a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a>
+	</footer>
+</div>
+</body></html>
diff --git a/06/css/styles.css b/06/css/styles.css
new file mode 100644
index 0000000..16cbf6c
--- /dev/null
+++ b/06/css/styles.css
@@ -0,0 +1,225 @@
+/*
+	Author: Name Surname
+	File Name: styles.css
+	Date: 2024/09/23
+*/
+
+/* CSS Reset */
+body,header,nav,main,footer,img,h1,h3,ul{
+	margin: 0px;
+	padding: 0px;
+	border: 0px;
+}
+
+
+/* Style rules for body and images */
+body{
+	background-color: #F6EEE4;
+}
+
+img{
+	max-width: 100%;
+	display: block;
+}
+
+/* Style rules for mobile viewport */
+
+/* Style rules to show show mobiile class and hide tab-desk class */
+.mobile{
+	display: block;
+
+}
+
+.tab-desk{
+	display: none;
+}
+
+/* Style rules for header area */
+.mobile h1,
+.mobile h3{
+	padding: 2%;
+	text-align: center;
+}
+
+.mobile h1{
+	font-family: "Emblema One",system-ui;
+	font-weight: 400;
+	font-style: normal;
+}
+
+.mobile h3{
+	font-family: "Lora",serif;
+	font-weight: 400;
+	font-style: normal;
+}
+
+/* Style rules for navigation area */
+nav{
+	background-color: #2A1F14;
+}
+
+nav ul{
+	list-style: none;
+	text-align: center;
+}
+
+nav li{
+	display: block;
+	font-size: 1.5em;
+	font-family: Geneva,Arial,sans-serif;
+	font-weight: bold;
+	border-top: 0.5px solid #F6EEE4;
+}
+
+nav li a{
+	display: block;
+	color: #F6EEE4;
+	padding-top: 0.5em;
+	padding-bottom: 0.5em;
+	padding-left: 2em;
+	padding-right: 2em;
+	text-decoration: none;
+}
+
+/* Style rules for main content */
+main{
+	padding: 2%;
+	font-family: "Lora",serif;
+	font-weight: 400;
+	font-style: normal;
+}
+
+main p{
+	font-size: 1.25em;
+}
+
+main h3{
+	padding-top: 2%;
+}
+
+main ul{
+	list-style: square;
+}
+
+/* Style rules for class and id selectors */
+.link{
+	color: #4D3319;
+	text-decoration: none;
+	font-weight: bold;
+	font-style: italic;
+}
+
+.action{
+	font-size: 1.75em;
+	font-weight: bold;
+	text-align: center;
+}
+
+.round{
+	border-radius: 6px;
+}
+
+#info ul{
+	margin-left: 10%;
+}
+
+#contact{
+	text-align: center;
+}
+
+.tel-link{
+	background-color: #2A1F14;
+	padding: 2%;
+	width: 80%;
+	margin: 0px auto 0px auto;
+}
+
+.tel-link a{
+	color: #F6EEE4;
+	text-decoration: none;
+	font-weight: bold;
+}
+
+/* Style rules for footer content */
+footer{
+	text-align: center;
+	font-size: 0.85em;
+	background-color: #2A1F14;
+	color: #F6EEE4;
+	padding-top: 1%;
+	padding-bottom: 1%;
+	padding-left: 0%;
+	padding-right: 0%;
+}
+
+footer a{
+	color: #F3E6D8;
+	text-decoration: none;
+}
+
+/* Media Query for Tablet Viewport */
+@media screen and (min-width:620px), print{
+	/* Tablet Viewport: Show tab-desk class, hide mobile class */
+	.tab-desk{
+		display: block;
+	}
+	.mobile{
+		display: none;
+	}
+
+	/* Tablet Viewport: Style rules for nav area */
+	nav li{
+		border-top: 0px;
+		display: inline-block;
+		font-size: 1.25em;
+	}
+	nav li a{
+		padding: 0.5em;
+	}
+}
+
+/* Media Query for Desktop Viewport */
+@media screen and (min-width:1000px), print{
+	/* Desktop Viewport: Style rules for nav area */
+	nav li{
+		font-size: 1.5em;
+	}
+	nav li a{
+		border-bottom: 0.5em;
+		border-left: 1.5em;
+		border-right: 1.5em;
+	}
+	nav li a:hover{
+		color: #2A1F14;
+		background-color: #F6EEE4;
+	}
+
+	/* Desktop Viewport: Style rules for main content */
+	info ul{
+		margin-left: 5%;
+	}
+}
+
+/* Media Query for Large Desktop Viewports */
+@media screen and (min-width:1921px){
+	body{
+		background: linear-gradient(#F6EEE4,#78593A);
+	}
+
+	#wrapper{
+		width: 1920px;
+		margin: 0px auto 0px auto;
+	}
+
+	main{
+		background-color: #F6EEE4;
+	}
+}
+
+/* Media Query for Print */
+@media print{
+	body{
+		background-color: #FFFFFF;
+		color: #000000;
+	}
+}
diff --git a/06/index.html b/06/index.html
new file mode 100644
index 0000000..fc4d9c3
--- /dev/null
+++ b/06/index.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<!--
+	Student: Name Surname
+	File Name: index.html
+	Date: 2024/09/23
+-->
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="css/styles.css">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Emblema+One&family=Lora&display=swap" rel="stylesheet">
+<title>Wild Rescues: Home</title></head><body>
+<div id="wrapper">
+	<header>
+		<div class="tab-desk">
+			<a href="index.html">
+				<img src="i/baby-hawk.jpg" alt="rescued baby hawk">
+			</a>
+		</div>
+		<div class="mobile">
+			<h1>&#128062; Wild Rescues</h1>
+			<h3>Rescue. Rehabilitate. Release.</h3>
+		</div>
+	</header>
+
+	<nav>
+		<ul>
+			<li><a href="index.html">Home</a></li>
+			<li><a href="about.html">About Us</a></li>
+			<li><a href="partnership.html">Partnership</a></li>
+			<li><a href="gallery.html">Gallery</a></li>
+			<li><a href="faqs.html">FAQs</a></li>
+			<li><a href="contact.html">Contact</a></li>
+		</ul>
+	</nav>
+
+	<!-- Use the main area to add the main content to the webpage -->
+	<main>
+		<div id="welcome">
+			<p>Welcome to Wild Rescues. Our mission is to rescue,
+			rehabilitate, and release wildlife back into their natural
+			environment. We are a nonprofit organization dedicated to
+			helping injured wildlife.</p>
+
+			<p>Our staff provides around-the-clock care for wildlife
+			in need. We also provide long-term care for wildlife that
+			cannot be released back into their natural environment.</p>
+
+			<p>Will you partner with us question mark We need caring
+			volunteers to help care for our animals. You can also donate,
+			become a member, or become a sponsor. Contact us today.</p>
+		</div>
+		<div id="latest">
+			<h2>Our Latest Rescue: Baby Raccoons</h2>
+			<img class="round" src="i/baby-raccoons.jpg"
+				alt="hands holding three baby raccoons">
+			<p>Our latest rescues, Fizz, Bandit, and Mohawk. These
+			three little guys were found abandoned near a home.</p>
+		</div>
+	</main>
+
+	<footer>
+		<p>&copy; Copyright 2021. All Rights Reserved.</p>
+		<a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a>
+	</footer>
+</div>
+</body></html>
diff --git a/06/question.txt b/06/question.txt
new file mode 100644
index 0000000..ad33b21
--- /dev/null
+++ b/06/question.txt
@@ -0,0 +1,22 @@
+Question:
+In step 14, you created a style rule for a gradient. Discuss
+at least three different ways this gradient could be applied.
+
+Answer:
+Some alternative ways to create this gradient would be:
+
+1. background: linear-gradient(hsl(33,50%,93%),hsl(30,35%,35%));
+
+    Using HSL colors values instead of hexadecimal color values
+
+2. background-image: src("gradient.png");
+
+    Designing a gradient image to use as the background
+
+3. background: linear-gradient(180deg,#F6EEE4,#78593A);
+
+    Specifying the rotation of the gradient to 180 degrees
+
+4. background: linear-gradient(rgb(246,238,228),rgb(120,89,58));
+
+    Using RGB colors values instead of hexadecimal color values
diff --git a/06/template.html b/06/template.html
new file mode 100644
index 0000000..593b43f
--- /dev/null
+++ b/06/template.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<!--
+	Student: Name Surname
+	File Name: template.html
+	Date: 2024/09/23
+-->
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="css/styles.css">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Emblema+One&family=Lora&display=swap" rel="stylesheet">
+<title>Wild Rescues: Template</title></head><body>
+<div id="wrapper">
+	<header>
+		<div class="tab-desk">
+			<a href="index.html">
+				<img src="i/baby-hawk.jpg" alt="rescued baby hawk">
+			</a>
+		</div>
+		<div class="mobile">
+			<h1>&#128062; Wild Rescues</h1>
+			<h3>Rescue. Rehabilitate. Release.</h3>
+		</div>
+	</header>
+
+	<nav>
+		<ul>
+			<li><a href="index.html">Home</a></li>
+			<li><a href="about.html">About Us</a></li>
+			<li><a href="partnership.html">Partnership</a></li>
+			<li><a href="gallery.html">Gallery</a></li>
+			<li><a href="faqs.html">FAQs</a></li>
+			<li><a href="contact.html">Contact</a></li>
+		</ul>
+	</nav>
+
+	<!-- Use the main area to add the main content to the webpage -->
+	<main>
+		<div>
+		</div>
+	</main>
+
+	<footer>
+		<p>&copy; Copyright 2021. All Rights Reserved.</p>
+		<a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a>
+	</footer>
+</div>
+</body></html>
author		1970-01-01 00:00:00 +0000
committer		2025-01-12 07:28:30 +0000
commit	05158207fdd9bbd1371fac856278ae3cebad5642 (patch)
tree	ec59f5bcbaabfc1d0b90a5cb4b651815b1f94f49
parent	rescue 5 (diff)
download	html-05158207fdd9bbd1371fac856278ae3cebad5642.tar html-05158207fdd9bbd1371fac856278ae3cebad5642.tar.gz html-05158207fdd9bbd1371fac856278ae3cebad5642.tar.bz2 html-05158207fdd9bbd1371fac856278ae3cebad5642.tar.xz html-05158207fdd9bbd1371fac856278ae3cebad5642.zip