200 lines
7.2 KiB
HTML
200 lines
7.2 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="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area"
|
|
/>
|
|
<title>Maine Luxury Detailing</title>
|
|
<link href="css/style.css" rel="stylesheet" />
|
|
<link href="css/hamburger.css" rel="stylesheet" />
|
|
<style>
|
|
#reviewContainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.review-card {
|
|
background-color: #fff;
|
|
|
|
padding: 1rem;
|
|
border-radius: 1rem;
|
|
|
|
box-shadow: 0px 0px 25px var(--light-gold);
|
|
}
|
|
|
|
.review-card-head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.reviewLink {
|
|
color: black;
|
|
}
|
|
|
|
.review-card-body {
|
|
max-height: 15rem;
|
|
overflow-y: scroll;
|
|
text-align: left;
|
|
}
|
|
|
|
/** DESKTOP RULES */
|
|
@media screen and (min-width: 851px) {
|
|
#reviewContainer {
|
|
flex-direction: row;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.review-card {
|
|
min-width: 40%;
|
|
max-width: 45%;
|
|
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
/* MOBILE RULES */
|
|
@media screen and (max-width: 850px) {
|
|
#reviewContainer {
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
.review-card {
|
|
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">LMD</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">Services</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>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main-content">
|
|
<section id="reviews">
|
|
<h1 style="margin-bottom: 7rem">Reviews</h1>
|
|
<div id="reviewContainer"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div id="footer-left">
|
|
©Maine Luxury Detailing 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: "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: "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 style="color: black">${review.text}</p>
|
|
</div>
|
|
</div>
|
|
`
|
|
);
|
|
}
|
|
}
|
|
|
|
// upon page load
|
|
window.onload = function () {
|
|
insertReviews(reviewData);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|