diff options
Diffstat (limited to 'rescue')
83 files changed, 6953 insertions, 0 deletions
diff --git a/rescue/02/index.html b/rescue/02/index.html new file mode 100644 index 0000000..a274d18 --- /dev/null +++ b/rescue/02/index.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Student: Name Surname + File Name: index.html + Date: 2024/08/31 +--> +<html lang="en"><head><meta charset="utf-8"> +<title>Wild Rescues: Home</title></head><body> + +<header> + <h1>🐾 Wild Rescues</h1> + <h3>Rescue, Rehabilitate, Release.</h3> +</header> + +<nav> + <p>Home ◈ + About Us ◈ + Partnership ◈ + Gallery ◈ + FAQs ◈ + Contact</p> +</nav> + +<!-- Use the main area to add the main content to the webpage --> +<main> + <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> +</main> + +<footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <p>contact@wildrescues.net</p> +</footer> + +</body></html> diff --git a/rescue/02/question.txt b/rescue/02/question.txt new file mode 100644 index 0000000..3c9fd60 --- /dev/null +++ b/rescue/02/question.txt @@ -0,0 +1,8 @@ +Question: +In steps 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, and 11, you created and +validated an HTML template. What are the benefits of creating a +template prior to creating the home page? + +Answer: +Templates help to maintain consistency when designing a website. +Templates also make the creation of new web pages effortless. diff --git a/rescue/02/template.html b/rescue/02/template.html new file mode 100644 index 0000000..e510dfa --- /dev/null +++ b/rescue/02/template.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- + Student: Name Surname + File Name: template.html + Date: 2024/08/31 +--> +<html lang="en"><head><meta charset="utf-8"> +<title>Wild Rescues: Template</title></head><body> + +<header> + <h1>🐾 Wild Rescues</h1> + <h3>Rescue, Rehabilitate, Release.</h3> +</header> + +<nav> + <p>Home ◈ + About Us ◈ + Partnership ◈ + Gallery ◈ + FAQs ◈ + Contact</p> +</nav> + +<!-- Use the main area to add the main content to the webpage --> +<main> +</main> + +<footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <p>contact@wildrescues.net</p> +</footer> + +</body></html> diff --git a/rescue/03/about.html b/rescue/03/about.html new file mode 100644 index 0000000..71c78ad --- /dev/null +++ b/rescue/03/about.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Student: Name Surname + File Name: about.html + Date: 2024/08/31 +--> +<html lang="en"><head><meta charset="utf-8"> +<title>Wild Rescues: About Us</title></head><body> + +<header> + <h1>🐾 Wild Rescues</h1> + <h3>Rescue, Rehabilitate, Release.</h3> +</header> + +<nav> + <p><a href="index.html">Home</a> ◈ + <a href="about.html">About Us</a> ◈ + <a href="partnership.html">Partnership</a> ◈ + <a href="gallery.html">Gallery</a> ◈ + <a href="faqs.html">FAQs</a> ◈ + <a href="contact.html">Contact</a></p> +</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">National Wildlife + Rehabilitators Association.</a></p> + + <img src="i/tortoise.jpg" width="400" height="300" + 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>Did you find an injured or orphaned animal? Contact + us to see if we can help.</p> + </div> +</main> + +<footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/03/contact.html b/rescue/03/contact.html new file mode 100644 index 0000000..34ce830 --- /dev/null +++ b/rescue/03/contact.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- + Student: Name Surname + File Name: contact.html + Date: 2024/08/31 +--> +<html lang="en"><head><meta charset="utf-8"> +<title>Wild Rescues: Contact</title></head><body> + +<header> + <h1>🐾 Wild Rescues</h1> + <h3>Rescue, Rehabilitate, Release.</h3> +</header> + +<nav> + <p><a href="index.html">Home</a> ◈ + <a href="about.html">About Us</a> ◈ + <a href="partnership.html">Partnership</a> ◈ + <a href="gallery.html">Gallery</a> ◈ + <a href="faqs.html">FAQs</a> ◈ + <a href="contact.html">Contact</a></p> +</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>Office: (814) 555-8989</p> + <p>Email: <a href="mailto:contact@wildrescues.net"> + contact@wildrescues.net</a></p> + <p>Address: <a href="https://osm.org/go/ZGOXX6Y--" + target="_blank">Rescue Drive, Ocala, FL 34471</a></p> + </div> +</main> + +<footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/03/index.html b/rescue/03/index.html new file mode 100644 index 0000000..e0a6894 --- /dev/null +++ b/rescue/03/index.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Student: Name Surname + File Name: index.html + Date: 2024/08/31 +--> +<html lang="en"><head><meta charset="utf-8"> +<title>Wild Rescues: Home</title></head><body> + +<header> + <h1>🐾 Wild Rescues</h1> + <h3>Rescue, Rehabilitate, Release.</h3> +</header> + +<nav> + <p><a href="index.html">Home</a> ◈ + <a href="about.html">About Us</a> ◈ + <a href="partnership.html">Partnership</a> ◈ + <a href="gallery.html">Gallery</a> ◈ + <a href="faqs.html">FAQs</a> ◈ + <a href="contact.html">Contact</a></p> +</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 src="i/baby-raccoons.jpg" width="400" height="300" + 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/03/question.txt b/rescue/03/question.txt new file mode 100644 index 0000000..b262792 --- /dev/null +++ b/rescue/03/question.txt @@ -0,0 +1,9 @@ +Question: +In this assignment, you added links within the navigation element. +The navigation link text is currently within a paragraph element. Is +a paragraph element the best element for navigation links? Research to +find your answer and identify another element to use for navigation links. + +Answer: +Navigation links should be nested in the <nav> element. In this assignment +the <p> element inside of the <nav> element could/should have been omitted. diff --git a/rescue/03/template.html b/rescue/03/template.html new file mode 100644 index 0000000..bb808a6 --- /dev/null +++ b/rescue/03/template.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- + Student: Name Surname + File Name: template.html + Date: 2024/08/31 +--> +<html lang="en"><head><meta charset="utf-8"> +<title>Wild Rescues: Template</title></head><body> + +<header> + <h1>🐾 Wild Rescues</h1> + <h3>Rescue, Rehabilitate, Release.</h3> +</header> + +<nav> + <p><a href="index.html">Home</a> ◈ + <a href="about.html">About Us</a> ◈ + <a href="partnership.html">Partnership</a> ◈ + <a href="gallery.html">Gallery</a> ◈ + <a href="faqs.html">FAQs</a> ◈ + <a href="contact.html">Contact</a></p> +</nav> + +<!-- Use the main area to add the main content to the webpage --> +<main> + <div> + </div> +</main> + +<footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/04/about.html b/rescue/04/about.html new file mode 100644 index 0000000..6935864 --- /dev/null +++ b/rescue/04/about.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- + Student: Name Surname + File Name: about.html + Date: 2024/08/31 +--> +<html lang="en"><head><meta charset="utf-8"> +<link rel="stylesheet" href="css/styles.css"> +<title>Wild Rescues: About Us</title></head><body> + +<header> + <a href="index.html"> + <img src="i/baby-hawk.jpg" alt="rescued baby hawk"> + </a> +</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 class="link" href="https://www.nwrawildlife.org"> + National Wildlife Rehabilitators Association.</a> + </p> + + <img 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/04/contact.html b/rescue/04/contact.html new file mode 100644 index 0000000..b5ed9d3 --- /dev/null +++ b/rescue/04/contact.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Student: Name Surname + File Name: contact.html + Date: 2024/08/31 +--> +<html lang="en"><head><meta charset="utf-8"> +<link rel="stylesheet" href="css/styles.css"> +<title>Wild Rescues: Contact</title></head><body> + +<header> + <a href="index.html"> + <img src="i/baby-hawk.jpg" alt="rescued baby hawk"> + </a> +</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>Office: (814) 555-8989</p> + <p class="link">Email: <a href="mailto:contact@wildrescues.net"> + contact@wildrescues.net</a></p> + <p class="link">Address: <a href="https://osm.org/go/ZGOXX6Y--" + target="_blank">Rescue Drive, Ocala, FL 34471</a></p> + </div> +</main> + +<footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/04/css/styles.css b/rescue/04/css/styles.css new file mode 100644 index 0000000..f852066 --- /dev/null +++ b/rescue/04/css/styles.css @@ -0,0 +1,103 @@ +/* + Author: Name Surname + File Name: styles.css + Date: 2024/09/10 +*/ + +/* CSS Reset */ +body,header,nav,main,footer,img,h1,h3{ + 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 navigation area */ +nav{ + background-color: #2A1F14; +} + +nav ul{ + list-style: none; + margin: 0px; + text-align: center; +} + +nav li{ + display: inline-block; + font-size: 1.5em; + font-family: Geneva,Arial,sans-serif; + font-weight: bold; +} + +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: Verdana,Arial,sans-serif; +} + +main p{ + font-size: 1.25em; +} + +main h3{ + padding-top: 2%; +} + +main ul{ + list-style: square; +} + +.link{ + color: #4D3319; + text-decoration: none; + font-weight: bold; + font-style: italic; +} + +.action{ + font-size: 1.75em; + font-weight: bold; + text-align: center; +} + +#contact{ + text-align: center; +} + +/* 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/rescue/04/index.html b/rescue/04/index.html new file mode 100644 index 0000000..1ffeee3 --- /dev/null +++ b/rescue/04/index.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Student: Name Surname + File Name: index.html + Date: 2024/08/31 +--> +<html lang="en"><head><meta charset="utf-8"> +<link rel="stylesheet" href="css/styles.css"> +<title>Wild Rescues: Home</title></head><body> + +<header> + <a href="index.html"> + <img src="i/baby-hawk.jpg" alt="rescued baby hawk"> + </a> +</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 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/04/question.txt b/rescue/04/question.txt new file mode 100644 index 0000000..38d8f13 --- /dev/null +++ b/rescue/04/question.txt @@ -0,0 +1,7 @@ +Question: +In this assignment, you specified several hexadecimal color values. Find the +RGB and HSL color value codes for two hexadecimal colors used in this lab. + +Answer: +#F6EEE4 is equivalent to rgb(246,238,228) in RGB and hsl(33.3,50%,92.9%) in HSL. +#2A1F14 is equivalent to rgb(42,31,20) in RGB and hsl(30,35.5%,12.2%) in HSL. diff --git a/rescue/04/template.html b/rescue/04/template.html new file mode 100644 index 0000000..bfac2c1 --- /dev/null +++ b/rescue/04/template.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- + Student: Name Surname + File Name: template.html + Date: 2024/08/31 +--> +<html lang="en"><head><meta charset="utf-8"> +<link rel="stylesheet" href="css/styles.css"> +<title>Wild Rescues: Template</title></head><body> + +<header> + <a href="index.html"> + <img src="i/baby-hawk.jpg" alt="rescued baby hawk"> + </a> +</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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/05/about.html b/rescue/05/about.html new file mode 100644 index 0000000..d3b3958 --- /dev/null +++ b/rescue/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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/05/contact.html b/rescue/05/contact.html new file mode 100644 index 0000000..f4662d1 --- /dev/null +++ b/rescue/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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/05/css/styles.css b/rescue/05/css/styles.css new file mode 100644 index 0000000..8261682 --- /dev/null +++ b/rescue/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/rescue/05/index.html b/rescue/05/index.html new file mode 100644 index 0000000..d69c262 --- /dev/null +++ b/rescue/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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/05/question.txt b/rescue/05/question.txt new file mode 100644 index 0000000..83ed51e --- /dev/null +++ b/rescue/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/rescue/05/template.html b/rescue/05/template.html new file mode 100644 index 0000000..89eef64 --- /dev/null +++ b/rescue/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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> +</footer> + +</body></html> diff --git a/rescue/06/about.html b/rescue/06/about.html new file mode 100644 index 0000000..ee3288f --- /dev/null +++ b/rescue/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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/06/contact.html b/rescue/06/contact.html new file mode 100644 index 0000000..6210b7b --- /dev/null +++ b/rescue/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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/06/css/styles.css b/rescue/06/css/styles.css new file mode 100644 index 0000000..16cbf6c --- /dev/null +++ b/rescue/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/rescue/06/index.html b/rescue/06/index.html new file mode 100644 index 0000000..fc4d9c3 --- /dev/null +++ b/rescue/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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/06/question.txt b/rescue/06/question.txt new file mode 100644 index 0000000..ad33b21 --- /dev/null +++ b/rescue/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/rescue/06/template.html b/rescue/06/template.html new file mode 100644 index 0000000..593b43f --- /dev/null +++ b/rescue/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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/07/about.html b/rescue/07/about.html new file mode 100644 index 0000000..03c0c88 --- /dev/null +++ b/rescue/07/about.html @@ -0,0 +1,81 @@ +<!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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/07/contact.html b/rescue/07/contact.html new file mode 100644 index 0000000..7bfa0bf --- /dev/null +++ b/rescue/07/contact.html @@ -0,0 +1,60 @@ +<!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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/07/css/styles.css b/rescue/07/css/styles.css new file mode 100644 index 0000000..5580dad --- /dev/null +++ b/rescue/07/css/styles.css @@ -0,0 +1,270 @@ +/* + Author: Name Surname + File Name: styles.css + Date: 2024/09/23 +*/ + +/* CSS Reset */ +body,header,nav,main,footer,img,h1,h3,ul, +aside,figure,figcaption{ + 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; +} + +aside{ + text-align: center; + font-size: 1.5em; + font-weight: bold; + text-shadow: 4px 4px 10px #C5A687; +} + +figure{ + border: 4px solid #2A1F14; + box-shadow: 6px 6px 10px #C5A687; + max-width: 400px; + margin: 2% auto; +} + +figcaption{ + padding: 2%; + border-top: 4px solid #2A1F14; +} + +#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; + } + + .grid{ + display: grid; + grid-template-columns: auto auto; + grid-gap: 10px; + } + aside{ + grid-column: 1 / span 2; + } +} + +/* 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; + opacity: 0.5; + } + + /* Desktop Viewport: Style rules for main content */ + info ul{ + margin-left: 5%; + } + + .grid{ + grid-template-columns: auto auto auto; + grid-gap: 30px; + } + aside{ + grid-column: 1 / span 3; + font-size: 2em; + } +} + +/* 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; + } + + .grid{ + grid-template-columns: auto auto auto auto; + } + aside{ + grid-column: 1 / span 4; + font-size: 3em; + } +} + +/* Media Query for Print */ +@media print{ + body{ + background-color: #FFFFFF; + color: #000000; + } +} diff --git a/rescue/07/gallery.html b/rescue/07/gallery.html new file mode 100644 index 0000000..2432bd4 --- /dev/null +++ b/rescue/07/gallery.html @@ -0,0 +1,122 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: gallery.html + Date: 2024/10/03 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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: Gallery</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>🐾 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 class="grid"> + <aside> + <p>Meet our friends in need.</p> + </aside> + <figure> <!-- Figure Element 1 --> + <img src="i/blind-deer.jpg" alt="blind deer"> + <figcaption>Russ is a blind deer. He was brought + to us by a hunter who found him wandering in + circles.</figcaption> + </figure> + <figure> <!-- Figure Element 2 --> + <img src="i/baby-squirrel.jpg" + alt="baby squirrel on a tree house"> + <figcaption>Meet Nugget. He is learning how to + climb trees and will be released in a few more + weeks.</figcaption> + </figure> + <figure> <!-- Figure Element 3 --> + <img src="i/cow.jpg" alt="face of a cow"> + <figcaption>This is Ellie. She was neglected by + her owner and malnourished when she was rescued. + </figcaption> + </figure> + <figure> <!-- Figure Element 4 --> + <img src="i/goat.jpg" + alt="goat laying in the grass"> + <figcaption>Say hi to Vinny. His back legs were + injured, making it difficult for him to get + around.</figcaption> + </figure> + <figure> <!-- Figure Element 5 --> + <img src="i/pig.jpg" alt="pig standing"> + <figcaption>Rosie was just a baby when she + arrived. Now she has babies.</figcaption> + </figure> + <figure> <!-- Figure Element 6 --> + <img src="i/baby-pig.jpg" alt="pig standing"> + <figcaption>Squirt is one of Rosie’s babies. + </figcaption> + </figure> + <figure> <!-- Figure Element 7 --> + <img src="i/horse.jpg" alt="face of a horse"> + <figcaption>Muffin has come a long way. She was + very thin when she was rescued.</figcaption> + </figure> + <figure> <!-- Figure Element 8 --> + <img src="i/hawk.jpg" alt="baby hawk"> + <figcaption>Poor Harley was rescued when he was + just three weeks old. He is getting big and will + be released in about a month.</figcaption> + </figure> + <figure> <!-- Figure Element 9 --> + <img src="i/bearded-dragon.jpg" alt="bearded dragon"> + <figcaption>Gizmo was abandoned by his owner and + is available for adoption.</figcaption> + </figure> + <figure> <!-- Figure Element 10 --> + <img src="i/bird.jpg" alt="cockatoo"> + <figcaption>Peaches was also abandoned by his + owner. He loves to talk.</figcaption> + </figure> + <figure> <!-- Figure Element 11 --> + <img src="i/hedgehog.jpg" alt="hedgehog"> + <figcaption>Sonny was just a baby when he was + brought to us for rehabilitation.</figcaption> + </figure> + <figure> <!-- Figure Element 12 --> + <img src="i/tortoise-pyramid.jpg" + alt="tortoise with shell pyramiding"> + <figcaption>Poor Victor has "shell pyramiding," + a form of bone disease.</figcaption> + </figure> + </main> + + <footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/07/index.html b/rescue/07/index.html new file mode 100644 index 0000000..a06d13c --- /dev/null +++ b/rescue/07/index.html @@ -0,0 +1,72 @@ +<!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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/07/question.txt b/rescue/07/question.txt new file mode 100644 index 0000000..cafb8ea --- /dev/null +++ b/rescue/07/question.txt @@ -0,0 +1,32 @@ +Question: +In this assignment, you created style rules for the aside, +figure, and figcaption elements. Discuss at least three +different declarations you would use to improve the +appearance of these elements. + +Answer: + +1. Shrink the figure element border: +figure{ + border: 2px solid #2A1F14; +} + +2. Remove the text shadow from the figcaption element: +figcaption{ + text-shadow: 0px 0px 0px #000000; +} + +3. Shrink the figcaption element top border: +figcaption{ + border-top: 3px solid #2A1F14; +} + +4. Add a subtle padding to the figure element: +figure{ + padding: 0.3%; +} + +5. Use a better looking font for the aside element: +aside{ + font-family: "Emblema One",system-ui; +} diff --git a/rescue/07/template.html b/rescue/07/template.html new file mode 100644 index 0000000..d9708c5 --- /dev/null +++ b/rescue/07/template.html @@ -0,0 +1,53 @@ +<!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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/08/about.html b/rescue/08/about.html new file mode 100644 index 0000000..4d2832e --- /dev/null +++ b/rescue/08/about.html @@ -0,0 +1,81 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: about.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/08/contact.html b/rescue/08/contact.html new file mode 100644 index 0000000..f9413ca --- /dev/null +++ b/rescue/08/contact.html @@ -0,0 +1,99 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: contact.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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> + <div id="form"> + <h2>Complete the form below and we will contact you soon.</h2> + <form class="form-grid"><!-- Start Form --> + <fieldset> + <legend>Contact Information</legend> + <label for="fName">First Name:</label> + <input type="text" name="fName" id="fName"> + <label for="lName">Last Name:</label> + <input type="text" name="lName" id="lName"> + <label for="bName">Name of Business:</label> + <input type="text" name="bName" id="bName"> + <label for="email">Email:</label> + <input type="email" name="email" id="email"> + <label for="phone">Phone:</label> + <input type="tel" name="phone" id="phone"> + </fieldset> + <fieldset> + <legend>Additional Information</legend> + <p>would like more information about:</p> + <label for="vol"><input type="radio" name="info" + id="vol" value="Volunteering"> + Volunteering</label> + <label for="sponsor"><input type="radio" name="info" + id="sponsor" value="Sponsorship Opportunities"> + Sponsorship Opportunities</label> + <label for="wild"><input type="radio" name="info" + id="wild" value="Wildlife"> + Wildlife</label> + <label for="other"><input type="radio" name="info" + id="other" value="Other"> + Other, please specify below</label> + <label for="questions">What questions do you + have for us?</label> + <textarea name="questions" id="questions" rows="5"> + </textarea> + </fieldset> + <input type="submit" id="submit" value="Submit" class="btn"> + </form> + </div> + </main> + + <footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/08/css/styles.css b/rescue/08/css/styles.css new file mode 100644 index 0000000..8abf312 --- /dev/null +++ b/rescue/08/css/styles.css @@ -0,0 +1,345 @@ +/* + Author: Name Surname + File Name: styles.css + Date: 2024/10/21 +*/ + +/* CSS Reset */ +body,header,nav,main,footer,img,h1,h3,ul, +aside,figure,figcaption{ + 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,.mobile-tablet{ + display: block; +} + +.tab-desk,.desktop{ + 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; +} + +aside{ + text-align: center; + font-size: 1.5em; + font-weight: bold; + text-shadow: 4px 4px 10px #C5A687; +} + +figure{ + border: 4px solid #2A1F14; + box-shadow: 6px 6px 10px #C5A687; + max-width: 400px; + margin: 2% auto; +} + +figcaption{ + padding: 2%; + border-top: 4px solid #2A1F14; +} + +#info ul{ + margin-left: 10%; +} + +#contact,#form h2{ + 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 form elements */ +fieldset,input,textarea{ + margin-bottom: 2%; +} + +fieldset legend{ + font-weight: bold; + font-size: 1.25em; +} + +label{ + display: block; + padding-top: 2%; +} + +form #submit{ + margin: 0px auto 0px auto; + display: block; + padding: 2%; + background-color: #78593A; + color: #F6EEE4; + font-size: 1.25em; + border-radius: 10px; +} + +/* 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; + } + + .grid{ + display: grid; + grid-template-columns: auto auto; + grid-gap: 10px; + } + aside{ + grid-column: 1 / span 2; + } + + /* Tablet Viewport: Style rule for form element */ + form{ + width: 70%; + margin: 0px auto 0px auto; + } +} + +/* Media Query for Desktop Viewport */ +@media screen and (min-width:1000px),print{ + /* Desktop Viewport: Show desktop class, hide mobile-tablet class. */ + .desktop{ + display: inline; + } + .mobile-tablet{ + display: none; + } + + /* 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; + opacity: 0.5; + } + + /* Desktop Viewport: Style rules for main content */ + info ul{ + margin-left: 5%; + } + + .grid{ + grid-template-columns: auto auto auto; + grid-gap: 30px; + } + aside{ + grid-column: 1 / span 3; + font-size: 2em; + } + + /* Style rules for table */ + table{ + border: 1px solid #2A1F14; + border-collapse: collapse; + margin: 0px auto 0px auto; + } + caption{ + font-size: 1.5em; + font-weight: bold; + padding: 1%; + } + th,td{ + border: 1px solid #2A1F14; + padding: 1%; + } + th{ + background-color: #2A1F14; + color: #FFFFFF; + font-size: 1.15em; + } + tr:nth-child(odd){ + background-color: #DECCBA; + } + /* Desktop Viewport: Style rules for form elements */ + form{ + width: auto; + } + .form-grid{ + display: grid; + grid-template-columns: auto auto; + grid-gap: 20px; + } + .btn{ + grid-column: 1 / span 2; + } +} + +/* 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; + } + + .grid{ + grid-template-columns: auto auto auto auto; + } + aside{ + grid-column: 1 / span 4; + font-size: 3em; + } +} + +/* Media Query for Print */ +@media print{ + body{ + background-color: #FFFFFF; + color: #000000; + } +} diff --git a/rescue/08/gallery.html b/rescue/08/gallery.html new file mode 100644 index 0000000..01c11ec --- /dev/null +++ b/rescue/08/gallery.html @@ -0,0 +1,122 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: gallery.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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: Gallery</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>🐾 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 class="grid"> + <aside> + <p>Meet our friends in need.</p> + </aside> + <figure> <!-- Figure Element 1 --> + <img src="i/blind-deer.jpg" alt="blind deer"> + <figcaption>Russ is a blind deer. He was brought + to us by a hunter who found him wandering in + circles.</figcaption> + </figure> + <figure> <!-- Figure Element 2 --> + <img src="i/baby-squirrel.jpg" + alt="baby squirrel on a tree house"> + <figcaption>Meet Nugget. He is learning how to + climb trees and will be released in a few more + weeks.</figcaption> + </figure> + <figure> <!-- Figure Element 3 --> + <img src="i/cow.jpg" alt="face of a cow"> + <figcaption>This is Ellie. She was neglected by + her owner and malnourished when she was rescued. + </figcaption> + </figure> + <figure> <!-- Figure Element 4 --> + <img src="i/goat.jpg" + alt="goat laying in the grass"> + <figcaption>Say hi to Vinny. His back legs were + injured, making it difficult for him to get + around.</figcaption> + </figure> + <figure> <!-- Figure Element 5 --> + <img src="i/pig.jpg" alt="pig standing"> + <figcaption>Rosie was just a baby when she + arrived. Now she has babies.</figcaption> + </figure> + <figure> <!-- Figure Element 6 --> + <img src="i/baby-pig.jpg" alt="pig standing"> + <figcaption>Squirt is one of Rosie’s babies. + </figcaption> + </figure> + <figure> <!-- Figure Element 7 --> + <img src="i/horse.jpg" alt="face of a horse"> + <figcaption>Muffin has come a long way. She was + very thin when she was rescued.</figcaption> + </figure> + <figure> <!-- Figure Element 8 --> + <img src="i/hawk.jpg" alt="baby hawk"> + <figcaption>Poor Harley was rescued when he was + just three weeks old. He is getting big and will + be released in about a month.</figcaption> + </figure> + <figure> <!-- Figure Element 9 --> + <img src="i/bearded-dragon.jpg" alt="bearded dragon"> + <figcaption>Gizmo was abandoned by his owner and + is available for adoption.</figcaption> + </figure> + <figure> <!-- Figure Element 10 --> + <img src="i/bird.jpg" alt="cockatoo"> + <figcaption>Peaches was also abandoned by his + owner. He loves to talk.</figcaption> + </figure> + <figure> <!-- Figure Element 11 --> + <img src="i/hedgehog.jpg" alt="hedgehog"> + <figcaption>Sonny was just a baby when he was + brought to us for rehabilitation.</figcaption> + </figure> + <figure> <!-- Figure Element 12 --> + <img src="i/tortoise-pyramid.jpg" + alt="tortoise with shell pyramiding"> + <figcaption>Poor Victor has "shell pyramiding," + a form of bone disease.</figcaption> + </figure> + </main> + + <footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/08/index.html b/rescue/08/index.html new file mode 100644 index 0000000..3ebb37b --- /dev/null +++ b/rescue/08/index.html @@ -0,0 +1,72 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: index.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/08/partnership.html b/rescue/08/partnership.html new file mode 100644 index 0000000..1cf7678 --- /dev/null +++ b/rescue/08/partnership.html @@ -0,0 +1,134 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: partnership.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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: Partnership</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>🐾 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> + <h2>We are grateful for the support from our community partners. + We have many sponsorship opportunities.</h2> + <div class="mobile-tablet"> + <h3>Sponsorship Levels.</h3> + <p>Green: $200.</p> + <p>Blue: $400.</p> + <p>Red: $600.</p> + <p>Purple: $800.</p> + <p>Silver: $1,000.</p> + <p>Gold: $1,500.</p> + <p>Each sponsorship supports our animals and operations. + Business recognition is given at every sponsorship level. + Contact us today to become a sponsor.</p> + </div> + <div id="partner" class="desktop"> + <table> + <caption>Sponsorship Opportunities.</caption> + <tr><!-- Row 1 --> + <th>Sponsorship Level</th> + <th>Dollar Amount</th> + <th>Details</th> + <th>Sponsorship Benefits</th> + </tr> + <tr><!-- Row 2 --> + <td>Green</td> + <td>$200</td> + <td>The green sponsorship helps us maintain + green pastures for our grazing friends.</td> + <td>Recognition on our website.</td> + </tr> + <tr><!-- Row 3 --> + <td>Blue</td> + <td>$400</td> + <td>The blue sponsorship helps us provide food + for the animals.</td> + <td>Recognition on our website and our brochure. + </td> + </tr> + <tr><!-- Row 4 --> + <td>Red</td> + <td>$600</td> + <td>The red sponsorship helps us provide medical + care for the animals.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our + facility.</td> + </tr> + <tr><!-- Row 5 --> + <td>Purple</td> + <td>$800</td> + <td>The purple sponsorship helps us maintain homes + for the animals.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual + community event.</td> + </tr> + <tr><!-- Row 6 --> + <td>Silver</td> + <td>$1,000</td> + <td>The silver sponsorship supports our monthly + expenses.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual community + event. Recognition plaque with business name prominently + displayed within the facility.</td> + </tr> + <tr><!-- Row 7 --> + <td>Gold</td> + <td>$1,500</td> + <td>The gold sponsorship supports our operation costs.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual community + event. Recognition plaque with business name prominently + displayed within the facility. Display table at the + annual community event. Recognition in all media + releases.</td> + </tr> + </table> + + </div> + </main> + + <footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/08/question.txt b/rescue/08/question.txt new file mode 100644 index 0000000..14d0c36 --- /dev/null +++ b/rescue/08/question.txt @@ -0,0 +1,12 @@ +Question: +Research the date type input control. Is this input type +supported by all major browsers? Note your findings. + +Answer: +It seems to be pretty widely supported by mainstream browsers, +though some features aren't fully implemented in certain browsers. + +Sources: +1. https://caniuse.com/input-datetime +2. https://www.w3schools.com/TAGS/att_input_type_date.asp +3. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#browser_compatibility diff --git a/rescue/08/template.html b/rescue/08/template.html new file mode 100644 index 0000000..38a5522 --- /dev/null +++ b/rescue/08/template.html @@ -0,0 +1,53 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: template.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/09/about.html b/rescue/09/about.html new file mode 100644 index 0000000..99f84b2 --- /dev/null +++ b/rescue/09/about.html @@ -0,0 +1,91 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: about.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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> + + <p>Watch the video below to meet our new, rescued friends.</p> + + <video controls poster="i/baby-hawk.jpg"> + <source src="media/wildrescues.mp4" type="video/mp4"> + <source src="media/wildrescues.webm" type="video/webm"> + <track src="media/captions.vtt" kind="captions" + srclang="en" label="English"> + <track src="media/descriptions.vtt" kind="descriptions" + srclang="en" label="English"> + <p>The video can't be loaded. Try using this website + with a different web browser</p> + </video> + + <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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/09/contact.html b/rescue/09/contact.html new file mode 100644 index 0000000..f9413ca --- /dev/null +++ b/rescue/09/contact.html @@ -0,0 +1,99 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: contact.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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> + <div id="form"> + <h2>Complete the form below and we will contact you soon.</h2> + <form class="form-grid"><!-- Start Form --> + <fieldset> + <legend>Contact Information</legend> + <label for="fName">First Name:</label> + <input type="text" name="fName" id="fName"> + <label for="lName">Last Name:</label> + <input type="text" name="lName" id="lName"> + <label for="bName">Name of Business:</label> + <input type="text" name="bName" id="bName"> + <label for="email">Email:</label> + <input type="email" name="email" id="email"> + <label for="phone">Phone:</label> + <input type="tel" name="phone" id="phone"> + </fieldset> + <fieldset> + <legend>Additional Information</legend> + <p>would like more information about:</p> + <label for="vol"><input type="radio" name="info" + id="vol" value="Volunteering"> + Volunteering</label> + <label for="sponsor"><input type="radio" name="info" + id="sponsor" value="Sponsorship Opportunities"> + Sponsorship Opportunities</label> + <label for="wild"><input type="radio" name="info" + id="wild" value="Wildlife"> + Wildlife</label> + <label for="other"><input type="radio" name="info" + id="other" value="Other"> + Other, please specify below</label> + <label for="questions">What questions do you + have for us?</label> + <textarea name="questions" id="questions" rows="5"> + </textarea> + </fieldset> + <input type="submit" id="submit" value="Submit" class="btn"> + </form> + </div> + </main> + + <footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/09/css/styles.css b/rescue/09/css/styles.css new file mode 100644 index 0000000..90196dc --- /dev/null +++ b/rescue/09/css/styles.css @@ -0,0 +1,345 @@ +/* + Author: Name Surname + File Name: styles.css + Date: 2024/10/21 +*/ + +/* CSS Reset */ +body,header,nav,main,footer,img,h1,h3,ul,aside,figure, +figcaption,video{ + margin: 0px; + padding: 0px; + border: 0px; +} + +/* Style rules for body and images */ +body{ + background-color: #F6EEE4; +} + +img,video{ + max-width: 100%; + display: block; +} + +/* Style rules for mobile viewport */ + +/* Style rules to show show mobiile class and hide tab-desk class */ +.mobile,.mobile-tablet{ + display: block; +} + +.tab-desk,.desktop{ + 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; +} + +aside{ + text-align: center; + font-size: 1.5em; + font-weight: bold; + text-shadow: 4px 4px 10px #C5A687; +} + +figure{ + border: 4px solid #2A1F14; + box-shadow: 6px 6px 10px #C5A687; + max-width: 400px; + margin: 2% auto; +} + +figcaption{ + padding: 2%; + border-top: 4px solid #2A1F14; +} + +#info ul{ + margin-left: 10%; +} + +#contact,#form h2{ + 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 form elements */ +fieldset,input,textarea{ + margin-bottom: 2%; +} + +fieldset legend{ + font-weight: bold; + font-size: 1.25em; +} + +label{ + display: block; + padding-top: 2%; +} + +form #submit{ + margin: 0px auto 0px auto; + display: block; + padding: 2%; + background-color: #78593A; + color: #F6EEE4; + font-size: 1.25em; + border-radius: 10px; +} + +/* 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; + } + + .grid{ + display: grid; + grid-template-columns: auto auto; + grid-gap: 10px; + } + aside{ + grid-column: 1 / span 2; + } + + /* Tablet Viewport: Style rule for form element */ + form{ + width: 70%; + margin: 0px auto 0px auto; + } +} + +/* Media Query for Desktop Viewport */ +@media screen and (min-width:1000px),print{ + /* Desktop Viewport: Show desktop class, hide mobile-tablet class. */ + .desktop{ + display: inline; + } + .mobile-tablet{ + display: none; + } + + /* 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; + opacity: 0.5; + } + + /* Desktop Viewport: Style rules for main content */ + info ul{ + margin-left: 5%; + } + + .grid{ + grid-template-columns: auto auto auto; + grid-gap: 30px; + } + aside{ + grid-column: 1 / span 3; + font-size: 2em; + } + + /* Style rules for table */ + table{ + border: 1px solid #2A1F14; + border-collapse: collapse; + margin: 0px auto 0px auto; + } + caption{ + font-size: 1.5em; + font-weight: bold; + padding: 1%; + } + th,td{ + border: 1px solid #2A1F14; + padding: 1%; + } + th{ + background-color: #2A1F14; + color: #FFFFFF; + font-size: 1.15em; + } + tr:nth-child(odd){ + background-color: #DECCBA; + } + /* Desktop Viewport: Style rules for form elements */ + form{ + width: auto; + } + .form-grid{ + display: grid; + grid-template-columns: auto auto; + grid-gap: 20px; + } + .btn{ + grid-column: 1 / span 2; + } +} + +/* 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; + } + + .grid{ + grid-template-columns: auto auto auto auto; + } + aside{ + grid-column: 1 / span 4; + font-size: 3em; + } +} + +/* Media Query for Print */ +@media print{ + body{ + background-color: #FFFFFF; + color: #000000; + } +} diff --git a/rescue/09/gallery.html b/rescue/09/gallery.html new file mode 100644 index 0000000..01c11ec --- /dev/null +++ b/rescue/09/gallery.html @@ -0,0 +1,122 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: gallery.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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: Gallery</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>🐾 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 class="grid"> + <aside> + <p>Meet our friends in need.</p> + </aside> + <figure> <!-- Figure Element 1 --> + <img src="i/blind-deer.jpg" alt="blind deer"> + <figcaption>Russ is a blind deer. He was brought + to us by a hunter who found him wandering in + circles.</figcaption> + </figure> + <figure> <!-- Figure Element 2 --> + <img src="i/baby-squirrel.jpg" + alt="baby squirrel on a tree house"> + <figcaption>Meet Nugget. He is learning how to + climb trees and will be released in a few more + weeks.</figcaption> + </figure> + <figure> <!-- Figure Element 3 --> + <img src="i/cow.jpg" alt="face of a cow"> + <figcaption>This is Ellie. She was neglected by + her owner and malnourished when she was rescued. + </figcaption> + </figure> + <figure> <!-- Figure Element 4 --> + <img src="i/goat.jpg" + alt="goat laying in the grass"> + <figcaption>Say hi to Vinny. His back legs were + injured, making it difficult for him to get + around.</figcaption> + </figure> + <figure> <!-- Figure Element 5 --> + <img src="i/pig.jpg" alt="pig standing"> + <figcaption>Rosie was just a baby when she + arrived. Now she has babies.</figcaption> + </figure> + <figure> <!-- Figure Element 6 --> + <img src="i/baby-pig.jpg" alt="pig standing"> + <figcaption>Squirt is one of Rosie’s babies. + </figcaption> + </figure> + <figure> <!-- Figure Element 7 --> + <img src="i/horse.jpg" alt="face of a horse"> + <figcaption>Muffin has come a long way. She was + very thin when she was rescued.</figcaption> + </figure> + <figure> <!-- Figure Element 8 --> + <img src="i/hawk.jpg" alt="baby hawk"> + <figcaption>Poor Harley was rescued when he was + just three weeks old. He is getting big and will + be released in about a month.</figcaption> + </figure> + <figure> <!-- Figure Element 9 --> + <img src="i/bearded-dragon.jpg" alt="bearded dragon"> + <figcaption>Gizmo was abandoned by his owner and + is available for adoption.</figcaption> + </figure> + <figure> <!-- Figure Element 10 --> + <img src="i/bird.jpg" alt="cockatoo"> + <figcaption>Peaches was also abandoned by his + owner. He loves to talk.</figcaption> + </figure> + <figure> <!-- Figure Element 11 --> + <img src="i/hedgehog.jpg" alt="hedgehog"> + <figcaption>Sonny was just a baby when he was + brought to us for rehabilitation.</figcaption> + </figure> + <figure> <!-- Figure Element 12 --> + <img src="i/tortoise-pyramid.jpg" + alt="tortoise with shell pyramiding"> + <figcaption>Poor Victor has "shell pyramiding," + a form of bone disease.</figcaption> + </figure> + </main> + + <footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/09/index.html b/rescue/09/index.html new file mode 100644 index 0000000..3ebb37b --- /dev/null +++ b/rescue/09/index.html @@ -0,0 +1,72 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: index.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/09/media/captions.vtt b/rescue/09/media/captions.vtt new file mode 100644 index 0000000..6e49237 --- /dev/null +++ b/rescue/09/media/captions.vtt @@ -0,0 +1,31 @@ +WEBVTT + +NOTE +Captions for Wild Rescues +Student Name: Name Surname +File Name: captions.vtt +Date: 2024/10/28 + +1 +00:03.200 --> 00:07.200 +These baby raccoons were found abandoned near a home. + +2 +00:08.900 --> 00:11.700 +Nugget is learning how to climb trees. + +3 +00:13.800 --> 00:16.500 +Princess was neglected by her owner. + +4 +00:18.900 --> 00:20.500 +Sox is an orphan. + +5 +00:24.000 --> 00:26.000 +Frank was found abandoned. + +6 +00:29.000 --> 00:31.500 +Prince’s hooves are in bad shape. diff --git a/rescue/09/media/descriptions.vtt b/rescue/09/media/descriptions.vtt new file mode 100644 index 0000000..3cb416c --- /dev/null +++ b/rescue/09/media/descriptions.vtt @@ -0,0 +1,31 @@ +WEBVTT + +NOTE +Descriptions for Wild Rescues +Student Name: Name Surname +File Name: descriptions.vtt +Date: 2024/10/28 + +1 +00:03.200 --> 00:07.200 +Three baby racoons held by human hands. + +2 +00:08.900 --> 00:11.700 +Baby squirrel on a wooden home on a tree. + +3 +00:13.800 --> 00:16.500 +Face of a minature horse. + +4 +00:18.900 --> 00:20.500 +Small goat. + +5 +00:24.000 --> 00:26.000 +Pigeon standing on a hand. + +6 +00:29.000 --> 00:31.500 +Minature horse standing in its pen. diff --git a/rescue/09/partnership.html b/rescue/09/partnership.html new file mode 100644 index 0000000..1cf7678 --- /dev/null +++ b/rescue/09/partnership.html @@ -0,0 +1,134 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: partnership.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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: Partnership</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>🐾 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> + <h2>We are grateful for the support from our community partners. + We have many sponsorship opportunities.</h2> + <div class="mobile-tablet"> + <h3>Sponsorship Levels.</h3> + <p>Green: $200.</p> + <p>Blue: $400.</p> + <p>Red: $600.</p> + <p>Purple: $800.</p> + <p>Silver: $1,000.</p> + <p>Gold: $1,500.</p> + <p>Each sponsorship supports our animals and operations. + Business recognition is given at every sponsorship level. + Contact us today to become a sponsor.</p> + </div> + <div id="partner" class="desktop"> + <table> + <caption>Sponsorship Opportunities.</caption> + <tr><!-- Row 1 --> + <th>Sponsorship Level</th> + <th>Dollar Amount</th> + <th>Details</th> + <th>Sponsorship Benefits</th> + </tr> + <tr><!-- Row 2 --> + <td>Green</td> + <td>$200</td> + <td>The green sponsorship helps us maintain + green pastures for our grazing friends.</td> + <td>Recognition on our website.</td> + </tr> + <tr><!-- Row 3 --> + <td>Blue</td> + <td>$400</td> + <td>The blue sponsorship helps us provide food + for the animals.</td> + <td>Recognition on our website and our brochure. + </td> + </tr> + <tr><!-- Row 4 --> + <td>Red</td> + <td>$600</td> + <td>The red sponsorship helps us provide medical + care for the animals.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our + facility.</td> + </tr> + <tr><!-- Row 5 --> + <td>Purple</td> + <td>$800</td> + <td>The purple sponsorship helps us maintain homes + for the animals.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual + community event.</td> + </tr> + <tr><!-- Row 6 --> + <td>Silver</td> + <td>$1,000</td> + <td>The silver sponsorship supports our monthly + expenses.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual community + event. Recognition plaque with business name prominently + displayed within the facility.</td> + </tr> + <tr><!-- Row 7 --> + <td>Gold</td> + <td>$1,500</td> + <td>The gold sponsorship supports our operation costs.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual community + event. Recognition plaque with business name prominently + displayed within the facility. Display table at the + annual community event. Recognition in all media + releases.</td> + </tr> + </table> + + </div> + </main> + + <footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/09/question.txt b/rescue/09/question.txt new file mode 100644 index 0000000..ad6b8ca --- /dev/null +++ b/rescue/09/question.txt @@ -0,0 +1,24 @@ +Question: +In this assignment, you added a video element and made it +accessible by including captions and descriptions files. +Is it possible to style captions? Research to find your +answer and include an example of your findings. + +Answer: +Yes it is possable to style video captions. This is +done from the .vtt file or via an external CSS file. + +.vtt example: + +6 +00:29.000 --> 00:31.500 position:64%,line-right align:center size:32% +Prince’s hooves are in <b>bad</b> shape. + + +CSS example: + +::cue{ + color: #EEBB99; + background: #000000; + font-family: sans-serif; +} diff --git a/rescue/09/template.html b/rescue/09/template.html new file mode 100644 index 0000000..38a5522 --- /dev/null +++ b/rescue/09/template.html @@ -0,0 +1,53 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: template.html + Date: 2024/10/21 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>🐾 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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +</body></html> diff --git a/rescue/10/about.html b/rescue/10/about.html new file mode 100644 index 0000000..f4cce2d --- /dev/null +++ b/rescue/10/about.html @@ -0,0 +1,107 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: about.html + Date: 2024/11/18 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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> + + <p>Watch the video below to meet our new, rescued friends.</p> + + <video controls poster="i/baby-hawk.jpg"> + <source src="media/wildrescues.mp4" type="video/mp4"> + <source src="media/wildrescues.webm" type="video/webm"> + <track src="media/captions.vtt" kind="captions" + srclang="en" label="English"> + <track src="media/descriptions.vtt" kind="descriptions" + srclang="en" label="English"> + <p>The video can't be loaded. Try using this website + with a different web browser</p> + </video> + + <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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/10/contact.html b/rescue/10/contact.html new file mode 100644 index 0000000..4f88f01 --- /dev/null +++ b/rescue/10/contact.html @@ -0,0 +1,115 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: contact.html + Date: 2024/11/18 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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> + <div id="form"> + <h2>Complete the form below and we will contact you soon.</h2> + <form class="form-grid"><!-- Start Form --> + <fieldset> + <legend>Contact Information</legend> + <label for="fName">First Name:</label> + <input type="text" name="fName" id="fName"> + <label for="lName">Last Name:</label> + <input type="text" name="lName" id="lName"> + <label for="bName">Name of Business:</label> + <input type="text" name="bName" id="bName"> + <label for="email">Email:</label> + <input type="email" name="email" id="email"> + <label for="phone">Phone:</label> + <input type="tel" name="phone" id="phone"> + </fieldset> + <fieldset> + <legend>Additional Information</legend> + <p>would like more information about:</p> + <label for="vol"><input type="radio" name="info" + id="vol" value="Volunteering"> + Volunteering</label> + <label for="sponsor"><input type="radio" name="info" + id="sponsor" value="Sponsorship Opportunities"> + Sponsorship Opportunities</label> + <label for="wild"><input type="radio" name="info" + id="wild" value="Wildlife"> + Wildlife</label> + <label for="other"><input type="radio" name="info" + id="other" value="Other"> + Other, please specify below</label> + <label for="questions">What questions do you + have for us?</label> + <textarea name="questions" id="questions" rows="5"> + </textarea> + </fieldset> + <input type="submit" id="submit" value="Submit" class="btn"> + </form> + </div> + </main> + + <footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/10/css/styles.css b/rescue/10/css/styles.css new file mode 100644 index 0000000..6f0592a --- /dev/null +++ b/rescue/10/css/styles.css @@ -0,0 +1,365 @@ +/* + Author: Name Surname + File Name: styles.css + Date: 2024/10/21 +*/ + +/* CSS Reset */ +body,header,nav,main,footer,img,h1,h3,ul,aside,figure, +figcaption,video{ + margin: 0px; + padding: 0px; + border: 0px; +} + +/* Style rules for body and images */ +body{ + background-color: #F6EEE4; +} + +img,video{ + max-width: 100%; + display: block; +} + +/* Style rules for mobile viewport */ + +/* Style rules to show show mobiile class and hide tab-desk class */ +.mobile,.mobile-tablet{ + display: block; +} + +.tab-desk,.desktop,#nav-links{ + 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; + margin: 2% 0 0 3%; +} + +.mobile h3{ + font-family: "Lora",serif; + font-weight: 400; + font-style: normal; +} + +/* Style rules for navigation area */ +nav{ + background-color: #2A1F14; +} + +.mobile-nav a{ + color: #FFFFFF; + text-align: center; + font-size: 2em; + text-decoration: none; + padding: 3%; + display: block; +} +.mobile-nav a.nav-icon{ + display: block; + position: absolute; + left: 0; + top: 0; + color: #F6EEE4; + padding: 2%; +} +.nav-icon div{ + height: 40px; + width: 40px; + color: #2A1F14; +} + +/* 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; +} + +aside{ + text-align: center; + font-size: 1.5em; + font-weight: bold; + text-shadow: 4px 4px 10px #C5A687; +} + +figure{ + border: 4px solid #2A1F14; + box-shadow: 6px 6px 10px #C5A687; + max-width: 400px; + margin: 2% auto; +} + +figcaption{ + padding: 2%; + border-top: 4px solid #2A1F14; +} + +#info ul{ + margin-left: 10%; +} + +#contact,#form h2{ + 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; +} + +#questions p{ + cursor: pointer; +} +#answer{ + text-align: center; + font-weight: bold; + width: 80%; + margin: 0 auto; +} +#answer h2{ + display: none; +} + +/* Style rules for form elements */ +fieldset,input,textarea{ + margin-bottom: 2%; +} + +fieldset legend{ + font-weight: bold; + font-size: 1.25em; +} + +label{ + display: block; + padding-top: 2%; +} + +form #submit{ + margin: 0px auto 0px auto; + display: block; + padding: 2%; + background-color: #78593A; + color: #F6EEE4; + font-size: 1.25em; + border-radius: 10px; +} + +/* 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,.mobile-nav{ + display: none; + } + + /* Tablet Viewport: Style rules for nav area */ + nav ul{ + list-style: none; + text-align: center; + } + nav li{ + border-top: 0px; + display: inline-block; + font-size: 1.25em; + font-family: Geneva,Arial,sans-serif; + font-weight: bold; + } + nav li a{ + padding: 0.5em; + display: block; + color: #F6EEE4; + text-decoration: none; + } + + .grid{ + display: grid; + grid-template-columns: auto auto; + grid-gap: 10px; + } + aside{ + grid-column: 1 / span 2; + } + + /* Tablet Viewport: Style rule for form element */ + form{ + width: 70%; + margin: 0px auto 0px auto; + } +} + +/* Media Query for Desktop Viewport */ +@media screen and (min-width:1000px),print{ + /* Desktop Viewport: Show desktop class, hide mobile-tablet class. */ + .desktop{ + display: inline; + } + .mobile-tablet{ + display: none; + } + + /* 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; + opacity: 0.5; + } + + /* Desktop Viewport: Style rules for main content */ + info ul{ + margin-left: 5%; + } + + .grid{ + grid-template-columns: auto auto auto; + grid-gap: 30px; + } + aside{ + grid-column: 1 / span 3; + font-size: 2em; + } + + /* Style rules for table */ + table{ + border: 1px solid #2A1F14; + border-collapse: collapse; + margin: 0px auto 0px auto; + } + caption{ + font-size: 1.5em; + font-weight: bold; + padding: 1%; + } + th,td{ + border: 1px solid #2A1F14; + padding: 1%; + } + th{ + background-color: #2A1F14; + color: #FFFFFF; + font-size: 1.15em; + } + tr:nth-child(odd){ + background-color: #DECCBA; + } + /* Desktop Viewport: Style rules for form elements */ + form{ + width: auto; + } + .form-grid{ + display: grid; + grid-template-columns: auto auto; + grid-gap: 20px; + } + .btn{ + grid-column: 1 / span 2; + } +} + +/* 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; + } + + .grid{ + grid-template-columns: auto auto auto auto; + } + aside{ + grid-column: 1 / span 4; + font-size: 3em; + } +} + +/* Media Query for Print */ +@media print{ + body{ + background-color: #FFFFFF; + color: #000000; + } +} diff --git a/rescue/10/faqs.html b/rescue/10/faqs.html new file mode 100644 index 0000000..dd9b452 --- /dev/null +++ b/rescue/10/faqs.html @@ -0,0 +1,80 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: template.html + Date: 2024/11/18 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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: FAQs</title></head><body> +<div id="wrapper"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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="questions"> + <p onclick="ans1()">How can I determine if a baby animal + is an orphan?</p> + <p onclick="ans2()">How can I tell if an animal has + rabies?</p> + <p onclick="ans3()">I found a baby bird that fell from + its nest. Will the parents orphan it if I touch it?</p> + <p onclick="ans4()">How can I volunteer?</p> + </div> + <div id="answer"> + <h2>Answer:</h2> + <p></p> + </div> + </main> + + <footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/10/gallery.html b/rescue/10/gallery.html new file mode 100644 index 0000000..a5d4c8d --- /dev/null +++ b/rescue/10/gallery.html @@ -0,0 +1,138 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: gallery.html + Date: 2024/11/18 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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: Gallery</title></head><body> +<div id="wrapper"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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 class="grid"> + <aside> + <p>Meet our friends in need.</p> + </aside> + <figure> <!-- Figure Element 1 --> + <img src="i/blind-deer.jpg" alt="blind deer"> + <figcaption>Russ is a blind deer. He was brought + to us by a hunter who found him wandering in + circles.</figcaption> + </figure> + <figure> <!-- Figure Element 2 --> + <img src="i/baby-squirrel.jpg" + alt="baby squirrel on a tree house"> + <figcaption>Meet Nugget. He is learning how to + climb trees and will be released in a few more + weeks.</figcaption> + </figure> + <figure> <!-- Figure Element 3 --> + <img src="i/cow.jpg" alt="face of a cow"> + <figcaption>This is Ellie. She was neglected by + her owner and malnourished when she was rescued. + </figcaption> + </figure> + <figure> <!-- Figure Element 4 --> + <img src="i/goat.jpg" + alt="goat laying in the grass"> + <figcaption>Say hi to Vinny. His back legs were + injured, making it difficult for him to get + around.</figcaption> + </figure> + <figure> <!-- Figure Element 5 --> + <img src="i/pig.jpg" alt="pig standing"> + <figcaption>Rosie was just a baby when she + arrived. Now she has babies.</figcaption> + </figure> + <figure> <!-- Figure Element 6 --> + <img src="i/baby-pig.jpg" alt="pig standing"> + <figcaption>Squirt is one of Rosie’s babies. + </figcaption> + </figure> + <figure> <!-- Figure Element 7 --> + <img src="i/horse.jpg" alt="face of a horse"> + <figcaption>Muffin has come a long way. She was + very thin when she was rescued.</figcaption> + </figure> + <figure> <!-- Figure Element 8 --> + <img src="i/hawk.jpg" alt="baby hawk"> + <figcaption>Poor Harley was rescued when he was + just three weeks old. He is getting big and will + be released in about a month.</figcaption> + </figure> + <figure> <!-- Figure Element 9 --> + <img src="i/bearded-dragon.jpg" alt="bearded dragon"> + <figcaption>Gizmo was abandoned by his owner and + is available for adoption.</figcaption> + </figure> + <figure> <!-- Figure Element 10 --> + <img src="i/bird.jpg" alt="cockatoo"> + <figcaption>Peaches was also abandoned by his + owner. He loves to talk.</figcaption> + </figure> + <figure> <!-- Figure Element 11 --> + <img src="i/hedgehog.jpg" alt="hedgehog"> + <figcaption>Sonny was just a baby when he was + brought to us for rehabilitation.</figcaption> + </figure> + <figure> <!-- Figure Element 12 --> + <img src="i/tortoise-pyramid.jpg" + alt="tortoise with shell pyramiding"> + <figcaption>Poor Victor has "shell pyramiding," + a form of bone disease.</figcaption> + </figure> + </main> + + <footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/10/index.html b/rescue/10/index.html new file mode 100644 index 0000000..c8914c8 --- /dev/null +++ b/rescue/10/index.html @@ -0,0 +1,88 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: index.html + Date: 2024/11/18 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/10/media/captions.vtt b/rescue/10/media/captions.vtt new file mode 100644 index 0000000..6e49237 --- /dev/null +++ b/rescue/10/media/captions.vtt @@ -0,0 +1,31 @@ +WEBVTT + +NOTE +Captions for Wild Rescues +Student Name: Name Surname +File Name: captions.vtt +Date: 2024/10/28 + +1 +00:03.200 --> 00:07.200 +These baby raccoons were found abandoned near a home. + +2 +00:08.900 --> 00:11.700 +Nugget is learning how to climb trees. + +3 +00:13.800 --> 00:16.500 +Princess was neglected by her owner. + +4 +00:18.900 --> 00:20.500 +Sox is an orphan. + +5 +00:24.000 --> 00:26.000 +Frank was found abandoned. + +6 +00:29.000 --> 00:31.500 +Prince’s hooves are in bad shape. diff --git a/rescue/10/media/descriptions.vtt b/rescue/10/media/descriptions.vtt new file mode 100644 index 0000000..3cb416c --- /dev/null +++ b/rescue/10/media/descriptions.vtt @@ -0,0 +1,31 @@ +WEBVTT + +NOTE +Descriptions for Wild Rescues +Student Name: Name Surname +File Name: descriptions.vtt +Date: 2024/10/28 + +1 +00:03.200 --> 00:07.200 +Three baby racoons held by human hands. + +2 +00:08.900 --> 00:11.700 +Baby squirrel on a wooden home on a tree. + +3 +00:13.800 --> 00:16.500 +Face of a minature horse. + +4 +00:18.900 --> 00:20.500 +Small goat. + +5 +00:24.000 --> 00:26.000 +Pigeon standing on a hand. + +6 +00:29.000 --> 00:31.500 +Minature horse standing in its pen. diff --git a/rescue/10/partnership.html b/rescue/10/partnership.html new file mode 100644 index 0000000..455b0f5 --- /dev/null +++ b/rescue/10/partnership.html @@ -0,0 +1,150 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: partnership.html + Date: 2024/11/18 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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: Partnership</title></head><body> +<div id="wrapper"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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> + <h2>We are grateful for the support from our community partners. + We have many sponsorship opportunities.</h2> + <div class="mobile-tablet"> + <h3>Sponsorship Levels.</h3> + <p>Green: $200.</p> + <p>Blue: $400.</p> + <p>Red: $600.</p> + <p>Purple: $800.</p> + <p>Silver: $1,000.</p> + <p>Gold: $1,500.</p> + <p>Each sponsorship supports our animals and operations. + Business recognition is given at every sponsorship level. + Contact us today to become a sponsor.</p> + </div> + <div id="partner" class="desktop"> + <table> + <caption>Sponsorship Opportunities.</caption> + <tr><!-- Row 1 --> + <th>Sponsorship Level</th> + <th>Dollar Amount</th> + <th>Details</th> + <th>Sponsorship Benefits</th> + </tr> + <tr><!-- Row 2 --> + <td>Green</td> + <td>$200</td> + <td>The green sponsorship helps us maintain + green pastures for our grazing friends.</td> + <td>Recognition on our website.</td> + </tr> + <tr><!-- Row 3 --> + <td>Blue</td> + <td>$400</td> + <td>The blue sponsorship helps us provide food + for the animals.</td> + <td>Recognition on our website and our brochure. + </td> + </tr> + <tr><!-- Row 4 --> + <td>Red</td> + <td>$600</td> + <td>The red sponsorship helps us provide medical + care for the animals.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our + facility.</td> + </tr> + <tr><!-- Row 5 --> + <td>Purple</td> + <td>$800</td> + <td>The purple sponsorship helps us maintain homes + for the animals.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual + community event.</td> + </tr> + <tr><!-- Row 6 --> + <td>Silver</td> + <td>$1,000</td> + <td>The silver sponsorship supports our monthly + expenses.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual community + event. Recognition plaque with business name prominently + displayed within the facility.</td> + </tr> + <tr><!-- Row 7 --> + <td>Gold</td> + <td>$1,500</td> + <td>The gold sponsorship supports our operation costs.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual community + event. Recognition plaque with business name prominently + displayed within the facility. Display table at the + annual community event. Recognition in all media + releases.</td> + </tr> + </table> + + </div> + </main> + + <footer> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/10/question.txt b/rescue/10/question.txt new file mode 100644 index 0000000..922968d --- /dev/null +++ b/rescue/10/question.txt @@ -0,0 +1,38 @@ +Question: +In this exercise, you used an onclick event handler to call +each function. Research the addEventListener() method, and +explain how you would use it instead of an onclick event +handler to call the functions. + +Answer: +To use addEventListener(), I would replace the HTML onclick +attributes with ID attributes. I could then use addEventListener() +in combination with document.getElementById() to run a specific +function depending on which HTML paragraph is clicked. + +HTML: +<main> + <div id="questions"> + <p id="q1">How can I determine if a baby animal + is an orphan?</p> + <p id="q2">How can I tell if an animal has + rabies?</p> + <p id="q3">I found a baby bird that fell from + its nest. Will the parents orphan it if I touch it?</p> + <p id="q4">How can I volunteer?</p> + </div> + <div id="answer"> + <h2>Answer:</h2> + <p></p> + </div> +</main> + +JS: +var q1 = document.getElementById("q1"); +q1.addEventListener("click",ans1); +var q2 = document.getElementById("q2"); +q2.addEventListener("click",ans2); +var q3 = document.getElementById("q3"); +q3.addEventListener("click",ans3); +var q4 = document.getElementById("q4"); +q4.addEventListener("click",ans4); diff --git a/rescue/10/scripts/script.js b/rescue/10/scripts/script.js new file mode 100644 index 0000000..c0c2dea --- /dev/null +++ b/rescue/10/scripts/script.js @@ -0,0 +1,46 @@ +/* + Student: Name Surname + File Name: script.js + Date: 2024/11/18 +*/ + +// Global variables +var answer = document.querySelector("#answer p"); +var heading = document.querySelector("#answer h2"); + +// Hamburger menu function +function hamburger() { + var navlinks = document.getElementById("nav-links"); + var menuicon = document.getElementById("icon"); + if (navlinks.style.display === "block") { + navlinks.style.display = "none"; + menuicon.style.color = "#2a1f14"; + }else { + navlinks.style.display = "block"; + menuicon.style.color = "#f6eee4"; + } +} + +// Function to display the first answer +function ans1() { + heading.style.display = "block"; + answer.textContent = "Step back and observe the situation for a a few minutes. Wait to see if a parent arrives. If the animal is in immediate danger from a predator or is in the road, remove the baby and bring to a rescue center."; +} + +// Function to display the second answer +function ans2() { + heading.style.display = "block"; + answer.textContent = "You cannot tell if an animal has rabies a simply by seeing it. A test must be performed to determine if an animal has rabies. Do not approach wildlife that you suspect might be rabid. Contact us to have the animal removed."; +} + +// Function to display the third answer +function ans3() { + heading.style.display = "block"; + answer.textContent = "No. This is a myth. The parents will retrieve the baby bird and place it back in its nest. If the parents do not return, contact us."; +} + +// Function to display the fourth answer +function ans4() { + heading.style.display = "block"; + answer.textContent = "We need volunteers to help feed animals, care a for animals, and clean animal pens. We also accept donations."; +} diff --git a/rescue/10/template.html b/rescue/10/template.html new file mode 100644 index 0000000..9c9a0b8 --- /dev/null +++ b/rescue/10/template.html @@ -0,0 +1,69 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: template.html + Date: 2024/11/18 +--> +<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="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/11/about.html b/rescue/11/about.html new file mode 100644 index 0000000..dca1c54 --- /dev/null +++ b/rescue/11/about.html @@ -0,0 +1,117 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: about.html + Date: 2024/11/18 +--> +<html lang="en"><head><meta charset="utf-8"> +<meta name="description" content="We help rehabilitate local wildlife, such as raccoons, squirrels, fox, birds, deer, horses, pigs, and reptiles."> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="stylesheet" href="css/styles.min.css"> +<link rel="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>Rescue - Rehabilitate | Wild Rescues</title></head><body> +<!-- Skip to Content Link --> +<a class="skip" href="#content">Skip to Content</a> + +<div id="wrapper"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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 id="content"> + <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> + + <p>Watch the video below to meet our new, rescued friends.</p> + + <video controls poster="i/baby-hawk.jpg"> + <source src="media/wildrescues.mp4" type="video/mp4"> + <source src="media/wildrescues.webm" type="video/webm"> + <track src="media/captions.vtt" kind="captions" + srclang="en" label="English"> + <track src="media/descriptions.vtt" kind="descriptions" + srclang="en" label="English"> + <p>The video can't be loaded. Try using this website + with a different web browser</p> + </video> + + <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> + <div class="copyright"> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </div> + <div class="social"> + <a href="https://www.facebook.com"><img src="i/facebook-logo.png" alt="Facebook logo"></a> + <a href="https://www.twitter.com"><img src="i/twitter-logo.png" alt="Twitter logo"></a> + </div> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/11/contact.html b/rescue/11/contact.html new file mode 100644 index 0000000..5d56d12 --- /dev/null +++ b/rescue/11/contact.html @@ -0,0 +1,125 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: contact.html + Date: 2024/11/18 +--> +<html lang="en"><head><meta charset="utf-8"> +<meta name="description" content="Contact us at (814)555-8989 or visit us at 8989 Rescue Drive, Ocala, FL for more information."> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="stylesheet" href="css/styles.min.css"> +<link rel="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>Contact Us - Location | Wild Rescues</title></head><body> +<!-- Skip to Content Link --> +<a class="skip" href="#content">Skip to Content</a> + +<div id="wrapper"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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 id="content"> + <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> + <div id="form"> + <h2>Complete the form below and we will contact you soon.</h2> + <form class="form-grid"><!-- Start Form --> + <fieldset> + <legend>Contact Information</legend> + <label for="fName">First Name:</label> + <input type="text" name="fName" id="fName"> + <label for="lName">Last Name:</label> + <input type="text" name="lName" id="lName"> + <label for="bName">Name of Business:</label> + <input type="text" name="bName" id="bName"> + <label for="email">Email:</label> + <input type="email" name="email" id="email"> + <label for="phone">Phone:</label> + <input type="tel" name="phone" id="phone"> + </fieldset> + <fieldset> + <legend>Additional Information</legend> + <p>would like more information about:</p> + <label for="vol"><input type="radio" name="info" + id="vol" value="Volunteering"> + Volunteering</label> + <label for="sponsor"><input type="radio" name="info" + id="sponsor" value="Sponsorship Opportunities"> + Sponsorship Opportunities</label> + <label for="wild"><input type="radio" name="info" + id="wild" value="Wildlife"> + Wildlife</label> + <label for="other"><input type="radio" name="info" + id="other" value="Other"> + Other, please specify below</label> + <label for="questions">What questions do you + have for us?</label> + <textarea name="questions" id="questions" rows="5"> + </textarea> + </fieldset> + <input type="submit" id="submit" value="Submit" class="btn"> + </form> + </div> + </main> + + <footer> + <div class="copyright"> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </div> + <div class="social"> + <a href="https://www.facebook.com"><img src="i/facebook-logo.png" alt="Facebook logo"></a> + <a href="https://www.twitter.com"><img src="i/twitter-logo.png" alt="Twitter logo"></a> + </div> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/11/css/styles.css b/rescue/11/css/styles.css new file mode 100644 index 0000000..6a88bd0 --- /dev/null +++ b/rescue/11/css/styles.css @@ -0,0 +1,399 @@ +/* + Author: Name Surname + File Name: styles.css + Date: 2024/10/21 +*/ + +/* CSS Reset */ +body,header,nav,main,footer,img,h1,h3,ul,aside,figure, +figcaption,video{ + margin: 0px; + padding: 0px; + border: 0px; +} + +/* Style rules for body and images */ +body{ + background-color: #F6EEE4; +} + +img,video{ + max-width: 100%; + display: block; +} + +/* Style rules for skip navigation link */ +.skip { + position: absolute; + left: -999px; +} +.skip:focus { + color: #FFFFFF; + background-color: #2A1F14; + text-decoration: none; + padding: 0.5%; + top: auto; + left: auto; + right: 1px; + z-index: 1; +} + +/* Style rules for mobile viewport */ + +/* Style rules to show show mobiile class and hide tab-desk class */ +.mobile,.mobile-tablet{ + display: block; +} + +.tab-desk,.desktop,#nav-links{ + 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; + margin: 2% 0 0 3%; +} + +.mobile h3{ + font-family: "Lora",serif; + font-weight: 400; + font-style: normal; +} + +/* Style rules for navigation area */ +nav{ + background-color: #2A1F14; +} + +.mobile-nav a{ + color: #FFFFFF; + text-align: center; + font-size: 2em; + text-decoration: none; + padding: 3%; + display: block; +} +.mobile-nav a.nav-icon{ + display: block; + position: absolute; + left: 0; + top: 0; + color: #F6EEE4; + padding: 2%; +} +.nav-icon div{ + height: 40px; + width: 40px; + color: #2A1F14; +} + +/* 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; +} + +aside{ + text-align: center; + font-size: 1.5em; + font-weight: bold; + text-shadow: 4px 4px 10px #C5A687; +} + +figure{ + border: 4px solid #2A1F14; + box-shadow: 6px 6px 10px #C5A687; + max-width: 400px; + margin: 2% auto; +} + +figcaption{ + padding: 2%; + border-top: 4px solid #2A1F14; +} + +#info ul{ + margin-left: 10%; +} + +#contact,#form h2{ + 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; +} + +#questions p{ + cursor: pointer; +} +#answer{ + text-align: center; + font-weight: bold; + width: 80%; + margin: 0 auto; +} +#answer h2{ + display: none; +} + +/* Style rules for form elements */ +fieldset,input,textarea{ + margin-bottom: 2%; +} + +fieldset legend{ + font-weight: bold; + font-size: 1.25em; +} + +label{ + display: block; + padding-top: 2%; +} + +form #submit{ + margin: 0px auto 0px auto; + display: block; + padding: 2%; + background-color: #78593A; + color: #F6EEE4; + font-size: 1.25em; + border-radius: 10px; +} + +/* 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; +} + +.social img{ + display: inline-block; + padding: 4%; +} + +/* 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,.mobile-nav{ + display: none; + } + + /* Tablet Viewport: Style rules for nav area */ + nav ul{ + list-style: none; + text-align: center; + } + nav li{ + border-top: 0px; + display: inline-block; + font-size: 1.25em; + font-family: Geneva,Arial,sans-serif; + font-weight: bold; + } + nav li a{ + padding: 0.5em; + display: block; + color: #F6EEE4; + text-decoration: none; + } + + .grid{ + display: grid; + grid-template-columns: auto auto; + grid-gap: 10px; + } + aside{ + grid-column: 1 / span 2; + } + + /* Tablet Viewport: Style rule for form element */ + form{ + width: 70%; + margin: 0px auto 0px auto; + } + + /* Tablet Viewport: Style rules for footer area */ + footer{ + overflow: auto; + } + .copyright{ + float: left; + width: 65%; + } + .social{ + float: right; + width: 25%; + } +} + +/* Media Query for Desktop Viewport */ +@media screen and (min-width:1000px),print{ + /* Desktop Viewport: Show desktop class, hide mobile-tablet class. */ + .desktop{ + display: inline; + } + .mobile-tablet{ + display: none; + } + + /* 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; + opacity: 0.5; + } + + /* Desktop Viewport: Style rules for main content */ + info ul{ + margin-left: 5%; + } + + .grid{ + grid-template-columns: auto auto auto; + grid-gap: 30px; + } + aside{ + grid-column: 1 / span 3; + font-size: 2em; + } + + /* Style rules for table */ + table{ + border: 1px solid #2A1F14; + border-collapse: collapse; + margin: 0px auto 0px auto; + } + caption{ + font-size: 1.5em; + font-weight: bold; + padding: 1%; + } + th,td{ + border: 1px solid #2A1F14; + padding: 1%; + } + th{ + background-color: #2A1F14; + color: #FFFFFF; + font-size: 1.15em; + } + tr:nth-child(odd){ + background-color: #DECCBA; + } + /* Desktop Viewport: Style rules for form elements */ + form{ + width: auto; + } + .form-grid{ + display: grid; + grid-template-columns: auto auto; + grid-gap: 20px; + } + .btn{ + grid-column: 1 / span 2; + } +} + +/* 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; + } + + .grid{ + grid-template-columns: auto auto auto auto; + } + aside{ + grid-column: 1 / span 4; + font-size: 3em; + } +} + +/* Media Query for Print */ +@media print{ + body{ + background-color: #FFFFFF; + color: #000000; + } +} diff --git a/rescue/11/css/styles.min.css b/rescue/11/css/styles.min.css new file mode 100644 index 0000000..5b3ee17 --- /dev/null +++ b/rescue/11/css/styles.min.css @@ -0,0 +1 @@ +body,header,nav,main,footer,img,h1,h3,ul,aside,figure,figcaption,video{margin:0;padding:0;border:0}body{background-color:#F6EEE4}img,video{max-width:100%;display:block}.skip{position:absolute;left:-999px}.skip:focus{color:#FFF;background-color:#2A1F14;text-decoration:none;padding:.5%;top:auto;left:auto;right:1px;z-index:1}.mobile,.mobile-tablet{display:block}.tab-desk,.desktop,#nav-links{display:none}.mobile h1,.mobile h3{padding:2%;text-align:center}.mobile h1{font-family:"Emblema One",system-ui;font-weight:400;font-style:normal;margin:2% 0 0 3%}.mobile h3{font-family:"Lora",serif;font-weight:400;font-style:normal}nav{background-color:#2A1F14}.mobile-nav a{color:#FFF;text-align:center;font-size:2em;text-decoration:none;padding:3%;display:block}.mobile-nav a.nav-icon{display:block;position:absolute;left:0;top:0;color:#F6EEE4;padding:2%}.nav-icon div{height:40px;width:40px;color:#2A1F14}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}.link{color:#4D3319;text-decoration:none;font-weight:700;font-style:italic}.action{font-size:1.75em;font-weight:700;text-align:center}.round{border-radius:6px}aside{text-align:center;font-size:1.5em;font-weight:700;text-shadow:4px 4px 10px #C5A687}figure{border:4px solid #2A1F14;box-shadow:6px 6px 10px #C5A687;max-width:400px;margin:2% auto}figcaption{padding:2%;border-top:4px solid #2A1F14}#info ul{margin-left:10%}#contact,#form h2{text-align:center}.tel-link{background-color:#2A1F14;padding:2%;width:80%;margin:0 auto 0 auto}.tel-link a{color:#F6EEE4;text-decoration:none;font-weight:700}#questions p{cursor:pointer}#answer{text-align:center;font-weight:700;width:80%;margin:0 auto}#answer h2{display:none}fieldset,input,textarea{margin-bottom:2%}fieldset legend{font-weight:700;font-size:1.25em}label{display:block;padding-top:2%}form #submit{margin:0 auto 0 auto;display:block;padding:2%;background-color:#78593A;color:#F6EEE4;font-size:1.25em;border-radius:10px}footer{text-align:center;font-size:.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}.social img{display:inline-block;padding:4%}@media screen and (min-width:620px),print{.tab-desk{display:block}.mobile,.mobile-nav{display:none}nav ul{list-style:none;text-align:center}nav li{border-top:0;display:inline-block;font-size:1.25em;font-family:Geneva,Arial,sans-serif;font-weight:700}nav li a{padding:.5em;display:block;color:#F6EEE4;text-decoration:none}.grid{display:grid;grid-template-columns:auto auto;grid-gap:10px}aside{grid-column:1 / span 2}form{width:70%;margin:0 auto 0 auto}footer{overflow:auto}.copyright{float:left;width:65%}.social{float:right;width:25%}}@media screen and (min-width:1000px),print{.desktop{display:inline}.mobile-tablet{display:none}nav li{font-size:1.5em}nav li a{border-bottom:.5em;border-left:1.5em;border-right:1.5em}nav li a:hover{color:#2A1F14;background-color:#F6EEE4;opacity:.5}info ul{margin-left:5%}.grid{grid-template-columns:auto auto auto;grid-gap:30px}aside{grid-column:1 / span 3;font-size:2em}table{border:1px solid #2A1F14;border-collapse:collapse;margin:0 auto 0 auto}caption{font-size:1.5em;font-weight:700;padding:1%}th,td{border:1px solid #2A1F14;padding:1%}th{background-color:#2A1F14;color:#FFF;font-size:1.15em}tr:nth-child(odd){background-color:#DECCBA}form{width:auto}.form-grid{display:grid;grid-template-columns:auto auto;grid-gap:20px}.btn{grid-column:1 / span 2}}@media screen and (min-width:1921px){body{background:linear-gradient(#F6EEE4,#78593A)}#wrapper{width:1920px;margin:0 auto 0 auto}main{background-color:#F6EEE4}.grid{grid-template-columns:auto auto auto auto}aside{grid-column:1 / span 4;font-size:3em}}@media print{body{background-color:#FFF;color:#000}} diff --git a/rescue/11/faqs.html b/rescue/11/faqs.html new file mode 100644 index 0000000..4bbc921 --- /dev/null +++ b/rescue/11/faqs.html @@ -0,0 +1,90 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: template.html + Date: 2024/11/18 +--> +<html lang="en"><head><meta charset="utf-8"> +<meta name="description" content="Get answers to our most frequently asked questions."> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="stylesheet" href="css/styles.min.css"> +<link rel="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>FAQs | Wild Rescues</title></head><body> +<!-- Skip to Content Link --> +<a class="skip" href="#content">Skip to Content</a> + +<div id="wrapper"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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 id="content"> + <div id="questions"> + <p onclick="ans1()">How can I determine if a baby animal + is an orphan?</p> + <p onclick="ans2()">How can I tell if an animal has + rabies?</p> + <p onclick="ans3()">I found a baby bird that fell from + its nest. Will the parents orphan it if I touch it?</p> + <p onclick="ans4()">How can I volunteer?</p> + </div> + <div id="answer"> + <h2>Answer:</h2> + <p></p> + </div> + </main> + + <footer> + <div class="copyright"> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </div> + <div class="social"> + <a href="https://www.facebook.com"><img src="i/facebook-logo.png" alt="Facebook logo"></a> + <a href="https://www.twitter.com"><img src="i/twitter-logo.png" alt="Twitter logo"></a> + </div> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/11/gallery.html b/rescue/11/gallery.html new file mode 100644 index 0000000..f8c026d --- /dev/null +++ b/rescue/11/gallery.html @@ -0,0 +1,148 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: gallery.html + Date: 2024/11/18 +--> +<html lang="en"><head><meta charset="utf-8"> +<meta name="description" content="Meet our rescued friends. We have horses, goats, squirrels, pigs, deer, cows, rabbits, birds, turtles, and many more."> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="stylesheet" href="css/styles.min.css"> +<link rel="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>Gallery | Wild Rescues</title></head><body> +<!-- Skip to Content Link --> +<a class="skip" href="#content">Skip to Content</a> + +<div id="wrapper"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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 id="content" class="grid"> + <aside> + <p>Meet our friends in need.</p> + </aside> + <figure> <!-- Figure Element 1 --> + <img src="i/blind-deer.jpg" alt="blind deer"> + <figcaption>Russ is a blind deer. He was brought + to us by a hunter who found him wandering in + circles.</figcaption> + </figure> + <figure> <!-- Figure Element 2 --> + <img src="i/baby-squirrel.jpg" + alt="baby squirrel on a tree house"> + <figcaption>Meet Nugget. He is learning how to + climb trees and will be released in a few more + weeks.</figcaption> + </figure> + <figure> <!-- Figure Element 3 --> + <img src="i/cow.jpg" alt="face of a cow"> + <figcaption>This is Ellie. She was neglected by + her owner and malnourished when she was rescued. + </figcaption> + </figure> + <figure> <!-- Figure Element 4 --> + <img src="i/goat.jpg" + alt="goat laying in the grass"> + <figcaption>Say hi to Vinny. His back legs were + injured, making it difficult for him to get + around.</figcaption> + </figure> + <figure> <!-- Figure Element 5 --> + <img src="i/pig.jpg" alt="pig standing"> + <figcaption>Rosie was just a baby when she + arrived. Now she has babies.</figcaption> + </figure> + <figure> <!-- Figure Element 6 --> + <img src="i/baby-pig.jpg" alt="pig standing"> + <figcaption>Squirt is one of Rosie’s babies. + </figcaption> + </figure> + <figure> <!-- Figure Element 7 --> + <img src="i/horse.jpg" alt="face of a horse"> + <figcaption>Muffin has come a long way. She was + very thin when she was rescued.</figcaption> + </figure> + <figure> <!-- Figure Element 8 --> + <img src="i/hawk.jpg" alt="baby hawk"> + <figcaption>Poor Harley was rescued when he was + just three weeks old. He is getting big and will + be released in about a month.</figcaption> + </figure> + <figure> <!-- Figure Element 9 --> + <img src="i/bearded-dragon.jpg" alt="bearded dragon"> + <figcaption>Gizmo was abandoned by his owner and + is available for adoption.</figcaption> + </figure> + <figure> <!-- Figure Element 10 --> + <img src="i/bird.jpg" alt="cockatoo"> + <figcaption>Peaches was also abandoned by his + owner. He loves to talk.</figcaption> + </figure> + <figure> <!-- Figure Element 11 --> + <img src="i/hedgehog.jpg" alt="hedgehog"> + <figcaption>Sonny was just a baby when he was + brought to us for rehabilitation.</figcaption> + </figure> + <figure> <!-- Figure Element 12 --> + <img src="i/tortoise-pyramid.jpg" + alt="tortoise with shell pyramiding"> + <figcaption>Poor Victor has "shell pyramiding," + a form of bone disease.</figcaption> + </figure> + </main> + + <footer> + <div class="copyright"> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </div> + <div class="social"> + <a href="https://www.facebook.com"><img src="i/facebook-logo.png" alt="Facebook logo"></a> + <a href="https://www.twitter.com"><img src="i/twitter-logo.png" alt="Twitter logo"></a> + </div> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/11/index.html b/rescue/11/index.html new file mode 100644 index 0000000..1f30c36 --- /dev/null +++ b/rescue/11/index.html @@ -0,0 +1,98 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: index.html + Date: 2024/11/18 +--> +<html lang="en"><head><meta charset="utf-8"> +<meta name="description" content="Wild Rescues is a local nonprofit organization dedicated to helping injured, neglected, or orphaned wildlife."> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="stylesheet" href="css/styles.min.css"> +<link rel="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>Wildlife Rescue | Wild Rescues</title></head><body> +<!-- Skip to Content Link --> +<a class="skip" href="#content">Skip to Content</a> + +<div id="wrapper"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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 id="content"> + <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> + <div class="copyright"> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </div> + <div class="social"> + <a href="https://www.facebook.com"><img src="i/facebook-logo.png" alt="Facebook logo"></a> + <a href="https://www.twitter.com"><img src="i/twitter-logo.png" alt="Twitter logo"></a> + </div> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/11/media/captions.vtt b/rescue/11/media/captions.vtt new file mode 100644 index 0000000..6e49237 --- /dev/null +++ b/rescue/11/media/captions.vtt @@ -0,0 +1,31 @@ +WEBVTT + +NOTE +Captions for Wild Rescues +Student Name: Name Surname +File Name: captions.vtt +Date: 2024/10/28 + +1 +00:03.200 --> 00:07.200 +These baby raccoons were found abandoned near a home. + +2 +00:08.900 --> 00:11.700 +Nugget is learning how to climb trees. + +3 +00:13.800 --> 00:16.500 +Princess was neglected by her owner. + +4 +00:18.900 --> 00:20.500 +Sox is an orphan. + +5 +00:24.000 --> 00:26.000 +Frank was found abandoned. + +6 +00:29.000 --> 00:31.500 +Prince’s hooves are in bad shape. diff --git a/rescue/11/media/descriptions.vtt b/rescue/11/media/descriptions.vtt new file mode 100644 index 0000000..3cb416c --- /dev/null +++ b/rescue/11/media/descriptions.vtt @@ -0,0 +1,31 @@ +WEBVTT + +NOTE +Descriptions for Wild Rescues +Student Name: Name Surname +File Name: descriptions.vtt +Date: 2024/10/28 + +1 +00:03.200 --> 00:07.200 +Three baby racoons held by human hands. + +2 +00:08.900 --> 00:11.700 +Baby squirrel on a wooden home on a tree. + +3 +00:13.800 --> 00:16.500 +Face of a minature horse. + +4 +00:18.900 --> 00:20.500 +Small goat. + +5 +00:24.000 --> 00:26.000 +Pigeon standing on a hand. + +6 +00:29.000 --> 00:31.500 +Minature horse standing in its pen. diff --git a/rescue/11/partnership.html b/rescue/11/partnership.html new file mode 100644 index 0000000..af4ccce --- /dev/null +++ b/rescue/11/partnership.html @@ -0,0 +1,160 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: partnership.html + Date: 2024/11/18 +--> +<html lang="en"><head><meta charset="utf-8"> +<meta name="description" content="Partner with us. We have several sponsorship opportunities available."> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="stylesheet" href="css/styles.min.css"> +<link rel="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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>Sponsorship | Wild Rescues</title></head><body> +<!-- Skip to Content Link --> +<a class="skip" href="#content">Skip to Content</a> + +<div id="wrapper"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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 id="content"> + <h2>We are grateful for the support from our community partners. + We have many sponsorship opportunities.</h2> + <div class="mobile-tablet"> + <h3>Sponsorship Levels.</h3> + <p>Green: $200.</p> + <p>Blue: $400.</p> + <p>Red: $600.</p> + <p>Purple: $800.</p> + <p>Silver: $1,000.</p> + <p>Gold: $1,500.</p> + <p>Each sponsorship supports our animals and operations. + Business recognition is given at every sponsorship level. + Contact us today to become a sponsor.</p> + </div> + <div id="partner" class="desktop"> + <table> + <caption>Sponsorship Opportunities.</caption> + <tr><!-- Row 1 --> + <th>Sponsorship Level</th> + <th>Dollar Amount</th> + <th>Details</th> + <th>Sponsorship Benefits</th> + </tr> + <tr><!-- Row 2 --> + <td>Green</td> + <td>$200</td> + <td>The green sponsorship helps us maintain + green pastures for our grazing friends.</td> + <td>Recognition on our website.</td> + </tr> + <tr><!-- Row 3 --> + <td>Blue</td> + <td>$400</td> + <td>The blue sponsorship helps us provide food + for the animals.</td> + <td>Recognition on our website and our brochure. + </td> + </tr> + <tr><!-- Row 4 --> + <td>Red</td> + <td>$600</td> + <td>The red sponsorship helps us provide medical + care for the animals.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our + facility.</td> + </tr> + <tr><!-- Row 5 --> + <td>Purple</td> + <td>$800</td> + <td>The purple sponsorship helps us maintain homes + for the animals.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual + community event.</td> + </tr> + <tr><!-- Row 6 --> + <td>Silver</td> + <td>$1,000</td> + <td>The silver sponsorship supports our monthly + expenses.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual community + event. Recognition plaque with business name prominently + displayed within the facility.</td> + </tr> + <tr><!-- Row 7 --> + <td>Gold</td> + <td>$1,500</td> + <td>The gold sponsorship supports our operation costs.</td> + <td>Recognition on our website and our brochure. + Business logo displayed on a banner at our facility. + Business name and logo displayed at the annual community + event. Recognition plaque with business name prominently + displayed within the facility. Display table at the + annual community event. Recognition in all media + releases.</td> + </tr> + </table> + + </div> + </main> + + <footer> + <div class="copyright"> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </div> + <div class="social"> + <a href="https://www.facebook.com"><img src="i/facebook-logo.png" alt="Facebook logo"></a> + <a href="https://www.twitter.com"><img src="i/twitter-logo.png" alt="Twitter logo"></a> + </div> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/11/question.txt b/rescue/11/question.txt new file mode 100644 index 0000000..10e84f7 --- /dev/null +++ b/rescue/11/question.txt @@ -0,0 +1,7 @@ +Question: +In this exercise, you minified your stylesheet. What is the difference +in file size between the original and the minified file? + +Answer: +The full unminified CSS file is 5.8 kilobytes, while the minified CSS +file is 3.8 kilobytes, less than two-thirds the size of the original. diff --git a/rescue/11/scripts/script.js b/rescue/11/scripts/script.js new file mode 100644 index 0000000..c0c2dea --- /dev/null +++ b/rescue/11/scripts/script.js @@ -0,0 +1,46 @@ +/* + Student: Name Surname + File Name: script.js + Date: 2024/11/18 +*/ + +// Global variables +var answer = document.querySelector("#answer p"); +var heading = document.querySelector("#answer h2"); + +// Hamburger menu function +function hamburger() { + var navlinks = document.getElementById("nav-links"); + var menuicon = document.getElementById("icon"); + if (navlinks.style.display === "block") { + navlinks.style.display = "none"; + menuicon.style.color = "#2a1f14"; + }else { + navlinks.style.display = "block"; + menuicon.style.color = "#f6eee4"; + } +} + +// Function to display the first answer +function ans1() { + heading.style.display = "block"; + answer.textContent = "Step back and observe the situation for a a few minutes. Wait to see if a parent arrives. If the animal is in immediate danger from a predator or is in the road, remove the baby and bring to a rescue center."; +} + +// Function to display the second answer +function ans2() { + heading.style.display = "block"; + answer.textContent = "You cannot tell if an animal has rabies a simply by seeing it. A test must be performed to determine if an animal has rabies. Do not approach wildlife that you suspect might be rabid. Contact us to have the animal removed."; +} + +// Function to display the third answer +function ans3() { + heading.style.display = "block"; + answer.textContent = "No. This is a myth. The parents will retrieve the baby bird and place it back in its nest. If the parents do not return, contact us."; +} + +// Function to display the fourth answer +function ans4() { + heading.style.display = "block"; + answer.textContent = "We need volunteers to help feed animals, care a for animals, and clean animal pens. We also accept donations."; +} diff --git a/rescue/11/sitemap.txt b/rescue/11/sitemap.txt new file mode 100644 index 0000000..3f60d69 --- /dev/null +++ b/rescue/11/sitemap.txt @@ -0,0 +1,7 @@ +http://www.exampledomain.com/about.html +http://www.exampledomain.com/contact.html +http://www.exampledomain.com/faqs.html +http://www.exampledomain.com/gallery.html +http://www.exampledomain.com/index.html +http://www.exampledomain.com/partnership.html +http://www.exampledomain.com/template.html diff --git a/rescue/11/template.html b/rescue/11/template.html new file mode 100644 index 0000000..3317df9 --- /dev/null +++ b/rescue/11/template.html @@ -0,0 +1,78 @@ +<!doctype html> +<!-- + Student: Name Surname + File Name: template.html + Date: 2024/11/18 +--> +<html lang="en"><head><meta charset="utf-8"> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="stylesheet" href="css/styles.min.css"> +<link rel="shortcut icon" href="i/favicon.ico"> +<link rel="icon" type="image/png" sizes="32x32" href="i/favicon-32.png"> +<link rel="apple-touch-icon" sizes="180x180" href="i/apple-touch-icon.png"> +<link rel="icon" sizes="192x192" href="i/android-chrome-192.png"> +<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> +<!-- Skip to Content Link --> +<a class="skip" href="#content">Skip to Content</a> + +<div id="wrapper"> + <!-- Mobile Nav --> + <nav class="mobile-nav"> + <div id="nav-links"> + <a href="index.html">Home</a> + <a href="about.html">About Us</a> + <a href="partnership.html">Partnership</a> + <a href="gallery.html">Gallery</a> + <a href="faqs.html">FAQs</a> + <a href="contact.html">Contact Us</a> + </div> + <a class="nav-icon" onclick="hamburger()"> + <div id="icon">☰</div> + </a> + </nav> + + <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>🐾 Wild Rescues</h1> + <h3>Rescue. Rehabilitate. Release.</h3> + </div> + </header> + + <nav class="tab-desk"> + <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 id="content"> + <div> + </div> + </main> + + <footer> + <div class="copyright"> + <p>© Copyright 2021. All Rights Reserved.</p> + <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a> + </div> + <div class="social"> + <a href="https://www.facebook.com"><img src="i/facebook-logo.png" alt="Facebook logo"></a> + <a href="https://www.twitter.com"><img src="i/twitter-logo.png" alt="Twitter logo"></a> + </div> + </footer> +</div> +<script src="scripts/script.js"></script> +</body></html> diff --git a/rescue/12/css/styles.css b/rescue/12/css/styles.css new file mode 100644 index 0000000..695be8b --- /dev/null +++ b/rescue/12/css/styles.css @@ -0,0 +1,43 @@ +/* + Student Name: Name Surname + Date: 2024/12/01 + File Name: styles.css +*/ + +.hero{ + background-image: linear-gradient(rgba(255, 255, 255, 0.5), + rgba(255, 255, 255, 0.5)),url(../images/baby-hawk.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: right; +} +.welcome{ + position: absolute; + top: 40%; +} +.display-1{ + font-size: 4em; +} +.bg-brown{ + background-color: #2A1F14; +} + +/* Media Query for Tablet Viewport */ +@media (min-width: 768px) { + .welcome { + top: 20%; + left: 5%; + padding: 2em; + } +} + +/* Media Query for Desktop Viewport */ +@media (min-width: 992px) { + .hero { + background-position: left; + } + + .display-1 { + font-size: 8em; + } +} diff --git a/rescue/12/index.html b/rescue/12/index.html new file mode 100644 index 0000000..d178583 --- /dev/null +++ b/rescue/12/index.html @@ -0,0 +1,119 @@ +<!doctype html> +<!-- Name Surname 2024/12/01 --> +<html lang="en"> +<head> + <!-- Required meta tags --> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Wildlife Rescue | Wild Rescues</title> + <meta name="description" content="Wild Rescues is a local nonprofit organization dedicated to helping injured, neglected, or orphaned wildlife."> + <!-- Favicon --> + <link rel="shortcut icon" href="images/favicon.ico"> + <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32.png"> + <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png"> + <link rel="icon" sizes="192x192" href="images/android-chrome-192.png"> + <!-- Bootstrap CSS --> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> + <!-- jQuery JS --> + <script src=https://code.jquery.com/jquery-3.7.1.min.js integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> + <!-- Custom CSS --> + <link rel="stylesheet" href="css/styles.css"> +</head> +<body> + +<!-- Bootstrap Navigation bar --> +<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-brown"> + <a class="navbar-brand" href="index.html">Wild Rescues</a> + <!-- Hamburger menu icon --> + <button class="navbar-toggler" type="button" data-toggle="collapse" + data-target="#navbarResponsive" aria-controls="navbarResponsive" + aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <!-- Navbar links --> + <div class="collapse navbar-collapse" id="navbarResponsive"> + <ul class="navbar-nav ml-auto"> + <li class="nav-item"> + <a class="nav-link" href="index.html">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#.html">About</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#.html">Partnership</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#.html">Gallery</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#.html">FAQs</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#.html">Contact</a> + </li> + </ul> + </div> +</nav> + +<header class="jumbotron jumbotron-fluid hero"> + <div class="container welcome"> + <h1 class="display-1 font-weight-bolder">Wild Rescues</h1> + <p class="lead font-weight-bold">Rescue. Rehabilitate. Release.</p> + <a href="#.html" role="button" class="btn btn-outline-secondary btn-lg text-white bg-brown">Partner with Us</a> + </div> +</header> + +<!-- Main Content Area --> +<main class="container-fluid mt-5"> + <div class="row"> + <div class="col-sm-4"> + <h1>About Us</h1> + <p class="lead">We are a nonprofit organization dedicated to helping injured wildlife.</p> + <figure> + <a href="#.html"><img src="images/baby-raccoons.jpg" + alt="hands holding three baby raccoons" class="img-fluid rounded"></a> + </figure> + </div> + <div class="col-sm-4"> + <h1>Partnership</h1> + <p class="lead">Partner with us. Become a member or a sponsor. We also need volunteers.</p> + <figure> + <a href="#.html"><img src="images/blind-deer.jpg" + alt="blind deer" class="img-fluid rounded"></a> + </figure> + </div> + <div class="col-sm-4"> + <h1>Gallery</h1> + <p class="lead">We help many types of wildlife. Meet our rescued friends.</p> + <figure> + <a href="#.html"><img src="images/tortoise.jpg" + alt="tortoise eating vegetation" class="img-fluid rounded"></a> + </figure> + </div> + </div> +</main> + +<!-- Footer --> +<footer class="jumbotron-fluid text-center p-5 bg-brown"> + <div class="container text-white"> + <p>© Copyright 2021. All Rights Reserved.</p> + <p> + <a href="mailto:contact@wildrescues.net" + class="text-white">contact@wildrescues.net</a> + </p> + <a href="https://www.facebook.com" target="_blank"> + <img src="images/facebook-logo.png" + alt="white Facebook logo" class="pr-4"> + </a> + <a href="https://twitter.com" target="_blank"> + <img src="images/twitter-logo.png" + alt="white Twitter logo"> + </a> + </div> +</footer> + +<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> +<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> +<script src="scripts/script.js"></script> +</body> +</html> diff --git a/rescue/12/question.txt b/rescue/12/question.txt new file mode 100644 index 0000000..7b2a785 --- /dev/null +++ b/rescue/12/question.txt @@ -0,0 +1,19 @@ +Question: +In this exercise, you added Facebook and Twitter logos to the +footer element. Research how you can use Font Awesome to add +social media icons to a webpage and summarize your findings. + +Answer: +To use Font Awesome icons you need to link to the Font Awesome +CSS file from the <head> element within all of your HTML pages. +You can then add icons via the class attribute. + +Example HTML: + +<head> + <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.7.1/css/all.css"> +</head> +<body> + <a href="facebook.com" class="fab fa-facebook"></a> + <a href="twitter.com" class="fab fa-twitter"></a> +</body> diff --git a/rescue/12/scripts/bootstrap.js b/rescue/12/scripts/bootstrap.js new file mode 100644 index 0000000..d5dc5ea --- /dev/null +++ b/rescue/12/scripts/bootstrap.js @@ -0,0 +1,7 @@ +/*! + * Bootstrap v5.3.3 (https://getbootstrap.com/) + * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@popperjs/core")):"function"==typeof define&&define.amd?define(["@popperjs/core"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).bootstrap=e(t.Popper)}(this,(function(t){"use strict";function e(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t)for(const i in t)if("default"!==i){const s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,s.get?s:{enumerable:!0,get:()=>t[i]})}return e.default=t,Object.freeze(e)}const i=e(t),s=new Map,n={set(t,e,i){s.has(t)||s.set(t,new Map);const n=s.get(t);n.has(e)||0===n.size?n.set(e,i):console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(n.keys())[0]}.`)},get:(t,e)=>s.has(t)&&s.get(t).get(e)||null,remove(t,e){if(!s.has(t))return;const i=s.get(t);i.delete(e),0===i.size&&s.delete(t)}},o="transitionend",r=t=>(t&&window.CSS&&window.CSS.escape&&(t=t.replace(/#([^\s"#']+)/g,((t,e)=>`#${CSS.escape(e)}`))),t),a=t=>{t.dispatchEvent(new Event(o))},l=t=>!(!t||"object"!=typeof t)&&(void 0!==t.jquery&&(t=t[0]),void 0!==t.nodeType),c=t=>l(t)?t.jquery?t[0]:t:"string"==typeof t&&t.length>0?document.querySelector(r(t)):null,h=t=>{if(!l(t)||0===t.getClientRects().length)return!1;const e="visible"===getComputedStyle(t).getPropertyValue("visibility"),i=t.closest("details:not([open])");if(!i)return e;if(i!==t){const e=t.closest("summary");if(e&&e.parentNode!==i)return!1;if(null===e)return!1}return e},d=t=>!t||t.nodeType!==Node.ELEMENT_NODE||!!t.classList.contains("disabled")||(void 0!==t.disabled?t.disabled:t.hasAttribute("disabled")&&"false"!==t.getAttribute("disabled")),u=t=>{if(!document.documentElement.attachShadow)return null;if("function"==typeof t.getRootNode){const e=t.getRootNode();return e instanceof ShadowRoot?e:null}return t instanceof ShadowRoot?t:t.parentNode?u(t.parentNode):null},_=()=>{},g=t=>{t.offsetHeight},f=()=>window.jQuery&&!document.body.hasAttribute("data-bs-no-jquery")?window.jQuery:null,m=[],p=()=>"rtl"===document.documentElement.dir,b=t=>{var e;e=()=>{const e=f();if(e){const i=t.NAME,s=e.fn[i];e.fn[i]=t.jQueryInterface,e.fn[i].Constructor=t,e.fn[i].noConflict=()=>(e.fn[i]=s,t.jQueryInterface)}},"loading"===document.readyState?(m.length||document.addEventListener("DOMContentLoaded",(()=>{for(const t of m)t()})),m.push(e)):e()},v=(t,e=[],i=t)=>"function"==typeof t?t(...e):i,y=(t,e,i=!0)=>{if(!i)return void v(t);const s=(t=>{if(!t)return 0;let{transitionDuration:e,transitionDelay:i}=window.getComputedStyle(t);const s=Number.parseFloat(e),n=Number.parseFloat(i);return s||n?(e=e.split(",")[0],i=i.split(",")[0],1e3*(Number.parseFloat(e)+Number.parseFloat(i))):0})(e)+5;let n=!1;const r=({target:i})=>{i===e&&(n=!0,e.removeEventListener(o,r),v(t))};e.addEventListener(o,r),setTimeout((()=>{n||a(e)}),s)},w=(t,e,i,s)=>{const n=t.length;let o=t.indexOf(e);return-1===o?!i&&s?t[n-1]:t[0]:(o+=i?1:-1,s&&(o=(o+n)%n),t[Math.max(0,Math.min(o,n-1))])},A=/[^.]*(?=\..*)\.|.*/,E=/\..*/,C=/::\d+$/,T={};let k=1;const $={mouseenter:"mouseover",mouseleave:"mouseout"},S=new Set(["click","dblclick","mouseup","mousedown","contextmenu","mousewheel","DOMMouseScroll","mouseover","mouseout","mousemove","selectstart","selectend","keydown","keypress","keyup","orientationchange","touchstart","touchmove","touchend","touchcancel","pointerdown","pointermove","pointerup","pointerleave","pointercancel","gesturestart","gesturechange","gestureend","focus","blur","change","reset","select","submit","focusin","focusout","load","unload","beforeunload","resize","move","DOMContentLoaded","readystatechange","error","abort","scroll"]);function L(t,e){return e&&`${e}::${k++}`||t.uidEvent||k++}function O(t){const e=L(t);return t.uidEvent=e,T[e]=T[e]||{},T[e]}function I(t,e,i=null){return Object.values(t).find((t=>t.callable===e&&t.delegationSelector===i))}function D(t,e,i){const s="string"==typeof e,n=s?i:e||i;let o=M(t);return S.has(o)||(o=t),[s,n,o]}function N(t,e,i,s,n){if("string"!=typeof e||!t)return;let[o,r,a]=D(e,i,s);if(e in $){const t=t=>function(e){if(!e.relatedTarget||e.relatedTarget!==e.delegateTarget&&!e.delegateTarget.contains(e.relatedTarget))return t.call(this,e)};r=t(r)}const l=O(t),c=l[a]||(l[a]={}),h=I(c,r,o?i:null);if(h)return void(h.oneOff=h.oneOff&&n);const d=L(r,e.replace(A,"")),u=o?function(t,e,i){return function s(n){const o=t.querySelectorAll(e);for(let{target:r}=n;r&&r!==this;r=r.parentNode)for(const a of o)if(a===r)return F(n,{delegateTarget:r}),s.oneOff&&j.off(t,n.type,e,i),i.apply(r,[n])}}(t,i,r):function(t,e){return function i(s){return F(s,{delegateTarget:t}),i.oneOff&&j.off(t,s.type,e),e.apply(t,[s])}}(t,r);u.delegationSelector=o?i:null,u.callable=r,u.oneOff=n,u.uidEvent=d,c[d]=u,t.addEventListener(a,u,o)}function P(t,e,i,s,n){const o=I(e[i],s,n);o&&(t.removeEventListener(i,o,Boolean(n)),delete e[i][o.uidEvent])}function x(t,e,i,s){const n=e[i]||{};for(const[o,r]of Object.entries(n))o.includes(s)&&P(t,e,i,r.callable,r.delegationSelector)}function M(t){return t=t.replace(E,""),$[t]||t}const j={on(t,e,i,s){N(t,e,i,s,!1)},one(t,e,i,s){N(t,e,i,s,!0)},off(t,e,i,s){if("string"!=typeof e||!t)return;const[n,o,r]=D(e,i,s),a=r!==e,l=O(t),c=l[r]||{},h=e.startsWith(".");if(void 0===o){if(h)for(const i of Object.keys(l))x(t,l,i,e.slice(1));for(const[i,s]of Object.entries(c)){const n=i.replace(C,"");a&&!e.includes(n)||P(t,l,r,s.callable,s.delegationSelector)}}else{if(!Object.keys(c).length)return;P(t,l,r,o,n?i:null)}},trigger(t,e,i){if("string"!=typeof e||!t)return null;const s=f();let n=null,o=!0,r=!0,a=!1;e!==M(e)&&s&&(n=s.Event(e,i),s(t).trigger(n),o=!n.isPropagationStopped(),r=!n.isImmediatePropagationStopped(),a=n.isDefaultPrevented());const l=F(new Event(e,{bubbles:o,cancelable:!0}),i);return a&&l.preventDefault(),r&&t.dispatchEvent(l),l.defaultPrevented&&n&&n.preventDefault(),l}};function F(t,e={}){for(const[i,s]of Object.entries(e))try{t[i]=s}catch(e){Object.defineProperty(t,i,{configurable:!0,get:()=>s})}return t}function z(t){if("true"===t)return!0;if("false"===t)return!1;if(t===Number(t).toString())return Number(t);if(""===t||"null"===t)return null;if("string"!=typeof t)return t;try{return JSON.parse(decodeURIComponent(t))}catch(e){return t}}function H(t){return t.replace(/[A-Z]/g,(t=>`-${t.toLowerCase()}`))}const B={setDataAttribute(t,e,i){t.setAttribute(`data-bs-${H(e)}`,i)},removeDataAttribute(t,e){t.removeAttribute(`data-bs-${H(e)}`)},getDataAttributes(t){if(!t)return{};const e={},i=Object.keys(t.dataset).filter((t=>t.startsWith("bs")&&!t.startsWith("bsConfig")));for(const s of i){let i=s.replace(/^bs/,"");i=i.charAt(0).toLowerCase()+i.slice(1,i.length),e[i]=z(t.dataset[s])}return e},getDataAttribute:(t,e)=>z(t.getAttribute(`data-bs-${H(e)}`))};class q{static get Default(){return{}}static get DefaultType(){return{}}static get NAME(){throw new Error('You have to implement the static method "NAME", for each component!')}_getConfig(t){return t=this._mergeConfigObj(t),t=this._configAfterMerge(t),this._typeCheckConfig(t),t}_configAfterMerge(t){return t}_mergeConfigObj(t,e){const i=l(e)?B.getDataAttribute(e,"config"):{};return{...this.constructor.Default,..."object"==typeof i?i:{},...l(e)?B.getDataAttributes(e):{},..."object"==typeof t?t:{}}}_typeCheckConfig(t,e=this.constructor.DefaultType){for(const[s,n]of Object.entries(e)){const e=t[s],o=l(e)?"element":null==(i=e)?`${i}`:Object.prototype.toString.call(i).match(/\s([a-z]+)/i)[1].toLowerCase();if(!new RegExp(n).test(o))throw new TypeError(`${this.constructor.NAME.toUpperCase()}: Option "${s}" provided type "${o}" but expected type "${n}".`)}var i}}class W extends q{constructor(t,e){super(),(t=c(t))&&(this._element=t,this._config=this._getConfig(e),n.set(this._element,this.constructor.DATA_KEY,this))}dispose(){n.remove(this._element,this.constructor.DATA_KEY),j.off(this._element,this.constructor.EVENT_KEY);for(const t of Object.getOwnPropertyNames(this))this[t]=null}_queueCallback(t,e,i=!0){y(t,e,i)}_getConfig(t){return t=this._mergeConfigObj(t,this._element),t=this._configAfterMerge(t),this._typeCheckConfig(t),t}static getInstance(t){return n.get(c(t),this.DATA_KEY)}static getOrCreateInstance(t,e={}){return this.getInstance(t)||new this(t,"object"==typeof e?e:null)}static get VERSION(){return"5.3.3"}static get DATA_KEY(){return`bs.${this.NAME}`}static get EVENT_KEY(){return`.${this.DATA_KEY}`}static eventName(t){return`${t}${this.EVENT_KEY}`}}const R=t=>{let e=t.getAttribute("data-bs-target");if(!e||"#"===e){let i=t.getAttribute("href");if(!i||!i.includes("#")&&!i.startsWith("."))return null;i.includes("#")&&!i.startsWith("#")&&(i=`#${i.split("#")[1]}`),e=i&&"#"!==i?i.trim():null}return e?e.split(",").map((t=>r(t))).join(","):null},K={find:(t,e=document.documentElement)=>[].concat(...Element.prototype.querySelectorAll.call(e,t)),findOne:(t,e=document.documentElement)=>Element.prototype.querySelector.call(e,t),children:(t,e)=>[].concat(...t.children).filter((t=>t.matches(e))),parents(t,e){const i=[];let s=t.parentNode.closest(e);for(;s;)i.push(s),s=s.parentNode.closest(e);return i},prev(t,e){let i=t.previousElementSibling;for(;i;){if(i.matches(e))return[i];i=i.previousElementSibling}return[]},next(t,e){let i=t.nextElementSibling;for(;i;){if(i.matches(e))return[i];i=i.nextElementSibling}return[]},focusableChildren(t){const e=["a","button","input","textarea","select","details","[tabindex]",'[contenteditable="true"]'].map((t=>`${t}:not([tabindex^="-"])`)).join(",");return this.find(e,t).filter((t=>!d(t)&&h(t)))},getSelectorFromElement(t){const e=R(t);return e&&K.findOne(e)?e:null},getElementFromSelector(t){const e=R(t);return e?K.findOne(e):null},getMultipleElementsFromSelector(t){const e=R(t);return e?K.find(e):[]}},V=(t,e="hide")=>{const i=`click.dismiss${t.EVENT_KEY}`,s=t.NAME;j.on(document,i,`[data-bs-dismiss="${s}"]`,(function(i){if(["A","AREA"].includes(this.tagName)&&i.preventDefault(),d(this))return;const n=K.getElementFromSelector(this)||this.closest(`.${s}`);t.getOrCreateInstance(n)[e]()}))},Q=".bs.alert",X=`close${Q}`,Y=`closed${Q}`;class U extends W{static get NAME(){return"alert"}close(){if(j.trigger(this._element,X).defaultPrevented)return;this._element.classList.remove("show");const t=this._element.classList.contains("fade");this._queueCallback((()=>this._destroyElement()),this._element,t)}_destroyElement(){this._element.remove(),j.trigger(this._element,Y),this.dispose()}static jQueryInterface(t){return this.each((function(){const e=U.getOrCreateInstance(this);if("string"==typeof t){if(void 0===e[t]||t.startsWith("_")||"constructor"===t)throw new TypeError(`No method named "${t}"`);e[t](this)}}))}}V(U,"close"),b(U);const G='[data-bs-toggle="button"]';class J extends W{static get NAME(){return"button"}toggle(){this._element.setAttribute("aria-pressed",this._element.classList.toggle("active"))}static jQueryInterface(t){return this.each((function(){const e=J.getOrCreateInstance(this);"toggle"===t&&e[t]()}))}}j.on(document,"click.bs.button.data-api",G,(t=>{t.preventDefault();const e=t.target.closest(G);J.getOrCreateInstance(e).toggle()})),b(J);const Z=".bs.swipe",tt=`touchstart${Z}`,et=`touchmove${Z}`,it=`touchend${Z}`,st=`pointerdown${Z}`,nt=`pointerup${Z}`,ot={endCallback:null,leftCallback:null,rightCallback:null},rt={endCallback:"(function|null)",leftCallback:"(function|null)",rightCallback:"(function|null)"};class at extends q{constructor(t,e){super(),this._element=t,t&&at.isSupported()&&(this._config=this._getConfig(e),this._deltaX=0,this._supportPointerEvents=Boolean(window.PointerEvent),this._initEvents())}static get Default(){return ot}static get DefaultType(){return rt}static get NAME(){return"swipe"}dispose(){j.off(this._element,Z)}_start(t){this._supportPointerEvents?this._eventIsPointerPenTouch(t)&&(this._deltaX=t.clientX):this._deltaX=t.touches[0].clientX}_end(t){this._eventIsPointerPenTouch(t)&&(this._deltaX=t.clientX-this._deltaX),this._handleSwipe(),v(this._config.endCallback)}_move(t){this._deltaX=t.touches&&t.touches.length>1?0:t.touches[0].clientX-this._deltaX}_handleSwipe(){const t=Math.abs(this._deltaX);if(t<=40)return;const e=t/this._deltaX;this._deltaX=0,e&&v(e>0?this._config.rightCallback:this._config.leftCallback)}_initEvents(){this._supportPointerEvents?(j.on(this._element,st,(t=>this._start(t))),j.on(this._element,nt,(t=>this._end(t))),this._element.classList.add("pointer-event")):(j.on(this._element,tt,(t=>this._start(t))),j.on(this._element,et,(t=>this._move(t))),j.on(this._element,it,(t=>this._end(t))))}_eventIsPointerPenTouch(t){return this._supportPointerEvents&&("pen"===t.pointerType||"touch"===t.pointerType)}static isSupported(){return"ontouchstart"in document.documentElement||navigator.maxTouchPoints>0}}const lt=".bs.carousel",ct=".data-api",ht="next",dt="prev",ut="left",_t="right",gt=`slide${lt}`,ft=`slid${lt}`,mt=`keydown${lt}`,pt=`mouseenter${lt}`,bt=`mouseleave${lt}`,vt=`dragstart${lt}`,yt=`load${lt}${ct}`,wt=`click${lt}${ct}`,At="carousel",Et="active",Ct=".active",Tt=".carousel-item",kt=Ct+Tt,$t={ArrowLeft:_t,ArrowRight:ut},St={interval:5e3,keyboard:!0,pause:"hover",ride:!1,touch:!0,wrap:!0},Lt={interval:"(number|boolean)",keyboard:"boolean",pause:"(string|boolean)",ride:"(boolean|string)",touch:"boolean",wrap:"boolean"};class Ot extends W{constructor(t,e){super(t,e),this._interval=null,this._activeElement=null,this._isSliding=!1,this.touchTimeout=null,this._swipeHelper=null,this._indicatorsElement=K.findOne(".carousel-indicators",this._element),this._addEventListeners(),this._config.ride===At&&this.cycle()}static get Default(){return St}static get DefaultType(){return Lt}static get NAME(){return"carousel"}next(){this._slide(ht)}nextWhenVisible(){!document.hidden&&h(this._element)&&this.next()}prev(){this._slide(dt)}pause(){this._isSliding&&a(this._element),this._clearInterval()}cycle(){this._clearInterval(),this._updateInterval(),this._interval=setInterval((()=>this.nextWhenVisible()),this._config.interval)}_maybeEnableCycle(){this._config.ride&&(this._isSliding?j.one(this._element,ft,(()=>this.cycle())):this.cycle())}to(t){const e=this._getItems();if(t>e.length-1||t<0)return;if(this._isSliding)return void j.one(this._element,ft,(()=>this.to(t)));const i=this._getItemIndex(this._getActive());if(i===t)return;const s=t>i?ht:dt;this._slide(s,e[t])}dispose(){this._swipeHelper&&this._swipeHelper.dispose(),super.dispose()}_configAfterMerge(t){return t.defaultInterval=t.interval,t}_addEventListeners(){this._config.keyboard&&j.on(this._element,mt,(t=>this._keydown(t))),"hover"===this._config.pause&&(j.on(this._element,pt,(()=>this.pause())),j.on(this._element,bt,(()=>this._maybeEnableCycle()))),this._config.touch&&at.isSupported()&&this._addTouchEventListeners()}_addTouchEventListeners(){for(const t of K.find(".carousel-item img",this._element))j.on(t,vt,(t=>t.preventDefault()));const t={leftCallback:()=>this._slide(this._directionToOrder(ut)),rightCallback:()=>this._slide(this._directionToOrder(_t)),endCallback:()=>{"hover"===this._config.pause&&(this.pause(),this.touchTimeout&&clearTimeout(this.touchTimeout),this.touchTimeout=setTimeout((()=>this._maybeEnableCycle()),500+this._config.interval))}};this._swipeHelper=new at(this._element,t)}_keydown(t){if(/input|textarea/i.test(t.target.tagName))return;const e=$t[t.key];e&&(t.preventDefault(),this._slide(this._directionToOrder(e)))}_getItemIndex(t){return this._getItems().indexOf(t)}_setActiveIndicatorElement(t){if(!this._indicatorsElement)return;const e=K.findOne(Ct,this._indicatorsElement);e.classList.remove(Et),e.removeAttribute("aria-current");const i=K.findOne(`[data-bs-slide-to="${t}"]`,this._indicatorsElement);i&&(i.classList.add(Et),i.setAttribute("aria-current","true"))}_updateInterval(){const t=this._activeElement||this._getActive();if(!t)return;const e=Number.parseInt(t.getAttribute("data-bs-interval"),10);this._config.interval=e||this._config.defaultInterval}_slide(t,e=null){if(this._isSliding)return;const i=this._getActive(),s=t===ht,n=e||w(this._getItems(),i,s,this._config.wrap);if(n===i)return;const o=this._getItemIndex(n),r=e=>j.trigger(this._element,e,{relatedTarget:n,direction:this._orderToDirection(t),from:this._getItemIndex(i),to:o});if(r(gt).defaultPrevented)return;if(!i||!n)return;const a=Boolean(this._interval);this.pause(),this._isSliding=!0,this._setActiveIndicatorElement(o),this._activeElement=n;const l=s?"carousel-item-start":"carousel-item-end",c=s?"carousel-item-next":"carousel-item-prev";n.classList.add(c),g(n),i.classList.add(l),n.classList.add(l),this._queueCallback((()=>{n.classList.remove(l,c),n.classList.add(Et),i.classList.remove(Et,c,l),this._isSliding=!1,r(ft)}),i,this._isAnimated()),a&&this.cycle()}_isAnimated(){return this._element.classList.contains("slide")}_getActive(){return K.findOne(kt,this._element)}_getItems(){return K.find(Tt,this._element)}_clearInterval(){this._interval&&(clearInterval(this._interval),this._interval=null)}_directionToOrder(t){return p()?t===ut?dt:ht:t===ut?ht:dt}_orderToDirection(t){return p()?t===dt?ut:_t:t===dt?_t:ut}static jQueryInterface(t){return this.each((function(){const e=Ot.getOrCreateInstance(this,t);if("number"!=typeof t){if("string"==typeof t){if(void 0===e[t]||t.startsWith("_")||"constructor"===t)throw new TypeError(`No method named "${t}"`);e[t]()}}else e.to(t)}))}}j.on(document,wt,"[data-bs-slide], [data-bs-slide-to]",(function(t){const e=K.getElementFromSelector(this);if(!e||!e.classList.contains(At))return;t.preventDefault();const i=Ot.getOrCreateInstance(e),s=this.getAttribute("data-bs-slide-to");return s?(i.to(s),void i._maybeEnableCycle()):"next"===B.getDataAttribute(this,"slide")?(i.next(),void i._maybeEnableCycle()):(i.prev(),void i._maybeEnableCycle())})),j.on(window,yt,(()=>{const t=K.find('[data-bs-ride="carousel"]');for(const e of t)Ot.getOrCreateInstance(e)})),b(Ot);const It=".bs.collapse",Dt=`show${It}`,Nt=`shown${It}`,Pt=`hide${It}`,xt=`hidden${It}`,Mt=`click${It}.data-api`,jt="show",Ft="collapse",zt="collapsing",Ht=`:scope .${Ft} .${Ft}`,Bt='[data-bs-toggle="collapse"]',qt={parent:null,toggle:!0},Wt={parent:"(null|element)",toggle:"boolean"};class Rt extends W{constructor(t,e){super(t,e),this._isTransitioning=!1,this._triggerArray=[];const i=K.find(Bt);for(const t of i){const e=K.getSelectorFromElement(t),i=K.find(e).filter((t=>t===this._element));null!==e&&i.length&&this._triggerArray.push(t)}this._initializeChildren(),this._config.parent||this._addAriaAndCollapsedClass(this._triggerArray,this._isShown()),this._config.toggle&&this.toggle()}static get Default(){return qt}static get DefaultType(){return Wt}static get NAME(){return"collapse"}toggle(){this._isShown()?this.hide():this.show()}show(){if(this._isTransitioning||this._isShown())return;let t=[];if(this._config.parent&&(t=this._getFirstLevelChildren(".collapse.show, .collapse.collapsing").filter((t=>t!==this._element)).map((t=>Rt.getOrCreateInstance(t,{toggle:!1})))),t.length&&t[0]._isTransitioning)return;if(j.trigger(this._element,Dt).defaultPrevented)return;for(const e of t)e.hide();const e=this._getDimension();this._element.classList.remove(Ft),this._element.classList.add(zt),this._element.style[e]=0,this._addAriaAndCollapsedClass(this._triggerArray,!0),this._isTransitioning=!0;const i=`scroll${e[0].toUpperCase()+e.slice(1)}`;this._queueCallback((()=>{this._isTransitioning=!1,this._element.classList.remove(zt),this._element.classList.add(Ft,jt),this._element.style[e]="",j.trigger(this._element,Nt)}),this._element,!0),this._element.style[e]=`${this._element[i]}px`}hide(){if(this._isTransitioning||!this._isShown())return;if(j.trigger(this._element,Pt).defaultPrevented)return;const t=this._getDimension();this._element.style[t]=`${this._element.getBoundingClientRect()[t]}px`,g(this._element),this._element.classList.add(zt),this._element.classList.remove(Ft,jt);for(const t of this._triggerArray){const e=K.getElementFromSelector(t);e&&!this._isShown(e)&&this._addAriaAndCollapsedClass([t],!1)}this._isTransitioning=!0,this._element.style[t]="",this._queueCallback((()=>{this._isTransitioning=!1,this._element.classList.remove(zt),this._element.classList.add(Ft),j.trigger(this._element,xt)}),this._element,!0)}_isShown(t=this._element){return t.classList.contains(jt)}_configAfterMerge(t){return t.toggle=Boolean(t.toggle),t.parent=c(t.parent),t}_getDimension(){return this._element.classList.contains("collapse-horizontal")?"width":"height"}_initializeChildren(){if(!this._config.parent)return;const t=this._getFirstLevelChildren(Bt);for(const e of t){const t=K.getElementFromSelector(e);t&&this._addAriaAndCollapsedClass([e],this._isShown(t))}}_getFirstLevelChildren(t){const e=K.find(Ht,this._config.parent);return K.find(t,this._config.parent).filter((t=>!e.includes(t)))}_addAriaAndCollapsedClass(t,e){if(t.length)for(const i of t)i.classList.toggle("collapsed",!e),i.setAttribute("aria-expanded",e)}static jQueryInterface(t){const e={};return"string"==typeof t&&/show|hide/.test(t)&&(e.toggle=!1),this.each((function(){const i=Rt.getOrCreateInstance(this,e);if("string"==typeof t){if(void 0===i[t])throw new TypeError(`No method named "${t}"`);i[t]()}}))}}j.on(document,Mt,Bt,(function(t){("A"===t.target.tagName||t.delegateTarget&&"A"===t.delegateTarget.tagName)&&t.preventDefault();for(const t of K.getMultipleElementsFromSelector(this))Rt.getOrCreateInstance(t,{toggle:!1}).toggle()})),b(Rt);const Kt="dropdown",Vt=".bs.dropdown",Qt=".data-api",Xt="ArrowUp",Yt="ArrowDown",Ut=`hide${Vt}`,Gt=`hidden${Vt}`,Jt=`show${Vt}`,Zt=`shown${Vt}`,te=`click${Vt}${Qt}`,ee=`keydown${Vt}${Qt}`,ie=`keyup${Vt}${Qt}`,se="show",ne='[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)',oe=`${ne}.${se}`,re=".dropdown-menu",ae=p()?"top-end":"top-start",le=p()?"top-start":"top-end",ce=p()?"bottom-end":"bottom-start",he=p()?"bottom-start":"bottom-end",de=p()?"left-start":"right-start",ue=p()?"right-start":"left-start",_e={autoClose:!0,boundary:"clippingParents",display:"dynamic",offset:[0,2],popperConfig:null,reference:"toggle"},ge={autoClose:"(boolean|string)",boundary:"(string|element)",display:"string",offset:"(array|string|function)",popperConfig:"(null|object|function)",reference:"(string|element|object)"};class fe extends W{constructor(t,e){super(t,e),this._popper=null,this._parent=this._element.parentNode,this._menu=K.next(this._element,re)[0]||K.prev(this._element,re)[0]||K.findOne(re,this._parent),this._inNavbar=this._detectNavbar()}static get Default(){return _e}static get DefaultType(){return ge}static get NAME(){return Kt}toggle(){return this._isShown()?this.hide():this.show()}show(){if(d(this._element)||this._isShown())return;const t={relatedTarget:this._element};if(!j.trigger(this._element,Jt,t).defaultPrevented){if(this._createPopper(),"ontouchstart"in document.documentElement&&!this._parent.closest(".navbar-nav"))for(const t of[].concat(...document.body.children))j.on(t,"mouseover",_);this._element.focus(),this._element.setAttribute("aria-expanded",!0),this._menu.classList.add(se),this._element.classList.add(se),j.trigger(this._element,Zt,t)}}hide(){if(d(this._element)||!this._isShown())return;const t={relatedTarget:this._element};this._completeHide(t)}dispose(){this._popper&&this._popper.destroy(),super.dispose()}update(){this._inNavbar=this._detectNavbar(),this._popper&&this._popper.update()}_completeHide(t){if(!j.trigger(this._element,Ut,t).defaultPrevented){if("ontouchstart"in document.documentElement)for(const t of[].concat(...document.body.children))j.off(t,"mouseover",_);this._popper&&this._popper.destroy(),this._menu.classList.remove(se),this._element.classList.remove(se),this._element.setAttribute("aria-expanded","false"),B.removeDataAttribute(this._menu,"popper"),j.trigger(this._element,Gt,t)}}_getConfig(t){if("object"==typeof(t=super._getConfig(t)).reference&&!l(t.reference)&&"function"!=typeof t.reference.getBoundingClientRect)throw new TypeError(`${Kt.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);return t}_createPopper(){if(void 0===i)throw new TypeError("Bootstrap's dropdowns require Popper (https://popper.js.org)");let t=this._element;"parent"===this._config.reference?t=this._parent:l(this._config.reference)?t=c(this._config.reference):"object"==typeof this._config.reference&&(t=this._config.reference);const e=this._getPopperConfig();this._popper=i.createPopper(t,this._menu,e)}_isShown(){return this._menu.classList.contains(se)}_getPlacement(){const t=this._parent;if(t.classList.contains("dropend"))return de;if(t.classList.contains("dropstart"))return ue;if(t.classList.contains("dropup-center"))return"top";if(t.classList.contains("dropdown-center"))return"bottom";const e="end"===getComputedStyle(this._menu).getPropertyValue("--bs-position").trim();return t.classList.contains("dropup")?e?le:ae:e?he:ce}_detectNavbar(){return null!==this._element.closest(".navbar")}_getOffset(){const{offset:t}=this._config;return"string"==typeof t?t.split(",").map((t=>Number.parseInt(t,10))):"function"==typeof t?e=>t(e,this._element):t}_getPopperConfig(){const t={placement:this._getPlacement(),modifiers:[{name:"preventOverflow",options:{boundary:this._config.boundary}},{name:"offset",options:{offset:this._getOffset()}}]};return(this._inNavbar||"static"===this._config.display)&&(B.setDataAttribute(this._menu,"popper","static"),t.modifiers=[{name:"applyStyles",enabled:!1}]),{...t,...v(this._config.popperConfig,[t])}}_selectMenuItem({key:t,target:e}){const i=K.find(".dropdown-menu .dropdown-item:not(.disabled):not(:disabled)",this._menu).filter((t=>h(t)));i.length&&w(i,e,t===Yt,!i.includes(e)).focus()}static jQueryInterface(t){return this.each((function(){const e=fe.getOrCreateInstance(this,t);if("string"==typeof t){if(void 0===e[t])throw new TypeError(`No method named "${t}"`);e[t]()}}))}static clearMenus(t){if(2===t.button||"keyup"===t.type&&"Tab"!==t.key)return;const e=K.find(oe);for(const i of e){const e=fe.getInstance(i);if(!e||!1===e._config.autoClose)continue;const s=t.composedPath(),n=s.includes(e._menu);if(s.includes(e._element)||"inside"===e._config.autoClose&&!n||"outside"===e._config.autoClose&&n)continue;if(e._menu.contains(t.target)&&("keyup"===t.type&&"Tab"===t.key||/input|select|option|textarea|form/i.test(t.target.tagName)))continue;const o={relatedTarget:e._element};"click"===t.type&&(o.clickEvent=t),e._completeHide(o)}}static dataApiKeydownHandler(t){const e=/input|textarea/i.test(t.target.tagName),i="Escape"===t.key,s=[Xt,Yt].includes(t.key);if(!s&&!i)return;if(e&&!i)return;t.preventDefault();const n=this.matches(ne)?this:K.prev(this,ne)[0]||K.next(this,ne)[0]||K.findOne(ne,t.delegateTarget.parentNode),o=fe.getOrCreateInstance(n);if(s)return t.stopPropagation(),o.show(),void o._selectMenuItem(t);o._isShown()&&(t.stopPropagation(),o.hide(),n.focus())}}j.on(document,ee,ne,fe.dataApiKeydownHandler),j.on(document,ee,re,fe.dataApiKeydownHandler),j.on(document,te,fe.clearMenus),j.on(document,ie,fe.clearMenus),j.on(document,te,ne,(function(t){t.preventDefault(),fe.getOrCreateInstance(this).toggle()})),b(fe);const me="backdrop",pe="show",be=`mousedown.bs.${me}`,ve={className:"modal-backdrop",clickCallback:null,isAnimated:!1,isVisible:!0,rootElement:"body"},ye={className:"string",clickCallback:"(function|null)",isAnimated:"boolean",isVisible:"boolean",rootElement:"(element|string)"};class we extends q{constructor(t){super(),this._config=this._getConfig(t),this._isAppended=!1,this._element=null}static get Default(){return ve}static get DefaultType(){return ye}static get NAME(){return me}show(t){if(!this._config.isVisible)return void v(t);this._append();const e=this._getElement();this._config.isAnimated&&g(e),e.classList.add(pe),this._emulateAnimation((()=>{v(t)}))}hide(t){this._config.isVisible?(this._getElement().classList.remove(pe),this._emulateAnimation((()=>{this.dispose(),v(t)}))):v(t)}dispose(){this._isAppended&&(j.off(this._element,be),this._element.remove(),this._isAppended=!1)}_getElement(){if(!this._element){const t=document.createElement("div");t.className=this._config.className,this._config.isAnimated&&t.classList.add("fade"),this._element=t}return this._element}_configAfterMerge(t){return t.rootElement=c(t.rootElement),t}_append(){if(this._isAppended)return;const t=this._getElement();this._config.rootElement.append(t),j.on(t,be,(()=>{v(this._config.clickCallback)})),this._isAppended=!0}_emulateAnimation(t){y(t,this._getElement(),this._config.isAnimated)}}const Ae=".bs.focustrap",Ee=`focusin${Ae}`,Ce=`keydown.tab${Ae}`,Te="backward",ke={autofocus:!0,trapElement:null},$e={autofocus:"boolean",trapElement:"element"};class Se extends q{constructor(t){super(),this._config=this._getConfig(t),this._isActive=!1,this._lastTabNavDirection=null}static get Default(){return ke}static get DefaultType(){return $e}static get NAME(){return"focustrap"}activate(){this._isActive||(this._config.autofocus&&this._config.trapElement.focus(),j.off(document,Ae),j.on(document,Ee,(t=>this._handleFocusin(t))),j.on(document,Ce,(t=>this._handleKeydown(t))),this._isActive=!0)}deactivate(){this._isActive&&(this._isActive=!1,j.off(document,Ae))}_handleFocusin(t){const{trapElement:e}=this._config;if(t.target===document||t.target===e||e.contains(t.target))return;const i=K.focusableChildren(e);0===i.length?e.focus():this._lastTabNavDirection===Te?i[i.length-1].focus():i[0].focus()}_handleKeydown(t){"Tab"===t.key&&(this._lastTabNavDirection=t.shiftKey?Te:"forward")}}const Le=".fixed-top, .fixed-bottom, .is-fixed, .sticky-top",Oe=".sticky-top",Ie="padding-right",De="margin-right";class Ne{constructor(){this._element=document.body}getWidth(){const t=document.documentElement.clientWidth;return Math.abs(window.innerWidth-t)}hide(){const t=this.getWidth();this._disableOverFlow(),this._setElementAttributes(this._element,Ie,(e=>e+t)),this._setElementAttributes(Le,Ie,(e=>e+t)),this._setElementAttributes(Oe,De,(e=>e-t))}reset(){this._resetElementAttributes(this._element,"overflow"),this._resetElementAttributes(this._element,Ie),this._resetElementAttributes(Le,Ie),this._resetElementAttributes(Oe,De)}isOverflowing(){return this.getWidth()>0}_disableOverFlow(){this._saveInitialAttribute(this._element,"overflow"),this._element.style.overflow="hidden"}_setElementAttributes(t,e,i){const s=this.getWidth();this._applyManipulationCallback(t,(t=>{if(t!==this._element&&window.innerWidth>t.clientWidth+s)return;this._saveInitialAttribute(t,e);const n=window.getComputedStyle(t).getPropertyValue(e);t.style.setProperty(e,`${i(Number.parseFloat(n))}px`)}))}_saveInitialAttribute(t,e){const i=t.style.getPropertyValue(e);i&&B.setDataAttribute(t,e,i)}_resetElementAttributes(t,e){this._applyManipulationCallback(t,(t=>{const i=B.getDataAttribute(t,e);null!==i?(B.removeDataAttribute(t,e),t.style.setProperty(e,i)):t.style.removeProperty(e)}))}_applyManipulationCallback(t,e){if(l(t))e(t);else for(const i of K.find(t,this._element))e(i)}}const Pe=".bs.modal",xe=`hide${Pe}`,Me=`hidePrevented${Pe}`,je=`hidden${Pe}`,Fe=`show${Pe}`,ze=`shown${Pe}`,He=`resize${Pe}`,Be=`click.dismiss${Pe}`,qe=`mousedown.dismiss${Pe}`,We=`keydown.dismiss${Pe}`,Re=`click${Pe}.data-api`,Ke="modal-open",Ve="show",Qe="modal-static",Xe={backdrop:!0,focus:!0,keyboard:!0},Ye={backdrop:"(boolean|string)",focus:"boolean",keyboard:"boolean"};class Ue extends W{constructor(t,e){super(t,e),this._dialog=K.findOne(".modal-dialog",this._element),this._backdrop=this._initializeBackDrop(),this._focustrap=this._initializeFocusTrap(),this._isShown=!1,this._isTransitioning=!1,this._scrollBar=new Ne,this._addEventListeners()}static get Default(){return Xe}static get DefaultType(){return Ye}static get NAME(){return"modal"}toggle(t){return this._isShown?this.hide():this.show(t)}show(t){this._isShown||this._isTransitioning||j.trigger(this._element,Fe,{relatedTarget:t}).defaultPrevented||(this._isShown=!0,this._isTransitioning=!0,this._scrollBar.hide(),document.body.classList.add(Ke),this._adjustDialog(),this._backdrop.show((()=>this._showElement(t))))}hide(){this._isShown&&!this._isTransitioning&&(j.trigger(this._element,xe).defaultPrevented||(this._isShown=!1,this._isTransitioning=!0,this._focustrap.deactivate(),this._element.classList.remove(Ve),this._queueCallback((()=>this._hideModal()),this._element,this._isAnimated())))}dispose(){j.off(window,Pe),j.off(this._dialog,Pe),this._backdrop.dispose(),this._focustrap.deactivate(),super.dispose()}handleUpdate(){this._adjustDialog()}_initializeBackDrop(){return new we({isVisible:Boolean(this._config.backdrop),isAnimated:this._isAnimated()})}_initializeFocusTrap(){return new Se({trapElement:this._element})}_showElement(t){document.body.contains(this._element)||document.body.append(this._element),this._element.style.display="block",this._element.removeAttribute("aria-hidden"),this._element.setAttribute("aria-modal",!0),this._element.setAttribute("role","dialog"),this._element.scrollTop=0;const e=K.findOne(".modal-body",this._dialog);e&&(e.scrollTop=0),g(this._element),this._element.classList.add(Ve),this._queueCallback((()=>{this._config.focus&&this._focustrap.activate(),this._isTransitioning=!1,j.trigger(this._element,ze,{relatedTarget:t})}),this._dialog,this._isAnimated())}_addEventListeners(){j.on(this._element,We,(t=>{"Escape"===t.key&&(this._config.keyboard?this.hide():this._triggerBackdropTransition())})),j.on(window,He,(()=>{this._isShown&&!this._isTransitioning&&this._adjustDialog()})),j.on(this._element,qe,(t=>{j.one(this._element,Be,(e=>{this._element===t.target&&this._element===e.target&&("static"!==this._config.backdrop?this._config.backdrop&&this.hide():this._triggerBackdropTransition())}))}))}_hideModal(){this._element.style.display="none",this._element.setAttribute("aria-hidden",!0),this._element.removeAttribute("aria-modal"),this._element.removeAttribute("role"),this._isTransitioning=!1,this._backdrop.hide((()=>{document.body.classList.remove(Ke),this._resetAdjustments(),this._scrollBar.reset(),j.trigger(this._element,je)}))}_isAnimated(){return this._element.classList.contains("fade")}_triggerBackdropTransition(){if(j.trigger(this._element,Me).defaultPrevented)return;const t=this._element.scrollHeight>document.documentElement.clientHeight,e=this._element.style.overflowY;"hidden"===e||this._element.classList.contains(Qe)||(t||(this._element.style.overflowY="hidden"),this._element.classList.add(Qe),this._queueCallback((()=>{this._element.classList.remove(Qe),this._queueCallback((()=>{this._element.style.overflowY=e}),this._dialog)}),this._dialog),this._element.focus())}_adjustDialog(){const t=this._element.scrollHeight>document.documentElement.clientHeight,e=this._scrollBar.getWidth(),i=e>0;if(i&&!t){const t=p()?"paddingLeft":"paddingRight";this._element.style[t]=`${e}px`}if(!i&&t){const t=p()?"paddingRight":"paddingLeft";this._element.style[t]=`${e}px`}}_resetAdjustments(){this._element.style.paddingLeft="",this._element.style.paddingRight=""}static jQueryInterface(t,e){return this.each((function(){const i=Ue.getOrCreateInstance(this,t);if("string"==typeof t){if(void 0===i[t])throw new TypeError(`No method named "${t}"`);i[t](e)}}))}}j.on(document,Re,'[data-bs-toggle="modal"]',(function(t){const e=K.getElementFromSelector(this);["A","AREA"].includes(this.tagName)&&t.preventDefault(),j.one(e,Fe,(t=>{t.defaultPrevented||j.one(e,je,(()=>{h(this)&&this.focus()}))}));const i=K.findOne(".modal.show");i&&Ue.getInstance(i).hide(),Ue.getOrCreateInstance(e).toggle(this)})),V(Ue),b(Ue);const Ge=".bs.offcanvas",Je=".data-api",Ze=`load${Ge}${Je}`,ti="show",ei="showing",ii="hiding",si=".offcanvas.show",ni=`show${Ge}`,oi=`shown${Ge}`,ri=`hide${Ge}`,ai=`hidePrevented${Ge}`,li=`hidden${Ge}`,ci=`resize${Ge}`,hi=`click${Ge}${Je}`,di=`keydown.dismiss${Ge}`,ui={backdrop:!0,keyboard:!0,scroll:!1},_i={backdrop:"(boolean|string)",keyboard:"boolean",scroll:"boolean"};class gi extends W{constructor(t,e){super(t,e),this._isShown=!1,this._backdrop=this._initializeBackDrop(),this._focustrap=this._initializeFocusTrap(),this._addEventListeners()}static get Default(){return ui}static get DefaultType(){return _i}static get NAME(){return"offcanvas"}toggle(t){return this._isShown?this.hide():this.show(t)}show(t){this._isShown||j.trigger(this._element,ni,{relatedTarget:t}).defaultPrevented||(this._isShown=!0,this._backdrop.show(),this._config.scroll||(new Ne).hide(),this._element.setAttribute("aria-modal",!0),this._element.setAttribute("role","dialog"),this._element.classList.add(ei),this._queueCallback((()=>{this._config.scroll&&!this._config.backdrop||this._focustrap.activate(),this._element.classList.add(ti),this._element.classList.remove(ei),j.trigger(this._element,oi,{relatedTarget:t})}),this._element,!0))}hide(){this._isShown&&(j.trigger(this._element,ri).defaultPrevented||(this._focustrap.deactivate(),this._element.blur(),this._isShown=!1,this._element.classList.add(ii),this._backdrop.hide(),this._queueCallback((()=>{this._element.classList.remove(ti,ii),this._element.removeAttribute("aria-modal"),this._element.removeAttribute("role"),this._config.scroll||(new Ne).reset(),j.trigger(this._element,li)}),this._element,!0)))}dispose(){this._backdrop.dispose(),this._focustrap.deactivate(),super.dispose()}_initializeBackDrop(){const t=Boolean(this._config.backdrop);return new we({className:"offcanvas-backdrop",isVisible:t,isAnimated:!0,rootElement:this._element.parentNode,clickCallback:t?()=>{"static"!==this._config.backdrop?this.hide():j.trigger(this._element,ai)}:null})}_initializeFocusTrap(){return new Se({trapElement:this._element})}_addEventListeners(){j.on(this._element,di,(t=>{"Escape"===t.key&&(this._config.keyboard?this.hide():j.trigger(this._element,ai))}))}static jQueryInterface(t){return this.each((function(){const e=gi.getOrCreateInstance(this,t);if("string"==typeof t){if(void 0===e[t]||t.startsWith("_")||"constructor"===t)throw new TypeError(`No method named "${t}"`);e[t](this)}}))}}j.on(document,hi,'[data-bs-toggle="offcanvas"]',(function(t){const e=K.getElementFromSelector(this);if(["A","AREA"].includes(this.tagName)&&t.preventDefault(),d(this))return;j.one(e,li,(()=>{h(this)&&this.focus()}));const i=K.findOne(si);i&&i!==e&&gi.getInstance(i).hide(),gi.getOrCreateInstance(e).toggle(this)})),j.on(window,Ze,(()=>{for(const t of K.find(si))gi.getOrCreateInstance(t).show()})),j.on(window,ci,(()=>{for(const t of K.find("[aria-modal][class*=show][class*=offcanvas-]"))"fixed"!==getComputedStyle(t).position&&gi.getOrCreateInstance(t).hide()})),V(gi),b(gi);const fi={"*":["class","dir","id","lang","role",/^aria-[\w-]*$/i],a:["target","href","title","rel"],area:[],b:[],br:[],col:[],code:[],dd:[],div:[],dl:[],dt:[],em:[],hr:[],h1:[],h2:[],h3:[],h4:[],h5:[],h6:[],i:[],img:["src","srcset","alt","title","width","height"],li:[],ol:[],p:[],pre:[],s:[],small:[],span:[],sub:[],sup:[],strong:[],u:[],ul:[]},mi=new Set(["background","cite","href","itemtype","longdesc","poster","src","xlink:href"]),pi=/^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i,bi=(t,e)=>{const i=t.nodeName.toLowerCase();return e.includes(i)?!mi.has(i)||Boolean(pi.test(t.nodeValue)):e.filter((t=>t instanceof RegExp)).some((t=>t.test(i)))},vi={allowList:fi,content:{},extraClass:"",html:!1,sanitize:!0,sanitizeFn:null,template:"<div></div>"},yi={allowList:"object",content:"object",extraClass:"(string|function)",html:"boolean",sanitize:"boolean",sanitizeFn:"(null|function)",template:"string"},wi={entry:"(string|element|function|null)",selector:"(string|element)"};class Ai extends q{constructor(t){super(),this._config=this._getConfig(t)}static get Default(){return vi}static get DefaultType(){return yi}static get NAME(){return"TemplateFactory"}getContent(){return Object.values(this._config.content).map((t=>this._resolvePossibleFunction(t))).filter(Boolean)}hasContent(){return this.getContent().length>0}changeContent(t){return this._checkContent(t),this._config.content={...this._config.content,...t},this}toHtml(){const t=document.createElement("div");t.innerHTML=this._maybeSanitize(this._config.template);for(const[e,i]of Object.entries(this._config.content))this._setContent(t,i,e);const e=t.children[0],i=this._resolvePossibleFunction(this._config.extraClass);return i&&e.classList.add(...i.split(" ")),e}_typeCheckConfig(t){super._typeCheckConfig(t),this._checkContent(t.content)}_checkContent(t){for(const[e,i]of Object.entries(t))super._typeCheckConfig({selector:e,entry:i},wi)}_setContent(t,e,i){const s=K.findOne(i,t);s&&((e=this._resolvePossibleFunction(e))?l(e)?this._putElementInTemplate(c(e),s):this._config.html?s.innerHTML=this._maybeSanitize(e):s.textContent=e:s.remove())}_maybeSanitize(t){return this._config.sanitize?function(t,e,i){if(!t.length)return t;if(i&&"function"==typeof i)return i(t);const s=(new window.DOMParser).parseFromString(t,"text/html"),n=[].concat(...s.body.querySelectorAll("*"));for(const t of n){const i=t.nodeName.toLowerCase();if(!Object.keys(e).includes(i)){t.remove();continue}const s=[].concat(...t.attributes),n=[].concat(e["*"]||[],e[i]||[]);for(const e of s)bi(e,n)||t.removeAttribute(e.nodeName)}return s.body.innerHTML}(t,this._config.allowList,this._config.sanitizeFn):t}_resolvePossibleFunction(t){return v(t,[this])}_putElementInTemplate(t,e){if(this._config.html)return e.innerHTML="",void e.append(t);e.textContent=t.textContent}}const Ei=new Set(["sanitize","allowList","sanitizeFn"]),Ci="fade",Ti="show",ki=".modal",$i="hide.bs.modal",Si="hover",Li="focus",Oi={AUTO:"auto",TOP:"top",RIGHT:p()?"left":"right",BOTTOM:"bottom",LEFT:p()?"right":"left"},Ii={allowList:fi,animation:!0,boundary:"clippingParents",container:!1,customClass:"",delay:0,fallbackPlacements:["top","right","bottom","left"],html:!1,offset:[0,6],placement:"top",popperConfig:null,sanitize:!0,sanitizeFn:null,selector:!1,template:'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',title:"",trigger:"hover focus"},Di={allowList:"object",animation:"boolean",boundary:"(string|element)",container:"(string|element|boolean)",customClass:"(string|function)",delay:"(number|object)",fallbackPlacements:"array",html:"boolean",offset:"(array|string|function)",placement:"(string|function)",popperConfig:"(null|object|function)",sanitize:"boolean",sanitizeFn:"(null|function)",selector:"(string|boolean)",template:"string",title:"(string|element|function)",trigger:"string"};class Ni extends W{constructor(t,e){if(void 0===i)throw new TypeError("Bootstrap's tooltips require Popper (https://popper.js.org)");super(t,e),this._isEnabled=!0,this._timeout=0,this._isHovered=null,this._activeTrigger={},this._popper=null,this._templateFactory=null,this._newContent=null,this.tip=null,this._setListeners(),this._config.selector||this._fixTitle()}static get Default(){return Ii}static get DefaultType(){return Di}static get NAME(){return"tooltip"}enable(){this._isEnabled=!0}disable(){this._isEnabled=!1}toggleEnabled(){this._isEnabled=!this._isEnabled}toggle(){this._isEnabled&&(this._activeTrigger.click=!this._activeTrigger.click,this._isShown()?this._leave():this._enter())}dispose(){clearTimeout(this._timeout),j.off(this._element.closest(ki),$i,this._hideModalHandler),this._element.getAttribute("data-bs-original-title")&&this._element.setAttribute("title",this._element.getAttribute("data-bs-original-title")),this._disposePopper(),super.dispose()}show(){if("none"===this._element.style.display)throw new Error("Please use show on visible elements");if(!this._isWithContent()||!this._isEnabled)return;const t=j.trigger(this._element,this.constructor.eventName("show")),e=(u(this._element)||this._element.ownerDocument.documentElement).contains(this._element);if(t.defaultPrevented||!e)return;this._disposePopper();const i=this._getTipElement();this._element.setAttribute("aria-describedby",i.getAttribute("id"));const{container:s}=this._config;if(this._element.ownerDocument.documentElement.contains(this.tip)||(s.append(i),j.trigger(this._element,this.constructor.eventName("inserted"))),this._popper=this._createPopper(i),i.classList.add(Ti),"ontouchstart"in document.documentElement)for(const t of[].concat(...document.body.children))j.on(t,"mouseover",_);this._queueCallback((()=>{j.trigger(this._element,this.constructor.eventName("shown")),!1===this._isHovered&&this._leave(),this._isHovered=!1}),this.tip,this._isAnimated())}hide(){if(this._isShown()&&!j.trigger(this._element,this.constructor.eventName("hide")).defaultPrevented){if(this._getTipElement().classList.remove(Ti),"ontouchstart"in document.documentElement)for(const t of[].concat(...document.body.children))j.off(t,"mouseover",_);this._activeTrigger.click=!1,this._activeTrigger[Li]=!1,this._activeTrigger[Si]=!1,this._isHovered=null,this._queueCallback((()=>{this._isWithActiveTrigger()||(this._isHovered||this._disposePopper(),this._element.removeAttribute("aria-describedby"),j.trigger(this._element,this.constructor.eventName("hidden")))}),this.tip,this._isAnimated())}}update(){this._popper&&this._popper.update()}_isWithContent(){return Boolean(this._getTitle())}_getTipElement(){return this.tip||(this.tip=this._createTipElement(this._newContent||this._getContentForTemplate())),this.tip}_createTipElement(t){const e=this._getTemplateFactory(t).toHtml();if(!e)return null;e.classList.remove(Ci,Ti),e.classList.add(`bs-${this.constructor.NAME}-auto`);const i=(t=>{do{t+=Math.floor(1e6*Math.random())}while(document.getElementById(t));return t})(this.constructor.NAME).toString();return e.setAttribute("id",i),this._isAnimated()&&e.classList.add(Ci),e}setContent(t){this._newContent=t,this._isShown()&&(this._disposePopper(),this.show())}_getTemplateFactory(t){return this._templateFactory?this._templateFactory.changeContent(t):this._templateFactory=new Ai({...this._config,content:t,extraClass:this._resolvePossibleFunction(this._config.customClass)}),this._templateFactory}_getContentForTemplate(){return{".tooltip-inner":this._getTitle()}}_getTitle(){return this._resolvePossibleFunction(this._config.title)||this._element.getAttribute("data-bs-original-title")}_initializeOnDelegatedTarget(t){return this.constructor.getOrCreateInstance(t.delegateTarget,this._getDelegateConfig())}_isAnimated(){return this._config.animation||this.tip&&this.tip.classList.contains(Ci)}_isShown(){return this.tip&&this.tip.classList.contains(Ti)}_createPopper(t){const e=v(this._config.placement,[this,t,this._element]),s=Oi[e.toUpperCase()];return i.createPopper(this._element,t,this._getPopperConfig(s))}_getOffset(){const{offset:t}=this._config;return"string"==typeof t?t.split(",").map((t=>Number.parseInt(t,10))):"function"==typeof t?e=>t(e,this._element):t}_resolvePossibleFunction(t){return v(t,[this._element])}_getPopperConfig(t){const e={placement:t,modifiers:[{name:"flip",options:{fallbackPlacements:this._config.fallbackPlacements}},{name:"offset",options:{offset:this._getOffset()}},{name:"preventOverflow",options:{boundary:this._config.boundary}},{name:"arrow",options:{element:`.${this.constructor.NAME}-arrow`}},{name:"preSetPlacement",enabled:!0,phase:"beforeMain",fn:t=>{this._getTipElement().setAttribute("data-popper-placement",t.state.placement)}}]};return{...e,...v(this._config.popperConfig,[e])}}_setListeners(){const t=this._config.trigger.split(" ");for(const e of t)if("click"===e)j.on(this._element,this.constructor.eventName("click"),this._config.selector,(t=>{this._initializeOnDelegatedTarget(t).toggle()}));else if("manual"!==e){const t=e===Si?this.constructor.eventName("mouseenter"):this.constructor.eventName("focusin"),i=e===Si?this.constructor.eventName("mouseleave"):this.constructor.eventName("focusout");j.on(this._element,t,this._config.selector,(t=>{const e=this._initializeOnDelegatedTarget(t);e._activeTrigger["focusin"===t.type?Li:Si]=!0,e._enter()})),j.on(this._element,i,this._config.selector,(t=>{const e=this._initializeOnDelegatedTarget(t);e._activeTrigger["focusout"===t.type?Li:Si]=e._element.contains(t.relatedTarget),e._leave()}))}this._hideModalHandler=()=>{this._element&&this.hide()},j.on(this._element.closest(ki),$i,this._hideModalHandler)}_fixTitle(){const t=this._element.getAttribute("title");t&&(this._element.getAttribute("aria-label")||this._element.textContent.trim()||this._element.setAttribute("aria-label",t),this._element.setAttribute("data-bs-original-title",t),this._element.removeAttribute("title"))}_enter(){this._isShown()||this._isHovered?this._isHovered=!0:(this._isHovered=!0,this._setTimeout((()=>{this._isHovered&&this.show()}),this._config.delay.show))}_leave(){this._isWithActiveTrigger()||(this._isHovered=!1,this._setTimeout((()=>{this._isHovered||this.hide()}),this._config.delay.hide))}_setTimeout(t,e){clearTimeout(this._timeout),this._timeout=setTimeout(t,e)}_isWithActiveTrigger(){return Object.values(this._activeTrigger).includes(!0)}_getConfig(t){const e=B.getDataAttributes(this._element);for(const t of Object.keys(e))Ei.has(t)&&delete e[t];return t={...e,..."object"==typeof t&&t?t:{}},t=this._mergeConfigObj(t),t=this._configAfterMerge(t),this._typeCheckConfig(t),t}_configAfterMerge(t){return t.container=!1===t.container?document.body:c(t.container),"number"==typeof t.delay&&(t.delay={show:t.delay,hide:t.delay}),"number"==typeof t.title&&(t.title=t.title.toString()),"number"==typeof t.content&&(t.content=t.content.toString()),t}_getDelegateConfig(){const t={};for(const[e,i]of Object.entries(this._config))this.constructor.Default[e]!==i&&(t[e]=i);return t.selector=!1,t.trigger="manual",t}_disposePopper(){this._popper&&(this._popper.destroy(),this._popper=null),this.tip&&(this.tip.remove(),this.tip=null)}static jQueryInterface(t){return this.each((function(){const e=Ni.getOrCreateInstance(this,t);if("string"==typeof t){if(void 0===e[t])throw new TypeError(`No method named "${t}"`);e[t]()}}))}}b(Ni);const Pi={...Ni.Default,content:"",offset:[0,8],placement:"right",template:'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',trigger:"click"},xi={...Ni.DefaultType,content:"(null|string|element|function)"};class Mi extends Ni{static get Default(){return Pi}static get DefaultType(){return xi}static get NAME(){return"popover"}_isWithContent(){return this._getTitle()||this._getContent()}_getContentForTemplate(){return{".popover-header":this._getTitle(),".popover-body":this._getContent()}}_getContent(){return this._resolvePossibleFunction(this._config.content)}static jQueryInterface(t){return this.each((function(){const e=Mi.getOrCreateInstance(this,t);if("string"==typeof t){if(void 0===e[t])throw new TypeError(`No method named "${t}"`);e[t]()}}))}}b(Mi);const ji=".bs.scrollspy",Fi=`activate${ji}`,zi=`click${ji}`,Hi=`load${ji}.data-api`,Bi="active",qi="[href]",Wi=".nav-link",Ri=`${Wi}, .nav-item > ${Wi}, .list-group-item`,Ki={offset:null,rootMargin:"0px 0px -25%",smoothScroll:!1,target:null,threshold:[.1,.5,1]},Vi={offset:"(number|null)",rootMargin:"string",smoothScroll:"boolean",target:"element",threshold:"array"};class Qi extends W{constructor(t,e){super(t,e),this._targetLinks=new Map,this._observableSections=new Map,this._rootElement="visible"===getComputedStyle(this._element).overflowY?null:this._element,this._activeTarget=null,this._observer=null,this._previousScrollData={visibleEntryTop:0,parentScrollTop:0},this.refresh()}static get Default(){return Ki}static get DefaultType(){return Vi}static get NAME(){return"scrollspy"}refresh(){this._initializeTargetsAndObservables(),this._maybeEnableSmoothScroll(),this._observer?this._observer.disconnect():this._observer=this._getNewObserver();for(const t of this._observableSections.values())this._observer.observe(t)}dispose(){this._observer.disconnect(),super.dispose()}_configAfterMerge(t){return t.target=c(t.target)||document.body,t.rootMargin=t.offset?`${t.offset}px 0px -30%`:t.rootMargin,"string"==typeof t.threshold&&(t.threshold=t.threshold.split(",").map((t=>Number.parseFloat(t)))),t}_maybeEnableSmoothScroll(){this._config.smoothScroll&&(j.off(this._config.target,zi),j.on(this._config.target,zi,qi,(t=>{const e=this._observableSections.get(t.target.hash);if(e){t.preventDefault();const i=this._rootElement||window,s=e.offsetTop-this._element.offsetTop;if(i.scrollTo)return void i.scrollTo({top:s,behavior:"smooth"});i.scrollTop=s}})))}_getNewObserver(){const t={root:this._rootElement,threshold:this._config.threshold,rootMargin:this._config.rootMargin};return new IntersectionObserver((t=>this._observerCallback(t)),t)}_observerCallback(t){const e=t=>this._targetLinks.get(`#${t.target.id}`),i=t=>{this._previousScrollData.visibleEntryTop=t.target.offsetTop,this._process(e(t))},s=(this._rootElement||document.documentElement).scrollTop,n=s>=this._previousScrollData.parentScrollTop;this._previousScrollData.parentScrollTop=s;for(const o of t){if(!o.isIntersecting){this._activeTarget=null,this._clearActiveClass(e(o));continue}const t=o.target.offsetTop>=this._previousScrollData.visibleEntryTop;if(n&&t){if(i(o),!s)return}else n||t||i(o)}}_initializeTargetsAndObservables(){this._targetLinks=new Map,this._observableSections=new Map;const t=K.find(qi,this._config.target);for(const e of t){if(!e.hash||d(e))continue;const t=K.findOne(decodeURI(e.hash),this._element);h(t)&&(this._targetLinks.set(decodeURI(e.hash),e),this._observableSections.set(e.hash,t))}}_process(t){this._activeTarget!==t&&(this._clearActiveClass(this._config.target),this._activeTarget=t,t.classList.add(Bi),this._activateParents(t),j.trigger(this._element,Fi,{relatedTarget:t}))}_activateParents(t){if(t.classList.contains("dropdown-item"))K.findOne(".dropdown-toggle",t.closest(".dropdown")).classList.add(Bi);else for(const e of K.parents(t,".nav, .list-group"))for(const t of K.prev(e,Ri))t.classList.add(Bi)}_clearActiveClass(t){t.classList.remove(Bi);const e=K.find(`${qi}.${Bi}`,t);for(const t of e)t.classList.remove(Bi)}static jQueryInterface(t){return this.each((function(){const e=Qi.getOrCreateInstance(this,t);if("string"==typeof t){if(void 0===e[t]||t.startsWith("_")||"constructor"===t)throw new TypeError(`No method named "${t}"`);e[t]()}}))}}j.on(window,Hi,(()=>{for(const t of K.find('[data-bs-spy="scroll"]'))Qi.getOrCreateInstance(t)})),b(Qi);const Xi=".bs.tab",Yi=`hide${Xi}`,Ui=`hidden${Xi}`,Gi=`show${Xi}`,Ji=`shown${Xi}`,Zi=`click${Xi}`,ts=`keydown${Xi}`,es=`load${Xi}`,is="ArrowLeft",ss="ArrowRight",ns="ArrowUp",os="ArrowDown",rs="Home",as="End",ls="active",cs="fade",hs="show",ds=".dropdown-toggle",us=`:not(${ds})`,_s='[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]',gs=`.nav-link${us}, .list-group-item${us}, [role="tab"]${us}, ${_s}`,fs=`.${ls}[data-bs-toggle="tab"], .${ls}[data-bs-toggle="pill"], .${ls}[data-bs-toggle="list"]`;class ms extends W{constructor(t){super(t),this._parent=this._element.closest('.list-group, .nav, [role="tablist"]'),this._parent&&(this._setInitialAttributes(this._parent,this._getChildren()),j.on(this._element,ts,(t=>this._keydown(t))))}static get NAME(){return"tab"}show(){const t=this._element;if(this._elemIsActive(t))return;const e=this._getActiveElem(),i=e?j.trigger(e,Yi,{relatedTarget:t}):null;j.trigger(t,Gi,{relatedTarget:e}).defaultPrevented||i&&i.defaultPrevented||(this._deactivate(e,t),this._activate(t,e))}_activate(t,e){t&&(t.classList.add(ls),this._activate(K.getElementFromSelector(t)),this._queueCallback((()=>{"tab"===t.getAttribute("role")?(t.removeAttribute("tabindex"),t.setAttribute("aria-selected",!0),this._toggleDropDown(t,!0),j.trigger(t,Ji,{relatedTarget:e})):t.classList.add(hs)}),t,t.classList.contains(cs)))}_deactivate(t,e){t&&(t.classList.remove(ls),t.blur(),this._deactivate(K.getElementFromSelector(t)),this._queueCallback((()=>{"tab"===t.getAttribute("role")?(t.setAttribute("aria-selected",!1),t.setAttribute("tabindex","-1"),this._toggleDropDown(t,!1),j.trigger(t,Ui,{relatedTarget:e})):t.classList.remove(hs)}),t,t.classList.contains(cs)))}_keydown(t){if(![is,ss,ns,os,rs,as].includes(t.key))return;t.stopPropagation(),t.preventDefault();const e=this._getChildren().filter((t=>!d(t)));let i;if([rs,as].includes(t.key))i=e[t.key===rs?0:e.length-1];else{const s=[ss,os].includes(t.key);i=w(e,t.target,s,!0)}i&&(i.focus({preventScroll:!0}),ms.getOrCreateInstance(i).show())}_getChildren(){return K.find(gs,this._parent)}_getActiveElem(){return this._getChildren().find((t=>this._elemIsActive(t)))||null}_setInitialAttributes(t,e){this._setAttributeIfNotExists(t,"role","tablist");for(const t of e)this._setInitialAttributesOnChild(t)}_setInitialAttributesOnChild(t){t=this._getInnerElement(t);const e=this._elemIsActive(t),i=this._getOuterElement(t);t.setAttribute("aria-selected",e),i!==t&&this._setAttributeIfNotExists(i,"role","presentation"),e||t.setAttribute("tabindex","-1"),this._setAttributeIfNotExists(t,"role","tab"),this._setInitialAttributesOnTargetPanel(t)}_setInitialAttributesOnTargetPanel(t){const e=K.getElementFromSelector(t);e&&(this._setAttributeIfNotExists(e,"role","tabpanel"),t.id&&this._setAttributeIfNotExists(e,"aria-labelledby",`${t.id}`))}_toggleDropDown(t,e){const i=this._getOuterElement(t);if(!i.classList.contains("dropdown"))return;const s=(t,s)=>{const n=K.findOne(t,i);n&&n.classList.toggle(s,e)};s(ds,ls),s(".dropdown-menu",hs),i.setAttribute("aria-expanded",e)}_setAttributeIfNotExists(t,e,i){t.hasAttribute(e)||t.setAttribute(e,i)}_elemIsActive(t){return t.classList.contains(ls)}_getInnerElement(t){return t.matches(gs)?t:K.findOne(gs,t)}_getOuterElement(t){return t.closest(".nav-item, .list-group-item")||t}static jQueryInterface(t){return this.each((function(){const e=ms.getOrCreateInstance(this);if("string"==typeof t){if(void 0===e[t]||t.startsWith("_")||"constructor"===t)throw new TypeError(`No method named "${t}"`);e[t]()}}))}}j.on(document,Zi,_s,(function(t){["A","AREA"].includes(this.tagName)&&t.preventDefault(),d(this)||ms.getOrCreateInstance(this).show()})),j.on(window,es,(()=>{for(const t of K.find(fs))ms.getOrCreateInstance(t)})),b(ms);const ps=".bs.toast",bs=`mouseover${ps}`,vs=`mouseout${ps}`,ys=`focusin${ps}`,ws=`focusout${ps}`,As=`hide${ps}`,Es=`hidden${ps}`,Cs=`show${ps}`,Ts=`shown${ps}`,ks="hide",$s="show",Ss="showing",Ls={animation:"boolean",autohide:"boolean",delay:"number"},Os={animation:!0,autohide:!0,delay:5e3};class Is extends W{constructor(t,e){super(t,e),this._timeout=null,this._hasMouseInteraction=!1,this._hasKeyboardInteraction=!1,this._setListeners()}static get Default(){return Os}static get DefaultType(){return Ls}static get NAME(){return"toast"}show(){j.trigger(this._element,Cs).defaultPrevented||(this._clearTimeout(),this._config.animation&&this._element.classList.add("fade"),this._element.classList.remove(ks),g(this._element),this._element.classList.add($s,Ss),this._queueCallback((()=>{this._element.classList.remove(Ss),j.trigger(this._element,Ts),this._maybeScheduleHide()}),this._element,this._config.animation))}hide(){this.isShown()&&(j.trigger(this._element,As).defaultPrevented||(this._element.classList.add(Ss),this._queueCallback((()=>{this._element.classList.add(ks),this._element.classList.remove(Ss,$s),j.trigger(this._element,Es)}),this._element,this._config.animation)))}dispose(){this._clearTimeout(),this.isShown()&&this._element.classList.remove($s),super.dispose()}isShown(){return this._element.classList.contains($s)}_maybeScheduleHide(){this._config.autohide&&(this._hasMouseInteraction||this._hasKeyboardInteraction||(this._timeout=setTimeout((()=>{this.hide()}),this._config.delay)))}_onInteraction(t,e){switch(t.type){case"mouseover":case"mouseout":this._hasMouseInteraction=e;break;case"focusin":case"focusout":this._hasKeyboardInteraction=e}if(e)return void this._clearTimeout();const i=t.relatedTarget;this._element===i||this._element.contains(i)||this._maybeScheduleHide()}_setListeners(){j.on(this._element,bs,(t=>this._onInteraction(t,!0))),j.on(this._element,vs,(t=>this._onInteraction(t,!1))),j.on(this._element,ys,(t=>this._onInteraction(t,!0))),j.on(this._element,ws,(t=>this._onInteraction(t,!1)))}_clearTimeout(){clearTimeout(this._timeout),this._timeout=null}static jQueryInterface(t){return this.each((function(){const e=Is.getOrCreateInstance(this,t);if("string"==typeof t){if(void 0===e[t])throw new TypeError(`No method named "${t}"`);e[t](this)}}))}}return V(Is),b(Is),{Alert:U,Button:J,Carousel:Ot,Collapse:Rt,Dropdown:fe,Modal:Ue,Offcanvas:gi,Popover:Mi,ScrollSpy:Qi,Tab:ms,Toast:Is,Tooltip:Ni}})); +//# sourceMappingURL=bootstrap.min.js.map \ No newline at end of file diff --git a/rescue/12/scripts/popper.js b/rescue/12/scripts/popper.js new file mode 100644 index 0000000..3938564 --- /dev/null +++ b/rescue/12/scripts/popper.js @@ -0,0 +1,6 @@ +/** + * @popperjs/core v2.11.8 - MIT License + */ + +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Popper={})}(this,(function(e){"use strict";function t(e){if(null==e)return window;if("[object Window]"!==e.toString()){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function n(e){return e instanceof t(e).Element||e instanceof Element}function r(e){return e instanceof t(e).HTMLElement||e instanceof HTMLElement}function o(e){return"undefined"!=typeof ShadowRoot&&(e instanceof t(e).ShadowRoot||e instanceof ShadowRoot)}var i=Math.max,a=Math.min,s=Math.round;function f(){var e=navigator.userAgentData;return null!=e&&e.brands&&Array.isArray(e.brands)?e.brands.map((function(e){return e.brand+"/"+e.version})).join(" "):navigator.userAgent}function c(){return!/^((?!chrome|android).)*safari/i.test(f())}function p(e,o,i){void 0===o&&(o=!1),void 0===i&&(i=!1);var a=e.getBoundingClientRect(),f=1,p=1;o&&r(e)&&(f=e.offsetWidth>0&&s(a.width)/e.offsetWidth||1,p=e.offsetHeight>0&&s(a.height)/e.offsetHeight||1);var u=(n(e)?t(e):window).visualViewport,l=!c()&&i,d=(a.left+(l&&u?u.offsetLeft:0))/f,h=(a.top+(l&&u?u.offsetTop:0))/p,m=a.width/f,v=a.height/p;return{width:m,height:v,top:h,right:d+m,bottom:h+v,left:d,x:d,y:h}}function u(e){var n=t(e);return{scrollLeft:n.pageXOffset,scrollTop:n.pageYOffset}}function l(e){return e?(e.nodeName||"").toLowerCase():null}function d(e){return((n(e)?e.ownerDocument:e.document)||window.document).documentElement}function h(e){return p(d(e)).left+u(e).scrollLeft}function m(e){return t(e).getComputedStyle(e)}function v(e){var t=m(e),n=t.overflow,r=t.overflowX,o=t.overflowY;return/auto|scroll|overlay|hidden/.test(n+o+r)}function y(e,n,o){void 0===o&&(o=!1);var i,a,f=r(n),c=r(n)&&function(e){var t=e.getBoundingClientRect(),n=s(t.width)/e.offsetWidth||1,r=s(t.height)/e.offsetHeight||1;return 1!==n||1!==r}(n),m=d(n),y=p(e,c,o),g={scrollLeft:0,scrollTop:0},b={x:0,y:0};return(f||!f&&!o)&&(("body"!==l(n)||v(m))&&(g=(i=n)!==t(i)&&r(i)?{scrollLeft:(a=i).scrollLeft,scrollTop:a.scrollTop}:u(i)),r(n)?((b=p(n,!0)).x+=n.clientLeft,b.y+=n.clientTop):m&&(b.x=h(m))),{x:y.left+g.scrollLeft-b.x,y:y.top+g.scrollTop-b.y,width:y.width,height:y.height}}function g(e){var t=p(e),n=e.offsetWidth,r=e.offsetHeight;return Math.abs(t.width-n)<=1&&(n=t.width),Math.abs(t.height-r)<=1&&(r=t.height),{x:e.offsetLeft,y:e.offsetTop,width:n,height:r}}function b(e){return"html"===l(e)?e:e.assignedSlot||e.parentNode||(o(e)?e.host:null)||d(e)}function x(e){return["html","body","#document"].indexOf(l(e))>=0?e.ownerDocument.body:r(e)&&v(e)?e:x(b(e))}function w(e,n){var r;void 0===n&&(n=[]);var o=x(e),i=o===(null==(r=e.ownerDocument)?void 0:r.body),a=t(o),s=i?[a].concat(a.visualViewport||[],v(o)?o:[]):o,f=n.concat(s);return i?f:f.concat(w(b(s)))}function O(e){return["table","td","th"].indexOf(l(e))>=0}function j(e){return r(e)&&"fixed"!==m(e).position?e.offsetParent:null}function E(e){for(var n=t(e),i=j(e);i&&O(i)&&"static"===m(i).position;)i=j(i);return i&&("html"===l(i)||"body"===l(i)&&"static"===m(i).position)?n:i||function(e){var t=/firefox/i.test(f());if(/Trident/i.test(f())&&r(e)&&"fixed"===m(e).position)return null;var n=b(e);for(o(n)&&(n=n.host);r(n)&&["html","body"].indexOf(l(n))<0;){var i=m(n);if("none"!==i.transform||"none"!==i.perspective||"paint"===i.contain||-1!==["transform","perspective"].indexOf(i.willChange)||t&&"filter"===i.willChange||t&&i.filter&&"none"!==i.filter)return n;n=n.parentNode}return null}(e)||n}var D="top",A="bottom",L="right",P="left",M="auto",k=[D,A,L,P],W="start",B="end",H="viewport",T="popper",R=k.reduce((function(e,t){return e.concat([t+"-"+W,t+"-"+B])}),[]),S=[].concat(k,[M]).reduce((function(e,t){return e.concat([t,t+"-"+W,t+"-"+B])}),[]),V=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function q(e){var t=new Map,n=new Set,r=[];function o(e){n.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach((function(e){if(!n.has(e)){var r=t.get(e);r&&o(r)}})),r.push(e)}return e.forEach((function(e){t.set(e.name,e)})),e.forEach((function(e){n.has(e.name)||o(e)})),r}function C(e,t){var n=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(n&&o(n)){var r=t;do{if(r&&e.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function N(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function I(e,r,o){return r===H?N(function(e,n){var r=t(e),o=d(e),i=r.visualViewport,a=o.clientWidth,s=o.clientHeight,f=0,p=0;if(i){a=i.width,s=i.height;var u=c();(u||!u&&"fixed"===n)&&(f=i.offsetLeft,p=i.offsetTop)}return{width:a,height:s,x:f+h(e),y:p}}(e,o)):n(r)?function(e,t){var n=p(e,!1,"fixed"===t);return n.top=n.top+e.clientTop,n.left=n.left+e.clientLeft,n.bottom=n.top+e.clientHeight,n.right=n.left+e.clientWidth,n.width=e.clientWidth,n.height=e.clientHeight,n.x=n.left,n.y=n.top,n}(r,o):N(function(e){var t,n=d(e),r=u(e),o=null==(t=e.ownerDocument)?void 0:t.body,a=i(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),s=i(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),f=-r.scrollLeft+h(e),c=-r.scrollTop;return"rtl"===m(o||n).direction&&(f+=i(n.clientWidth,o?o.clientWidth:0)-a),{width:a,height:s,x:f,y:c}}(d(e)))}function _(e,t,o,s){var f="clippingParents"===t?function(e){var t=w(b(e)),o=["absolute","fixed"].indexOf(m(e).position)>=0&&r(e)?E(e):e;return n(o)?t.filter((function(e){return n(e)&&C(e,o)&&"body"!==l(e)})):[]}(e):[].concat(t),c=[].concat(f,[o]),p=c[0],u=c.reduce((function(t,n){var r=I(e,n,s);return t.top=i(r.top,t.top),t.right=a(r.right,t.right),t.bottom=a(r.bottom,t.bottom),t.left=i(r.left,t.left),t}),I(e,p,s));return u.width=u.right-u.left,u.height=u.bottom-u.top,u.x=u.left,u.y=u.top,u}function F(e){return e.split("-")[0]}function U(e){return e.split("-")[1]}function z(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function X(e){var t,n=e.reference,r=e.element,o=e.placement,i=o?F(o):null,a=o?U(o):null,s=n.x+n.width/2-r.width/2,f=n.y+n.height/2-r.height/2;switch(i){case D:t={x:s,y:n.y-r.height};break;case A:t={x:s,y:n.y+n.height};break;case L:t={x:n.x+n.width,y:f};break;case P:t={x:n.x-r.width,y:f};break;default:t={x:n.x,y:n.y}}var c=i?z(i):null;if(null!=c){var p="y"===c?"height":"width";switch(a){case W:t[c]=t[c]-(n[p]/2-r[p]/2);break;case B:t[c]=t[c]+(n[p]/2-r[p]/2)}}return t}function Y(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},e)}function G(e,t){return t.reduce((function(t,n){return t[n]=e,t}),{})}function J(e,t){void 0===t&&(t={});var r=t,o=r.placement,i=void 0===o?e.placement:o,a=r.strategy,s=void 0===a?e.strategy:a,f=r.boundary,c=void 0===f?"clippingParents":f,u=r.rootBoundary,l=void 0===u?H:u,h=r.elementContext,m=void 0===h?T:h,v=r.altBoundary,y=void 0!==v&&v,g=r.padding,b=void 0===g?0:g,x=Y("number"!=typeof b?b:G(b,k)),w=m===T?"reference":T,O=e.rects.popper,j=e.elements[y?w:m],E=_(n(j)?j:j.contextElement||d(e.elements.popper),c,l,s),P=p(e.elements.reference),M=X({reference:P,element:O,strategy:"absolute",placement:i}),W=N(Object.assign({},O,M)),B=m===T?W:P,R={top:E.top-B.top+x.top,bottom:B.bottom-E.bottom+x.bottom,left:E.left-B.left+x.left,right:B.right-E.right+x.right},S=e.modifiersData.offset;if(m===T&&S){var V=S[i];Object.keys(R).forEach((function(e){var t=[L,A].indexOf(e)>=0?1:-1,n=[D,A].indexOf(e)>=0?"y":"x";R[e]+=V[n]*t}))}return R}var K={placement:"bottom",modifiers:[],strategy:"absolute"};function Q(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return!t.some((function(e){return!(e&&"function"==typeof e.getBoundingClientRect)}))}function Z(e){void 0===e&&(e={});var t=e,r=t.defaultModifiers,o=void 0===r?[]:r,i=t.defaultOptions,a=void 0===i?K:i;return function(e,t,r){void 0===r&&(r=a);var i,s,f={placement:"bottom",orderedModifiers:[],options:Object.assign({},K,a),modifiersData:{},elements:{reference:e,popper:t},attributes:{},styles:{}},c=[],p=!1,u={state:f,setOptions:function(r){var i="function"==typeof r?r(f.options):r;l(),f.options=Object.assign({},a,f.options,i),f.scrollParents={reference:n(e)?w(e):e.contextElement?w(e.contextElement):[],popper:w(t)};var s,p,d=function(e){var t=q(e);return V.reduce((function(e,n){return e.concat(t.filter((function(e){return e.phase===n})))}),[])}((s=[].concat(o,f.options.modifiers),p=s.reduce((function(e,t){var n=e[t.name];return e[t.name]=n?Object.assign({},n,t,{options:Object.assign({},n.options,t.options),data:Object.assign({},n.data,t.data)}):t,e}),{}),Object.keys(p).map((function(e){return p[e]}))));return f.orderedModifiers=d.filter((function(e){return e.enabled})),f.orderedModifiers.forEach((function(e){var t=e.name,n=e.options,r=void 0===n?{}:n,o=e.effect;if("function"==typeof o){var i=o({state:f,name:t,instance:u,options:r}),a=function(){};c.push(i||a)}})),u.update()},forceUpdate:function(){if(!p){var e=f.elements,t=e.reference,n=e.popper;if(Q(t,n)){f.rects={reference:y(t,E(n),"fixed"===f.options.strategy),popper:g(n)},f.reset=!1,f.placement=f.options.placement,f.orderedModifiers.forEach((function(e){return f.modifiersData[e.name]=Object.assign({},e.data)}));for(var r=0;r<f.orderedModifiers.length;r++)if(!0!==f.reset){var o=f.orderedModifiers[r],i=o.fn,a=o.options,s=void 0===a?{}:a,c=o.name;"function"==typeof i&&(f=i({state:f,options:s,name:c,instance:u})||f)}else f.reset=!1,r=-1}}},update:(i=function(){return new Promise((function(e){u.forceUpdate(),e(f)}))},function(){return s||(s=new Promise((function(e){Promise.resolve().then((function(){s=void 0,e(i())}))}))),s}),destroy:function(){l(),p=!0}};if(!Q(e,t))return u;function l(){c.forEach((function(e){return e()})),c=[]}return u.setOptions(r).then((function(e){!p&&r.onFirstUpdate&&r.onFirstUpdate(e)})),u}}var $={passive:!0};var ee={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(e){var n=e.state,r=e.instance,o=e.options,i=o.scroll,a=void 0===i||i,s=o.resize,f=void 0===s||s,c=t(n.elements.popper),p=[].concat(n.scrollParents.reference,n.scrollParents.popper);return a&&p.forEach((function(e){e.addEventListener("scroll",r.update,$)})),f&&c.addEventListener("resize",r.update,$),function(){a&&p.forEach((function(e){e.removeEventListener("scroll",r.update,$)})),f&&c.removeEventListener("resize",r.update,$)}},data:{}};var te={name:"popperOffsets",enabled:!0,phase:"read",fn:function(e){var t=e.state,n=e.name;t.modifiersData[n]=X({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})},data:{}},ne={top:"auto",right:"auto",bottom:"auto",left:"auto"};function re(e){var n,r=e.popper,o=e.popperRect,i=e.placement,a=e.variation,f=e.offsets,c=e.position,p=e.gpuAcceleration,u=e.adaptive,l=e.roundOffsets,h=e.isFixed,v=f.x,y=void 0===v?0:v,g=f.y,b=void 0===g?0:g,x="function"==typeof l?l({x:y,y:b}):{x:y,y:b};y=x.x,b=x.y;var w=f.hasOwnProperty("x"),O=f.hasOwnProperty("y"),j=P,M=D,k=window;if(u){var W=E(r),H="clientHeight",T="clientWidth";if(W===t(r)&&"static"!==m(W=d(r)).position&&"absolute"===c&&(H="scrollHeight",T="scrollWidth"),W=W,i===D||(i===P||i===L)&&a===B)M=A,b-=(h&&W===k&&k.visualViewport?k.visualViewport.height:W[H])-o.height,b*=p?1:-1;if(i===P||(i===D||i===A)&&a===B)j=L,y-=(h&&W===k&&k.visualViewport?k.visualViewport.width:W[T])-o.width,y*=p?1:-1}var R,S=Object.assign({position:c},u&&ne),V=!0===l?function(e,t){var n=e.x,r=e.y,o=t.devicePixelRatio||1;return{x:s(n*o)/o||0,y:s(r*o)/o||0}}({x:y,y:b},t(r)):{x:y,y:b};return y=V.x,b=V.y,p?Object.assign({},S,((R={})[M]=O?"0":"",R[j]=w?"0":"",R.transform=(k.devicePixelRatio||1)<=1?"translate("+y+"px, "+b+"px)":"translate3d("+y+"px, "+b+"px, 0)",R)):Object.assign({},S,((n={})[M]=O?b+"px":"",n[j]=w?y+"px":"",n.transform="",n))}var oe={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(e){var t=e.state,n=e.options,r=n.gpuAcceleration,o=void 0===r||r,i=n.adaptive,a=void 0===i||i,s=n.roundOffsets,f=void 0===s||s,c={placement:F(t.placement),variation:U(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:o,isFixed:"fixed"===t.options.strategy};null!=t.modifiersData.popperOffsets&&(t.styles.popper=Object.assign({},t.styles.popper,re(Object.assign({},c,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:a,roundOffsets:f})))),null!=t.modifiersData.arrow&&(t.styles.arrow=Object.assign({},t.styles.arrow,re(Object.assign({},c,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:f})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})},data:{}};var ie={name:"applyStyles",enabled:!0,phase:"write",fn:function(e){var t=e.state;Object.keys(t.elements).forEach((function(e){var n=t.styles[e]||{},o=t.attributes[e]||{},i=t.elements[e];r(i)&&l(i)&&(Object.assign(i.style,n),Object.keys(o).forEach((function(e){var t=o[e];!1===t?i.removeAttribute(e):i.setAttribute(e,!0===t?"":t)})))}))},effect:function(e){var t=e.state,n={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(t.elements.popper.style,n.popper),t.styles=n,t.elements.arrow&&Object.assign(t.elements.arrow.style,n.arrow),function(){Object.keys(t.elements).forEach((function(e){var o=t.elements[e],i=t.attributes[e]||{},a=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:n[e]).reduce((function(e,t){return e[t]="",e}),{});r(o)&&l(o)&&(Object.assign(o.style,a),Object.keys(i).forEach((function(e){o.removeAttribute(e)})))}))}},requires:["computeStyles"]};var ae={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(e){var t=e.state,n=e.options,r=e.name,o=n.offset,i=void 0===o?[0,0]:o,a=S.reduce((function(e,n){return e[n]=function(e,t,n){var r=F(e),o=[P,D].indexOf(r)>=0?-1:1,i="function"==typeof n?n(Object.assign({},t,{placement:e})):n,a=i[0],s=i[1];return a=a||0,s=(s||0)*o,[P,L].indexOf(r)>=0?{x:s,y:a}:{x:a,y:s}}(n,t.rects,i),e}),{}),s=a[t.placement],f=s.x,c=s.y;null!=t.modifiersData.popperOffsets&&(t.modifiersData.popperOffsets.x+=f,t.modifiersData.popperOffsets.y+=c),t.modifiersData[r]=a}},se={left:"right",right:"left",bottom:"top",top:"bottom"};function fe(e){return e.replace(/left|right|bottom|top/g,(function(e){return se[e]}))}var ce={start:"end",end:"start"};function pe(e){return e.replace(/start|end/g,(function(e){return ce[e]}))}function ue(e,t){void 0===t&&(t={});var n=t,r=n.placement,o=n.boundary,i=n.rootBoundary,a=n.padding,s=n.flipVariations,f=n.allowedAutoPlacements,c=void 0===f?S:f,p=U(r),u=p?s?R:R.filter((function(e){return U(e)===p})):k,l=u.filter((function(e){return c.indexOf(e)>=0}));0===l.length&&(l=u);var d=l.reduce((function(t,n){return t[n]=J(e,{placement:n,boundary:o,rootBoundary:i,padding:a})[F(n)],t}),{});return Object.keys(d).sort((function(e,t){return d[e]-d[t]}))}var le={name:"flip",enabled:!0,phase:"main",fn:function(e){var t=e.state,n=e.options,r=e.name;if(!t.modifiersData[r]._skip){for(var o=n.mainAxis,i=void 0===o||o,a=n.altAxis,s=void 0===a||a,f=n.fallbackPlacements,c=n.padding,p=n.boundary,u=n.rootBoundary,l=n.altBoundary,d=n.flipVariations,h=void 0===d||d,m=n.allowedAutoPlacements,v=t.options.placement,y=F(v),g=f||(y===v||!h?[fe(v)]:function(e){if(F(e)===M)return[];var t=fe(e);return[pe(e),t,pe(t)]}(v)),b=[v].concat(g).reduce((function(e,n){return e.concat(F(n)===M?ue(t,{placement:n,boundary:p,rootBoundary:u,padding:c,flipVariations:h,allowedAutoPlacements:m}):n)}),[]),x=t.rects.reference,w=t.rects.popper,O=new Map,j=!0,E=b[0],k=0;k<b.length;k++){var B=b[k],H=F(B),T=U(B)===W,R=[D,A].indexOf(H)>=0,S=R?"width":"height",V=J(t,{placement:B,boundary:p,rootBoundary:u,altBoundary:l,padding:c}),q=R?T?L:P:T?A:D;x[S]>w[S]&&(q=fe(q));var C=fe(q),N=[];if(i&&N.push(V[H]<=0),s&&N.push(V[q]<=0,V[C]<=0),N.every((function(e){return e}))){E=B,j=!1;break}O.set(B,N)}if(j)for(var I=function(e){var t=b.find((function(t){var n=O.get(t);if(n)return n.slice(0,e).every((function(e){return e}))}));if(t)return E=t,"break"},_=h?3:1;_>0;_--){if("break"===I(_))break}t.placement!==E&&(t.modifiersData[r]._skip=!0,t.placement=E,t.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};function de(e,t,n){return i(e,a(t,n))}var he={name:"preventOverflow",enabled:!0,phase:"main",fn:function(e){var t=e.state,n=e.options,r=e.name,o=n.mainAxis,s=void 0===o||o,f=n.altAxis,c=void 0!==f&&f,p=n.boundary,u=n.rootBoundary,l=n.altBoundary,d=n.padding,h=n.tether,m=void 0===h||h,v=n.tetherOffset,y=void 0===v?0:v,b=J(t,{boundary:p,rootBoundary:u,padding:d,altBoundary:l}),x=F(t.placement),w=U(t.placement),O=!w,j=z(x),M="x"===j?"y":"x",k=t.modifiersData.popperOffsets,B=t.rects.reference,H=t.rects.popper,T="function"==typeof y?y(Object.assign({},t.rects,{placement:t.placement})):y,R="number"==typeof T?{mainAxis:T,altAxis:T}:Object.assign({mainAxis:0,altAxis:0},T),S=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,V={x:0,y:0};if(k){if(s){var q,C="y"===j?D:P,N="y"===j?A:L,I="y"===j?"height":"width",_=k[j],X=_+b[C],Y=_-b[N],G=m?-H[I]/2:0,K=w===W?B[I]:H[I],Q=w===W?-H[I]:-B[I],Z=t.elements.arrow,$=m&&Z?g(Z):{width:0,height:0},ee=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},te=ee[C],ne=ee[N],re=de(0,B[I],$[I]),oe=O?B[I]/2-G-re-te-R.mainAxis:K-re-te-R.mainAxis,ie=O?-B[I]/2+G+re+ne+R.mainAxis:Q+re+ne+R.mainAxis,ae=t.elements.arrow&&E(t.elements.arrow),se=ae?"y"===j?ae.clientTop||0:ae.clientLeft||0:0,fe=null!=(q=null==S?void 0:S[j])?q:0,ce=_+ie-fe,pe=de(m?a(X,_+oe-fe-se):X,_,m?i(Y,ce):Y);k[j]=pe,V[j]=pe-_}if(c){var ue,le="x"===j?D:P,he="x"===j?A:L,me=k[M],ve="y"===M?"height":"width",ye=me+b[le],ge=me-b[he],be=-1!==[D,P].indexOf(x),xe=null!=(ue=null==S?void 0:S[M])?ue:0,we=be?ye:me-B[ve]-H[ve]-xe+R.altAxis,Oe=be?me+B[ve]+H[ve]-xe-R.altAxis:ge,je=m&&be?function(e,t,n){var r=de(e,t,n);return r>n?n:r}(we,me,Oe):de(m?we:ye,me,m?Oe:ge);k[M]=je,V[M]=je-me}t.modifiersData[r]=V}},requiresIfExists:["offset"]};var me={name:"arrow",enabled:!0,phase:"main",fn:function(e){var t,n=e.state,r=e.name,o=e.options,i=n.elements.arrow,a=n.modifiersData.popperOffsets,s=F(n.placement),f=z(s),c=[P,L].indexOf(s)>=0?"height":"width";if(i&&a){var p=function(e,t){return Y("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:G(e,k))}(o.padding,n),u=g(i),l="y"===f?D:P,d="y"===f?A:L,h=n.rects.reference[c]+n.rects.reference[f]-a[f]-n.rects.popper[c],m=a[f]-n.rects.reference[f],v=E(i),y=v?"y"===f?v.clientHeight||0:v.clientWidth||0:0,b=h/2-m/2,x=p[l],w=y-u[c]-p[d],O=y/2-u[c]/2+b,j=de(x,O,w),M=f;n.modifiersData[r]=((t={})[M]=j,t.centerOffset=j-O,t)}},effect:function(e){var t=e.state,n=e.options.element,r=void 0===n?"[data-popper-arrow]":n;null!=r&&("string"!=typeof r||(r=t.elements.popper.querySelector(r)))&&C(t.elements.popper,r)&&(t.elements.arrow=r)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function ve(e,t,n){return void 0===n&&(n={x:0,y:0}),{top:e.top-t.height-n.y,right:e.right-t.width+n.x,bottom:e.bottom-t.height+n.y,left:e.left-t.width-n.x}}function ye(e){return[D,L,A,P].some((function(t){return e[t]>=0}))}var ge={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(e){var t=e.state,n=e.name,r=t.rects.reference,o=t.rects.popper,i=t.modifiersData.preventOverflow,a=J(t,{elementContext:"reference"}),s=J(t,{altBoundary:!0}),f=ve(a,r),c=ve(s,o,i),p=ye(f),u=ye(c);t.modifiersData[n]={referenceClippingOffsets:f,popperEscapeOffsets:c,isReferenceHidden:p,hasPopperEscaped:u},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":p,"data-popper-escaped":u})}},be=Z({defaultModifiers:[ee,te,oe,ie]}),xe=[ee,te,oe,ie,ae,le,he,me,ge],we=Z({defaultModifiers:xe});e.applyStyles=ie,e.arrow=me,e.computeStyles=oe,e.createPopper=we,e.createPopperLite=be,e.defaultModifiers=xe,e.detectOverflow=J,e.eventListeners=ee,e.flip=le,e.hide=ge,e.offset=ae,e.popperGenerator=Z,e.popperOffsets=te,e.preventOverflow=he,Object.defineProperty(e,"__esModule",{value:!0})})); +//# sourceMappingURL=popper.min.js.map diff --git a/rescue/12/scripts/script.js b/rescue/12/scripts/script.js new file mode 100644 index 0000000..d7be898 --- /dev/null +++ b/rescue/12/scripts/script.js @@ -0,0 +1,10 @@ +/* + Student Name: Name Surname + File Name: script.js + Date: 2024/12/01 +*/ + +// jQuery for hero image to consume the header window space +$(document).ready(function(){ + $('.hero').height($(window).height()); +}); |