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

buuuncha updates

Browse Source
This commit is contained in:
sotrali
2025-11-11 13:49:08 -05:00
parent 8a4b6df0f8
commit 826326f4e2
4 changed files with 235 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ceramic-coating.html
+59 -11
View File
@@ -13,9 +13,9 @@
<link href="css/hamburger.css" rel="stylesheet" /> <link href="css/hamburger.css" rel="stylesheet" />
<style> <style>
hr { hr {
background-color: black; border: 2px solid var(--gold);
height: 4px;
width: 75%; width: 75%;
margin: 1rem;
} }
.info-box { .info-box {
@@ -23,25 +23,53 @@
width: 80%; width: 80%;
padding: 2rem 4rem;; padding: 2rem 4rem;;
border-radius: 4rem; border-radius: 4rem;
height: min-content;
background-color: var(--gold); border: 2px solid var(--gold);
transition: border 1s ease;
}
.info-box:hover {
border: 2px solid white;
} }
.info-box h1, p { .info-box h1, p {
color: black; color: white;
text-wrap: pretty;
} }
.info-flex { .info-flex {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center;
gap: 2rem;
max-width: 80%;
}
.info-flex:nth-child(1) {
max-width: 20%;
width: 20%;
}
.info-flex:nth-child(2) {
max-width: 80%;
width: 80%; width: 80%;
} }
.info-flex:nth-child(1) { #allIncludeList {
width: 30%; display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
max-width: 100%;
} }
.info-flex:nth-child(2) { li {
width: 60%; text-wrap: nowrap;
list-style-position: inside;
padding: 0rem;
margin: .5rem .5rem;
}
li::marker {
content: "✓ ";
color: var(--gold);
} }
/** MOBILE */ /** MOBILE */
@@ -49,6 +77,7 @@
.info-flex { .info-flex {
flex-direction: column; flex-direction: column;
align-items: center;
width: 100%; width: 100%;
} }
.info-flex section { .info-flex section {
@@ -86,18 +115,37 @@
<main id="main-content"> <main id="main-content">
<section class="info-box"> <section class="info-box" style="margin-bottom: 2rem;">
<h1><em>All</em> Ceramic Coatings Include</h1> <h1><em>All</em> Ceramic Coatings Include</h1>
<hr /> <hr />
<p>testing</p> <p>some headline details can go in here, then:</p>
<ul id="allIncludeList">
<li>list example item 1</li>
<li>list example item 2</li>
<li>list example item 3</li>
<li>list example item 4</li>
</ul>
</section> </section>
<div class="info-flex"> <div class="info-flex">
<section class="info-box"> <section class="info-box">
<h1>Choose your <em>Ceramic Coating</em> Package</h1>
<hr />
<ul>
<li>Elite Ceramic Coating</li>
<li>Complete Ceramic Coating</li>
</ul>
<p><i>dev note:</i>maybe left-align list above, change bullet style, then use existing bullets as first list, then make sub-bullets for the distinguishing characteristics of each package with checkmark bullet?</p>
</section> </section>
<section class="info-box"> <section class="info-box">
<h1>Wheel Wash <em>Add-on</em></h1>
<hr />
<ul id="allIncludeList">
<li>wheel wash information 1</li>
<li>wheel wash information 2</li>
<li>wheel wash information 3</li>
</ul>
</section> </section>
</div> </div>
</main> </main>
index.html
+6 -1
View File
@@ -43,13 +43,17 @@
width: 50%; width: 50%;
min-width: 100%; min-width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--black); background-color: var(--black);
color: var(--gold); color: var(--gold);
border: 1px solid var(--dark-gold); border: 1px solid var(--dark-gold);
border-radius: 5rem; border-radius: 5rem;
padding: 2rem 0; padding: 2rem 1rem;
margin: 0; margin: 0;
font-size: 2rem; font-size: 2rem;
@@ -69,6 +73,7 @@
#book-link { #book-link {
display: block; display: block;
width: 50%; width: 50%;
text-decoration: none;
} }
h2 { h2 {
reviews.html
+55 -45
View File
@@ -1,7 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta <meta
name="description" name="description"
@@ -10,12 +9,16 @@
<title>Luxury Detailing Maine</title> <title>Luxury Detailing Maine</title>
<link href="css/style.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" />
<link href="css/hamburger.css" rel="stylesheet" /> <link href="css/hamburger.css" rel="stylesheet" />
<!-- IMAGE SLIDER CSS IMPORT -->
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
<style> <style>
/** REVIEWS */ /** REVIEWS */
#reviewContainer { #reviewContainer {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 5rem; gap: 3rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -25,15 +28,15 @@
/** REVIEW CARD */ /** REVIEW CARD */
.review-card { .review-card {
padding: 1rem; padding: 1rem;
border: 2px solid var(--gold);
border-radius: 1rem; border-radius: 1rem;
transition: 1s ease; transition: 0.5s ease;
box-shadow: 0px 0px 25px var(--light-gold);
color: white; color: white;
} }
.review-card:hover { .review-card:hover {
box-shadow: 0px 0px 25px var(--gold); border: 2px solid white;
} }
.review-card-head { .review-card-head {
@@ -59,12 +62,40 @@
} }
/** GALLERY */ /** GALLERY */
#gallery {
min-width: 100%;
}
#galleryPhotos { #galleryPhotos {
display: flex; display: flex;
min-width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
/** JUXTAPOSE STUFF **/
a.jx-knightlab div.knightlab-logo {
visibility: hidden !important;
display: none !important;
}
a.jx-knightlab span.juxtapose-name {
visibility: hidden !important;
display: none !important;
}
.juxtapose img {
border-radius: 2rem;
}
div.jx-slider {
color: var(--gold) !important;
}
div.jx-arrow.jx-left {
border-color: transparent white transparent transparent;
}
div.jx-arrow.jx-right {
border-color: transparent transparent transparent white;
}
/** BEFORE / AFTER IMAGES */ /** BEFORE / AFTER IMAGES */
.before-after-pair { .before-after-pair {
position: relative; position: relative;
@@ -140,7 +171,6 @@
gap: 2rem; gap: 2rem;
} }
.before-after-pair, .before-img, .after-img-container { .before-after-pair, .before-img, .after-img-container {
width: 400px; width: 400px;
} }
@@ -170,6 +200,9 @@
} }
} }
</style> </style>
</head> </head>
<body> <body>
@@ -204,52 +237,25 @@
<div id="reviewContainer"></div> <div id="reviewContainer"></div>
</section> </section>
<section id="gallery"> <section id="gallery">
<h1 style="margin-bottom: 2rem">Gallery</h1> <h1 style="margin-bottom: 2rem">Gallery</h1>
<div id="galleryPhotos"> <div id="galleryPhotos">
<figure class="before-after-pair">
<span class="before-img-container">
<figcaption class="img-state-text">before</figcaption>
<img class="before-img" src="assets/img/before1.jpg"
alt="An interior of a car trunk, the floor is covered in dirt and grass.">
</img>
</span>
<span class="after-img-container">
<figcaption class="img-state-text">after</figcaption>
<img class="after-img" src="assets/img/after1.jpg"
alt="The same trunk after it has been restored to like-new condition."></img>
</span>
</figure>
<figure class="before-after-pair"> <div class="juxtapose" style="width: 45%;">
<span class="before-img-container"> <img src="assets/img/before1.jpg" alt="An interior of a car trunk, the floor is covered in dirt and grass." />
<figcaption class="img-state-text">before</figcaption> <img src="assets/img/after1.jpg" alt="The same trunk after it has been restored to like-new condition." />
<img class="before-img" src="assets/img/before1.jpg" </div>
alt="An interior of a car trunk, the floor is covered in dirt and grass.">
</img>
</span>
<span class="after-img-container">
<figcaption class="img-state-text">after</figcaption>
<img class="after-img" src="assets/img/after1.jpg"
alt="The same trunk after it has been restored to like-new condition."></img>
</span>
</figure>
<figure class="before-after-pair"> <div class="juxtapose" style="width: 45%;">
<span class="before-img-container"> <img src="assets/img/before1.jpg" alt="An interior of a car trunk, the floor is covered in dirt and grass." />
<figcaption class="img-state-text">before</figcaption> <img src="assets/img/after1.jpg" alt="The same trunk after it has been restored to like-new condition." />
<img class="before-img" src="assets/img/before1.jpg" </div>
alt="An interior of a car trunk, the floor is covered in dirt and grass.">
</img>
</span>
<span class="after-img-container">
<figcaption class="img-state-text">after</figcaption>
<img class="after-img" src="assets/img/after1.jpg"
alt="The same trunk after it has been restored to like-new condition."></img>
</span>
</figure>
<!-- KEPT AS REMINDER -->
<!--
<figure class="before-after-pair"> <figure class="before-after-pair">
<span class="before-img-container"> <span class="before-img-container">
<figcaption class="img-state-text">before</figcaption> <figcaption class="img-state-text">before</figcaption>
@@ -263,6 +269,7 @@
alt="The same trunk after it has been restored to like-new condition."></img> alt="The same trunk after it has been restored to like-new condition."></img>
</span> </span>
</figure> </figure>
-->
</div> </div>
</section> </section>
@@ -347,5 +354,8 @@
insertReviews(reviewData); insertReviews(reviewData);
}; };
</script> </script>
<script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
</body> </body>
</html> </html>
services.html
+83 -38
View File
@@ -21,6 +21,7 @@
} }
#book-button { #book-button {
width: 100%;
background-color: var(--black); background-color: var(--black);
color: var(--gold); color: var(--gold);
@@ -44,8 +45,7 @@
#book-link { #book-link {
display: block; display: block;
width: 50%; width: 100%;
margin-top: 5rem;
} }
/** Dropdown Menu Style Overrides */ /** Dropdown Menu Style Overrides */
@@ -104,9 +104,26 @@
.dropdown-content { .dropdown-content {
text-align: left; text-align: left;
border: none; border: none;
/** closing speed */
transition: max-height .3s ease;
} }
/** service section dropdowns that are v long */
.dropdown-content.open-longest {
max-height: 1100px;
/** opening speed */
transition: max-height 1s ease;
}
/** service section dropdowns */
.dropdown-content.open-long {
max-height: 1100px;
/** opening speed */
transition: max-height 1s ease;
}
/** dropdowns holding specific service info */
.dropdown-content.open { .dropdown-content.open {
max-height: 2000px; max-height: 400px;
/** opening speed */
transition: max-height .5s ease;
} }
.dropdown-body { .dropdown-body {
@@ -115,7 +132,7 @@
justify-items: space-around; justify-items: space-around;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
margin: 1rem 1rem 1.5rem 6rem; margin: 1rem 1rem 0rem 6rem;
user-select: text; user-select: text;
} }
@@ -125,9 +142,12 @@
.dropdown-body-half { .dropdown-body-half {
flex-basis: 50%; flex-basis: 50%;
} }
.dropdown-body-full { .dropdown-button {
flex-basis: 100%; margin: auto;
margin-bottom: 1.5rem;
width: 80%;
} }
/** mobile rules */ /** mobile rules */
/** MOBILE */ /** MOBILE */
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
@@ -145,8 +165,28 @@
.dropdown-header { .dropdown-header {
padding: 1.5rem 1rem 2rem 1rem; padding: 1.5rem 1rem 2rem 1rem;
} }
/** service section dropdowns that are v long */
.dropdown-content.open-longest {
max-height: 1700px;
/** opening speed */
transition: max-height 1s ease;
}
/** service section dropdowns */
.dropdown-content.open-long {
max-height: 1450px;
/** opening speed */
transition: max-height 1s ease;
}
/** dropdowns holding specific service info */
.dropdown-content.open {
max-height: 600px;
/** opening speed */
transition: max-height .5s ease;
}
.dropdown-body { .dropdown-body {
margin: 1rem 1rem 1.5rem 3rem; margin: 1rem 1rem 0rem 3rem;
flex-direction: column; flex-direction: column;
} }
.dropdown-body span:not(:first-child) { .dropdown-body span:not(:first-child) {
@@ -155,11 +195,6 @@
.dropdown-body p { .dropdown-body p {
padding-right: 0rem; padding-right: 0rem;
} }
.book-link {
padding: 0;
margin: 0;
align-self: center;
}
} }
</style> </style>
@@ -195,7 +230,7 @@
<!-- SERVICE PACKAGE SECTION --> <!-- SERVICE PACKAGE SECTION -->
<section id="packages"> <section id="packages">
<div class="dropdown"> <div class="dropdown long">
<div class="dropdown-header" onclick="toggleDropdown(this)"> <div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span> <span class="dropdown-arrow">▼</span>
<h1>Service Packages</h1> <h1>Service Packages</h1>
@@ -235,15 +270,14 @@
<li>Light door jam cleaning</li> <li>Light door jam cleaning</li>
</ul> </ul>
</span> </span>
</div>
<span class="dropdown-body-full"> <div class="dropdown-button">
<a target="_blank" class="book-link" <a target="_blank" class="book-link"
href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k"
> >
<button id="book-button">Book Level One Package Now</button> <button id="book-button">Book Level One Package Now</button>
</a> </a>
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -281,31 +315,32 @@
<li><em>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</em></li> <li><em>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</em></li>
</ul> </ul>
</span> </span>
</div>
<span class="dropdown-body-full"> <div class="dropdown-button">
<a target="_blank" class="book-link" <a target="_blank" class="book-link"
href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e"
> >
<button id="book-button">Book Level Two Package Now</button> <button id="book-button">Book Level Two Package Now</button>
</a> </a>
<span> <div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</section> </section>
<!-- CERAMIC COATING SECTION --> <!-- CERAMIC COATING SECTION -->
<section id="ceramic"> <section id="ceramic">
<div class="dropdown"> <div class="dropdown longest">
<div class="dropdown-header" onclick="toggleDropdown(this)"> <div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span> <span class="dropdown-arrow">▼</span>
<h1>Ceramic Coating</h1> <h1>Ceramic Coating</h1>
</div> </div>
<div class="dropdown-content"> <div class="dropdown-content">
question for aden: should clicking this just bring user to "ceramic coating" page?
<div class="dropdown"> <div class="dropdown">
<div class="dropdown-header" onclick="toggleDropdown(this)"> <div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span> <span class="dropdown-arrow">▼</span>
@@ -335,12 +370,11 @@
<li>1 Step polish to remove light swirls and enhance gloss</li> <li>1 Step polish to remove light swirls and enhance gloss</li>
</ul> </ul>
</span> </span>
</div>
<span class="dropdown-body-half"> <div class="dropdown-button">
<a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596"> <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596">
<button id="book-button">Book Elite Coating</button> <button id="book-button">Book Elite Coating</button>
</a> </a>
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -380,12 +414,11 @@
</li> </li>
</ul> </ul>
</span> </span>
</div>
<span class="dropdown-body-full"> <div class="dropdown-button">
<a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596"> <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596">
<button id="book-button">Book Complete Coating</button> <button id="book-button">Book Complete Coating</button>
</a> </a>
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -407,11 +440,11 @@
Only available if the entire car receives a ceramic coating. Only available if the entire car receives a ceramic coating.
</p> </p>
</span> </span>
<span class="dropdown-body-full"> </div>
<div class="dropdown-button">
<a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=jFgdX1fB0AoMVmIhSSmP&sku=lCUwUjNUHf4NYqqKYRNS"> <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=jFgdX1fB0AoMVmIhSSmP&sku=lCUwUjNUHf4NYqqKYRNS">
<button id="book-button">Book Wheel Wash</button> <button id="book-button">Book Wheel Wash</button>
</a> </a>
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -421,7 +454,7 @@
<!-- POLISHING + PAINT CORRECTION SECTION --> <!-- POLISHING + PAINT CORRECTION SECTION -->
<section id="polish"> <section id="polish">
<div class="dropdown"> <div class="dropdown long">
<div class="dropdown-header" onclick="toggleDropdown(this)"> <div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span> <span class="dropdown-arrow">▼</span>
<h1>Polishing & Paint Correction</h1> <h1>Polishing & Paint Correction</h1>
@@ -451,12 +484,11 @@
<li>Ceramic coating, sealant, or wax required after</li> <li>Ceramic coating, sealant, or wax required after</li>
</ul> </ul>
</span> </span>
</div>
<span class="dropdown-body-full"> <div class="dropdown-button">
<a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=CvJ0v88LfLS9De7I04qu&sku=EyZfDYm9fPEgr3FRl24h"> <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=CvJ0v88LfLS9De7I04qu&sku=EyZfDYm9fPEgr3FRl24h">
<button id="book-button">Book Paint Enhancement</button> <button id="book-button">Book Paint Enhancement</button>
</a> </a>
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -485,12 +517,11 @@
<li>Ceramic coating, sealant, or wax required after</li> <li>Ceramic coating, sealant, or wax required after</li>
</ul> </ul>
</span> </span>
</div>
<span class="dropdown-body-full"> <div class="dropdown-button">
<a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=EDLsm6ynRPi4sKV0ajh1&sku=s1VcPPUMz3Y5n9B99e2F"> <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=EDLsm6ynRPi4sKV0ajh1&sku=s1VcPPUMz3Y5n9B99e2F">
<button id="book-button">Book Paint Correction</button> <button id="book-button">Book Paint Correction</button>
</a> </a>
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -498,9 +529,11 @@
</div> </div>
</section> </section>
wip below
<!-- EXTERIOR DETAILING SECTION --> <!-- EXTERIOR DETAILING SECTION -->
<section id="exterior"> <section id="exterior">
<div class="dropdown"> <div class="dropdown long">
<div class="dropdown-header" onclick="toggleDropdown(this)"> <div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span> <span class="dropdown-arrow">▼</span>
<h1>Exterior Detailing</h1> <h1>Exterior Detailing</h1>
@@ -568,7 +601,7 @@
<!-- INTERIOR DETAILING SECTION --> <!-- INTERIOR DETAILING SECTION -->
<section id="interior"> <section id="interior">
<div class="dropdown"> <div class="dropdown long">
<div class="dropdown-header" onclick="toggleDropdown(this)"> <div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span> <span class="dropdown-arrow">▼</span>
<h1>Interior Detailing</h1> <h1>Interior Detailing</h1>
@@ -653,11 +686,23 @@
let body = headerClicked.nextElementSibling; let body = headerClicked.nextElementSibling;
let arrow = headerClicked.children[0]; let arrow = headerClicked.children[0];
if (headerClicked.parentElement.classList.contains("longest")) {
headerClicked.parentElement.classList.toggle("open-longest");
body.classList.toggle("open-longest");
arrow.classList.toggle("open-longest");
}
else if (headerClicked.parentElement.classList.contains("long")) {
headerClicked.parentElement.classList.toggle("open-long");
body.classList.toggle("open-long");
arrow.classList.toggle("open-long");
}
else {
headerClicked.parentElement.classList.toggle("open"); headerClicked.parentElement.classList.toggle("open");
body.classList.toggle("open"); body.classList.toggle("open");
arrow.classList.toggle("open"); arrow.classList.toggle("open");
} }
}
</script> </script>
</body> </body>
</html> </html>