rescue 5

author: 1970-01-01 00:00:00 +0000
committer: 2025-01-12 07:28:28 +0000
commit: dffb45c5515be32a7bf2a30ba19b4204d4630d61 (patch)
tree: 85d5f5f6dfa7c5a6742c1fd1ab040f2c859d09c4
parent: rescue 4 (diff)
download: html-dffb45c5515be32a7bf2a30ba19b4204d4630d61.tar
html-dffb45c5515be32a7bf2a30ba19b4204d4630d61.tar.gz
html-dffb45c5515be32a7bf2a30ba19b4204d4630d61.tar.bz2
html-dffb45c5515be32a7bf2a30ba19b4204d4630d61.tar.xz
html-dffb45c5515be32a7bf2a30ba19b4204d4630d61.zip
6 files changed, 441 insertions, 0 deletions
diff --git a/05/about.html b/05/about.html
new file mode 100644
index 0000000..d3b3958
--- /dev/null
+++ b/05/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>
+
+<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>
+
+</body></html>
diff --git a/05/contact.html b/05/contact.html
new file mode 100644
index 0000000..f4662d1
--- /dev/null
+++ b/05/contact.html
@@ -0,0 +1,55 @@
+<!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>
+
+<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"><a href="tel:8145558989">(814) 555-8989</a></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>
+
+</body></html>
diff --git a/05/css/styles.css b/05/css/styles.css
new file mode 100644
index 0000000..8261682
--- /dev/null
+++ b/05/css/styles.css
@@ -0,0 +1,158 @@
+/*
+	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;
+}
diff --git a/05/index.html b/05/index.html
new file mode 100644
index 0000000..d69c262
--- /dev/null
+++ b/05/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>
+
+<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>
+
+</body></html>
diff --git a/05/question.txt b/05/question.txt
new file mode 100644
index 0000000..83ed51e
--- /dev/null
+++ b/05/question.txt
@@ -0,0 +1,34 @@
+Question:
+You have learned how to add id and class attributes to an HTML
+element. Can an HTML element contain both an id and a class value?
+If so, provide an example of a style rule for the id and the class.
+
+Answer:
+Elements in HTML can use both a class and an id. In fact, I just
+did this during my unit 1 project. Here is the CSS I used, as
+well as an example of div elements using both a class and an id.
+
+CSS:
+.col{
+	position: fixed;
+	width: 30%;
+	height: 100%;
+	overflow-x: hidden;
+	z-index: 1;
+}
+#left{
+	left: 0;
+	padding-left: 18%;
+}
+#right{
+	right: 0;
+	padding-right: 18%;
+}
+
+HTML:
+<div class="col" id="left">
+	<p>...
+</div>
+<div class="col" id="right">
+	<p>...
+</div>
diff --git a/05/template.html b/05/template.html
new file mode 100644
index 0000000..89eef64
--- /dev/null
+++ b/05/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>
+
+<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>
+
+</body></html>
author		1970-01-01 00:00:00 +0000
committer		2025-01-12 07:28:28 +0000
commit	dffb45c5515be32a7bf2a30ba19b4204d4630d61 (patch)
tree	85d5f5f6dfa7c5a6742c1fd1ab040f2c859d09c4
parent	rescue 4 (diff)
download	html-dffb45c5515be32a7bf2a30ba19b4204d4630d61.tar html-dffb45c5515be32a7bf2a30ba19b4204d4630d61.tar.gz html-dffb45c5515be32a7bf2a30ba19b4204d4630d61.tar.bz2 html-dffb45c5515be32a7bf2a30ba19b4204d4630d61.tar.xz html-dffb45c5515be32a7bf2a30ba19b4204d4630d61.zip