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

changed font, started service overhaul + standardized widths across

Browse Source 
<main>s
This commit is contained in:
sotrali
2025-12-29 20:28:27 -05:00
parent 76886b8be6
commit b6742fcb03
8 changed files with 249 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/fonts/inter/Inter-Italic.ttf → assets/fonts/Inter-Italic.ttf
View File
assets/fonts/inter/Inter.ttf → assets/fonts/Inter.ttf
View File
assets/fonts/Roboto_Mono.ttf
BIN
View File
Binary file not shown.
ceramic-coating.html
+27 -20
View File
@@ -24,11 +24,11 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
gap: 5rem;
max-width: 80%;
width: 90%;
margin-top: 2.5rem;
margin-top: 4rem;
}
.info-box {
@@ -37,11 +37,15 @@
linear-gradient(to left, var(--gold), white, var(--gold)) border-box;
border: 5px solid transparent;
max-width: 80%;
width: 80%;
display: flex;
justify-content: center;
flex-grow: 1;
min-width: auto;
width: auto;
padding: 2rem 4rem;
border-radius: 4rem;
height: min-content;
min-height: 20rem;
/** border: 2px solid var(--gold); **/
transition: 1s ease;
@@ -57,10 +61,9 @@
}
#packages {
max-width: 60%;
flex-shrink: 1;
}
#wheel-wash {
max-width: 35%;
}
@@ -105,7 +108,7 @@
.info-flex {
flex-direction: column;
align-items: center;
width: 100%;
min-width: 90%;
}
.info-flex section {
width: 100%;
@@ -158,17 +161,21 @@
<section id="packages" class="info-box">
<h1>Choose Your Coating <em>Package</em></h1>
<hr />
<div>
<h2>Elite</h2>
<ul class="checkMarkList">
<li>elite detail one</li>
<li>elite detail two</li>
</ul>
<h2>Complete</h2>
<ul class="checkMarkList">
<li>complete detail one</li>
<li>complete detail two</li>
</ul>
<div style="width: 100%; display:flex; justify-content: space-around;">
<div>
<h2>Elite</h2>
<ul>
<li>elite detail one</li>
<li>elite detail two</li>
</ul>
</div>
<div>
<h2>Complete</h2>
<ul>
<li>complete detail one</li>
<li>complete detail two</li>
</ul>
</div>
</div>
</section>
css/style.css
+13 -10
View File
@@ -3,12 +3,18 @@
padding: 0;
box-sizing: border-box;
background-color: var(--black);
letter-spacing: 0.01rem;
}
.jx-handle, .jx-arrow {
background-color: rgba(0,0,0,0);
}
/** COLOR VARIABLES */
:root {
--black1: #111111;
--oldBlack: #111111;
--black: #191919;
--gold: rgb(223, 200, 65);
--dark-gold: rgb(158, 141, 44);
@@ -17,7 +23,6 @@
/** HEADER + NAV STYLING */
header {
background-color: var(--black);
position: sticky;
top: 0;
z-index: 999;
@@ -60,31 +65,31 @@ header {
/** BODY TAGS */
@font-face {
font-family: gontserrat;
src: url('../assets/fonts/gontserrat/Gontserrat-Bold.ttf');
font-family: inter;
src: url('../assets/fonts/Inter.ttf');
}
body {
font-family: gontserrat, sans-serif;
font-family: inter, sans-serif;
line-height: 1.6;
color: #666;
background-color: var(--black);
}
main {
display: flex;
gap: 5rem;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
width: 100%;
min-width: 100%;
padding: 0;
margin: 0;
}
section {
max-width: 75%;
min-width: 90%;
display: flex;
flex-direction: column;
align-items: center;
@@ -126,7 +131,6 @@ footer {
max-width: 90%;
background-color: var(--black);
color: var(--gold);
text-align: center;
@@ -199,7 +203,6 @@ footer {
font-size: 2rem;
text-align: center;
background-color: var(--black);
transition: top 0.5s ease;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
z-index: -1;
index.html
+5 -4
View File
@@ -16,7 +16,7 @@
main {
min-height: 530px; /** to make sure footer doesn't overlap hero */
gap: 2rem;
margin-top: 0;
}
#hero-image {
@@ -59,11 +59,12 @@
font-size: 2rem;
font-weight: bold;
text-decoration: none;
transition: 0.5s ease;
transition: 0.3s ease;
}
#book-button:hover {
cursor: pointer;
box-shadow: 0px 0px 30px var(--gold);
box-shadow: 0px 0px 10px var(--gold);
font-size: 2.25rem;
}
#book-button:active {
background-color: var(--gold);
@@ -136,7 +137,7 @@
<div id="hero-image"></div>
<section id="intro">
<h1>Restore & Protect<br />Your Vehicle</h1>
<h1>Restore & Protect Your Vehicle</h1>
<p>with the best mobile car detailing service in the Portland area</p>
</section>
reviews.html
+4 -2
View File
@@ -14,6 +14,10 @@
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
<style>
main {
margin-top: 5rem;
}
/** REVIEWS */
#reviewContainer {
display: flex;
@@ -201,8 +205,6 @@
}
</style>
</head>
<body>
services2.html
+200
View File
@@ -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">
&copy;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>