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
+89 -43
View File
@@ -9,10 +9,9 @@
--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);
@@ -23,7 +22,8 @@
.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;
@@ -68,53 +68,35 @@
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;*/ display: flex;
background-color: var(--black); flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
} }
section { section {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 60%; max-width: 60%;
margin: 0 auto; margin-top: 5rem;
padding: 3rem 0; padding: 1rem 1rem;
}
#book-button {
background-color: var(--gold);
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);
} }
/** TEXT TYPES */
a { a {
color: var(--gold); color: var(--gold);
text-align: center; text-align: center;
@@ -123,7 +105,6 @@
h1 { h1 {
font-size: 2.5rem; font-size: 2.5rem;
color: #fff; color: #fff;
margin-bottom: 1rem;
text-align: center; text-align: center;
} }
@@ -132,18 +113,15 @@
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 */
@@ -151,7 +129,7 @@
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%;
@@ -188,6 +166,33 @@
top: 6px; top: 6px;
} }
/** BOOK NOW button */
#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 */ /** DESKTOP RULES */
@media screen and (min-width: 851px) { @media screen and (min-width: 851px) {
/** header */ /** header */
@@ -261,7 +266,7 @@
/** footer */ /** footer */
footer { footer {
font-size: .9rem; font-size: 0.9rem;
} }
/** content rules */ /** content rules */
@@ -274,3 +279,44 @@
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;
}