simon/luxury-detailing-maine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hamburger works + global margin

Browse Source
This commit is contained in:
Simon
2025-09-07 22:55:31 -04:00
parent 24fc434a4a
commit f8fe76b27e
1 changed files with 72 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+72 -58
View File
@@ -15,21 +15,23 @@
box-sizing: border-box; box-sizing: border-box;
} }
/** NAV STYLING */ .banner {
header { max-width: 60%;
background-color: #000; margin: 0 auto;
padding: 1rem 0; padding: 1rem 0;
position: sticky;
top: 0;
z-index: 999;
}
nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
/** NAV STYLING */
header {
background-color: #000;
position: sticky;
top: 0;
z-index: 999;
}
.logo { .logo {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
@@ -37,11 +39,7 @@
text-decoration: none; text-decoration: none;
} }
#navMenu {
display: flex;
list-style: none;
gap: 2rem;
}
.navLink { .navLink {
color: #ffd700; color: #ffd700;
@@ -67,7 +65,7 @@
width: 25px; width: 25px;
height: 3px; height: 3px;
background-color: #ffd700; background-color: #ffd700;
margin: 3 px 0; margin: 3px 0;
transition: 0.3s; transition: 0.3s;
} }
@@ -80,9 +78,8 @@
} }
main { main {
max-width: 700px; max-width: 60%;
margin: 3rem auto; margin: 3rem auto;
padding: 0 20px;
} }
section { section {
@@ -120,7 +117,18 @@
color: #ffd700; color: #ffd700;
text-align: center; text-align: center;
padding: 2rem 0; padding: 2rem 0;
margin-top: 4rem; margin-top: 4rem auto;
display: flex;
justify-content: space-between;
}
#footer-left {
width: 50%;
text-align: left;
}
#footer-right {
width: 50%;
text-align: right;
} }
/** "skip link" for screen readers */ /** "skip link" for screen readers */
@@ -141,32 +149,37 @@
top: 6px; top: 6px;
} }
/** Desktop (defaul) styles */ /** Desktop (default) styles */
@media screen and (min-width: 769px) { @media screen and (min-width: 851px) {
nav {
display: flex;
flex-direction: row;
gap: 3rem;
list-style: none;
}
nav li {
display: inline;
}
h1 { h1 {
font-size: 3rem; font-size: 3rem;
} }
nav, main {
padding: 0 40px;
}
#navMenu {
gap: 3rem;
}
} }
/* Mobile Styles */ /* Mobile Styles */
@media screen and (max-width: 768px) { @media screen and (max-width: 850px) {
#hamburger { #hamburger {
display: flex; display: flex;
} }
nav { header {
padding: 0 15px; padding: 0 15px;
} }
#navMenu { nav {
display: flex;
position: fixed; position: fixed;
left: -100%; left: -100%;
top: 70px; top: 70px;
@@ -180,14 +193,10 @@
gap: 1rem; gap: 1rem;
} }
#navMenu.active { nav.active {
left: 0; left: 0;
} }
#navMenu li {
margin: 1rem 0;
}
/** Hamburger animation */ /** Hamburger animation */
#hamburger.active span:nth-child(1) { #hamburger.active span:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px); transform: rotate(-45deg) translate(-5px, 6px);
@@ -212,7 +221,7 @@
<a href="#main-content" class="skipLink">Skip to main content</a> <a href="#main-content" class="skipLink">Skip to main content</a>
<header> <header>
<nav> <div class="banner" role="banner">
<a href="#" class="logo" aria-label="Company Logo">MLD</a> <a href="#" class="logo" aria-label="Company Logo">MLD</a>
<button <button
@@ -225,13 +234,13 @@
<span></span> <span></span>
</button> </button>
<ul id="navMenu" role="banner"> <nav>
<li><a class="navLink" role="navigation" href="#Services">Services</a></li> <a class="navLink" role="navigation" href="#Services">Services</a>
<li><a class="navLink" role="navigation" href="#Ceramic Coating">Ceramic Coating</a></li> <a class="navLink" role="navigation" href="#Ceramic Coating">Ceramic Coating</a>
<li><a class="navLink" role="navigation" href="#Reviews">Reviews</a></li> <a class="navLink" role="navigation" href="#Reviews">Reviews</a>
<li><a class="navLink" role="navigation" href="#Contact">Contact</a></li> <a class="navLink" role="navigation" href="#Contact">Contact</a>
</ul> </nav>
</nav> </div>
</header> </header>
<main id="main-content"> <main id="main-content">
@@ -247,26 +256,29 @@
</main> </main>
<footer> <footer>
<div id="footer-left"> <div class="banner">
<p>&copy;Maine Luxury Detailing 2025. All rights reserved.</p> <div id="footer-left">
</div> &copy;Maine Luxury Detailing 2025. All rights reserved.
<div id="footer-right"> </div>
<p>Phone: XXX-XXX-XXXXX</p> <div id="footer-right">
<p>Email: xxx@xxx.xxx</p> Phone:</br />
<a href="#">instagram</a> XXX-XXX-XXXXX<br />
<!-- <img class="footer-icon" src=""> Email:<br />
<a href="#"></a> xxx@xxx.xxx<br />
</img> --> <a href="#">instagram</a>
<!-- <img class="footer-icon" src="">
<a href="#"></a>
</img> -->
</div>
</div> </div>
</footer> </footer>
<script> <script>
const hamburger = document.getElementById("hamburger"); let hamburger = document.getElementById("hamburger");
const navMenu = document.getElementById("navMenu");
// Toggle hamburger menu // Toggle hamburger menu
hamburger.addEventListener("click", function () { hamburger.addEventListener("click", function () {
console.log("toggle"); let navMenu = document.getElementsByTagName("nav")[0];
hamburger.classList.toggle("active"); hamburger.classList.toggle("active");
navMenu.classList.toggle("active"); navMenu.classList.toggle("active");
@@ -278,6 +290,7 @@
let navLinks = document.getElementsByClassName("navLink"); let navLinks = document.getElementsByClassName("navLink");
for (let i = 0; i < navLinks.length; i++) { for (let i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener("click", function (event) { navLinks[i].addEventListener("click", function (event) {
let navMenu = document.getElementsByTagName("nav")[0];
hamburger.classList.remove("active"); hamburger.classList.remove("active");
navMenu.classList.remove("active"); navMenu.classList.remove("active");
hamburger.setAttribute("aria-expanded", "false"); hamburger.setAttribute("aria-expanded", "false");
@@ -286,8 +299,9 @@
// CLose hamburger when click outside of menu // CLose hamburger when click outside of menu
document.addEventListener("click", function (event) { document.addEventListener("click", function (event) {
let navMenu = document.getElementsByTagName("nav")[0];
const clickOutside = const clickOutside =
hamburger.contains(event.target) || navMenu.contains(event.target); !hamburger.contains(event.target) && !navMenu.contains(event.target);
if (clickOutside && navMenu.classList.contains("active")) { if (clickOutside && navMenu.classList.contains("active")) {
hamburger.classList.remove("active"); hamburger.classList.remove("active");