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

reformatting service cards

Browse Source
This commit is contained in:
sotrali
2026-01-11 14:43:22 -05:00
parent e64d27a147
commit 0ab8d6b642
1 changed files with 64 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services2.html
+64 -36
View File
@@ -19,8 +19,12 @@
gap: 12rem;
}
h1 {
margin-top: 12rem;
}
/** landings are used to jump slightly above categories */
.landing { top: -5rem; position: relative; }
.landing { top: 3rem; position: relative; }
#categoryLinks {
display: flex;
@@ -63,19 +67,28 @@
.serviceContainer {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-evenly;
flex-wrap: wrap;
margin: 3rem 0;
}
#tableOfContents {
width: 90%;
margin-top: 8rem;
margin-bottom: 25vh;
}
/** Service Card */
/** Services */
.service {
display: flex;
flex-direction: column;
height: 100%;
width: 45%;
}
.card {
padding: 3rem;
border: 2px solid var(--gold);
@@ -83,26 +96,39 @@
transition: 0.5s ease;
color: white;
width: 30%;
width: 100%;
}
.card:hover {
border: 2px solid white;
}
.card-head {
margin-bottom: 2rem;
}
.card-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
text-align: left;
width: 100%;
}
.card-body span {
/** .card-body span {
display: flex;
flex-direction: column;
align-self: stretch;
width: 50%;
}*/
.card-body span {
display: flex;
flex-direction: column;
align-self: stretch;
width: 100%;
}
.card-body span h3 {
text-align: center;
@@ -189,14 +215,13 @@
<div id="categoryLinks">
<a href="#packagesJump" class="jumpLink"><h2>Service Packages</h2></a>
<a href="#ceramicJump" class="jumpLink"><h2>Ceramic Coating</h2></a>
<a href="paintJump" class="jumpLink"><h2>Polish &<br/>Paint Correction</h2></a>
<a href="#paintJump" class="jumpLink"><h2>Polish &<br/>Paint Correction</h2></a>
<a href="#exteriorJump" class="jumpLink"><h2>Exterior Detailing</h2></a>
<a href="#interiorJump" class="jumpLink"><h2>Interior Detailing</h2></a>
</div>
</div>
<div id="categoryContainer">
<span id="packagesJump" class="landing"></span>
<h1>Service Packages</h1>
<div id="packages" class="serviceContainer">
@@ -221,10 +246,8 @@
<h1>Interior Detailing</h1>
<div id="interior" class="serviceContainer">
</div>
</div>
</main>
<footer>
@@ -243,9 +266,10 @@
>
</div>
</footer>
<script src="js/hamburger.js"></script>
<script>
<script src="js/hamburger.js"></script>
<script>
// these categories must match the IDs of the serviceContainer <div>s above
const categories = ["packages", "ceramic", "paint", "exterior", "interior"];
const serviceData = {
@@ -343,7 +367,7 @@
"bullets" : [
"Hand wash & dry",
"Wheel cleaning",
"1 stage paint correction on all paint & glas",
"1 stage paint correction on all paint & glass",
"Free quarterly washes",
"Free annual decontamination and topper"
]
@@ -398,7 +422,7 @@
},
"right" : {
"header" : "Includes",
"paragraph" : "Restore shine and gloss.",
"paragraph" : "",
"bullets" : [
"Exterior wash and decontaminaion",
"2-step polish to eliminate 80-85% of defects",
@@ -467,7 +491,7 @@
"header" : "Includes",
"paragraph" : "",
"bullets" : [
"Vacuum & light carpet shampooing<",
"Vacuum & light carpet shampooing",
"Plastics, leather, and vinyls cleaning",
"Light seat shampooing",
"Interior & exterior window cleaning",
@@ -481,20 +505,22 @@
"title" : "Level Two Interior",
"subtitle" : "Bring back the interior you love & protect it for months.",
"left" : {
"header" : "Description",
"paragraph" : "A thorough restoration of your car's interior.",
"bullets" : []
},
"right" : {
"header" : "Includes",
"paragraph" : "",
"bullets" : [
"Vacuum & carpet shampooing<",
"Plastics, leather, and vinyls scrubbed",
"Leather conditioning for protection and suppleness",
"Upholstery shampooing",
"Crack & crevice cleaning",
"6 month interior protection (Spills, UV, less dust, less cleaning, and plastic rejuvenation)"
]
},
"right" : {
"header" : "and",
"paragraph" : "",
"bullets" : [
"Vacuum & carpet shampooing",
"Plastics, leather, and vinyls scrubbed",
"Leather conditioning for protection and suppleness",
]
},
"url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=bc8YSJd6fl0CprnAY43r&sku=iUA7y7dwM4Kz51pBpQNI"
@@ -502,8 +528,6 @@
]
};
function insertServices(serviceData) {
for (const category of categories) {
let categoryData = serviceData[category];
@@ -518,15 +542,19 @@
target.insertAdjacentHTML(
"beforeend",
`
<div class="card" >
<div class="card-head">
<h2>${service.title}</h2>
<p>${service.subtitle}</p>
</div>
<div class="card-body">
${leftSide ? leftSide : ""}
${rightSide ? rightSide : ""}
<div class="service">
<div class="card">
<div class="card-head">
<h2>${service.title}</h2>
<p>${service.subtitle}</p>
</div>
<div class="card-body">
${leftSide ? leftSide : ""}
${rightSide ? rightSide : ""}
</div>
</div>
<button>book</button>
</div>
`);
}
@@ -536,12 +564,12 @@
function buildCardColumn(data) {
let html = "<span>";
if (data.header) {
html += "<h3>" + data.header + "</h3>";
html += "<h3 style='text-align:left;'>" + data.header + "</h3>";
}
if (data.paragraph) {
html += "<p>" + data.paragraph + "</p>";
}
if (data.bullets) {
if (data.bullets.length > 0) {
html += "<ul>";
for (point of data.bullets) {
html += "<li>" + point + "</li>";
@@ -557,8 +585,8 @@
window.onload = (event) => {
insertServices(serviceData);
}
</script>
</body>
</html>