diff --git a/index.html b/index.html index 2640f68..850ed54 100644 --- a/index.html +++ b/index.html @@ -5,241 +5,10 @@ Maine Luxury Detailing - + @@ -262,7 +31,7 @@ @@ -270,20 +39,18 @@
-

Serving Portland since 2023

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - posuere cursus ante, quis tempor lacus fringilla id. Pellentesque sed - mi luctus odio varius hendrerit. Nam vitae fermentum ligula, sit amet - consectetur sem. -

+

Portland's Mobile
Luxury Detailing Service

+ + +
- - + diff --git a/reviews.html b/reviews.html new file mode 100644 index 0000000..0f5bfb3 --- /dev/null +++ b/reviews.html @@ -0,0 +1,71 @@ + + + + + + + Maine Luxury Detailing + + + + + + +
+ +
+ +
+
+

Reviews

+
+
+ + + + +
+ + +
+ +
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..1ba5a85 --- /dev/null +++ b/script.js @@ -0,0 +1,35 @@ +let hamburger = document.getElementById("hamburger"); + +// toggle hamburger menu +hamburger.addEventListener("click", function () { + let navMenu = document.getElementsByTagName("nav")[0]; + hamburger.classList.toggle("active"); + navMenu.classList.toggle("active"); + + const isExpanded = navMenu.classList.contains("active"); + hamburger.setAttribute("aria-expanded", isExpanded); +}); + +// close hamburger when nav link is clicked +let navLinks = document.getElementsByClassName("navLink"); +for (let i = 0; i < navLinks.length; i++) { + navLinks[i].addEventListener("click", function (event) { + let navMenu = document.getElementsByTagName("nav")[0]; + hamburger.classList.remove("active"); + navMenu.classList.remove("active"); + hamburger.setAttribute("aria-expanded", "false"); + }); +} + +// close hamburger when click is outside of menu +document.addEventListener("click", function (event) { + let navMenu = document.getElementsByTagName("nav")[0]; + const clickOutside = + !hamburger.contains(event.target) && !navMenu.contains(event.target); + + if (clickOutside && navMenu.classList.contains("active")) { + hamburger.classList.remove("active"); + navMenu.classList.remove("active"); + hamburger.setAttribute("aria-expanded", "false"); + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..58aad4b --- /dev/null +++ b/style.css @@ -0,0 +1,275 @@ + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + /** COLOR VARIABLES */ + :root { + --black: #000; + --gold: #ffd700; + --dark-gold: #d1b410; + } + + + /** HEADER + NAV STYLING */ + header { + background-color: var(--black); + position: sticky; + top: 0; + z-index: 999; + } + + .banner { + display: flex; + justify-content: space-between; max-width: 60%; + align-items: center; + + height: 4.5rem; + + margin: 0 auto; + padding: 1rem 0; + } + + .logo { + font-size: 1.5rem; + font-weight: bold; + color: var(--gold); + text-decoration: none; + } + + #hamburger { + display: none; + flex-direction: column; + cursor: pointer; + background: none; + border: none; + padding: 5px; + } + + #hamburger span { + width: 25px; + height: 3px; + background-color: var(--gold); + margin: 3px 0; + transition: 0.3s; + position: relative; + } + + .navLink { + color: var(--gold); + text-decoration: none; + font-weight: 500; + transition: color 0.3s ease; + } + + .navLink:hover { + color: #fff; + } + + /** BODY + CONTENT */ + body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, + Cantarell, sans-serif; + line-height: 1.6; + color: #666; + background-color: var(--black); + } + + main { + /** background-color: #fff;*/ + background-color: var(--black); + } + + section { + display: flex; + flex-direction: column; + justify-content: center; + max-width: 60%; + margin: 0 auto; + padding: 3rem 0; + } + + #book-button { + background-color: var(--gold); + color: black; + border: none; + border-radius: 5rem; + + box-shadow: 0px 1px 75px rgba(255, 255, 255, 0.5); + + padding: 2rem 0; + margin: 5rem 0; + + height: 7rem; + + font-size: 2rem; + font-weight: bold; + text-decoration: none; + } + #book-button:hover { + cursor: pointer; + } + #book-button:active { + background-color: var(--dark-gold); + } + + a { + color: var(--gold); + text-align: center; + } + + h1 { + font-size: 2.5rem; + color: #fff; + margin-bottom: 1rem; + text-align: center; + } + + h2 { + font-size: 2rem; + color: var(--gold); + margin-bottom: 1rem; + border-bottom: 2px solid var(--gold); + padding-bottom: 0.5rem; + } + + h3 { + font-size: 1.5rem; + color: #000; + margin-bottom: 1rem; + } + + p { + color: #fff; + margin-bottom: 1rem; + } + + /** FOOTER */ + footer { + display: flex; + justify-content: space-between; + + margin: 1rem auto; + padding: 2rem 0; + + max-width: 60%; + + background-color: #000; + color: var(--gold); + + text-align: center; + } + + #footer-left { + width: 50%; + text-align: left; + } + #footer-right { + width: 50%; + text-align: right; + } + + /** "skip link" for screen readers */ + .skipLink { + position: absolute; + top: -50px; + left: 6px; + background: #fff; + color: #000; + padding: 8px; + text-decoration: none; + font-weight: bold; + border-radius: 4px; + z-index: 1000; + } + .skipLink:focus { + top: 6px; + } + + /** DESKTOP RULES */ + @media screen and (min-width: 851px) { + /** header */ + nav { + display: flex; + flex-direction: row; + gap: 3rem; + + list-style: none; + } + + /** content */ + h1 { + font-size: 3rem; + } + + #book-button { + width: 50%; + } + } + + /* MOBILE RULES */ + @media screen and (max-width: 850px) { + /** header */ + header { + padding: 0 1rem; + } + + #hamburger { + display: flex; + } + + nav { + display: flex; + flex-direction: column; + position: fixed; + gap: 1rem; + + padding: 2rem 0; + + top: -12rem; + left: 0; + width: 100%; + + font-size: 1rem; + text-align: center; + background-color: #000; + transition: top 0.5s ease; + box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); + z-index: -1; + } + + nav.active { + top: 1.5rem; + } + + /** hamburger animation */ + #hamburger.active span:nth-child(1) { + transform: rotate(-45deg) translateY(10px) translateX(-3px); + width: 24px; + height: 4px; + } + #hamburger.active span:nth-child(2) { + opacity: 0; + } + #hamburger.active span:nth-child(3) { + transform: rotate(45deg) translateY(-10px) translateX(-3px); + width: 24px; + height: 4px; + } + + /** footer */ + footer { + font-size: .9rem; + } + + /** content rules */ + h1 { + font-size: 2rem; + } + + #book-button { + font-size: 1.75rem; + width: 85%; + } + }