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

hero image + faq added

Browse Source
This commit is contained in:
sotrali
2025-09-21 18:55:46 -04:00
parent 30b5e853e1
commit da32526da6
6 changed files with 380 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.DS_Store
Vendored
BIN
View File
Binary file not shown.
aden-desktop.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

aden-mobile.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

dropdown-box.js
+7
View File
@@ -0,0 +1,7 @@
function toggleDropdown(headerClicked) {
let body = headerClicked.nextElementSibling;
let arrow = headerClicked.children[1];
body.classList.toggle("open");
arrow.classList.toggle("open");
}
index.html
+74 -5
View File
@@ -8,7 +8,48 @@
content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area" content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area"
/> />
<title>Maine Luxury Detailing</title> <title>Maine Luxury Detailing</title>
<link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet" />
<style>
/** PAGE SPECIFIC STYLING */
main {
min-height: 530px; /** to make sure footer doesn't overlap hero */
}
#hero-image {
height: 600px;
width: 100%;
background: url("aden-desktop.jpg") 70% 10% / 100% no-repeat;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
#intro {
text-align: center;
background-color: rgba(0, 0, 0, 0.7);
width: 40%;
}
#book-now {
display: block;
width: 50%;
margin-top: 5rem;
}
/** MOBILE */
@media screen and (max-width: 850px) {
#hero-image {
background: url("aden-mobile.jpg") center 10% / 100% no-repeat;
}
#intro {
width: 100%;
}
}
</style>
</head> </head>
<body> <body>
@@ -30,7 +71,9 @@
<nav> <nav>
<a class="navLink" role="navigation" href="#Services">Services</a> <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="#Ceramic Coating"
>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">Contact</a> <a class="navLink" role="navigation" href="#Contact">Contact</a>
</nav> </nav>
@@ -38,11 +81,32 @@
</header> </header>
<main id="main-content"> <main id="main-content">
<div id="hero-image"></div>
<section id="intro"> <section id="intro">
<h1>Portland's Mobile<br />Luxury Detailing Service</h1> <h1>Restore & Protect<br />Your Vehicle</h1>
<a href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5" target="_blank"> <p>with the best mobile car detailing service in the Portland area</p>
</section>
<a
href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5"
target="_blank"
id="book-now"
>
<button id="book-button">BOOK NOW</button> <button id="book-button">BOOK NOW</button>
</a> </a>
<section id="FAQ">
<h1>FAQ</h1>
<div class="dropdown">
<div class="dropdown-header" onclick="toggleDropdown(this)">
<span>HEADER</span>
<span class="dropdown-arrow">▼</span>
</div>
<div class="dropdown-content">
<div class="dropdown-body">BODY TEXT BIIIITCH!!!! 😝</div>
</div>
</div>
</section> </section>
</main> </main>
@@ -55,9 +119,14 @@
<div id="footer-right"> <div id="footer-right">
207-807-6770<br /> 207-807-6770<br />
example@email.com<br /> example@email.com<br />
<a href="https://www.instagram.com/luxurydetailingmaine/" target="_blank">@luxurydetailingmaine</a> <a
href="https://www.instagram.com/luxurydetailingmaine/"
target="_blank"
>@luxurydetailingmaine</a
>
</div> </div>
</footer> </footer>
<script src="hamburger.js"></script> <script src="hamburger.js"></script>
<script src="dropdown-box.js"></script>
</body> </body>
</html> </html>
style.css
+142 -96
View File
@@ -1,157 +1,135 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
/** COLOR VARIABLES */ /** COLOR VARIABLES */
:root { :root {
--black: #000; --black: #000;
--gold: #ffd700; --gold: #ffd700;
--dark-gold: #d1b410; --dark-gold: #d1b410;
--light-gold: rgba(255, 215, 0, 0.5) --light-gold: rgba(255, 215, 0, 0.5);
} }
/** HEADER + NAV STYLING */
/** HEADER + NAV STYLING */ header {
header {
background-color: var(--black); background-color: var(--black);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 999; z-index: 999;
} }
.banner { .banner {
display: flex; display: flex;
justify-content: space-between; max-width: 60%; justify-content: space-between;
max-width: 60%;
align-items: center; align-items: center;
height: 4.5rem; height: 4.5rem;
margin: 0 auto; margin: 0 auto;
padding: 1rem 0; padding: 1rem 0;
} }
.logo { .logo {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
color: var(--gold); color: var(--gold);
text-decoration: none; text-decoration: none;
} }
#hamburger { #hamburger {
display: none; display: none;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
background: none; background: none;
border: none; border: none;
padding: 5px; padding: 5px;
} }
#hamburger span { #hamburger span {
width: 25px; width: 25px;
height: 3px; height: 3px;
background-color: var(--gold); background-color: var(--gold);
margin: 3px 0; margin: 3px 0;
transition: 0.3s; transition: 0.3s;
position: relative; position: relative;
} }
.navLink { .navLink {
color: var(--gold); color: var(--gold);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.navLink:hover { .navLink:hover {
color: #fff; color: #fff;
} }
/** BODY + CONTENT */ /** BODY TAGS */
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Cantarell, sans-serif; Ubuntu, Cantarell, sans-serif;
line-height: 1.6; line-height: 1.6;
color: #666; color: #666;
background-color: var(--black); background-color: var(--black);
} }
main { main {
/** background-color: #fff;*/
background-color: var(--black);
}
section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
align-items: center;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
}
section {
max-width: 60%; max-width: 60%;
margin: 0 auto; margin-top: 5rem;
padding: 3rem 0; padding: 1rem 1rem;
} }
#book-button { /** TEXT TYPES */
background-color: var(--gold); a {
color: black;
border: none;
border-radius: 5rem;
box-shadow: 0px 1px 75px rgba(255, 255, 255, 0.5);
padding: 2rem 0;
margin: 5rem 0;
height: 7rem;
font-size: 2rem;
font-weight: bold;
text-decoration: none;
}
#book-button:hover {
cursor: pointer;
}
#book-button:active {
background-color: var(--dark-gold);
}
a {
color: var(--gold); color: var(--gold);
text-align: center; text-align: center;
} }
h1 { h1 {
font-size: 2.5rem; font-size: 2.5rem;
color: #fff; color: #fff;
margin-bottom: 1rem;
text-align: center; text-align: center;
} }
h2 { h2 {
font-size: 2rem; font-size: 2rem;
color: var(--gold); color: var(--gold);
margin-bottom: 1rem; margin-bottom: 1rem;
border-bottom: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
padding-bottom: 0.5rem; }
}
h3 { h3 {
font-size: 1.5rem; font-size: 1.5rem;
color: #000; color: #000;
margin-bottom: 1rem; }
}
p { p {
color: #fff; color: #fff;
margin-bottom: 1rem; }
}
/** FOOTER */ /** FOOTER */
footer { footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 1rem auto; margin: 5rem auto;
padding: 2rem 0; padding: 2rem 0;
max-width: 60%; max-width: 60%;
@@ -160,19 +138,19 @@
color: var(--gold); color: var(--gold);
text-align: center; text-align: center;
} }
#footer-left { #footer-left {
width: 50%; width: 50%;
text-align: left; text-align: left;
} }
#footer-right { #footer-right {
width: 50%; width: 50%;
text-align: right; text-align: right;
} }
/** "skip link" for screen readers */ /** "skip link" for screen readers */
.skipLink { .skipLink {
position: absolute; position: absolute;
top: -50px; top: -50px;
left: 6px; left: 6px;
@@ -183,13 +161,40 @@
font-weight: bold; font-weight: bold;
border-radius: 4px; border-radius: 4px;
z-index: 1000; z-index: 1000;
} }
.skipLink:focus { .skipLink:focus {
top: 6px; top: 6px;
} }
/** DESKTOP RULES */ /** BOOK NOW button */
@media screen and (min-width: 851px) { #book-button {
height: 7rem;
min-width: 100%;
background-color: var(--black);
color: var(--gold);
border: none;
border-radius: 5rem;
box-shadow: 0px 0px 50px var(--gold);
padding: 2rem 0;
margin: 0;
font-size: 2rem;
font-weight: bold;
text-decoration: none;
}
#book-button:hover {
cursor: pointer;
}
#book-button:active {
background-color: var(--dark-gold);
}
/** DESKTOP RULES */
@media screen and (min-width: 851px) {
/** header */ /** header */
nav { nav {
display: flex; display: flex;
@@ -207,10 +212,10 @@
#book-button { #book-button {
width: 50%; width: 50%;
} }
} }
/* MOBILE RULES */ /* MOBILE RULES */
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
/** header */ /** header */
header { header {
padding: 0 1rem; padding: 0 1rem;
@@ -261,7 +266,7 @@
/** footer */ /** footer */
footer { footer {
font-size: .9rem; font-size: 0.9rem;
} }
/** content rules */ /** content rules */
@@ -273,4 +278,45 @@
font-size: 1.75rem; font-size: 1.75rem;
width: 85%; width: 85%;
} }
} }
/** DROP DOWN MENUS */
.dropdown {
width: 300px;
}
.dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border: 1px solid var(--gold);
cursor: pointer;
}
.dropdown-arrow {
transition: transform 0.3s ease;
}
.dropdown-arrow.open {
transform: rotate(180deg);
}
.dropdown-content {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease;
border-left: 1px solid var(--gold);
border-right: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
}
.dropdown-content.open {
max-height: 300px;
}
.dropdown-body {
padding: 10px;
}