Mobile versionNach ein paar Sekunden beginnt das Scrollen zu funktionieren - aber die Benutzer glauben, dass die Site gebrochen ist, bevor dies passiert. https://github.com/liamKeats/nova-detailing ist das Repo für meinen Code. />https://ubiquitous-cheesecake-f7f10b.netlify.app/
global.css
/* GLOBAL RESET AND FONT STACK */
* {
box-sizing: border-box;
}
html,
body {
background-color: #000; /* true black if that's what you want */
margin: 0;
padding: 0;
overflow-x: hidden;
}
@media (max-width: 768px) {
body {
-webkit-overflow-scrolling: touch;
overscroll-behavior: auto;
}
}
/* -----------------------------------
NAVBAR (Global)
------------------------------------ */
.custom-navbar {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 1024px;
padding: 1.5rem 2rem;
z-index: 1000;
background-color: rgba(212, 0, 0, 0.06); /* red-tinted translucent */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0 0 12px 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
}
.nav-inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
max-width: 1024px;
margin: 0 auto;
width: 100%;
}
/* LOGO LEFT */
.nav-logo-left {
display: flex;
align-items: center;
}
.nav-logo-left a {
display: flex;
align-items: center;
justify-content: center;
padding: 3px;
border: 3px solid #fff;
position: relative;
overflow: hidden;
transition: border-color 0.3s ease;
}
.nav-logo-left a::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: #d40000;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.9s ease;
z-index: 0;
}
.nav-logo-left a:hover::before {
transform: scaleX(1);
}
.nav-logo-left img {
height: 30px;
position: relative;
z-index: 2;
filter: brightness(0) invert(1);
transition: filter 0.3s ease;
}
/* NAV LINKS CENTER */
.nav-center {
display: flex;
justify-content: space-evenly;
align-items: center;
list-style: none;
margin: -5px;
padding: 15px;
width: 100%;
}
.nav-center li a {
color: #aaa;
text-transform: uppercase;
font-size: clamp(13px, 1.2vw, 16px);
font-weight: 700;
text-decoration: none;
position: relative;
transition: color 0.2s ease;
}
.nav-center li a::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
height: 3px;
width: 100%;
background-color: #d40000;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease-in-out;
}
.nav-center li a:hover {
color: #fff;
}
.nav-center li a:hover::after {
transform: scaleX(1);
}
/* DROPDOWN */
.nav-center .dropdown {
position: relative;
}
.nav-center .dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #1a1a1a;
padding: 0.5rem 0;
margin: 0;
list-style: none;
min-width: 220px;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
border-radius: 6px;
z-index: 999;
}
.nav-center .dropdown-menu li {
padding: 0;
}
.nav-center .dropdown-menu li a {
display: block;
padding: 0.75rem 1rem;
color: #aaa;
text-decoration: none;
font-size: 0.9rem;
transition: background 0.3s ease, color 0.3s ease;
}
.nav-center .dropdown-menu li a:hover {
background-color: #d40000;
color: white
}
.nav-center .dropdown:hover .dropdown-menu {
display: block;
}
/* SOCIAL ICONS RIGHT */
.nav-right {
display: flex;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-right img {
height: 30px;
transition: opacity 0.2s ease;
}
.nav-right a:hover img {
opacity: 0.7;
}
/* HAMBURGER (initially hidden) */
.hamburger.uk-navbar-toggle {
display: none;
color: #fff;
padding: 0.5rem;
}
/* RESPONSIVE NAVIGATION */
@media (max-width: 1024px) {
.custom-navbar {
left: 0;
transform: none;
top: 0;
width: 100%;
border-radius: 0;
border-left: none;
border-right: none;
}
.nav-center {
gap: clamp(1rem, 3vw, 3rem);
}
.nav-center li a {
font-size: clamp(12px, 1.5vw, 14px);
}
}
@media (max-width: 768px) {
.nav-center,
.nav-right {
display: none;
}
.hamburger.uk-navbar-toggle {
display: block;
margin-left: auto;
font-size: 1.5rem;
color: white;
cursor: pointer;
}
}
.uk-offcanvas-page {
overflow: visible !important;
}
/* Match offcanvas text style to navbar */
.uk-offcanvas-bar {
background-color: #111; /* match your navbar bg */
}
.uk-offcanvas-bar .uk-nav li a {
color: #aaa;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
padding: 0.75rem 0;
text-decoration: none;
display: block;
transition: color 0.2s ease;
}
.uk-offcanvas-bar .uk-nav li a:hover {
color: #fff;
}
/* Optional: underline-style hover like navbar */
.uk-offcanvas-bar .uk-nav li a::after {
content: "";
display: block;
height: 4px;
width: 100%;
background-color: #d40000;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease-in-out;
margin-top: 4px;
}
.uk-offcanvas-bar .uk-nav li a:hover::after {
transform: scaleX(1);
}
< /code>
Home.css
/* -----------------------------------
HERO SECTION
------------------------------------ */
.hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
aspect-ratio: 16/9;
object-fit: cover;
object-position: center;
z-index: 0; /* don’t use -1 */
filter: brightness(0.6);
pointer-events: none; /* avoids accidental interaction on mobile */
}
.hero-content {
position: absolute;
bottom: 10%; /* adjust as needed */
left: 50%;
transform: translateX(-50%);
z-index: 1;
max-width: 800px;
padding: 2rem;
text-align: center;
}
.hero::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(to bottom, transparent, #000);
z-index: 1;
pointer-events: none;
}
@media (max-width: 768px) {
.hero-video {
display: none;
}
.hero{
background: url(/assets/images/hero-fallback.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}
/* -----------------------------------
CHAT NOW BUTTON - header styll
------------------------------------ */
.chat-button {
position: relative;
display: inline-block;
padding: 1rem 2.5rem;
background-color: transparent;
color: white;
text-decoration: none;
border: 2px solid white;
border-radius: 8px;
font-family: 'Rajdhani', sans-serif;
font-size: 1.15rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.075rem;
overflow: hidden;
transition: color 0.3s ease, border-color 0.3s ease;
z-index: 1;
}
.chat-button::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0%;
height: 100%;
background-color: #8d0505;
z-index: -1;
transition: width 0.3s ease;
}
.chat-button:hover::before {
width: 100%;
}
.chat-button:hover {
color: white;
border-color: #7a0606;
cursor: pointer;
}
/* -----------------------------------
Services - main - section 1
------------------------------------ */
.services {
background-color: #000000;
padding: 6rem 2rem;
text-align: center;
}
.section-title {
font-size: 3rem;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 3rem;
font-weight: 700;
font-family: 'Rajdhani', sans-serif;
color: white;
position: relative;
display: inline-block;
transition: opacity 2.5s ease, transform 2.5s ease;
opacity: 0;
transform: translateY(20px);
}
.section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background-color: #d40000;
border-radius: 2px;
}
.section-title.visible {
opacity: 1;
transform: translateY(0);
}
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* force 2 per row */
gap: 3rem;
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr; /* stack 1 per row on mobile */
}
}
.service-card {
background-color: #350404;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow:
0 0 10px rgba(212, 0, 0, 0.4),
0 0 25px rgba(212, 0, 0, 0.3),
0 0 40px rgba(212, 0, 0, 0.2);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.service-info {
padding: 1rem 1.5rem 1.5rem 1.5rem;
text-align: left;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.service-card img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
}
.service-card h3 {
margin: 0;
font-size: 1.3rem;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
}
.service-card p {
margin: 0;
color: #ccc;
font-size: 0.95rem;
line-height: 1.4;
}
@media (min-width: 768px) and (max-width: 1024px) {
.service-info {
padding: 1rem 1rem;
text-align: left;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
}
/* -----------------------------------
WHY US - main - section 2
------------------------------------ */
.why-us-section {
background-color: #000;
padding: 8rem 2rem;
position: relative;
}
.why-us-container {
position: relative;
max-width: 1200px;
margin: -100px auto;
}
.why-us-image-container {
position: relative;
display: flex;
justify-content: center;
z-index: 0;
overflow: hidden; /* ensures gradient doesn't get clipped weirdly */
}
.why-us-image-container img {
width: 100%;
max-width: 1000px;
height: auto;
display: block;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
/* Fade in/out on both sides */
-webkit-mask-image: linear-gradient(
to left,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 15%,
rgba(0, 0, 0, 1) 85%,
rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 15%,
rgba(0, 0, 0, 1) 85%,
rgba(0, 0, 0, 0) 100%
);
/* Required to apply the mask fully */
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
@keyframes softPulse {
0% { box-shadow: 0 0 20px rgba(212, 0, 0, 0.3); }
50% { box-shadow: 0 0 30px rgba(212, 0, 0, 0.6); }
100% { box-shadow: 0 0 20px rgba(212, 0, 0, 0.3); }
}
.why-us-grid-wrapper {
background: #2d0000; /* muted dark red */
border-radius: 12px;
color: white;
padding: 3rem;
box-shadow: 0 0 30px rgba(212, 0, 0, 0.4); /* soft red glow */
position: relative;
z-index: 1;
margin-top: -125px;
max-width: 95%;
margin-left: auto;
margin-right: auto;
animation: softPulse 4s infinite;
}
@media (max-width: 768px) {
.why-us-grid-wrapper {
margin-top: -56px; /*
removes the overlap on mobile */padding-top: 3rem; /* add breathing room if needed */
}
.why-us-image-container {
margin-bottom: -1rem; /* optional — reduce extra spacing */
}
.why-us-image-container img {
max-width: 90%;
}
}
.why-us-heading {
font-size: 2.5rem;
font-family: 'Rajdhani', sans-serif;
text-transform: uppercase;
color: white;
margin-bottom: 2rem;
line-height: 1.2;
}
.why-us-heading span {
background-color: white;
color: #d40000;
padding: 0 0.4rem;
border-radius: 4px;
}
.why-us-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.why-block h3 {
color: white;
font-size: 1.3rem;
text-transform: uppercase;
margin-bottom: 0.5rem;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
.why-block p {
color: #eee;
font-size: 0.95rem;
line-height: 1.5;
}
@media (max-width: 900px) {
.why-us-container {
flex-direction: column;
}
.why-us-grid {
grid-template-columns: 1fr;
}
.why-us-grid-wrapper {
padding: 2rem;
}
}
/* -----------------------------------
CONTACT US - main - section 4
------------------------------------ */
.contact-us {
background-color: #000;
padding: 6rem 2rem;
text-align: center;
color: white;
opacity: 0;
transform: translateY(60px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.contact-us.visible {
opacity: 1;
transform: translateY(0);
}
.contact-overlay {
background-color: rgba(0, 0, 0, 0.5); /* optional dark overlay */
padding: 3rem 2rem;
border-radius: 12px;
display: inline-block;
max-width: 600px;
margin: 0 auto;
}
.contact-overlay h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
}
.book-heading {
font-family: 'Rajdhani', sans-serif;
font-size: 2.5rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 2rem;
}
.cta-button {
display: inline-block;
padding: 1.2rem 3rem;
background-color: transparent;
color: white;
font-weight: bold;
font-size: 1.1rem;
border: 2px solid #d40000;
border-radius: 50px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
z-index: 1;
}
.cta-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(120deg, transparent, #d40000 50%, transparent);
transition: all 0.6s ease;
z-index: -1;
}
.cta-button:hover::before {
left: 0;
}
.cta-button:hover {
color: white;
border-color: #ff1a1a;
box-shadow: 0 0 20px #d40000;
transform: scale(1.03);
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
< /code>
Index.html
[*]Service Area
[*]Reviews
[*]Gallery
[*]Contact
[url=sms:+1234567890]Chat Now[/url]
Our Services
Detailing
Detailing isn’t just cleaning—it’s restoring. We go beyond the surface with deep interior care, precise hand washes, and premium products that respect your vehicle’s finish. Whether it’s your daily driver or weekend pride, we treat every car like it’s our own.
Vehicle Protection
Your car faces wear the moment it hits the road. Our protection packages, including ceramic coatings and precision-cut paint protection film, guard your vehicle against chips, UV damage, and the elements—without compromising its look.
Paint Correction
Scratches, swirl marks, dullness—gone. Our paint correction service brings out the true clarity and depth of your paint through careful, multi-stage polishing. If your car’s finish isn’t turning heads, we’ll make sure it does.
New Vehicle Detailing
That “new car” feeling should last. We prep brand new vehicles with protective coatings and dialed-in finishes to fix factory mishaps and prevent early wear. It’s the perfect first step for long-term care and lasting shine.
WHY
CHOOSE US?
Premium Results. Every Time.
At Nova Detailing, we treat every vehicle like a high-end showpiece. From daily drivers to luxury cars, our mobile auto detailing services in Kentville and across the Annapolis Valley are delivered with unmatched precision and pride.
Certified Expertise You Can Count On
We’re fully insured, experienced, and specialize in paint correction and ceramic coatings. Locals in Nova Scotia trust us because we deliver consistent, high-quality results — every single time.
Detailing Built Around You
No two vehicles are the same. Whether you need interior shampooing, exterior polishing, or a full detail package, we tailor our services to your needs — right at your home or business in the Valley.
Cutting-Edge Products. Local Service.
We stay ahead of the curve with the latest products and techniques in automotive detailing. From PPF to advanced ceramic coating, we bring big-city quality to Kentville and beyond — without the big-city hassle.
Ready to book?
[url=sms:+1234567890]Contact Us[/url]
© 2025 Nova Detailing. All rights reserved.
[*]Service Area
[*]Reviews
[*]Gallery
[*]Contact
document.addEventListener("DOMContentLoaded", () => {
const contactSection = document.querySelector('.contact-us');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
contactSection.classList.add('visible');
}
});
}, { threshold: 0.2 });
observer.observe(contactSection);
});
document.addEventListener("DOMContentLoaded", () => {
const sectionTitle = document.querySelector('.section-title');
const titleObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
sectionTitle.classList.add('visible');
} else {
sectionTitle.classList.remove('visible'); //
remove it when out of view}
});
}, { threshold: 0.2 });
if (sectionTitle) {
titleObserver.observe(sectionTitle);
}
});
< /code>
Wenn ihr auch Vorschläge zum Code hat, wären auch krank. Ich bin neu in der Herstellung von Websites und mache das nur für meine eigene Firma lol. Vielen Dank für die Hilfe im Voraus. Zeiger-Events: Keine zu Videoschichten
[*] Überlauf entfernt: versteckt aus .hero- und übergeordneten Containern Elemente
[*] Vorausgeladene CSS/Schriftarten und verwendet PRELOAD = "Keine" für das Hero -Video
Ich habe alle diese ausprobiert. Zuerst dachte ich, dass die Seite nicht schnell genug geladen würde, also habe ich versucht, Sachen vorzuladen. Ich war dann vielleicht die Überlagerung des Heldeninhalts, die ich hatte, zu viel Platz oder so oder überlagte sich in einen anderen Abschnitt und versuchte das Laden. Ich habe dann auch das alles entfernt. Dann wurde mir klar, dass alles geladen ist, aber ich bin nur scrollen. Also habe ich einige Web -Scrolling -Sachen nachgeschlagen, ich habe mir ein paar Videos angesehen, wie man diese implementiert, nichts hat funktioniert und ich bin wirklich verloren.>