diff options
author | | 1970-01-01 00:00:00 +0000 |
---|---|---|
committer | | 2025-01-12 07:28:48 +0000 |
commit | 1145a702d6c623f4619b0d6269e5e0c4ce3060ed (patch) | |
tree | 5f34c43e01b2f1957c47b9417fb968b5b6d9cc27 | |
parent | rescue 10 (diff) | |
download | html-1145a702d6c623f4619b0d6269e5e0c4ce3060ed.tar html-1145a702d6c623f4619b0d6269e5e0c4ce3060ed.tar.gz html-1145a702d6c623f4619b0d6269e5e0c4ce3060ed.tar.bz2 html-1145a702d6c623f4619b0d6269e5e0c4ce3060ed.tar.xz html-1145a702d6c623f4619b0d6269e5e0c4ce3060ed.zip |
rescue 11
-rw-r--r-- | 11/about.html | 117 | ||||
-rw-r--r-- | 11/contact.html | 125 | ||||
-rw-r--r-- | 11/css/styles.css | 399 | ||||
-rw-r--r-- | 11/css/styles.min.css | 1 | ||||
-rw-r--r-- | 11/faqs.html | 90 | ||||
-rw-r--r-- | 11/gallery.html | 148 | ||||
-rw-r--r-- | 11/index.html | 98 | ||||
-rw-r--r-- | 11/media/captions.vtt | 31 | ||||
-rw-r--r-- | 11/media/descriptions.vtt | 31 | ||||
-rw-r--r-- | 11/partnership.html | 160 | ||||
-rw-r--r-- | 11/question.txt | 7 | ||||
-rw-r--r-- | 11/scripts/script.js | 46 | ||||
-rw-r--r-- | 11/sitemap.txt | 7 | ||||
-rw-r--r-- | 11/template.html | 78 |
14 files changed, 1338 insertions, 0 deletions
diff --git a/11/about.html b/11/about.html new file mode 100644 index 0000000..dca1c54 --- /dev/null +++ b/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/11/contact.html b/11/contact.html new file mode 100644 index 0000000..5d56d12 --- /dev/null +++ b/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/11/css/styles.css b/11/css/styles.css new file mode 100644 index 0000000..6a88bd0 --- /dev/null +++ b/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/11/css/styles.min.css b/11/css/styles.min.css new file mode 100644 index 0000000..5b3ee17 --- /dev/null +++ b/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/11/faqs.html b/11/faqs.html new file mode 100644 index 0000000..4bbc921 --- /dev/null +++ b/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/11/gallery.html b/11/gallery.html new file mode 100644 index 0000000..f8c026d --- /dev/null +++ b/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/11/index.html b/11/index.html new file mode 100644 index 0000000..1f30c36 --- /dev/null +++ b/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/11/media/captions.vtt b/11/media/captions.vtt new file mode 100644 index 0000000..6e49237 --- /dev/null +++ b/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/11/media/descriptions.vtt b/11/media/descriptions.vtt new file mode 100644 index 0000000..3cb416c --- /dev/null +++ b/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/11/partnership.html b/11/partnership.html new file mode 100644 index 0000000..af4ccce --- /dev/null +++ b/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/11/question.txt b/11/question.txt new file mode 100644 index 0000000..10e84f7 --- /dev/null +++ b/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/11/scripts/script.js b/11/scripts/script.js new file mode 100644 index 0000000..c0c2dea --- /dev/null +++ b/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/11/sitemap.txt b/11/sitemap.txt new file mode 100644 index 0000000..3f60d69 --- /dev/null +++ b/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/11/template.html b/11/template.html new file mode 100644 index 0000000..3317df9 --- /dev/null +++ b/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> |