Skip to content

Commit

Permalink
-delete footer2 and commint popular tags (#8)
Browse files Browse the repository at this point in the history 
-create Bread crumb file & link it with script js

Co-authored-by: abdulrahman <[email protected]>
  • Loading branch information
@abdulrahmankhaled00
abdulrahmankhaled00 and abdulrahman authored Oct 29, 2024
1 parent 682c74b commit 210d3d6
Show file tree
Hide file tree
Showing 8 changed files with 569 additions and 99 deletions.
22 changes: 22 additions & 0 deletions src/Breadcrumb.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<div class="w-full h-[72px] lg:px-[100px] justify-between xl:px-[150px] bg-[#F2F4F5] md:px-0 ">
<div class="flex items-center container mx-auto gap-2 pt-[26px]">
<img src="../assets/images/House.svg" alt="Home Icon">
<p class="text-[#5F6C72] font-normal text-sm">Home</p>
<img src="../assets/images/arrow.svg" alt="Arrow Icon">
<p class="text-[#5F6C72] font-normal text-sm">Pages</p>
<img src="../assets/images/arrow.svg" alt="Arrow Icon">
<p class="text-[#2DA5F3] text-sm font-medium">Track Order</p>
</div>
</div>

</body>
</html>
16 changes: 14 additions & 2 deletions src/PopUpBroductDetails.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@

<div class="relative z-20" aria-labelledby="modal-title" role="dialog" aria-modal="true">

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="relative z-20" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>

<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
Expand Down Expand Up @@ -184,4 +194,6 @@ <h2 class="mb-4 text-xl font-medium">HULK BUGS KILLER</h2>

</div>
</div>
</div>
</div>
</body>
</html>
140 changes: 140 additions & 0 deletions src/blueNavbar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="w-full">
<div class="w-full bg-[#1B6392] lg:px-[100px] justify-between xl:px-[150px] text-white px-4 py-1 border-b border-gray-400">
<div class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center text-sm py-2">
<span>Welcome to Clicon online eCommerce store.</span>
<div class="flex items-center gap-2 mt-2 sm:mt-0">
<span>Follow us:</span>
<div class="flex gap-3">
<a href="#"><img src="../assets/images/navTwitter.svg" alt="Twitter"></a>
<a href="#"><img src="../assets/images/navFacebook.svg" alt="Facebook"></a>
<a href="#"><img src="../assets/images/navPinterest.svg" alt="Pinterest"></a>
<a href="#"><img src="../assets/images/navReddit.svg" alt="Reddit"></a>
<a href="#"><img src="../assets/images/navYoutube.svg" alt="Youtube"></a>
<a href="#"><img src="../assets/images/navInstagram.svg" alt="Instagram"></a>
</div>
<div class="flex items-center gap-5">
<div class="relative">
<div class="ltr:border-l flex items-center gap-2 ltr:pl-5 cursor-pointer"
onclick="toggleLanguageMenu(event)">
<span>Eng</span>
<img src="../assets/images/CaretDown.svg" alt="Arrow">
</div>

<div id="languageDropdownMenu"
class="absolute hidden bg-white border rounded-md shadow-lg mt-2 left-0 z-10">
<ul class="py-2">
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">English</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">Arabic</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">French</li>
</ul>
</div>
</div>

<div class="relative">
<div class="flex items-center gap-2 cursor-pointer" onclick="toggleCurrencyMenu(event)">
<span>USD</span>
<img src="../assets/images/CaretDown.svg" alt="Arrow">
</div>

<div id="currencyDropdownMenu"
class="absolute hidden bg-white border rounded-md shadow-lg mt-2 left-0 z-10">
<ul class="py-2">
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">USD</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">EUR</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">GBP</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="bg-[#1B6392] py-4 lg:px-[100px] justify-between xl:px-[150px] px-4 border-b">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between">
<!-- Logo -->
<div class="flex items-center mb-4 md:mb-0">
<img src="../assets/images/navLogo.svg" alt="">
</div>

<!-- Search Bar -->
<div class="flex-1 w-full md:max-w-2xl md:mx-8 mb-4 md:mb-0">
<div class="relative">
<input type="text" placeholder="Search for anything..."
class="w-full md:w-[646px] h-[48px] rounded-2 focus:outline-none focus:ring-0" />
<button class="absolute ltr:right-10 rtl:left-10 top-3">
<img src="../assets/images/searchIcon.svg" alt="">
</button>
</div>
</div>

<!-- Right Section -->
<div class="flex items-center gap-4">
<button class="relative hover:text-blue-600">
<img src="../assets/images/whiteCart.svg" alt="Cart">
<span
class="absolute -top-2 -right-2 bg-white text-[#1B6392] text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
</button>
<button class="relative hover:text-blue-600">
<img src="../assets/images/whiteHeart.svg" alt="Heart">
</button>
<button class="hover:text-blue-600">
<img src="../assets/images/whiteUser.svg" alt="User">
</button>
</div>
</div>
</div>
<div class=" flex px-4 lg:px-[100px] justify-between xl:px-[150px] p-6 gap-4">
<div class="flex items-center gap-4 mb-4 md:mb-0">
<div class="relative">
<div class="w-[155px] h-[48px] flex items-center justify-center cursor-pointer gap-2 bg-[#F2F4F5] md:mx-0 mx-2"
onclick="toggleCategoryMenu(event)">
<span class="font-medium">All Category</span>
<img src="../assets/images/bCaretDown.svg" alt="Arrow">
</div>
<div id="categoryDropdownMenu"
class="w-[155px] absolute hidden bg-white border rounded-md shadow-lg mt-2 left-0 z-10">
<ul class="py-2">
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">Category 1</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">Category 2</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">Category 3</li>
</ul>
</div>
</div>
<div class="flex flex-wrap items-center gap-4 text-gray-600 md:px-0 px-2">
<a href="#" class="flex items-center gap-1 font-semibold text-[#FA8232]">
<img src="../assets/images/oMapPinLine.svg" alt="MapPinLine">
<span>Track Order</span>
</a>
<a href="#" class="flex items-center gap-1 font-normal text-[#5F6C72]">
<img src="../assets/images/ArrowsCounterClockwise.svg" alt="ClockClockwise">
<span>Compare</span>
</a>
<a href="#" class="flex items-center gap-1 font-normal text-[#5F6C72]">
<img src="../assets/images/gHeadphones.svg" alt="Headphones">
<span>Customer Support</span>
</a>
<a href="#" class="flex items-center gap-1 font-normal text-[#5F6C72]">
<img src="../assets/images/Info.svg" alt="Info">
<span>Need Help</span>
</a>
</div>
</div>

<div class="flex items-center gap-1 text-center md:px-0 px-2">
<img src="../assets/images/PhoneCall.svg" alt="Phone Call">
<span>+1-202-555-0104</span>
</div>
</div>

</div>
</body>
</html>
4 changes: 2 additions & 2 deletions src/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ <h2 class="px-2 text-white text-base font-medium font-['Public Sans'] uppercase
</div>
</div>
</div>

<!--
<div class="flex-col justify-start items-start grow gap-4">
<h2 class="text-white text-base font-medium font-['Public Sans'] uppercase leading-normal">Popular Tags</h2>
<div class="flex-col justify-start items-start gap-2">
Expand Down Expand Up @@ -184,7 +184,7 @@ <h2 class="text-white text-base font-medium font-['Public Sans'] uppercase leadi
</button>
</div>
</div>
</div>
</div> -->

</div>
</body>
Expand Down
78 changes: 0 additions & 78 deletions src/footer2.html
View file

This file was deleted.

64 changes: 49 additions & 15 deletions src/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,44 @@ document.addEventListener("DOMContentLoaded", function() {
}
});

ProductDetailsSwiper= new Swiper(".multiple-slide-carousel-ProductDetails", {


//
document.getElementById('countries-button').addEventListener('click', function() {
const dropdown = document.getElementById('dropdown-countries');
dropdown.classList.toggle('hidden');
});
})
.catch(error => console.log('Error loading the categoriesSlider:', error));

});

document.addEventListener("DOMContentLoaded", function() {
fetch('bestDeals.html')
.then(response => response.text())
.then(data => {
document.getElementById('bestDeals').innerHTML = data;
})
.catch(error => console.log('Error loading the bestDeals:', error));

});
document.addEventListener("DOMContentLoaded", function() {
fetch('featursProducts.html')
.then(response => response.text())
.then(data => {
document.getElementById('featursProducts').innerHTML = data;
})
.catch(error => console.log('Error loading the featursProducts:', error));

});

document.addEventListener("DOMContentLoaded", function() {
fetch('PopUpBroductDetails.html')
.then(response => response.text())
.then(data => {
document.getElementById('PopUpBroductDetails').innerHTML = data;

ProductDetailsSwiper= new Swiper(".multiple-slide-carousel-ProductDetails", {
loop: true,
slidesPerView: 2,
spaceBetween: 10,
Expand All @@ -180,32 +217,29 @@ document.addEventListener("DOMContentLoaded", function() {

}
})

//
document.getElementById('countries-button').addEventListener('click', function() {
const dropdown = document.getElementById('dropdown-countries');
dropdown.classList.toggle('hidden');
});
})
.catch(error => console.log('Error loading the categoriesSlider:', error));
.catch(error => console.log('Error loading the PopUpBroductDetails:', error));

});

document.addEventListener("DOMContentLoaded", function() {
fetch('bestDeals.html')
fetch('blueNavbar.html')
.then(response => response.text())
.then(data => {
document.getElementById('bestDeals').innerHTML = data;
document.getElementById('blueNavbar').innerHTML = data;


})
.catch(error => console.log('Error loading the bestDeals:', error));
.catch(error => console.log('Error loading the blueNavbar:', error));

});
document.addEventListener("DOMContentLoaded", function() {
fetch('featursProducts.html')
fetch('Breadcrumb.html')
.then(response => response.text())
.then(data => {
document.getElementById('featursProducts').innerHTML = data;
document.getElementById('Breadcrumb').innerHTML = data;


})
.catch(error => console.log('Error loading the featursProducts:', error));
.catch(error => console.log('Error loading the Breadcrumb:', error));

});
Loading

0 comments on commit 210d3d6

Please sign in to comment.