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>
<link href="style.css" rel="stylesheet" />
<link href="dropdown.css" rel="stylesheet" />
<link href="hamburger.css" rel="stylesheet" />
<style>
/** PAGE SPECIFIC STYLING */
@@ -29,7 +31,7 @@
#intro {
text-align: center;
background-color: rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 0, 0.8);
width: 40%;
}
@@ -57,7 +59,7 @@
<header>
<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
id="hamburger"
@@ -127,6 +129,6 @@
</div>
</footer>
<script src="hamburger.js"></script>
<script src="dropdown-box.js"></script>
<script src="dropdown.js"></script>
</body>
</html>
reviews.html
+40 -36
View File
@@ -8,7 +8,8 @@
content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area"
/>
<title>Maine Luxury Detailing</title>
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" />
<link href="hamburger.css" rel="stylesheet" />
<style>
#reviewContainer {
display: flex;
@@ -17,7 +18,7 @@
align-items: center;
justify-content: center;
}
.review-card {
background-color: #fff;
@@ -26,7 +27,7 @@
box-shadow: 0px 0px 25px var(--light-gold);
}
.review-card-head {
display: flex;
flex-direction: row;
@@ -34,14 +35,13 @@
margin-bottom: 1rem;
}
.reviewLink {
color: black;
}
/** DESKTOP RULES */
@media screen and (min-width: 851px) {
@media screen and (min-width: 851px) {
#reviewContainer {
flex-direction: row;
gap: 2rem;
@@ -54,7 +54,6 @@
max-height: 15rem;
overflow: hidden;
}
.review-card-body {
max-height: 15rem;
@@ -63,7 +62,7 @@
}
/* MOBILE RULES */
@media screen and (max-width: 850px) {
@media screen and (max-width: 850px) {
#reviewContainer {
flex-direction: column;
gap: 2rem;
@@ -77,13 +76,13 @@
}
</style>
</head>
<body>
<a href="#main-content" class="skipLink">Skip to main content</a>
<header>
<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
id="hamburger"
@@ -97,7 +96,9 @@
<nav>
<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="#Contact">Contact</a>
</nav>
@@ -106,12 +107,8 @@
<main id="main-content">
<section id="reviews">
<h1 style="margin-bottom: 7rem;">Reviews</h1>
<div id="reviewContainer">
</div>
<h1 style="margin-bottom: 7rem">Reviews</h1>
<div id="reviewContainer"></div>
</section>
</main>
@@ -122,33 +119,37 @@
Portland, ME
</div>
<div id="footer-right">
207-807-6770<br />
example@email.com<br />
<a href="https://www.instagram.com/luxurydetailingmaine/" target="_blank">@luxurydetailingmaine</a>
207-807-6770<br />
example@email.com<br />
<a
href="https://www.instagram.com/luxurydetailingmaine/"
target="_blank"
>@luxurydetailingmaine</a
>
</div>
</footer>
<script src="hamburger.js"></script>
<script>
let reviewData = [
{
"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!",
"url" : "https://share.google/HA8xBsNKPDGCdqYSh"
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!",
url: "https://share.google/HA8xBsNKPDGCdqYSh",
},
{
"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+!",
"url" : "https://share.google/uMS4Ma8xT7ARAqf83"
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+!",
url: "https://share.google/uMS4Ma8xT7ARAqf83",
},
{
"name" : "Bobo",
"text" : "I don't even have a car.",
name: "Bobo",
text: "I don't even have a car.",
},
{
"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!",
"url" : "https://share.google/zUOkEQ8Yv6L2SkBsl"
}
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!",
url: "https://share.google/zUOkEQ8Yv6L2SkBsl",
},
];
function insertReviews(reviews) {
@@ -158,8 +159,10 @@
let review = reviews[i];
let linkedName = `<a href="${review.url}" class="reviewLink" target="_blank">${review.name}</a>`;
// load reviews
target.insertAdjacentHTML("beforeend", `
// load reviews
target.insertAdjacentHTML(
"beforeend",
`
<div class="review-card">
<div class="review-card-head">
<span class="review-card-head-left">
@@ -177,14 +180,15 @@
<p style="color: black">${review.text}</p>
</div>
</div>
`);
`
);
}
}
// upon page load
window.onload = function() {
window.onload = function () {
insertReviews(reviewData);
};
</script>
</body>
</html>
</html>
style.css
+14 -89
View File
@@ -2,11 +2,13 @@
margin: 0;
padding: 0;
box-sizing: border-box;
letter-spacing: 0.01rem;
}
/** COLOR VARIABLES */
:root {
--black: #000;
--black: #111111;
--gold: #ffd700;
--dark-gold: #d1b410;
--light-gold: rgba(255, 215, 0, 0.5);
@@ -23,7 +25,7 @@ header {
.banner {
display: flex;
justify-content: space-between;
max-width: 60%;
max-width: 90%;
align-items: center;
height: 4.5rem;
@@ -39,24 +41,6 @@ header {
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;
@@ -117,7 +101,7 @@ h2 {
h3 {
font-size: 1.5rem;
color: #000;
color: var(--black);
}
p {
@@ -132,9 +116,9 @@ footer {
margin: 5rem auto;
padding: 2rem 0;
max-width: 60%;
max-width: 90%;
background-color: #000;
background-color: var(--black);
color: var(--gold);
text-align: center;
@@ -155,7 +139,7 @@ footer {
top: -50px;
left: 6px;
background: #fff;
color: #000;
color: var(--black);
padding: 8px;
text-decoration: none;
font-weight: bold;
@@ -174,23 +158,24 @@ footer {
background-color: var(--black);
color: var(--gold);
border: none;
border: 1px solid var(--dark-gold);
border-radius: 5rem;
box-shadow: 0px 0px 50px var(--gold);
padding: 2rem 0;
margin: 0;
font-size: 2rem;
font-weight: bold;
text-decoration: none;
transition: 0.5s ease;
}
#book-button:hover {
cursor: pointer;
background-color: var(--dark-gold);
box-shadow: 0px 0px 30px var(--gold);
}
#book-button:active {
background-color: var(--dark-gold);
background-color: var(--gold);
}
/** DESKTOP RULES */
@@ -221,10 +206,6 @@ footer {
padding: 0 1rem;
}
#hamburger {
display: flex;
}
nav {
display: flex;
flex-direction: column;
@@ -239,7 +220,7 @@ footer {
font-size: 1rem;
text-align: center;
background-color: #000;
background-color: var(--black);
transition: top 0.5s ease;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
z-index: -1;
@@ -249,21 +230,6 @@ footer {
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: 0.9rem;
@@ -279,44 +245,3 @@ footer {
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;
}