georgebiri/khy_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: update hero section with carousel functionality and styling enhancements

Browse source
This commit is contained in:
George Birikorang 2025-09-05 08:37:31 -07:00
parent 6b21abfe6a
commit b0c6379ddd
4 changed files with 370 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

90
index.html
View file

@ -68,6 +68,62 @@
cursor: pointer;
}
/* Attention animation for projects button */
.attention-animation {
animation: attention-pulse 3s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.attention-animation::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
animation: shimmer 4s ease-in-out infinite;
}
@keyframes attention-pulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
50% {
transform: scale(1.02);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
}
@keyframes shimmer {
0% {
left: -100%;
}
50% {
left: 100%;
}
100% {
left: 100%;
}
}
.attention-animation:hover {
animation: none;
transform: scale(1.05);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.product-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
@ -334,11 +390,11 @@
<!-- Main Content -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-28 items-center">
<!-- Left Side - Image -->
<div class="relative">
<div id="hero-image" class="relative">
<img
src="assets/images/our_story.jpg"
alt="Modern office interior"
class="w-full h-auto rounded-lg"
class="w-full h-auto rounded-lg transition-opacity duration-300"
/>
<!-- Navigation Arrow -->
<div class="absolute top-1/2 right-4 transform -translate-y-1/2">
@ -361,6 +417,32 @@
</svg>
</button>
</div>
<!-- Carousel Indicators -->
<div
class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"
>
<div
id="carousel-indicator-0"
class="w-3 h-3 bg-white rounded-full opacity-100 transition-opacity duration-300 cursor-pointer"
></div>
<div
id="carousel-indicator-1"
class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
></div>
<div
id="carousel-indicator-2"
class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
></div>
<div
id="carousel-indicator-3"
class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
></div>
<div
id="carousel-indicator-4"
class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
></div>
</div>
</div>
<!-- Right Side - Text Content -->
@ -386,7 +468,7 @@
<button
id="projects-button"
class="bg-black bg-opacity-70 text-white font-playfair font-normal text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider px-8 py-4 rounded-lg hover:bg-opacity-80 transition-all text-center max-w-sm"
class="bg-black bg-opacity-70 text-white font-playfair font-normal text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider px-8 py-4 rounded-lg hover:bg-opacity-80 transition-all text-center max-w-sm attention-animation"
>
Explore past projects
</button>
@ -985,6 +1067,6 @@
</div>
</footer>
<script src="scripts/main.js?v=1.1"></script>
<script src="scripts/main.js?v=4.7"></script>
</body>
</html>