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>
<meta charset="UTF-8">
<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 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"/>
<style>
/* Navbar transition */
.nav-menu {
transition: max-height 0.5s ease-in-out;
}
/* Custom animation for the text sliding up */
/* animation for the text sliding up */
@keyframes slideInUp {
from {
opacity: 0;
@ -29,12 +28,11 @@
}
}
/* Class to trigger the animation */
.animate-slide-in-up {
animation: slideInUp 0.8s ease-out forwards;
}
/* Generic styling for ALL pagination dots */
/* ALL pagination dots */
.swiper-pagination-bullet {
width: 12px;
height: 12px;
@ -42,23 +40,18 @@
opacity: 1;
}
/* Generic styling for ALL ACTIVE pagination dots */
/* ALL active pagination dots */
.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,
.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
in the normal document flow, below the slider content. */
margin-top: 3rem !important;
position: relative !important;
bottom: auto !important;
}
@ -67,9 +60,9 @@
</head>
<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">
<!-- ... your navbar code ... -->
<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>
<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>
</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 -->
<!-- Swiper -->
<div class="swiper hero-swiper h-full w-full">
<div class="swiper-wrapper">
<!-- Slide 1 -->
@ -116,21 +108,25 @@
</div>
<!-- Pagination (Circles) - Hidden on mobile, visible on large screens -->
<!-- Pagination -->
<div class="swiper-pagination hidden lg:block"></div>
</div>
</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">
<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">
<!-- Left Column: Text Content -->
<!-- left partText Content -->
<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">
<h2 class="text-4xl font-semibold text-white">ABOUT</h2>
<h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">BAUEN</h2>
@ -149,14 +145,10 @@
</p>
</div>
<!-- Right Column: Image and Office Box (Corrected) -->
<!-- Right Column image -->
<div class="lg:w-1/2 w-full pl-20">
<!--
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.
-->
<!--the image and the box will both be inside this div. -->
<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">
@ -171,36 +163,36 @@
</div>
</div>
</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">
<div class="container mx-auto px-6">
<!-- Section Title: "Our PROJECTS" -->
<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-[rgb(177,151,119)]">Projects</h2>
</div>
<!-- Swiper container with relative positioning for pagination -->
<!-- Swiper -->
<div class="relative">
<!-- Swiper instance with a unique class 'projects-swiper' -->
<div class="swiper projects-swiper">
<div class="swiper-wrapper">
<!-- SLIDE 1 (Contains two projects) -->
<!-- SLIDE 1 2proj -->
<div class="swiper-slide">
<div class="grid grid-cols-2 md:grid-cols-2 gap-8">
<!-- Project 1 -->
<div class="project-card">
<!-- Image with hover effects wrapper -->
<div class="relative group overflow-hidden ">
<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>
<!-- Text Block Container (Title and Type) -->
<!-- Text -->
<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>
<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>
</div>
</div>
<!-- The text under the image has been REMOVED from here -->
</div>
<!-- Project 2 -->
<div class="project-card">
@ -230,7 +222,7 @@
</div>
</div>
<!-- SLIDE 2 (Contains another two projects) -->
<!-- SLIDE 2 also 2 proj -->
<div class="swiper-slide">
<div class="grid grid-cols-2 md:grid-cols-2 gap-8">
<!-- Project 3 -->
@ -267,28 +259,27 @@
</div>
</div>
<!-- Pagination (Dots) - REPLACED the navigation buttons -->
<!-- Pagination -->
<div class="swiper-pagination projects-pagination"></div>
</div>
</div>
</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">
<div class="container mx-auto px-6">
<!-- Section Title -->
<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">
<!-- 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)] ">
<!-- Icon/Image -->
<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>
<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.
@ -300,12 +291,11 @@
</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)] ">
<!-- Icon/Image -->
<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>
<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.
@ -317,12 +307,12 @@
</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)] ">
<!-- Icon/Image -->
<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>
<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.
@ -338,21 +328,20 @@
</div>
</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">
<div class="container mx-auto px-6">
<!-- Section Title: "Current NEWS" -->
<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-[rgb(177,151,119)]">News</h2>
</div>
<!-- Swiper container with relative positioning for pagination -->
<!-- Swiper -->
<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">
<!-- SLIDE 1 (Contains two news items) -->
@ -362,7 +351,7 @@
<div class="news-card relative group">
<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
-translate-x-1/2 translate-y-1/2
bg-[rgba(39,39,39,255)] border border-gray-700
@ -377,7 +366,7 @@
<div class="news-card relative group">
<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
-translate-x-1/2 translate-y-1/2
bg-[rgba(39,39,39,255)] border border-gray-700
@ -416,21 +405,20 @@
</div>
</div>
<!-- Pagination (Dots) -->
<!-- Pagination -->
<div class="swiper-pagination news-pagination"></div>
</div>
</div>
</section>
<!-- =========== FULL-WIDTH PROMO VIDEO SECTION START =========== -->
<!--VIDEO-->
<section class="w-full bg-[rgba(39,39,39,1)] py-16 sm:py-24">
<div class="container mx-auto px-6">
<!-- THIS IS THE DIV TO CHANGE -->
<div
class="relative w-full aspect-video bg-cover bg-center"
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) -->
<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="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"
class="
flex items-center justify-center h-20 w-20 lg:h-24 lg:w-24 rounded-full
bg-[rgb(177,151,119)]
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>
</button>
<!-- Text under the button -->
<p class="mt-4 text-white font-semibold">View Promo Video</p>
</div>
</div>
@ -467,19 +455,13 @@
</div>
</div>
</section>
<!-- =========== FULL-WIDTH PROMO VIDEO SECTION END =========== -->
<!-- =========== FULL-WIDTH PROMO VIDEO SECTION END =========== -->
<!-- =========== CURRENT NEWS SECTION END =========== -->
<!-- 4. Include Swiper's JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- 5. Initialize Swiper -->
<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');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
@ -487,8 +469,8 @@
let player; // This creates the 'player' variable so the whole script can access it.
// --- IMPORTANT: REPLACE THIS ID WITH YOUR YOUTUBE VIDEO ID ---
const YOUTUBE_VIDEO_ID = '';
// --- YOUTUBE VIDEO ID ---
const YOUTUBE_VIDEO_ID = '6L6b9p_q3vA';
// This special function is called automatically by the YouTube API when it's ready.
// This is where the 'player' variable gets its value.
@ -498,13 +480,13 @@
width: '100%',
videoId: YOUTUBE_VIDEO_ID,
playerVars: {
'autoplay': 1, // Autoplay the video
'mute': 1, // Mute it (required for autoplay)
'controls': 0, // Hide the default YouTube controls
'showinfo': 0, // Hide video title
'rel': 0, // Do not show related videos
'loop': 1, // Loop the video
'playlist': YOUTUBE_VIDEO_ID, // Required for loop to work
'autoplay': 1,
'mute': 1,
'controls': 0,
'showinfo': 0,
'rel': 0,
'loop': 1,
'playlist': YOUTUBE_VIDEO_ID,
'playsinline': 1 // Important for mobile browsers
},
events: {
@ -527,12 +509,12 @@
}
}
// ===================================
// MAIN SCRIPT (INITIALIZES SWIPERS & BUTTONS AFTER PAGE LOADS)
// ===================================
// (INITIALIZES SWIPERS & BUTTONS AFTER PAGE LOADS)
document.addEventListener('DOMContentLoaded', function () {
// 1. INITIALIZE THE HERO SLIDER
// 1. INITIALIZE THE SLIDER
const heroSwiper = new Swiper('.hero-swiper', {
direction: 'horizontal',
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');
if (playButton) {
playButton.addEventListener('click', () => {

Write Preview
Loading…
Cancel
Save