diff --git a/Images/brandon-day-oCJuJQqvCzc-unsplash.jpg b/Images/brandon-day-oCJuJQqvCzc-unsplash.jpg new file mode 100644 index 000000000..d35a1f399 Binary files /dev/null and b/Images/brandon-day-oCJuJQqvCzc-unsplash.jpg differ diff --git a/Images/calab-acker-vOiTMqB-xDk-unsplash.jpg b/Images/calab-acker-vOiTMqB-xDk-unsplash.jpg new file mode 100644 index 000000000..3ca3a0519 Binary files /dev/null and b/Images/calab-acker-vOiTMqB-xDk-unsplash.jpg differ diff --git a/Images/cristina-glebova--zeIM3l8OJo-unsplash.jpg b/Images/cristina-glebova--zeIM3l8OJo-unsplash.jpg new file mode 100644 index 000000000..ddaf54ab2 Binary files /dev/null and b/Images/cristina-glebova--zeIM3l8OJo-unsplash.jpg differ diff --git a/Images/g-l-q3XE0HnCEGc-unsplash.jpg b/Images/g-l-q3XE0HnCEGc-unsplash.jpg new file mode 100644 index 000000000..b5b1f6c81 Binary files /dev/null and b/Images/g-l-q3XE0HnCEGc-unsplash.jpg differ diff --git a/Images/haberdoedas-Zc3fR4AiH4U-unsplash.jpg b/Images/haberdoedas-Zc3fR4AiH4U-unsplash.jpg new file mode 100644 index 000000000..00d686f95 Binary files /dev/null and b/Images/haberdoedas-Zc3fR4AiH4U-unsplash.jpg differ diff --git a/Images/lum3n-DwDCTnlp-V4-unsplash.jpg b/Images/lum3n-DwDCTnlp-V4-unsplash.jpg new file mode 100644 index 000000000..0fc016d8d Binary files /dev/null and b/Images/lum3n-DwDCTnlp-V4-unsplash.jpg differ diff --git a/Images/martin-chavez-NYXMfO8E-nQ-unsplash.jpg b/Images/martin-chavez-NYXMfO8E-nQ-unsplash.jpg new file mode 100644 index 000000000..e2d47f6d7 Binary files /dev/null and b/Images/martin-chavez-NYXMfO8E-nQ-unsplash.jpg differ diff --git a/Images/matthew-henry-6x-hVXXiBxs-unsplash.jpg b/Images/matthew-henry-6x-hVXXiBxs-unsplash.jpg new file mode 100644 index 000000000..a087a1390 Binary files /dev/null and b/Images/matthew-henry-6x-hVXXiBxs-unsplash.jpg differ diff --git a/Images/menu_18dp_2446C2_FILL0_wght300_GRAD0_opsz20.svg b/Images/menu_18dp_2446C2_FILL0_wght300_GRAD0_opsz20.svg new file mode 100644 index 000000000..12e1f2605 --- /dev/null +++ b/Images/menu_18dp_2446C2_FILL0_wght300_GRAD0_opsz20.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Images/natalia-gusakova-oWiWdIO1rfQ-unsplash.jpg b/Images/natalia-gusakova-oWiWdIO1rfQ-unsplash.jpg new file mode 100644 index 000000000..570167260 Binary files /dev/null and b/Images/natalia-gusakova-oWiWdIO1rfQ-unsplash.jpg differ diff --git a/Images/ryan-walton-wsSsXz8HMX8-unsplash.jpg b/Images/ryan-walton-wsSsXz8HMX8-unsplash.jpg new file mode 100644 index 000000000..a623628a1 Binary files /dev/null and b/Images/ryan-walton-wsSsXz8HMX8-unsplash.jpg differ diff --git a/Images/sebastian-herrmann-yEmTlB3CdS8-unsplash.jpg b/Images/sebastian-herrmann-yEmTlB3CdS8-unsplash.jpg new file mode 100644 index 000000000..f76e15023 Binary files /dev/null and b/Images/sebastian-herrmann-yEmTlB3CdS8-unsplash.jpg differ diff --git a/README.md b/README.md index a15b0ecb9..87e6347b2 100644 --- a/README.md +++ b/README.md @@ -1 +1,45 @@ -# js-project-business-site \ No newline at end of file +# js-project-business-site + +# Paws of Hope Website + +A website for **Paws of Hope**, an organization dedicated to rescuing and rehoming animals. +Built with **HTML**, **CSS**, and **JavaScript**. + +Live site: https://business-site-pawsofhope.netlify.app/ + +--- + +## Purpose +- Share the mission of Paws of Hope +- Showcase adoptable pets +- Provide contact information and newsletter signup + +--- + +## Pages +- **Home** – Introduction and mission +- **About** – Information about the organization +- **Adopt** – Profiles of pets available for adoption +- **Contact** – Contact details and newsletter subscription + +--- + +## Tech Stack +- HTML5 +- CSS3 +- JavaScript + +--- + +## Setup +1. Clone or download this repository. +2. Open the project in VS Code (or another editor). +3. Open `index.html` in a browser or use Live Server in VS Code. + +--- + +## Future Improvements +- Add detailed pet pages +- Implement search and filters for adoptions +- Improve form validation +- Optimize images for performance diff --git a/index.html b/index.html new file mode 100644 index 000000000..bd1e79a9d --- /dev/null +++ b/index.html @@ -0,0 +1,206 @@ + + + + + + + Paws of Hope + + + + + + + +
+ +
+ + + +
+
+ Hero image of a dog + +
+

ADOPT

+

Don't shop

+
+ Meet the Pack! +
+
+
+
+ +
+
+

About Us

+

We are a non-profit organization dedicated to rescuing and rehoming abandoned and abused animals. Our mission is to provide a safe haven for these animals and find them loving forever homes.

+
+ +
+
+
+ Dog Image +
Nala
+

Female

+ Read more +
+ +
+ Dog Image +
Willow
+

Female

+ Read more +
+ +
+ Dog Image +
Billy
+

Male

+ Read more +
+ +
+ Dog Image +
Zeke
+

Male

+ Read more +
+
+ +
+ View All Pets +
+ +
+
+

Contact Us

+

+ If you have any questions or would like to learn more about our organization, please don't hesitate to reach + out. + We would love to hear from you! +

+
+ + +
+
+ +
+ + + +
+ +
+ + + +
+ + + + +
+
+
+
+ +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 000000000..0d63c1550 --- /dev/null +++ b/script.js @@ -0,0 +1,28 @@ +const navbar = document.getElementById('navbarLinks') + +// Makes the sidebar open and close when clicking the buttons +function openSidebar() { + navbar.classList.add('show') +} + +function closeSidebar() { + navbar.classList.remove('show') +} + + +// Overlay functionality to close the sidebar when clicking outside of it +function openSidebar() { + document.querySelector('.nav-links').classList.add('show'); + document.body.classList.add('menu-open'); +} + +function closeSidebar() { + document.querySelector('.nav-links').classList.remove('show'); + document.body.classList.remove('menu-open'); +} + +// Close sidebar when clicking on a navigation link +const navLinks = document.querySelectorAll('.nav-links a'); +navLinks.forEach(link => { + link.addEventListener('click', closeSidebar); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..38d27d2b3 --- /dev/null +++ b/style.css @@ -0,0 +1,516 @@ +@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap'); /* Font for logo/h1 */ + +body { + background-color: white; + margin: 0; +} + + +/* Text Styles */ +h1 { + color: #2446C2; + font-family: "Rock Salt", cursive; + font-size: x-large; +} + +h2 { + color: #2446C2; + font-family: "Roboto", sans-serif; + font-size: xxx-large; + margin-top: 10px; + margin-bottom: 2px; +} + +h3 { + color: black; + font-family: "Roboto", sans-serif; + font-size: x-large; + text-decoration: line-through #2446C2; + margin-top: 10px; + margin-bottom: 20px; +} + +h4 { + color: #2446C2; + font-family: "Roboto", sans-serif; + font-size: xx-large; + margin: 10px 0 5px 0; +} + +h5 { + color: #2446C2; + font-family: "Roboto", sans-serif; + font-size: large; + margin: 10px 0 10px 0; +} + +p { + color: black; + font-family: "Roboto", sans-serif; + font-size: medium; + margin: 0; +} + + +/* Menu Buttons */ +#open-menu-btn { + display: block; + background: none; + border: none; + padding: 10px; + cursor: pointer; + position: absolute; + top: 16px; + right: 20px; + z-index: 1; +} + +#close-menu-btn { + background: none; + border: none; + padding-left: 7px; + padding-top: 20px; + padding-bottom: 15px; + cursor: pointer; + align-self: flex-start; +} + + +/* Overlay for when menu is open */ +#overlay { + display: none; + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 0; +} + + +/* Navigation Bar */ +.navbar { + background-color: white; + display: flex; + justify-content: space-between; + align-items: center; + padding: 2px 30px; +} + +.nav-links a { + color: black; + font-family: "Roboto", sans-serif; + font-weight: bold; + font-size: medium; + padding: 14px 10px; + text-decoration: none; +} + +.nav-links a:hover { + color: #2446C2; + transition: 0.3s; +} + +.logo { + font-family: 'Rock Salt', cursive; + font-size: x-large; + color: #2446C2; + margin-left: 20px; +} + + +/* Hero Section */ +.hero-image { + width: 100%; + height: 500px; + object-fit: cover; +} + +.hero-container { + width: 100%; + height: 500px; + position: relative; + z-index: -1; +} + +.hero-text { + position: absolute; + top: 8%; + left: 50%; + transform: translate(-50%, -8%); + text-align: center; + color: white; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.hero-text h3 { + margin-top: 10px; + margin-bottom: 40px; +} + +.hero-button a { + background-color: lightgray; + color: black; + border: none; + padding: 10px 20px; + font-size: medium; + text-decoration: none; + margin-top: 10px; + border-radius: 5px; +} + +.hero-button a:hover { + background-color: #2446C2; + color: white; + transition: 0.3s; +} + + +/* About Section */ +.about { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin-top: 80px; + margin-bottom: 100px; + margin-left: 60px; + margin-right: 60px; +} + + +/* Adoption Card Section */ +.card-section { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 60px; + padding-right: 60px; + padding-left: 60px; +} + +.card { + background-color: white; + padding: 20px; + border: 1px solid gray; + border-radius: 10px; + display: flex; + flex-direction: column; + align-items: center; + grid-column: span 4; +} + +.card:hover { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.card-image { + width: 100%; +} + +.card a { + background-color: lightgray; + color: black; + border: none; + padding: 5px 20px; + font-size: medium; + text-decoration: none; + margin-top: 10px; + border-radius: 5px; +} + +.card a:hover { + background-color: #2446C2; + color: white; + transition: 0.3s; +} + + +/* View All Button */ +.view-all-button { + display: flex; + flex-direction: row; + justify-content: center; + margin-top: 30px; + margin-bottom: 120px; +} + +.view-all-button a { + background-color: lightgray; + color: black; + border: none; + padding: 10px 20px; + font-size: medium; + text-decoration: none; + border-radius: 5px; +} + +.view-all-button a:hover { + background-color: #2446C2; + color: white; + transition: 0.3s; +} + + +/* Contact Section */ +.contact-section { + display: flex; + flex-direction: column; + margin-top: 80px; + margin-bottom: 80px; + margin-left: 60px; + margin-right: 60px; +} + +.contact-text p { + margin-top: 0; + margin-bottom: 60px; +} + +.contact-form { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.name-email { + display: flex; + gap: 20px; + width: 100%; +} + +.subject-message { + display: flex; + flex-direction: column; + /* width: 100%;----- Had to add to html file instead for it to be the right width for some reason*/ +} + +input, +textarea { + /*width: 100%; ----- Had to add to html file instead for it to be the right width for some reason*/ + padding: 10px; + margin: 10px 0; + border: 1px solid gray; + border-radius: 5px; + font-family: "Roboto", sans-serif; + font-size: medium; +} + +input:focus, +textarea:focus { + outline: none; + border-color: #2446C2; + box-shadow: 0 0 5px rgba(36, 70, 194, 0.5); +} + +input:valid { + border-color: green; + box-shadow: 0 0 5px rgba(0, 128, 0, 0.5); +} + + +input:invalid:not(:placeholder-shown) { + border-color: red; + box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); +} + +.checkbox-container { + display: flex; + align-items: flex-start; + position: relative; + padding-left: 25px; + margin: 10px 5px; + font-family: "Roboto", sans-serif; + font-size: medium; +} + +.checkbox-container input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +.custom-checkbox { + position: absolute; + top: 0; + left: 0; + height: 15px; + width: 15px; + background-color: transparent; + border: 1px solid gray; + border-radius: 3px; + cursor: pointer; +} + +.checkbox-container:hover input~.custom-checkbox { + background-color: lightgrey; +} + +.checkbox-container input:checked~.custom-checkbox { + background-color: #2446C2; +} + +.custom-checkbox::after { + content: ""; /* Checkmark */ + position: absolute; + width: 3px; + height: 6px; + border: 1px solid white; + border-width: 0 3px 3px 0; + top: 2px; + left: 5px; + transform: rotate(45deg); + display: none; +} + +.checkbox-container input:checked~.custom-checkbox::after { + display: block; +} + +.send-button { + align-items: center; + justify-content: center; + width: auto; + background-color: white; + color: black; + border: solid gray 1px; + border-radius: 3px; + margin-top: 20px; + padding: 5px 30px; + font-family: "Roboto", sans-serif; + font-size: medium; + cursor: pointer; + align-self: center; +} + +.send-button:hover { + background-color: #2446C2; + color: white; + transition: 0.3s; +} + + +/* Footer */ +.footer { + background-color: #2446C2; + text-align: center; + padding: 10px 0; + position: relative; + bottom: 0; + width: 100%; +} + +.footer p { + color: white; + font-family: "Roboto", sans-serif; + font-size: small; + margin: 0; +} + + +/* Media Queries */ +@media (max-width: 600px) /* Mobile Devices */ { + .card { + grid-column: span 4; + } + + .nav-links { + display: flex; + flex-direction: column; + position: fixed; + top: 0; + right: -100%; + height: 100vh; + width: min(10em, 100%); + z-index: 1; + padding-left: 10px; + background-color: white; + box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2), 0 20px 30px 0 rgba(0, 0, 0, 0.19); + transition: right 0.5s ease-out; + } + + .nav-links.show { + right: 0; + } + + body.menu-open #overlay { + display: block; + } + + .logo { + font-size: 17pt; + font-weight: bold; + margin-left: 0; + + } + + .contact-section { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } +} + +@media (min-width: 601px) and (max-width: 1199px) /* Tablets and Small Screens */ { + + #open-menu-btn, + #close-menu-btn { + display: none; + } + + .card { + grid-column: span 2; + } + + .contact-section { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } +} + +@media (min-width: 1200px) /* Desktops and Large Screens */ { + + #open-menu-btn, + #close-menu-btn { + display: none; + } + + .card { + grid-column: span 1; + } + + .contact-section { + display: flex; + flex-direction: row; + + } + + .contact-text { + display: flex; + flex-direction: column; + align-items: flex-start; + text-align: left; + margin-left: 60px; + margin-right: 10px; + } + + .contact-form { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .send-button { + width: auto; + align-self: center; + margin-left: auto; + margin-right: auto; + } +} \ No newline at end of file