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" />
<style>
hr {
background-color: black;
height: 4px;
border: 2px solid var(--gold);
width: 75%;
margin: 1rem;
}
.info-box {
@@ -23,25 +23,53 @@
width: 80%;
padding: 2rem 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 {
color: black;
color: white;
text-wrap: pretty;
}
.info-flex {
display: flex;
flex-direction: row;
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%;
}
.info-flex:nth-child(1) {
width: 30%;
#allIncludeList {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
max-width: 100%;
}
.info-flex:nth-child(2) {
width: 60%;
li {
text-wrap: nowrap;
list-style-position: inside;
padding: 0rem;
margin: .5rem .5rem;
}
li::marker {
content: "✓ ";
color: var(--gold);
}
/** MOBILE */
@@ -49,6 +77,7 @@
.info-flex {
flex-direction: column;
align-items: center;
width: 100%;
}
.info-flex section {
@@ -86,18 +115,37 @@
<main id="main-content">
<section class="info-box">
<section class="info-box" style="margin-bottom: 2rem;">
<h1><em>All</em> Ceramic Coatings Include</h1>
<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>
<div class="info-flex">
<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 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>
</div>
</main>
index.html
+6 -1
View File
@@ -43,13 +43,17 @@
width: 50%;
min-width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--black);
color: var(--gold);
border: 1px solid var(--dark-gold);
border-radius: 5rem;
padding: 2rem 0;
padding: 2rem 1rem;
margin: 0;
font-size: 2rem;
@@ -69,6 +73,7 @@
#book-link {
display: block;
width: 50%;
text-decoration: none;
}
h2 {
reviews.html
+55 -45
View File
@@ -1,7 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
@@ -10,12 +9,16 @@
<title>Luxury Detailing Maine</title>
<link href="css/style.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>
/** REVIEWS */
#reviewContainer {
display: flex;
flex-wrap: wrap;
gap: 5rem;
gap: 3rem;
align-items: center;
justify-content: center;
@@ -25,15 +28,15 @@
/** REVIEW CARD */
.review-card {
padding: 1rem;
border: 2px solid var(--gold);
border-radius: 1rem;
transition: 1s ease;
box-shadow: 0px 0px 25px var(--light-gold);
transition: 0.5s ease;
color: white;
}
.review-card:hover {
box-shadow: 0px 0px 25px var(--gold);
border: 2px solid white;
}
.review-card-head {
@@ -59,12 +62,40 @@
}
/** GALLERY */
#gallery {
min-width: 100%;
}
#galleryPhotos {
display: flex;
min-width: 100%;
flex-direction: column;
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-pair {
position: relative;
@@ -140,7 +171,6 @@
gap: 2rem;
}
.before-after-pair, .before-img, .after-img-container {
width: 400px;
}
@@ -170,6 +200,9 @@
}
}
</style>
</head>
<body>
@@ -204,52 +237,25 @@
<div id="reviewContainer"></div>
</section>
<section id="gallery">
<h1 style="margin-bottom: 2rem">Gallery</h1>
<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">
<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>
<div class="juxtapose" style="width: 45%;">
<img src="assets/img/before1.jpg" alt="An interior of a car trunk, the floor is covered in dirt and grass." />
<img src="assets/img/after1.jpg" alt="The same trunk after it has been restored to like-new condition." />
</div>
<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>
<div class="juxtapose" style="width: 45%;">
<img src="assets/img/before1.jpg" alt="An interior of a car trunk, the floor is covered in dirt and grass." />
<img src="assets/img/after1.jpg" alt="The same trunk after it has been restored to like-new condition." />
</div>
<!-- KEPT AS REMINDER -->
<!--
<figure class="before-after-pair">
<span class="before-img-container">
<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>
</span>
</figure>
-->
</div>
</section>
@@ -347,5 +354,8 @@
insertReviews(reviewData);
};
</script>
<script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
</body>
</html>
services.html
+83 -38
View File
@@ -21,6 +21,7 @@
}
#book-button {
width: 100%;
background-color: var(--black);
color: var(--gold);
@@ -44,8 +45,7 @@
#book-link {
display: block;
width: 50%;
margin-top: 5rem;
width: 100%;
}
/** Dropdown Menu Style Overrides */
@@ -104,9 +104,26 @@
.dropdown-content {
text-align: left;
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 {
max-height: 2000px;
max-height: 400px;
/** opening speed */
transition: max-height .5s ease;
}
.dropdown-body {
@@ -115,7 +132,7 @@
justify-items: space-around;
align-items: flex-start;
flex-wrap: wrap;
margin: 1rem 1rem 1.5rem 6rem;
margin: 1rem 1rem 0rem 6rem;
user-select: text;
}
@@ -125,9 +142,12 @@
.dropdown-body-half {
flex-basis: 50%;
}
.dropdown-body-full {
flex-basis: 100%;
.dropdown-button {
margin: auto;
margin-bottom: 1.5rem;
width: 80%;
}
/** mobile rules */
/** MOBILE */
@media screen and (max-width: 850px) {
@@ -145,8 +165,28 @@
.dropdown-header {
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 {
margin: 1rem 1rem 1.5rem 3rem;
margin: 1rem 1rem 0rem 3rem;
flex-direction: column;
}
.dropdown-body span:not(:first-child) {
@@ -155,11 +195,6 @@
.dropdown-body p {
padding-right: 0rem;
}
.book-link {
padding: 0;
margin: 0;
align-self: center;
}
}
</style>
@@ -195,7 +230,7 @@
<!-- SERVICE PACKAGE SECTION -->
<section id="packages">
<div class="dropdown">
<div class="dropdown long">
<div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span>
<h1>Service Packages</h1>
@@ -235,15 +270,14 @@
<li>Light door jam cleaning</li>
</ul>
</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/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k"
>
<button id="book-button">Book Level One Package Now</button>
</a>
</span>
</div>
</div>
</div>
@@ -281,31 +315,32 @@
<li><em>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</em></li>
</ul>
</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/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e"
>
<button id="book-button">Book Level Two Package Now</button>
</a>
<span>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CERAMIC COATING SECTION -->
<section id="ceramic">
<div class="dropdown">
<div class="dropdown longest">
<div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span>
<h1>Ceramic Coating</h1>
</div>
<div class="dropdown-content">
question for aden: should clicking this just bring user to "ceramic coating" page?
<div class="dropdown">
<div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span>
@@ -335,12 +370,11 @@
<li>1 Step polish to remove light swirls and enhance gloss</li>
</ul>
</span>
<span class="dropdown-body-half">
</div>
<div class="dropdown-button">
<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>
</a>
</span>
</div>
</div>
</div>
@@ -380,12 +414,11 @@
</li>
</ul>
</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=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596">
<button id="book-button">Book Complete Coating</button>
</a>
</span>
</div>
</div>
</div>
@@ -407,11 +440,11 @@
Only available if the entire car receives a ceramic coating.
</p>
</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">
<button id="book-button">Book Wheel Wash</button>
</a>
</span>
</div>
</div>
</div>
@@ -421,7 +454,7 @@
<!-- POLISHING + PAINT CORRECTION SECTION -->
<section id="polish">
<div class="dropdown">
<div class="dropdown long">
<div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span>
<h1>Polishing & Paint Correction</h1>
@@ -451,12 +484,11 @@
<li>Ceramic coating, sealant, or wax required after</li>
</ul>
</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/W7MYzeflJr6yEAlpgreQ?productServiceId=CvJ0v88LfLS9De7I04qu&sku=EyZfDYm9fPEgr3FRl24h">
<button id="book-button">Book Paint Enhancement</button>
</a>
</span>
</div>
</div>
</div>
@@ -485,12 +517,11 @@
<li>Ceramic coating, sealant, or wax required after</li>
</ul>
</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/W7MYzeflJr6yEAlpgreQ?productServiceId=EDLsm6ynRPi4sKV0ajh1&sku=s1VcPPUMz3Y5n9B99e2F">
<button id="book-button">Book Paint Correction</button>
</a>
</span>
</div>
</div>
</div>
@@ -498,9 +529,11 @@
</div>
</section>
wip below
<!-- EXTERIOR DETAILING SECTION -->
<section id="exterior">
<div class="dropdown">
<div class="dropdown long">
<div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span>
<h1>Exterior Detailing</h1>
@@ -568,7 +601,7 @@
<!-- INTERIOR DETAILING SECTION -->
<section id="interior">
<div class="dropdown">
<div class="dropdown long">
<div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span>
<h1>Interior Detailing</h1>
@@ -653,11 +686,23 @@
let body = headerClicked.nextElementSibling;
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");
body.classList.toggle("open");
arrow.classList.toggle("open");
}
}
</script>
</body>
</html>