changed font, started service overhaul + standardized widths across
<main>s
This commit is contained in:
+200
@@ -0,0 +1,200 @@
|
||||
<!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/dropdown.css" rel="stylesheet" />
|
||||
<link href="css/hamburger.css" rel="stylesheet" />
|
||||
|
||||
<style>
|
||||
|
||||
main {
|
||||
max-width: 90%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
#tableOfContents {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#serviceListings {
|
||||
align-self: flex-end;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.book-button {
|
||||
background-color: var(--black);
|
||||
color: var(--gold);
|
||||
width: 50%;
|
||||
height: 4rem;
|
||||
|
||||
border: 1px solid white;
|
||||
border-radius: 5rem;
|
||||
|
||||
padding: .5rem 1rem;
|
||||
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
.book-button:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 15px var(--gold);
|
||||
}
|
||||
.book-button:active {
|
||||
background-color: var(--gold);
|
||||
}
|
||||
|
||||
.book-link {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/** mobile rules */
|
||||
/** MOBILE */
|
||||
@media screen and (max-width: 850px) {
|
||||
section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
</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">LUXURY DETAILING</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="ceramic-coating.html">Ceramic Coating</a>
|
||||
<a class="navLink" role="navigation" href="services.html">Services</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">
|
||||
|
||||
<div>
|
||||
<h1>Service Categories</h1>
|
||||
<div id="tableOfContents">
|
||||
<a href="#packages">Service Packages</a>
|
||||
<a href="#ceramic">Ceramic Coating</a>
|
||||
<a href="#paint">Polish & Paint Correction</a>
|
||||
<a href="#exterior">Exterior Detailing</a>
|
||||
<a href="#interior">Interior Detailing</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="serviceListings">
|
||||
<div class="card" >
|
||||
<h2>hheadheadheadheadheadheadheadheadheadheadead</h2>
|
||||
<p>bodyyy</p>
|
||||
</div>
|
||||
<div class="dropdown-body">
|
||||
<span class="dropdown-body-half">
|
||||
<h3>Interior</h3>
|
||||
<ul>
|
||||
<li>Vacuum & light carpet shampooing</li>
|
||||
<li>Plastics, leather, and vinyls cleaning</li>
|
||||
<li>Light seat shampooing</li>
|
||||
<li>Interior & exterior window cleaning</li>
|
||||
<li>Crack & crevice cleaning</li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
<span class="dropdown-body-half">
|
||||
<h3>Exterior</h3>
|
||||
<ul>
|
||||
<li>Hand wash & dry</li>
|
||||
<li>Bug gut removal</li>
|
||||
<li>Tire, wheel, and wheel well cleaning + tire shine</li>
|
||||
<li>Window cleaning</li>
|
||||
<li>Light door jam cleaning</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</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>
|
||||
function toggleDropdown(headerClicked) {
|
||||
let dropdown = headerClicked.parentElement;
|
||||
let body = headerClicked.nextElementSibling;
|
||||
let arrow = headerClicked.children[0];
|
||||
|
||||
if (dropdown.classList.contains("longest")) {
|
||||
dropdown.classList.toggle("open-longest");
|
||||
body.classList.toggle("open-longest");
|
||||
arrow.classList.toggle("open");
|
||||
}
|
||||
else if (dropdown.classList.contains("long")) {
|
||||
dropdown.classList.toggle("open-long");
|
||||
body.classList.toggle("open-long");
|
||||
arrow.classList.toggle("open");
|
||||
}
|
||||
else {
|
||||
dropdown.classList.toggle("open");
|
||||
body.classList.toggle("open");
|
||||
arrow.classList.toggle("open");
|
||||
}
|
||||
|
||||
let isOpen = dropdown.className.includes("open");
|
||||
dropdown.setAttribute('aria-expanded', isOpen);
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user