352 lines
12 KiB
HTML
352 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
name="description"
|
|
content="Luxury Detailing Maine provides mobile professional car cleaning services in the Portland Area"
|
|
/>
|
|
<title>Luxury Detailing Maine</title>
|
|
<link href="css/style.css" rel="stylesheet" />
|
|
<link href="css/hamburger.css" rel="stylesheet" />
|
|
<style>
|
|
/** REVIEWS */
|
|
#reviewContainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5rem;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
/** REVIEW CARD */
|
|
.review-card {
|
|
padding: 1rem;
|
|
border-radius: 1rem;
|
|
|
|
transition: 1s ease;
|
|
box-shadow: 0px 0px 25px var(--light-gold);
|
|
color: white;
|
|
}
|
|
|
|
.review-card:hover {
|
|
box-shadow: 0px 0px 25px var(--gold);
|
|
}
|
|
|
|
.review-card-head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
margin-bottom: 1rem;
|
|
color: var(--gold);
|
|
}
|
|
.review-card-head a {
|
|
color: white;
|
|
}
|
|
.review-card-head a:hover {
|
|
color: var(--gold);
|
|
}
|
|
|
|
.review-card-body {
|
|
max-height: 15rem;
|
|
overflow-y: auto;
|
|
text-align: left;
|
|
color: white;
|
|
}
|
|
|
|
/** GALLERY */
|
|
#galleryPhotos {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/** BEFORE / AFTER IMAGES */
|
|
.before-after-pair {
|
|
position: relative;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
width: 75%;
|
|
}
|
|
|
|
.before-img-container {
|
|
max-height: 100%;
|
|
}
|
|
|
|
.after-img-container {
|
|
position: absolute;
|
|
top: 0;
|
|
|
|
max-height: 100%;
|
|
|
|
opacity: 0%;
|
|
transition: .5s;
|
|
}
|
|
.after-img-container:hover {
|
|
opacity: 100%;
|
|
}
|
|
|
|
.after-img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.img-state-text {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
font-size: .8rem;
|
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
|
padding: .25rem 1rem;
|
|
}
|
|
.before-img-container .img-state-text {
|
|
color: white;
|
|
}
|
|
.after-img-container .img-state-text {
|
|
color: var(--gold);
|
|
}
|
|
|
|
/**
|
|
* DESKTOP RULES
|
|
*/
|
|
@media screen and (min-width: 851px) {
|
|
#reviewContainer {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.review-card {
|
|
min-width: 40%;
|
|
max-width: 45%;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
#galleryPhotos {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
|
|
.before-after-pair, .before-img, .after-img-container {
|
|
width: 400px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* MOBILE RULES
|
|
*/
|
|
@media screen and (max-width: 850px) {
|
|
#reviewContainer {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
#galleryPhotos {
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.review-card {
|
|
width: 100%;
|
|
}
|
|
|
|
.before-after-pair, .before-img, .after-img-container {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</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">LD</a>
|
|
|
|
<button
|
|
id="hamburger"
|
|
aria-label="Toggle mobile navigation menu"
|
|
aria-expanded="false"
|
|
>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
|
|
<nav>
|
|
<a class="navLink" role="navigation" href="services.html">Services</a>
|
|
<a class="navLink" role="navigation" href="ceramic-coating.html">Ceramic Coating</a>
|
|
<a class="navLink" role="navigation" href="reviews.html">Reviews</a>
|
|
<a class="navLink" role="navigation" href="contact.html">About</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main-content">
|
|
<section>
|
|
<h1 style="margin-bottom: 7rem">Reviews</h1>
|
|
<div id="reviewContainer"></div>
|
|
</section>
|
|
|
|
<section id="gallery">
|
|
<h1 style="margin-bottom: 7rem">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>
|
|
|
|
<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>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div id="footer-left">
|
|
©Luxury Detailing Maine 2025<br />
|
|
All rights reserved<br />
|
|
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
|
|
>
|
|
</div>
|
|
</footer>
|
|
<script src="js/hamburger.js"></script>
|
|
<script>
|
|
let reviewData = [
|
|
{
|
|
name: "Adrianna Weber",
|
|
text: "Incredible Transformation! ... 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: "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: "TEST",
|
|
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!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, AdenEasy 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, AdenEasy 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, AdenEasy 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, AdenEasy 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) {
|
|
let target = document.getElementById("reviewContainer");
|
|
console.log(reviewData);
|
|
for (let i = 0; i < reviews.length; i++) {
|
|
let review = reviews[i];
|
|
let linkedName = `<a href="${review.url}" class="reviewLink" target="_blank">${review.name}</a>`;
|
|
|
|
// load reviews
|
|
target.insertAdjacentHTML(
|
|
"beforeend",
|
|
`
|
|
<div class="review-card">
|
|
<div class="review-card-head">
|
|
<span class="review-card-head-left">
|
|
${review.url ? linkedName : review.name}
|
|
</span>
|
|
<span class="review-card-head-left">
|
|
<span>★</span>
|
|
<span>★</span>
|
|
<span>★</span>
|
|
<span>★</span>
|
|
<span>★</span>
|
|
</span>
|
|
</div>
|
|
<div class="review-card-body">
|
|
<p>${review.text}</p>
|
|
</div>
|
|
</div>
|
|
`
|
|
);
|
|
}
|
|
}
|
|
|
|
// upon page load
|
|
window.onload = function () {
|
|
insertReviews(reviewData);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|