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

split hamburger/dropdown css out- nicer looking index

Browse Source
This commit is contained in:
sotrali
2025-09-23 18:44:54 -04:00
parent da32526da6
commit 5d07776051
7 changed files with 138 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aden-mobile.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

dropdown.css
+40
View File
@@ -0,0 +1,40 @@
/** DROP DOWN MENU CSS */
.dropdown {
width: 300px;
}
.dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border: 1px solid var(--gold);
cursor: pointer;
}
.dropdown-arrow {
transition: transform 0.3s ease;
}
.dropdown-arrow.open {
transform: rotate(180deg);
}
.dropdown-content {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease;
border-left: 1px solid var(--gold);
border-right: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
}
.dropdown-content.open {
max-height: 300px;
}
.dropdown-body {
padding: 10px;
}
dropdown-box.js → dropdown.js
View File
hamburger.css
+39
View File
@@ -0,0 +1,39 @@
#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;
}
/* MOBILE RULES */
@media screen and (max-width: 850px) {
/** hamburger animation */
#hamburger {
display: flex;
}
#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;
}
}
index.html
+5 -3
View File
@@ -9,6 +9,8 @@
/> />
<title>Maine Luxury Detailing</title> <title>Maine Luxury Detailing</title>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<link href="dropdown.css" rel="stylesheet" />
<link href="hamburger.css" rel="stylesheet" />
<style> <style>
/** PAGE SPECIFIC STYLING */ /** PAGE SPECIFIC STYLING */
@@ -29,7 +31,7 @@
#intro { #intro {
text-align: center; text-align: center;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.8);
width: 40%; width: 40%;
} }
@@ -57,7 +59,7 @@
<header> <header>
<div class="banner" role="banner"> <div class="banner" role="banner">
<a href="#" class="logo" aria-label="Company Logo">MLD</a> <a href="#" class="logo" aria-label="Company Logo">LMD</a>
<button <button
id="hamburger" id="hamburger"
@@ -127,6 +129,6 @@
</div> </div>
</footer> </footer>
<script src="hamburger.js"></script> <script src="hamburger.js"></script>
<script src="dropdown-box.js"></script> <script src="dropdown.js"></script>
</body> </body>
</html> </html>
reviews.html
+33 -29
View File
@@ -8,7 +8,8 @@
content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area" content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area"
/> />
<title>Maine Luxury Detailing</title> <title>Maine Luxury Detailing</title>
<link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet" />
<link href="hamburger.css" rel="stylesheet" />
<style> <style>
#reviewContainer { #reviewContainer {
display: flex; display: flex;
@@ -35,7 +36,6 @@
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.reviewLink { .reviewLink {
color: black; color: black;
} }
@@ -55,7 +55,6 @@
overflow: hidden; overflow: hidden;
} }
.review-card-body { .review-card-body {
max-height: 15rem; max-height: 15rem;
overflow-y: scroll; overflow-y: scroll;
@@ -83,7 +82,7 @@
<header> <header>
<div class="banner" role="banner"> <div class="banner" role="banner">
<a href="index.html" class="logo" aria-label="Company Logo">MLD</a> <a href="index.html" class="logo" aria-label="Company Logo">LMD</a>
<button <button
id="hamburger" id="hamburger"
@@ -97,7 +96,9 @@
<nav> <nav>
<a class="navLink" role="navigation" href="#Services">Services</a> <a class="navLink" role="navigation" href="#Services">Services</a>
<a class="navLink" role="navigation" href="#Ceramic Coating">Ceramic Coating</a> <a class="navLink" role="navigation" href="#Ceramic Coating"
>Ceramic Coating</a
>
<a class="navLink" role="navigation" href="#Reviews">Reviews</a> <a class="navLink" role="navigation" href="#Reviews">Reviews</a>
<a class="navLink" role="navigation" href="#Contact">Contact</a> <a class="navLink" role="navigation" href="#Contact">Contact</a>
</nav> </nav>
@@ -106,12 +107,8 @@
<main id="main-content"> <main id="main-content">
<section id="reviews"> <section id="reviews">
<h1 style="margin-bottom: 7rem;">Reviews</h1> <h1 style="margin-bottom: 7rem">Reviews</h1>
<div id="reviewContainer"> <div id="reviewContainer"></div>
</div>
</section> </section>
</main> </main>
@@ -122,33 +119,37 @@
Portland, ME Portland, ME
</div> </div>
<div id="footer-right"> <div id="footer-right">
207-807-6770<br /> 207-807-6770<br />
example@email.com<br /> example@email.com<br />
<a href="https://www.instagram.com/luxurydetailingmaine/" target="_blank">@luxurydetailingmaine</a> <a
href="https://www.instagram.com/luxurydetailingmaine/"
target="_blank"
>@luxurydetailingmaine</a
>
</div> </div>
</footer> </footer>
<script src="hamburger.js"></script> <script src="hamburger.js"></script>
<script> <script>
let reviewData = [ let reviewData = [
{ {
"name" : "Adrianna Weber", name: "Adrianna Weber",
"text" : "Incredible Transformation! Luxury Detailing's Platinum package delivered incredible results, making my partner’s 15-year-old car look and feel brand new! The interior deep clean and exterior wash, clay, and seal were executed with exceptional attention to detail. The clay coating made a noticeable difference, leaving the car's surface remarkably smooth and clean. I was particularly impressed with how Aden restored the trunk to a like-new condition, cleaning every crevice. Aden was professional, informative, and communicative throughout the process. While a luxury service, the value is justified by the comprehensive package and outstanding results. Luxury Detailing exceeded expectations, revitalizing both of our vehicles and providing a truly impressive level of service. Highly recommended!", text: "Incredible Transformation! Luxury Detailing's Platinum package delivered incredible results, making my partner’s 15-year-old car look and feel brand new! The interior deep clean and exterior wash, clay, and seal were executed with exceptional attention to detail. The clay coating made a noticeable difference, leaving the car's surface remarkably smooth and clean. I was particularly impressed with how Aden restored the trunk to a like-new condition, cleaning every crevice. Aden was professional, informative, and communicative throughout the process. While a luxury service, the value is justified by the comprehensive package and outstanding results. Luxury Detailing exceeded expectations, revitalizing both of our vehicles and providing a truly impressive level of service. Highly recommended!",
"url" : "https://share.google/HA8xBsNKPDGCdqYSh" url: "https://share.google/HA8xBsNKPDGCdqYSh",
}, },
{ {
"name" : "Tara Dossiema", name: "Tara Dossiema",
"text" : "Job well done, had the vehicle feeling like it just left the lot. You can tell Aden takes great pride and is meticulous in his work. Great communication and the attention to detail to all aspects, deserving of 5 stars+!", text: "Job well done, had the vehicle feeling like it just left the lot. You can tell Aden takes great pride and is meticulous in his work. Great communication and the attention to detail to all aspects, deserving of 5 stars+!",
"url" : "https://share.google/uMS4Ma8xT7ARAqf83" url: "https://share.google/uMS4Ma8xT7ARAqf83",
}, },
{ {
"name" : "Bobo", name: "Bobo",
"text" : "I don't even have a car.", text: "I don't even have a car.",
}, },
{ {
"name" : "Sasha Mackey", name: "Sasha Mackey",
"text" : "Easy 5 stars! Aden was super communicative, very friendly, and reasonably priced. He comes to you, which is super convenient! I got a car detailed as a birthday gift and it was so fun to present. No complaints! I would happily recommend this service to anyone. Thanks, Aden!", text: "Easy 5 stars! Aden was super communicative, very friendly, and reasonably priced. He comes to you, which is super convenient! I got a car detailed as a birthday gift and it was so fun to present. No complaints! I would happily recommend this service to anyone. Thanks, Aden!",
"url" : "https://share.google/zUOkEQ8Yv6L2SkBsl" url: "https://share.google/zUOkEQ8Yv6L2SkBsl",
} },
]; ];
function insertReviews(reviews) { function insertReviews(reviews) {
@@ -159,7 +160,9 @@
let linkedName = `<a href="${review.url}" class="reviewLink" target="_blank">${review.name}</a>`; let linkedName = `<a href="${review.url}" class="reviewLink" target="_blank">${review.name}</a>`;
// load reviews // load reviews
target.insertAdjacentHTML("beforeend", ` target.insertAdjacentHTML(
"beforeend",
`
<div class="review-card"> <div class="review-card">
<div class="review-card-head"> <div class="review-card-head">
<span class="review-card-head-left"> <span class="review-card-head-left">
@@ -177,12 +180,13 @@
<p style="color: black">${review.text}</p> <p style="color: black">${review.text}</p>
</div> </div>
</div> </div>
`); `
);
} }
} }
// upon page load // upon page load
window.onload = function() { window.onload = function () {
insertReviews(reviewData); insertReviews(reviewData);
}; };
</script> </script>
style.css
+14 -89
View File
@@ -2,11 +2,13 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
letter-spacing: 0.01rem;
} }
/** COLOR VARIABLES */ /** COLOR VARIABLES */
:root { :root {
--black: #000; --black: #111111;
--gold: #ffd700; --gold: #ffd700;
--dark-gold: #d1b410; --dark-gold: #d1b410;
--light-gold: rgba(255, 215, 0, 0.5); --light-gold: rgba(255, 215, 0, 0.5);
@@ -23,7 +25,7 @@ header {
.banner { .banner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
max-width: 60%; max-width: 90%;
align-items: center; align-items: center;
height: 4.5rem; height: 4.5rem;
@@ -39,24 +41,6 @@ header {
text-decoration: none; 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 { .navLink {
color: var(--gold); color: var(--gold);
text-decoration: none; text-decoration: none;
@@ -117,7 +101,7 @@ h2 {
h3 { h3 {
font-size: 1.5rem; font-size: 1.5rem;
color: #000; color: var(--black);
} }
p { p {
@@ -132,9 +116,9 @@ footer {
margin: 5rem auto; margin: 5rem auto;
padding: 2rem 0; padding: 2rem 0;
max-width: 60%; max-width: 90%;
background-color: #000; background-color: var(--black);
color: var(--gold); color: var(--gold);
text-align: center; text-align: center;
@@ -155,7 +139,7 @@ footer {
top: -50px; top: -50px;
left: 6px; left: 6px;
background: #fff; background: #fff;
color: #000; color: var(--black);
padding: 8px; padding: 8px;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
@@ -174,23 +158,24 @@ footer {
background-color: var(--black); background-color: var(--black);
color: var(--gold); color: var(--gold);
border: none; border: 1px solid var(--dark-gold);
border-radius: 5rem; border-radius: 5rem;
box-shadow: 0px 0px 50px var(--gold);
padding: 2rem 0; padding: 2rem 0;
margin: 0; margin: 0;
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
transition: 0.5s ease;
} }
#book-button:hover { #book-button:hover {
cursor: pointer; cursor: pointer;
background-color: var(--dark-gold);
box-shadow: 0px 0px 30px var(--gold);
} }
#book-button:active { #book-button:active {
background-color: var(--dark-gold); background-color: var(--gold);
} }
/** DESKTOP RULES */ /** DESKTOP RULES */
@@ -221,10 +206,6 @@ footer {
padding: 0 1rem; padding: 0 1rem;
} }
#hamburger {
display: flex;
}
nav { nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -239,7 +220,7 @@ footer {
font-size: 1rem; font-size: 1rem;
text-align: center; text-align: center;
background-color: #000; background-color: var(--black);
transition: top 0.5s ease; transition: top 0.5s ease;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
z-index: -1; z-index: -1;
@@ -249,21 +230,6 @@ footer {
top: 1.5rem; 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 */
footer { footer {
font-size: 0.9rem; font-size: 0.9rem;
@@ -279,44 +245,3 @@ footer {
width: 85%; width: 85%;
} }
} }
/** DROP DOWN MENUS */
.dropdown {
width: 300px;
}
.dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border: 1px solid var(--gold);
cursor: pointer;
}
.dropdown-arrow {
transition: transform 0.3s ease;
}
.dropdown-arrow.open {
transform: rotate(180deg);
}
.dropdown-content {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease;
border-left: 1px solid var(--gold);
border-right: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
}
.dropdown-content.open {
max-height: 300px;
}
.dropdown-body {
padding: 10px;
}