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

services style setup

Browse Source
This commit is contained in:
sotrali
2025-10-15 22:57:55 -04:00
parent 75347424f0
commit 93854147c4
5 changed files with 213 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/dropdown.css
+9 -2
View File
@@ -10,7 +10,7 @@
padding: 10px; padding: 10px;
border: 1px solid var(--dark-gold); border: 1px solid var(--gold);
cursor: pointer; cursor: pointer;
transition: 0.5s; transition: 0.5s;
@@ -20,10 +20,15 @@
border: 1px solid white; border: 1px solid white;
} }
.dropdown-header:hover span {
transform: rotate(65deg); /** arrow hover effect */
}
.dropdown-arrow { .dropdown-arrow {
color: var(--gold); color: var(--gold);
transform: rotate(90deg); transform: rotate(90deg);
transition: transform 0.3s ease; transition: transform 0.3s ease;
font-size: 2rem;
} }
.dropdown-arrow.open { .dropdown-arrow.open {
@@ -33,7 +38,8 @@
.dropdown-content { .dropdown-content {
overflow: hidden; overflow: hidden;
max-height: 0; max-height: 0;
border-left: solid 1px var(--dark-gold);
border-right: solid 1px var(--dark-gold);
transition: max-height 0.3s ease; transition: max-height 0.3s ease;
} }
@@ -43,4 +49,5 @@
.dropdown-body { .dropdown-body {
padding: 10px; padding: 10px;
color: white;
} }
css/style.css
+4 -7
View File
@@ -9,8 +9,8 @@
/** COLOR VARIABLES */ /** COLOR VARIABLES */
:root { :root {
--black: #111111; --black: #111111;
--gold: #ffd700; --gold: rgb(223, 200, 65);
--dark-gold: #d1b410; --dark-gold: rgb(158, 141, 44);
--light-gold: rgba(255, 215, 0, 0.5); --light-gold: rgba(255, 215, 0, 0.5);
} }
@@ -93,19 +93,16 @@ a {
h1 { h1 {
font-size: 2.5rem; font-size: 2.5rem;
color: #fff; color: #fff;
text-align: center;
} }
h2 { h2 {
font-size: 2rem; font-size: 2rem;
color: var(--gold); color: #fff;
margin-bottom: 1rem;
border-bottom: 2px solid var(--gold);
} }
h3 { h3 {
font-size: 1.5rem; font-size: 1.5rem;
color: var(--black); color: #fff;
} }
p { p {
index.html
+9 -9
View File
@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta <meta
name="description" name="description"
content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area" content="Luxury Detailing Maine provides mobile professional car cleaning services in the Portland Area"
/> />
<title>Maine Luxury Detailing</title> <title>Luxury Detailing Maine</title>
<link href="css/style.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" />
<link href="css/dropdown.css" rel="stylesheet" /> <link href="css/dropdown.css" rel="stylesheet" />
<link href="css/hamburger.css" rel="stylesheet" /> <link href="css/hamburger.css" rel="stylesheet" />
@@ -106,7 +106,7 @@
<header> <header>
<div class="banner" role="banner"> <div class="banner" role="banner">
<a href="#" class="logo" aria-label="Company Logo">LMD</a> <a href="#" class="logo" aria-label="Company Logo">LD</a>
<button <button
id="hamburger" id="hamburger"
@@ -122,7 +122,7 @@
<a class="navLink" role="navigation" href="services.html">Services</a> <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="ceramic_coating.html">Ceramic Coating</a>
<a class="navLink" role="navigation" href="reviews.html">Reviews</a> <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
<a class="navLink" role="navigation" href="contact.html">Contact</a> <a class="navLink" role="navigation" href="contact.html">About</a>
</nav> </nav>
</div> </div>
</header> </header>
@@ -148,7 +148,7 @@
<div class="dropdown"> <div class="dropdown">
<div class="dropdown-header" onclick="toggleDropdown(this)"> <div class="dropdown-header" onclick="toggleDropdown(this)">
<span>Question 1</span> <h2>Question 1</h2>
<span class="dropdown-arrow">▼</span> <span class="dropdown-arrow">▼</span>
</div> </div>
<div class="dropdown-content"> <div class="dropdown-content">
@@ -160,7 +160,7 @@
<div class="dropdown"> <div class="dropdown">
<div class="dropdown-header" onclick="toggleDropdown(this)"> <div class="dropdown-header" onclick="toggleDropdown(this)">
<span>Question 2</span> <h2>Question 2</h2>
<span class="dropdown-arrow">▼</span> <span class="dropdown-arrow">▼</span>
</div> </div>
<div class="dropdown-content"> <div class="dropdown-content">
@@ -172,7 +172,7 @@
<div class="dropdown"> <div class="dropdown">
<div class="dropdown-header" onclick="toggleDropdown(this)"> <div class="dropdown-header" onclick="toggleDropdown(this)">
<span>Question 3</span> <h2>Question 3</h2>
<span class="dropdown-arrow">▼</span> <span class="dropdown-arrow">▼</span>
</div> </div>
<div class="dropdown-content"> <div class="dropdown-content">
@@ -184,7 +184,7 @@
<div class="dropdown"> <div class="dropdown">
<div class="dropdown-header" onclick="toggleDropdown(this)"> <div class="dropdown-header" onclick="toggleDropdown(this)">
<span>Question 4</span> <h2>Question 4</h2>
<span class="dropdown-arrow">▼</span> <span class="dropdown-arrow">▼</span>
</div> </div>
<div class="dropdown-content"> <div class="dropdown-content">
@@ -198,7 +198,7 @@
<footer> <footer>
<div id="footer-left"> <div id="footer-left">
&copy;Maine Luxury Detailing 2025<br /> &copy;Luxury Detailing Maine 2025<br />
All rights reserved<br /> All rights reserved<br />
Portland, ME Portland, ME
</div> </div>
reviews.html
+5 -5
View File
@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta <meta
name="description" name="description"
content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area" content="Luxury Detailing Maine provides mobile professional car cleaning services in the Portland Area"
/> />
<title>Maine Luxury Detailing</title> <title>Luxury Detailing Maine</title>
<link href="css/style.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" />
<link href="css/hamburger.css" rel="stylesheet" /> <link href="css/hamburger.css" rel="stylesheet" />
<style> <style>
@@ -168,7 +168,7 @@
<header> <header>
<div class="banner" role="banner"> <div class="banner" role="banner">
<a href="index.html" class="logo" aria-label="Company Logo">LMD</a> <a href="index.html" class="logo" aria-label="Company Logo">LD</a>
<button <button
id="hamburger" id="hamburger"
@@ -184,7 +184,7 @@
<a class="navLink" role="navigation" href="services.html">Services</a> <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="ceramic_coating.html">Ceramic Coating</a>
<a class="navLink" role="navigation" href="reviews.html">Reviews</a> <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
<a class="navLink" role="navigation" href="contact.html">Contact</a> <a class="navLink" role="navigation" href="contact.html">About</a>
</nav> </nav>
</div> </div>
</header> </header>
@@ -261,7 +261,7 @@
<footer> <footer>
<div id="footer-left"> <div id="footer-left">
&copy;Maine Luxury Detailing 2025<br /> &copy;Luxury Detailing Maine 2025<br />
All rights reserved<br /> All rights reserved<br />
Portland, ME Portland, ME
</div> </div>
services.html
+186 -17
View File
@@ -5,17 +5,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta <meta
name="description" name="description"
content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area" content="Luxury Detailing Maine provides mobile professional car cleaning services in the Portland Area"
/> />
<title>Maine Luxury Detailing</title> <title>Luxury Detailing Maine</title>
<link href="css/style.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" />
<link href="css/dropdown.css" rel="stylesheet" /> <link href="css/dropdown.css" rel="stylesheet" />
<link href="css/hamburger.css" rel="stylesheet" /> <link href="css/hamburger.css" rel="stylesheet" />
<style> <style>
section {
gap: 2rem;
}
#book-button { #book-button {
background-color: var(--black); background-color: var(--black);
min-width: 100%;
color: var(--gold); color: var(--gold);
border: 1px solid var(--dark-gold); border: 1px solid var(--dark-gold);
@@ -43,6 +47,70 @@
margin-top: 5rem; margin-top: 5rem;
} }
/** Dropdown Menu Style Overrides */
.dropdown {
width: 100%;
border: 1px solid var(--gold);
transition: 1s;
}
.dropdown:hover {
border: 1px solid white;
}
.dropdown-header {
align-items: center;
justify-content: flex-start;
gap: 1rem;
text-align: left;
padding: 1.5rem 4rem 2rem 4rem;
border: none;
transition: 1s;
}
.dropdown-header:hover {
border: none;
}
.dropdown-arrow {
transform: rotate(-90deg);
}
.dropdown-arrow.open {
transform: rotate(0deg);
}
.dropdown-header:hover span {
transform: rotate(-65deg); /** arrow hover effect */
}
.dropdown-header div {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.dropdown-content {
text-align: left;
}
.dropdown-content.open {
max-height: 700px;
}
.dropdown-body {
margin: 1rem 1rem 1.5rem 6rem;
}
/** mobile rules */
/** MOBILE */
@media screen and (max-width: 850px) {
.dropdown-header {
padding: 1.5rem 1rem 2rem 1rem;
}
.dropdown-body {
margin: 1rem 1rem 1.5rem 3rem;
}
}
</style> </style>
</head> </head>
@@ -52,7 +120,7 @@
<header> <header>
<div class="banner" role="banner"> <div class="banner" role="banner">
<a href="index.html" class="logo" aria-label="Company Logo">LMD</a> <a href="index.html" class="logo" aria-label="Company Logo">LD</a>
<button <button
id="hamburger" id="hamburger"
@@ -68,17 +136,108 @@
<a class="navLink" role="navigation" href="services.html">Services</a> <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="ceramic_coating.html">Ceramic Coating</a>
<a class="navLink" role="navigation" href="reviews.html">Reviews</a> <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
<a class="navLink" role="navigation" href="contact.html">Contact</a> <a class="navLink" role="navigation" href="contact.html">About</a>
</nav> </nav>
</div> </div>
</header> </header>
<main id="main-content"> <main id="main-content">
<section id="interior">
<h1>Interior Detailing</h1> <section id="packages">
<p>Clean car with vaccuum, wipes, brushes, and more.</p> <h1>Service Packages</h1>
<a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/iy5yKtAhm0O0w0P05acA">
<button id="book-button">Book Interior Detailing</button> <div class="dropdown">
<div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span>
<div>
<h2>Level One</h2>
<p>Give your car the time, love, and care it deserves.</p>
</div>
</div>
<div class="dropdown-content">
<hr>
<div class="dropdown-body">
<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>
<br /><br />
<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>
<br />
<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>
</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-header" onclick="toggleDropdown(this)">
<span class="dropdown-arrow">▼</span>
<div>
<h2>Level Two</h2>
<p>Tell the world you're proud of your car.</p>
</div>
</div>
<div class="dropdown-content">
<hr>
<div class="dropdown-body">
<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>
<br /><br />
<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><em>Clay service to remove embedded contamination</em></li>
<li><em>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</em></li>
</ul>
<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>
</div>
</div>
</div>
</section>
<section id="packages">
<h1>Ceramic Coating</h1>
<p>Buy Buy Buy!</p>
<a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA">
<button id="book-button">Book Ceramic Coating</button>
</a>
</section>
<section id="packages">
<h1>Polishing & Paint Correction</h1>
<h2>Buy Buy Buy!</h2>
<a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ">
<button id="book-button">Book a Polish</button>
</a> </a>
</section> </section>
@@ -90,11 +249,11 @@
</a> </a>
</section> </section>
<section id="packages"> <section id="interior">
<h1>Service Packages</h1> <h1>Interior Detailing</h1>
<p>Combine and save.</p> <p>Clean car with vaccuum, wipes, brushes, and more.</p>
<a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr"> <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/iy5yKtAhm0O0w0P05acA">
<button id="book-button">Buy a Package</button> <button id="book-button">Book Interior Detailing</button>
</a> </a>
</section> </section>
@@ -102,7 +261,7 @@
<footer> <footer>
<div id="footer-left"> <div id="footer-left">
&copy;Maine Luxury Detailing 2025<br /> &copy;Luxury Detailing Maine 2025<br />
All rights reserved<br /> All rights reserved<br />
Portland, ME Portland, ME
</div> </div>
@@ -117,6 +276,16 @@
</div> </div>
</footer> </footer>
<script src="js/hamburger.js"></script> <script src="js/hamburger.js"></script>
<script src="js/dropdown.js"></script> <script>
function toggleDropdown(headerClicked) {
let body = headerClicked.nextElementSibling;
let arrow = headerClicked.children[0];
headerClicked.parentElement.classList.toggle("open");
body.classList.toggle("open");
arrow.classList.toggle("open");
}
</script>
</body> </body>
</html> </html>