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"
/>
<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>
<body>
@@ -30,7 +71,9 @@
<nav>
<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="#Contact">Contact</a>
</nav>
@@ -38,11 +81,32 @@
</header>
<main id="main-content">
<div id="hero-image"></div>
<section id="intro">
<h1>Portland's Mobile<br />Luxury Detailing Service</h1>
<a href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5" target="_blank">
<h1>Restore & Protect<br />Your Vehicle</h1>
<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>
</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>
</main>
@@ -55,9 +119,14 @@
<div id="footer-right">
207-807-6770<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>
</footer>
<script src="hamburger.js"></script>
<script src="dropdown-box.js"></script>
</body>
</html>
style.css
+89 -43
View File
@@ -9,10 +9,9 @@
--black: #000;
--gold: #ffd700;
--dark-gold: #d1b410;
--light-gold: rgba(255, 215, 0, 0.5)
--light-gold: rgba(255, 215, 0, 0.5);
}
/** HEADER + NAV STYLING */
header {
background-color: var(--black);
@@ -23,7 +22,8 @@
.banner {
display: flex;
justify-content: space-between; max-width: 60%;
justify-content: space-between;
max-width: 60%;
align-items: center;
height: 4.5rem;
@@ -68,53 +68,35 @@
color: #fff;
}
/** BODY + CONTENT */
/** BODY TAGS */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
Cantarell, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #666;
background-color: var(--black);
}
main {
/** background-color: #fff;*/
background-color: var(--black);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
}
section {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 60%;
margin: 0 auto;
padding: 3rem 0;
}
#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);
margin-top: 5rem;
padding: 1rem 1rem;
}
/** TEXT TYPES */
a {
color: var(--gold);
text-align: center;
@@ -123,7 +105,6 @@
h1 {
font-size: 2.5rem;
color: #fff;
margin-bottom: 1rem;
text-align: center;
}
@@ -132,18 +113,15 @@
color: var(--gold);
margin-bottom: 1rem;
border-bottom: 2px solid var(--gold);
padding-bottom: 0.5rem;
}
h3 {
font-size: 1.5rem;
color: #000;
margin-bottom: 1rem;
}
p {
color: #fff;
margin-bottom: 1rem;
}
/** FOOTER */
@@ -151,7 +129,7 @@
display: flex;
justify-content: space-between;
margin: 1rem auto;
margin: 5rem auto;
padding: 2rem 0;
max-width: 60%;
@@ -188,6 +166,33 @@
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 */
@media screen and (min-width: 851px) {
/** header */
@@ -261,7 +266,7 @@
/** footer */
footer {
font-size: .9rem;
font-size: 0.9rem;
}
/** content rules */
@@ -274,3 +279,44 @@
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;
}