From 4a1aaacf6113b4fa485c11fe695d65a17038a081 Mon Sep 17 00:00:00 2001 From: sotrali Date: Mon, 13 Oct 2025 16:48:12 -0400 Subject: [PATCH] added before/after indicator to gallert + services page --- css/style.css | 35 +-------------- index.html | 80 +++++++++++++++++++++++++++------ reviews.html | 104 ++++++++++++++++++++++++++++++------------- services.html | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 262 insertions(+), 77 deletions(-) create mode 100644 services.html diff --git a/css/style.css b/css/style.css index 1e0e264..3c68cca 100644 --- a/css/style.css +++ b/css/style.css @@ -154,33 +154,7 @@ footer { top: 6px; } -/** BOOK NOW button */ -#book-button { - height: 7rem; - min-width: 100%; - background-color: var(--black); - color: var(--gold); - - border: 1px solid var(--dark-gold); - border-radius: 5rem; - - padding: 2rem 0; - margin: 0; - - font-size: 2rem; - font-weight: bold; - text-decoration: none; - transition: 0.5s ease; -} -#book-button:hover { - cursor: pointer; - background-color: #000; - box-shadow: 0px 0px 30px var(--gold); -} -#book-button:active { - background-color: var(--gold); -} /** DESKTOP RULES */ @media screen and (min-width: 851px) { @@ -197,10 +171,6 @@ footer { h1 { font-size: 3rem; } - - #book-button { - width: 50%; - } } /* MOBILE RULES */ @@ -244,8 +214,5 @@ footer { font-size: 2rem; } - #book-button { - font-size: 1.75rem; - width: 85%; - } + } diff --git a/index.html b/index.html index d127639..a7e6989 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,36 @@ padding-bottom: 2rem; } - #book-now { + /** BOOK NOW big button */ + #book-button { + height: 7rem; + width: 50%; + min-width: 100%; + + background-color: var(--black); + color: var(--gold); + + border: 1px solid var(--dark-gold); + border-radius: 5rem; + + padding: 2rem 0; + margin: 0; + + font-size: 2rem; + font-weight: bold; + text-decoration: none; + transition: 0.5s ease; + } + #book-button:hover { + cursor: pointer; + background-color: #000; + box-shadow: 0px 0px 30px var(--gold); + } + #book-button:active { + background-color: var(--gold); + } + + #book-link { display: block; width: 50%; margin-top: 5rem; @@ -60,8 +89,12 @@ width: 100%; padding-bottom: 1.5rem; } - - #book-now { + + #book-button { + font-size: 1.75rem; + width: 85%; + } + #book-link { margin-top: 2.5rem; } } @@ -86,12 +119,10 @@ @@ -107,7 +138,7 @@ @@ -117,7 +148,7 @@
- HEADER + Question 1 ▼
@@ -127,9 +158,9 @@
-
+
- HEADER + Question 2 ▼
@@ -137,8 +168,31 @@ this is where we answer the question in the header
-
+ +
+
+ Question 3 + ▼ +
+
+
+ this is where we answer the question in the header +
+
+
+ +
+
+ Question 4 + ▼ +
+
+
+ this is where we answer the question in the header +
+
+
diff --git a/reviews.html b/reviews.html index 05aed79..66557e8 100644 --- a/reviews.html +++ b/reviews.html @@ -57,7 +57,7 @@ } /** BEFORE / AFTER IMAGES */ - .image-pair { + .before-after-pair { position: relative; display: flex; @@ -68,7 +68,7 @@ width: 75%; } - .before-img { + .before-img-container { max-height: 100%; } @@ -90,6 +90,24 @@ 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 */ @@ -114,7 +132,7 @@ } - .image-pair, .before-img, .after-img-container { + .before-after-pair, .before-img, .after-img-container { width: 400px; } } @@ -138,7 +156,7 @@ width: 100%; } - .image-pair, .before-img, .after-img-container { + .before-after-pair, .before-img, .after-img-container { width: 100%; } } @@ -163,12 +181,10 @@ @@ -183,33 +199,61 @@

Gallery

-
- - - +
+ +
before
+ An interior of a car trunk, the floor is covered in dirt and grass. + -
+ +
after
+ The same trunk after it has been restored to like-new condition. + + -
- - - +
+ +
before
+ An interior of a car trunk, the floor is covered in dirt and grass. + -
+ +
after
+ The same trunk after it has been restored to like-new condition. + + -
- - - +
+ +
before
+ An interior of a car trunk, the floor is covered in dirt and grass. + -
+ +
after
+ The same trunk after it has been restored to like-new condition. + + -
- - - +
+ +
before
+ An interior of a car trunk, the floor is covered in dirt and grass. + -
+ +
after
+ The same trunk after it has been restored to like-new condition. + +
diff --git a/services.html b/services.html new file mode 100644 index 0000000..937eea9 --- /dev/null +++ b/services.html @@ -0,0 +1,120 @@ + + + + + + + Maine Luxury Detailing + + + + + + + + + + +
+ +
+ +
+
+

Interior Detailing

+

Clean car with vaccuum, wipes, brushes, and more.

+ + + +
+ +
+

Exterior Detailing

+

Wipe, wash, polish, wax, you name it.

+
+ +
+

Service Packages

+

Combine and save.

+
+ +
+ + + + + +