Do a color combination for text and image in the banner section
Browse files- index.html +6 -6
- style.css +5 -0
index.html
CHANGED
|
@@ -219,15 +219,15 @@
|
|
| 219 |
</div>
|
| 220 |
</header>
|
| 221 |
<!-- Banner Section -->
|
| 222 |
-
<section class="relative bg-[var(--vlc-navy)]">
|
| 223 |
<img src="https://huggingface.co/spaces/vlcsolutions/vlc-tech-turboboost-implementation-wizardry/resolve/main/images/Implementation%20Services-Main%20banner-2025.png"
|
| 224 |
alt="Implementation Services"
|
| 225 |
-
class="w-full h-auto object-cover">
|
| 226 |
-
<div class="absolute inset-0 flex items-center justify-center">
|
| 227 |
<div class="max-w-7xl mx-auto text-center px-4" data-aos="fade-up">
|
| 228 |
-
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-white">AI-Driven Implementation That Moves Business Forward</h1>
|
| 229 |
-
<p class="text-xl md:text-2xl mb-8 text-white">Deploy Smarter Tech. Drive AI Power.</p>
|
| 230 |
-
<a href="https://www.vlcsolutions.com/contactus.html" class="btn-accent px-8 py-3 rounded-full text-lg font-semibold inline-block">Start Your Impactful Implementation Today</a>
|
| 231 |
</div>
|
| 232 |
</div>
|
| 233 |
</section>
|
|
|
|
| 219 |
</div>
|
| 220 |
</header>
|
| 221 |
<!-- Banner Section -->
|
| 222 |
+
<section class="relative bg-gradient-to-r from-[var(--vlc-navy)] to-[#00308F]">
|
| 223 |
<img src="https://huggingface.co/spaces/vlcsolutions/vlc-tech-turboboost-implementation-wizardry/resolve/main/images/Implementation%20Services-Main%20banner-2025.png"
|
| 224 |
alt="Implementation Services"
|
| 225 |
+
class="w-full h-auto object-cover opacity-90 mix-blend-overlay">
|
| 226 |
+
<div class="absolute inset-0 flex items-center justify-center">
|
| 227 |
<div class="max-w-7xl mx-auto text-center px-4" data-aos="fade-up">
|
| 228 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-white drop-shadow-lg">AI-Driven Implementation That Moves Business Forward</h1>
|
| 229 |
+
<p class="text-xl md:text-2xl mb-8 text-white/90 font-medium">Deploy Smarter Tech. Drive AI Power.</p>
|
| 230 |
+
<a href="https://www.vlcsolutions.com/contactus.html" class="btn-accent px-8 py-3 rounded-full text-lg font-semibold inline-block hover:shadow-lg hover:shadow-[var(--vlc-leaf)/30%] transition-all duration-300">Start Your Impactful Implementation Today</a>
|
| 231 |
</div>
|
| 232 |
</div>
|
| 233 |
</section>
|
style.css
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
|
|
| 1 |
body {
|
| 2 |
padding: 2rem;
|
| 3 |
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
|
| 4 |
}
|
| 5 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 6 |
h1 {
|
| 7 |
font-size: 16px;
|
| 8 |
margin-top: 0;
|
|
|
|
| 1 |
+
|
| 2 |
body {
|
| 3 |
padding: 2rem;
|
| 4 |
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
|
| 5 |
}
|
| 6 |
|
| 7 |
+
/* Banner text shadow for better contrast */
|
| 8 |
+
.text-shadow {
|
| 9 |
+
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
| 10 |
+
}
|
| 11 |
h1 {
|
| 12 |
font-size: 16px;
|
| 13 |
margin-top: 0;
|