manal.amine
/
tailwproj2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update the comments

Browse Source
main
Manal Amine 1 month ago
parent 0cd3d6827c
commit d9d25acfa7
1 changed files with 80 additions and 98 deletions
Show Stats Download Patch File Download Diff File

176
index.html
Unescape Escape View File

@ -3,21 +3,20 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar & Swiper Hero</title> <title>BAUEN</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- 1. Include Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<style> <style>
/* Navbar transition */
.nav-menu { .nav-menu {
transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out;
} }
/* Custom animation for the text sliding up */ /* animation for the text sliding up */
@keyframes slideInUp { @keyframes slideInUp {
from { from {
opacity: 0; opacity: 0;
@ -29,12 +28,11 @@
} }
} }
/* Class to trigger the animation */
.animate-slide-in-up { .animate-slide-in-up {
animation: slideInUp 0.8s ease-out forwards; animation: slideInUp 0.8s ease-out forwards;
} }
/* Generic styling for ALL pagination dots */ /* ALL pagination dots */
.swiper-pagination-bullet { .swiper-pagination-bullet {
width: 12px; width: 12px;
height: 12px; height: 12px;
@ -42,23 +40,18 @@
opacity: 1; opacity: 1;
} }
/* Generic styling for ALL ACTIVE pagination dots */ /* ALL active pagination dots */
.swiper-pagination-bullet-active { .swiper-pagination-bullet-active {
background-color: rgb(177, 151, 119); /* Your brand gold color */ background-color: rgb(177, 151, 119);
} }
/* ======================================================== */
/* NEW STYLES FOR THE PROJECTS AND NEWS SLIDER PAGINATION */
/* ======================================================== */
/* This targets the containers for the dots, not the dots themselves */
/* This targets the containers for the dots */
.projects-pagination, .projects-pagination,
.news-pagination { .news-pagination {
/* Add space between the slider images and the dots */
margin-top: 3rem !important; /* 48px - adjust as you like */
/* Override Swiper's default absolute positioning to place the dots margin-top: 3rem !important;
in the normal document flow, below the slider content. */
position: relative !important; position: relative !important;
bottom: auto !important; bottom: auto !important;
} }
@ -67,9 +60,9 @@
</head> </head>
<body class="bg-[rgba(39,39,39,255)]"> <body class="bg-[rgba(39,39,39,255)]">
<!-- =========== NAVBAR (from previous step) =========== --> <!-- NAVBAR -->
<nav x-data="{ isOpen: false }" class="relative bg-[rgba(39,39,39,255)] lg:bg-transparent z-20"> <nav x-data="{ isOpen: false }" class="relative bg-[rgba(39,39,39,255)] lg:bg-transparent z-20">
<!-- ... your navbar code ... -->
<div class="container mx-auto px-6 py-4 flex justify-between items-center"> <div class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="#" class="text-white"><img src="images/logo.png" alt="Your Logo" class="h-8"></a> <a href="#" class="text-white"><img src="images/logo.png" alt="Your Logo" class="h-8"></a>
<div class="hidden lg:flex items-center space-x-6 text-white"><a href="#" class="hover:text-[rgb(177,151,119)]">Home</a><a href="#" class="hover:text-[rgb(177,151,119)]">About</a><a href="#" class="hover:text-[rgb(177,151,119)]">Services</a><a href="#" class="hover:text-[rgb(177,151,119)]">Projects</a><a href="#" class="hover:text-[rgb(177,151,119)]">Pages</a><a href="#" class="hover:text-[rgb(177,151,119)]">Blog</a><a href="#" class="hover:text-[rgb(177,151,119)]">Contact</a></div> <div class="hidden lg:flex items-center space-x-6 text-white"><a href="#" class="hover:text-[rgb(177,151,119)]">Home</a><a href="#" class="hover:text-[rgb(177,151,119)]">About</a><a href="#" class="hover:text-[rgb(177,151,119)]">Services</a><a href="#" class="hover:text-[rgb(177,151,119)]">Projects</a><a href="#" class="hover:text-[rgb(177,151,119)]">Pages</a><a href="#" class="hover:text-[rgb(177,151,119)]">Blog</a><a href="#" class="hover:text-[rgb(177,151,119)]">Contact</a></div>
@ -78,9 +71,8 @@
<div :class="isOpen ? 'max-h-screen' : 'max-h-0'" class="nav-menu lg:hidden overflow-hidden absolute w-full bg-[rgba(39,39,39,255)]"><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Home</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">About</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Services</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Projects</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Pages</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Blog</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Contact</a></div> <div :class="isOpen ? 'max-h-screen' : 'max-h-0'" class="nav-menu lg:hidden overflow-hidden absolute w-full bg-[rgba(39,39,39,255)]"><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Home</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">About</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Services</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Projects</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Pages</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Blog</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Contact</a></div>
</nav> </nav>
<!-- =========== SWIPER HERO SECTION START =========== --> <!-- SWIPER SECTION -->
<section class="relative -mt-20 h-screen min-h-[600px] lg:pl-40 w-full"> <!-- -mt-20 to pull it under the navbar --> <section class="relative -mt-20 h-screen min-h-[600px] lg:pl-40 w-full"> <!-- -mt-20 to pull it under the navbar -->
<!-- Swiper -->
<div class="swiper hero-swiper h-full w-full"> <div class="swiper hero-swiper h-full w-full">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<!-- Slide 1 --> <!-- Slide 1 -->
@ -116,21 +108,25 @@
</div> </div>
<!-- Pagination (Circles) - Hidden on mobile, visible on large screens --> <!-- Pagination -->
<div class="swiper-pagination hidden lg:block"></div> <div class="swiper-pagination hidden lg:block"></div>
</div> </div>
</section> </section>
<!-- =========== SWIPER HERO SECTION END =========== -->
<!-- =========== ABOUT US SECTION START =========== -->
<!-- ABOUT US -->
<section id="about-us" class="bg-[rgba(39,39,39,255)] py-16 lg:py-24"> <section id="about-us" class="bg-[rgba(39,39,39,255)] py-16 lg:py-24">
<div class="container mx-auto px-6"> <div class="container mx-auto px-6">
<!-- Main grid for text and image -->
<div class="flex flex-col lg:flex-row items-start gap-12 lg:gap-16"> <div class="flex flex-col lg:flex-row items-start gap-12 lg:gap-16">
<!-- Left Column: Text Content --> <!-- left partText Content -->
<div class="lg:w-1/2 pl-20"> <div class="lg:w-1/2 pl-20">
<!-- Wrapper Div with Flexbox --> <!-- Wrapper with Flexbox(diff color) -->
<div class="flex items-baseline gap-x-2 mb-4"> <div class="flex items-baseline gap-x-2 mb-4">
<h2 class="text-4xl font-semibold text-white">ABOUT</h2> <h2 class="text-4xl font-semibold text-white">ABOUT</h2>
<h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">BAUEN</h2> <h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">BAUEN</h2>
@ -149,14 +145,10 @@
</p> </p>
</div> </div>
<!-- Right Column: Image and Office Box (Corrected) --> <!-- Right Column image -->
<div class="lg:w-1/2 w-full pl-20"> <div class="lg:w-1/2 w-full pl-20">
<!-- <!--the image and the box will both be inside this div. -->
The Image Wrapper:
1. We add 'relative' here to create the positioning context.
2. The image and the box will both live inside this div.
-->
<div class="relative group overflow-hidden rounded-lg"> <div class="relative group overflow-hidden rounded-lg">
<img src="images/about.jpg" alt="Modern building interior" class="w-full h-auto object-cover transform transition-transform duration-500 ease-in-out group-hover:scale-105"> <img src="images/about.jpg" alt="Modern building interior" class="w-full h-auto object-cover transform transition-transform duration-500 ease-in-out group-hover:scale-105">
@ -171,36 +163,36 @@
</div> </div>
</div> </div>
</section> </section>
<!-- =========== ABOUT US SECTION END =========== -->
<!-- =========== OUR PROJECTS SECTION START =========== -->
<!-- OUR PROJECTS -->
<section class="pl-20 bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white"> <section class="pl-20 bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white">
<div class="container mx-auto px-6"> <div class="container mx-auto px-6">
<!-- Section Title: "Our PROJECTS" -->
<div class="flex items-baseline gap-x-2 mb-12"> <div class="flex items-baseline gap-x-2 mb-12">
<h2 class="text-4xl font-semibold text-white">Our</h2> <h2 class="text-4xl font-semibold text-white">Our</h2>
<h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">Projects</h2> <h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">Projects</h2>
</div> </div>
<!-- Swiper container with relative positioning for pagination --> <!-- Swiper -->
<div class="relative"> <div class="relative">
<!-- Swiper instance with a unique class 'projects-swiper' -->
<div class="swiper projects-swiper"> <div class="swiper projects-swiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<!-- SLIDE 1 (Contains two projects) --> <!-- SLIDE 1 2proj -->
<div class="swiper-slide"> <div class="swiper-slide">
<div class="grid grid-cols-2 md:grid-cols-2 gap-8"> <div class="grid grid-cols-2 md:grid-cols-2 gap-8">
<!-- Project 1 --> <!-- Project 1 -->
<div class="project-card"> <div class="project-card">
<!-- Image with hover effects wrapper -->
<div class="relative group overflow-hidden "> <div class="relative group overflow-hidden ">
<img src="images/slider1.jpg" alt="Interior Design Project" class="w-full h-auto object-cover"> <img src="images/slider1.jpg" alt="Interior Design Project" class="w-full h-auto object-cover">
<!-- Dark overlay that appears on hover -->
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300"></div> <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300"></div>
<!-- Text Block Container (Title and Type) --> <!-- Text -->
<div class="absolute bottom-8 left-8 transform group-hover:-translate-y-4 transition-transform duration-300"> <div class="absolute bottom-8 left-8 transform group-hover:-translate-y-4 transition-transform duration-300">
<h3 class="text-xl font-semibold text-white">Modern Villa, Toronto</h3> <h3 class="text-xl font-semibold text-white">Modern Villa, Toronto</h3>
<p class="font-semibold text-lg text-[rgb(177,151,119)] mt-1">Residential</p> <p class="font-semibold text-lg text-[rgb(177,151,119)] mt-1">Residential</p>
@ -211,7 +203,7 @@
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</div> </div>
</div> </div>
<!-- The text under the image has been REMOVED from here -->
</div> </div>
<!-- Project 2 --> <!-- Project 2 -->
<div class="project-card"> <div class="project-card">
@ -230,7 +222,7 @@
</div> </div>
</div> </div>
<!-- SLIDE 2 (Contains another two projects) --> <!-- SLIDE 2 also 2 proj -->
<div class="swiper-slide"> <div class="swiper-slide">
<div class="grid grid-cols-2 md:grid-cols-2 gap-8"> <div class="grid grid-cols-2 md:grid-cols-2 gap-8">
<!-- Project 3 --> <!-- Project 3 -->
@ -267,28 +259,27 @@
</div> </div>
</div> </div>
<!-- Pagination (Dots) - REPLACED the navigation buttons --> <!-- Pagination -->
<div class="swiper-pagination projects-pagination"></div> <div class="swiper-pagination projects-pagination"></div>
</div> </div>
</div> </div>
</section> </section>
<!-- =========== OUR PROJECTS SECTION END =========== -->
<!-- =========== OUR SERVICES SECTION START =========== --> <!-- OUR SERVICES -->
<section class="pl-20 bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white"> <section class="pl-20 bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white">
<div class="container mx-auto px-6"> <div class="container mx-auto px-6">
<!-- Section Title -->
<h2 class=" text-4xl font-semibold mb-12">Our Services</h2> <h2 class=" text-4xl font-semibold mb-12">Our Services</h2>
<!-- Responsive Grid for the service cards --> <!--Grid for the service cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service Card 1: Architecture --> <!-- Service Card 1 -->
<div class="service-card group relative p-8 border border-gray-700 h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] "> <div class="service-card group relative p-8 border border-gray-700 h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] ">
<!-- Icon/Image -->
<img src="images/icon1.png" alt="Architecture Icon" class="h-12 w-12 mb-6"> <img src="images/icon1.png" alt="Architecture Icon" class="h-12 w-12 mb-6">
<!-- Text Content -->
<h3 class="font-semibold text-xl mb-2">Architecture</h3> <h3 class="font-semibold text-xl mb-2">Architecture</h3>
<p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300"> <p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300">
Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss. Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss.
@ -300,12 +291,11 @@
</div> </div>
</div> </div>
<!-- Service Card 2: Interior Design --> <!-- Service Card 2-->
<div class="service-card group relative p-8 border border-gray-700 h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] "> <div class="service-card group relative p-8 border border-gray-700 h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] ">
<!-- Icon/Image -->
<img src="images/icon2.png" alt="Interior Design Icon" class="h-12 w-12 mb-6"> <img src="images/icon2.png" alt="Interior Design Icon" class="h-12 w-12 mb-6">
<!-- Text Content -->
<h3 class="font-semibold text-xl mb-2">Interior Design</h3> <h3 class="font-semibold text-xl mb-2">Interior Design</h3>
<p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300"> <p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300">
Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss. Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss.
@ -317,12 +307,12 @@
</div> </div>
</div> </div>
<!-- Service Card 3: Urban Design --> <!-- Service Card 3 -->
<div class="service-card group relative p-8 border border-gray-700 h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] "> <div class="service-card group relative p-8 border border-gray-700 h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] ">
<!-- Icon/Image -->
<img src="images/icon3.png" alt="Urban Design Icon" class="h-12 w-12 mb-6"> <img src="images/icon3.png" alt="Urban Design Icon" class="h-12 w-12 mb-6">
<!-- Text Content -->
<h3 class="font-semibold text-xl mb-2">Urban Design</h3> <h3 class="font-semibold text-xl mb-2">Urban Design</h3>
<p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300"> <p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300">
Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss. Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss.
@ -338,21 +328,20 @@
</div> </div>
</section> </section>
<!-- =========== OUR SERVICES SECTION END =========== -->
<!-- =========== CURRENT NEWS SECTION START =========== --> <!-- CURRENT NEWS -->
<section class="bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white pl-20"> <section class="bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white pl-20">
<div class="container mx-auto px-6"> <div class="container mx-auto px-6">
<!-- Section Title: "Current NEWS" -->
<div class="flex items-baseline gap-x-3 mb-12"> <div class="flex items-baseline gap-x-3 mb-12">
<h2 class="text-4xl font-semibold text-white">Current</h2> <h2 class="text-4xl font-semibold text-white">Current</h2>
<h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">News</h2> <h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">News</h2>
</div> </div>
<!-- Swiper container with relative positioning for pagination --> <!-- Swiper -->
<div class="relative"> <div class="relative">
<!-- Swiper instance with a unique class 'news-swiper' -->
<div class="swiper news-swiper pb-16"> <!-- Added pb-16 for space for the overlapping box --> <div class="swiper news-swiper pb-16">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<!-- SLIDE 1 (Contains two news items) --> <!-- SLIDE 1 (Contains two news items) -->
@ -362,7 +351,7 @@
<div class="news-card relative group"> <div class="news-card relative group">
<img src="images/slider1.jpg" alt="A modern building facade" class=" object-cover w-full h-full"> <img src="images/slider1.jpg" alt="A modern building facade" class=" object-cover w-full h-full">
<!-- Text Box (Half in, Half out) -->
<div class="absolute bottom-0 left-1/2 w-11/12 p-6 text-center <div class="absolute bottom-0 left-1/2 w-11/12 p-6 text-center
-translate-x-1/2 translate-y-1/2 -translate-x-1/2 translate-y-1/2
bg-[rgba(39,39,39,255)] border border-gray-700 bg-[rgba(39,39,39,255)] border border-gray-700
@ -377,7 +366,7 @@
<div class="news-card relative group"> <div class="news-card relative group">
<img src="images/proj2.jpg" alt="An open-plan office interior" class=" object-cover w-full h-full"> <img src="images/proj2.jpg" alt="An open-plan office interior" class=" object-cover w-full h-full">
<!-- Text Box (Half in, Half out) --> <!-- Text -->
<div class="absolute bottom-0 left-1/2 w-11/12 p-6 text-center <div class="absolute bottom-0 left-1/2 w-11/12 p-6 text-center
-translate-x-1/2 translate-y-1/2 -translate-x-1/2 translate-y-1/2
bg-[rgba(39,39,39,255)] border border-gray-700 bg-[rgba(39,39,39,255)] border border-gray-700
@ -416,21 +405,20 @@
</div> </div>
</div> </div>
<!-- Pagination (Dots) --> <!-- Pagination -->
<div class="swiper-pagination news-pagination"></div> <div class="swiper-pagination news-pagination"></div>
</div> </div>
</div> </div>
</section> </section>
<!-- =========== FULL-WIDTH PROMO VIDEO SECTION START =========== --> <!--VIDEO-->
<section class="w-full bg-[rgba(39,39,39,1)] py-16 sm:py-24"> <section class="w-full bg-[rgba(39,39,39,1)] py-16 sm:py-24">
<div class="container mx-auto px-6"> <div class="container mx-auto px-6">
<!-- THIS IS THE DIV TO CHANGE -->
<div <div
class="relative w-full aspect-video bg-cover bg-center" class="relative w-full aspect-video bg-cover bg-center"
style="background-image: url('images/slider2.jpg');"> style="background-image: url('images/slider2.jpg');">
<!-- IMPORTANT: Change the path to your background image file -->
<!-- ADDED bg-cover, bg-center, and the inline style attribute -->
<!-- 1. YouTube Player Container (the iframe will be inserted here by JS) --> <!-- 1. YouTube Player Container (the iframe will be inserted here by JS) -->
<div class="absolute inset-0 z-0"> <div class="absolute inset-0 z-0">
@ -447,18 +435,18 @@
<div class="relative z-10 h-full flex items-center justify-start"> <div class="relative z-10 h-full flex items-center justify-start">
<div class="pl-8 sm:pl-16 lg:pl-24 text-left"> <div class="pl-8 sm:pl-16 lg:pl-24 text-left">
<!-- Custom Play Button (Gold circle on all screen sizes) --> <!-- Play Button -->
<button id="promo-video-play-btn" <button id="promo-video-play-btn"
class=" class="
flex items-center justify-center h-20 w-20 lg:h-24 lg:w-24 rounded-full flex items-center justify-center h-20 w-20 lg:h-24 lg:w-24 rounded-full
bg-[rgb(177,151,119)] bg-[rgb(177,151,119)]
transition-all duration-300 transform hover:scale-105"> transition-all duration-300 transform hover:scale-105">
<!-- White Play Icon SVG --> <!-- Icon -->
<svg class="w-8 h-8 lg:w-10 lg:h-10 text-white ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg> <svg class="w-8 h-8 lg:w-10 lg:h-10 text-white ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button> </button>
<!-- Text under the button -->
<p class="mt-4 text-white font-semibold">View Promo Video</p> <p class="mt-4 text-white font-semibold">View Promo Video</p>
</div> </div>
</div> </div>
@ -467,19 +455,13 @@
</div> </div>
</div> </div>
</section> </section>
<!-- =========== FULL-WIDTH PROMO VIDEO SECTION END =========== -->
<!-- =========== FULL-WIDTH PROMO VIDEO SECTION END =========== -->
<!-- =========== CURRENT NEWS SECTION END =========== -->
<!-- 4. Include Swiper's JS --> <!-- 4. Include Swiper's JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- 5. Initialize Swiper --> <!-- 5. Initialize Swiper -->
<script> <script>
// ===================================
// YOUTUBE API SCRIPT (PART 1 - GLOBAL SETUP)
// This loads the YouTube API and defines the functions it will call.
// This part MUST be outside the 'DOMContentLoaded' event listener.
// ===================================
const tag = document.createElement('script'); const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api"; tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0]; const firstScriptTag = document.getElementsByTagName('script')[0];
@ -487,8 +469,8 @@
let player; // This creates the 'player' variable so the whole script can access it. let player; // This creates the 'player' variable so the whole script can access it.
// --- IMPORTANT: REPLACE THIS ID WITH YOUR YOUTUBE VIDEO ID --- // --- YOUTUBE VIDEO ID ---
const YOUTUBE_VIDEO_ID = ''; const YOUTUBE_VIDEO_ID = '6L6b9p_q3vA';
// This special function is called automatically by the YouTube API when it's ready. // This special function is called automatically by the YouTube API when it's ready.
// This is where the 'player' variable gets its value. // This is where the 'player' variable gets its value.
@ -498,13 +480,13 @@
width: '100%', width: '100%',
videoId: YOUTUBE_VIDEO_ID, videoId: YOUTUBE_VIDEO_ID,
playerVars: { playerVars: {
'autoplay': 1, // Autoplay the video 'autoplay': 1,
'mute': 1, // Mute it (required for autoplay) 'mute': 1,
'controls': 0, // Hide the default YouTube controls 'controls': 0,
'showinfo': 0, // Hide video title 'showinfo': 0,
'rel': 0, // Do not show related videos 'rel': 0,
'loop': 1, // Loop the video 'loop': 1,
'playlist': YOUTUBE_VIDEO_ID, // Required for loop to work 'playlist': YOUTUBE_VIDEO_ID,
'playsinline': 1 // Important for mobile browsers 'playsinline': 1 // Important for mobile browsers
}, },
events: { events: {
@ -527,12 +509,12 @@
} }
} }
// ===================================
// MAIN SCRIPT (INITIALIZES SWIPERS & BUTTONS AFTER PAGE LOADS) // (INITIALIZES SWIPERS & BUTTONS AFTER PAGE LOADS)
// ===================================
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// 1. INITIALIZE THE HERO SLIDER // 1. INITIALIZE THE SLIDER
const heroSwiper = new Swiper('.hero-swiper', { const heroSwiper = new Swiper('.hero-swiper', {
direction: 'horizontal', direction: 'horizontal',
loop: true, loop: true,
@ -586,9 +568,9 @@
}, },
}); });
// ===================================
// YOUTUBE API SCRIPT (PART 2 - EVENT LISTENER FOR THE BUTTON) // YOUTUBE API SCRIPT ( EVENT LISTENER FOR THE BUTTON)
// ===================================
const playButton = document.getElementById('promo-video-play-btn'); const playButton = document.getElementById('promo-video-play-btn');
if (playButton) { if (playButton) {
playButton.addEventListener('click', () => { playButton.addEventListener('click', () => {

Write Preview
Loading…
Cancel
Save