Skip to content

Commit

Permalink
Add Sidebar and responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@asmaamostafa74
asmaamostafa74 committed Oct 26, 2024
1 parent 38b28c6 commit 260a997
Show file tree
Hide file tree
Showing 16 changed files with 366 additions and 221 deletions.
3 changes: 3 additions & 0 deletions assets/images/Star.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/mobileImage.webp
View file
Binary file not shown.
Binary file added assets/images/mobileImage2.webp
View file
Binary file not shown.
6 changes: 3 additions & 3 deletions src/aboutUa.html → src/aboutUs.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="ar">
<html lang="ar" dir="ltr">

<head>
<meta charset="UTF-8">
Expand All @@ -21,7 +21,7 @@

<!-- Start Content -->
<section class="container mx-auto flex md:flex-row flex-col md:items-center justify-center gap-20 m-20 ltr:pl-5 ltr:md:pl-0 rtl:pr-5 rtl:md:pr-0 ">
<div class="mt-32">
<div class="sm:mt-32 ml-5 sm:ml-0">
<p class="flex items-center justify-center text-[#FFFFFF] text-sm font-semibold uppercase bg-[#2DA5F3] w-[124px] h-[36px]">who we are</p>
<h1 class="text-[#191C1F] md:text-[40px] text-2xl leading-[48px] font-semibold md:w-[536px] mt-3">Kinbo - largest electronics retail shop in the world.</h1>
<p class="md:w-[536px] text-[#475156] text-base mt-6">Pellentesque ultrices, dui vel hendrerit iaculis, ipsum velit vestibulum risus, ac tincidunt diam lectus id magna. Praesent maximus lobortis neque sit amet rhoncus. Nullam tempus lectus a dui aliquet, non ultricies nibh elementum. Nulla ac nulla dolor. </p>
Expand All @@ -45,7 +45,7 @@ <h1 class="text-[#191C1F] md:text-[40px] text-2xl leading-[48px] font-semibold m
</ul>
</div>
<div>
<img src="../assets/images/aboutUsImg.webp" class="mt-[72px]" alt="About Us">
<img src="../assets/images/aboutUsImg.webp" class="sm:mt-[72px]" alt="About Us">
</div>
</section>
<!-- End Content -->
Expand Down
144 changes: 72 additions & 72 deletions src/blog.html
View file

Large diffs are not rendered by default.

24 changes: 12 additions & 12 deletions src/blogDetails.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@

<!-- Start Blog Details -->
<div class="container mx-auto">
<img src="../assets/images/blogDetails.webp" alt="Blog Details" class="w-[1320px] h-[740px] mt-[72px] mb-12 object-cover">
<img src="../assets/images/blogDetails.webp" alt="Blog Details" class="sm:w-[1320px] w-full sm:h-[740px] h-full mt-[72px] mb-12 object-cover">
<div class="flex items-center gap-4 mt-6 mb-4">
<ul class="flex items-center gap-[2px]">
<img src="../assets/images/Stack.svg" alt="Stack">
Expand All @@ -55,8 +55,8 @@
<li class="text-[#475156]">738</li>
</ul>
</div>
<h1 class="md:w-[872px] text-[#191C1F] text-[32px] font-semibold mb-6">How artist collective Meow Wolf’s website complements their immersive venues</h1>
<div class="flex items-center gap-96 mb-[32px]">
<h1 class="md:w-[872px] text-[#191C1F] md:text-[32px] text-lg font-semibold mb-6 px-2 sm:px-0 leading-[40px]">How artist collective Meow Wolf’s website complements their immersive venues</h1>
<div class="flex md:flex-row flex-col md:items-center md:gap-96 gap-5 mb-[32px] px-2 sm:px-0">
<div class="flex items-center gap-3">
<img src="../assets/images/Images.webp" alt="Blog Image" class="w-[40px] h-[40px]">
<p class="text-[#191C1F] text-base font-medium">Cameron Williamson</p>
Expand All @@ -70,22 +70,22 @@ <h1 class="md:w-[872px] text-[#191C1F] text-[32px] font-semibold mb-6">How artis
<img src="../assets/images/copyLink.svg" alt="Link" class="w-[40px] h-[40px] cursor-pointer">
</div>
</div>
<p class="text-[#475156] mb-[32px]">Sed a laoreet erat, in vehicula erat. Vivamus a viverra ipsum, ut interdum tellus. Donec quis ex quis metus sodales facilisis ut nec ex. Ut commodo lacus vel odio venenatis, sit amet lacinia lacus cursus. Ut sodales laoreet dapibus. Sed aliquam nisl odio, sed blandit erat placerat sed. Mauris eleifend, magna in convallis congue, orci est fermentum leo, at tincidunt massa ligula semper dolor. Nunc tristique enim in risus tristique rutrum eget ac eros.</p>
<p class="text-[#475156] mb-[32px] px-2 sm:px-0">Sed a laoreet erat, in vehicula erat. Vivamus a viverra ipsum, ut interdum tellus. Donec quis ex quis metus sodales facilisis ut nec ex. Ut commodo lacus vel odio venenatis, sit amet lacinia lacus cursus. Ut sodales laoreet dapibus. Sed aliquam nisl odio, sed blandit erat placerat sed. Mauris eleifend, magna in convallis congue, orci est fermentum leo, at tincidunt massa ligula semper dolor. Nunc tristique enim in risus tristique rutrum eget ac eros.</p>
</div>
<div class="w-full h-[164px] bg-[#FFF3EB] ltr:border-l-4 rtl:border-r-4 border-[#FA8232] pl-[40px] pt-[40px]">
<div class="container mx-auto flex items-center gap-6">
<img src="../assets/images/quotes.svg" class="transform rtl:scale-x-[-1] ltr:scale-x-100" alt="Quotes">
<p class="w-[712px] text-[#191C1F]">Vintage meets vogue is the only way to describe this serif typeface. Neue World encompasses the mode high-fashion aesthetic of the 1960s with a commercial take.</p>
<div class="w-full h-[164px] bg-[#FFF3EB] ltr:border-l-4 rtl:border-r-4 border-[#FA8232] md:pl-[40px] pt-[40px]">
<div class="container mx-auto flex items-center md:gap-6">
<img src="../assets/images/quotes.svg" class="w--14 h-14 transform rtl:scale-x-[-1] ltr:scale-x-100" alt="Quotes">
<p class="md:w-[712px] text-[#191C1F] px-4">Vintage meets vogue is the only way to describe this serif typeface. Neue World encompasses the mode high-fashion aesthetic of the 1960s with a commercial take.</p>
</div>
</div>
<div class="container mx-auto">
<p class="text-[#475156] text-base w-[872px] mt-[32px] mb-4">Mauris fermentum faucibus risus a efficitur. Morbi sit amet arcu turpis. Ut nisl velit, mattis at augue vel, molestie egestas justo. Aliquam elementum nibh neque, eu ornare nunc feugiat sed. Aliquam erat volutpat. Praesent vitae orci blandit, semper felis ac, interdum lacus.</p>
<p class="text-[#475156] text-base w-[872px] mt-[32px] mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis nunc urna, id lobortis elit dapibus et. Etiam ultricies leo justo, nec vehicula augue auctor et. Sed finibus volutpat dui. Nunc vitae urna dictum tellus luctus tincidunt quis feugiat dolor. Aliquam malesuada tristique urna, quis ornare diam venenatis quis. Nunc ligula lectus, posuere sit amet ultrices ut, porttitor efficitur mauris. Aliquam bibendum vitae turpis sed molestie. Donec massa lorem, semper vel pellentesque ut, ultrices in enim. Sed fringilla, mi porttitor sodales vehicula, felis enim gravida nisi, at mollis ante leo et ligula. Quisque non aliquam eros, in aliquet tellus. Mauris ullamcorper quam erat, vehicula rhoncus velit interdum eget.</p>
<div class="flex items-center gap-6 mb-[32px]">
<p class="text-[#475156] text-base md:w-[872px] px-2 sm:px-0 mt-[32px] mb-4">Mauris fermentum faucibus risus a efficitur. Morbi sit amet arcu turpis. Ut nisl velit, mattis at augue vel, molestie egestas justo. Aliquam elementum nibh neque, eu ornare nunc feugiat sed. Aliquam erat volutpat. Praesent vitae orci blandit, semper felis ac, interdum lacus.</p>
<p class="text-[#475156] text-base md:w-[872px] px-2 sm:px-0 mt-[32px] mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis nunc urna, id lobortis elit dapibus et. Etiam ultricies leo justo, nec vehicula augue auctor et. Sed finibus volutpat dui. Nunc vitae urna dictum tellus luctus tincidunt quis feugiat dolor. Aliquam malesuada tristique urna, quis ornare diam venenatis quis. Nunc ligula lectus, posuere sit amet ultrices ut, porttitor efficitur mauris. Aliquam bibendum vitae turpis sed molestie. Donec massa lorem, semper vel pellentesque ut, ultrices in enim. Sed fringilla, mi porttitor sodales vehicula, felis enim gravida nisi, at mollis ante leo et ligula. Quisque non aliquam eros, in aliquet tellus. Mauris ullamcorper quam erat, vehicula rhoncus velit interdum eget.</p>
<div class="flex md:flex-row flex-col items-center gap-6 mb-[32px]">
<img src="../assets/images/blog1.webp" class="w-[424px] h-[424px]" alt="Blog Image">
<img src="../assets/images/blog2.webp" class="w-[424px] h-[424px]" alt="Blog Image">
</div>
<p class="text-[#475156] text-base mb-[72px]">Proin pulvinar quam at aliquet sagittis. Quisque laoreet luctus bibendum. Aenean in dignissim orci. Suspendisse at augue eget neque dictum vestibulum eu ac orci. Integer imperdiet lectus nec urna mollis euismod. Proin et risus nulla. Cras at diam in risus feugiat accumsan. Nulla sit amet blandit mi, a convallis mauris. Quisque lacus dolor, cursus ac quam ac, tempus ultrices sem. Ut porttitor.</p>
<p class="text-[#475156] text-base mb-[72px] px-2 sm:px-0">Proin pulvinar quam at aliquet sagittis. Quisque laoreet luctus bibendum. Aenean in dignissim orci. Suspendisse at augue eget neque dictum vestibulum eu ac orci. Integer imperdiet lectus nec urna mollis euismod. Proin et risus nulla. Cras at diam in risus feugiat accumsan. Nulla sit amet blandit mi, a convallis mauris. Quisque lacus dolor, cursus ac quam ac, tempus ultrices sem. Ut porttitor.</p>
</div>
<!-- End Blog Details -->

Expand Down
59 changes: 34 additions & 25 deletions src/customerSupport.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@
<span class="bg-[#EFD33D] uppercase p-3 rounded-[2px] font-semibold">Help Center</span>
<h1 class="text-3xl font-semibold mt-5">How we can help you!</h1>
<div class="relative">
<input type="text" placeholder="Enter your question or keyword" class="md:w-[536px] w-full h-[72px] mt-6 px-14 py-2 border border-[#E4E7E9] rounded-md focus:outline-none focus:ring-2 focus:ring-[#FA8232]">
<input type="text" placeholder="Enter your question" class="md:w-[536px] w-full h-[72px] mt-6 px-14 py-2 border border-[#E4E7E9] rounded-md focus:outline-none focus:ring-2 focus:ring-[#FA8232]">
<div class="absolute inset-y-16 ltr:left-4 rtl:right-4 flex items-center">
<img src="../assets/images/MagnifyingGlass.svg" alt="Search">
</div>
<div class="absolute inset-y-[60px] md:ltr:left-[420px] ltr:left-[260px] rtl:right-[420px] flex items-center">
<a href="#" class="text-white bg-[#FA8232] uppercase w-[108px] h-[48px] flex items-center justify-center rounded-[2px]">Search</a>
<div class="absolute inset-y-[60px] md:ltr:left-[420px] ltr:left-[240px] md:rtl:right-[420px] rtl:right-[240px] flex items-center">
<a href="#" class="text-white bg-[#FA8232] uppercase md:w-[108px] w-[80px] h-[48px] flex items-center justify-center rounded-[2px]">Search</a>
</div>
</div>
</div>
Expand All @@ -54,46 +54,39 @@ <h1 class="text-3xl font-semibold mt-5">How we can help you!</h1>
<section class="container mx-auto my-[72px] md:p-0 p-5">
<h1 class="text-[#191C1F] md:text-[32px] text-lg font-semibold flex justify-center">What can we assist you with today?</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 mt-[40px] px-5 md:px-0">
<!-- Team Member 1 -->
<div class="border border-[#FA8232] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
<div class="border border-[#FA8232] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="track">
<img src="../assets/images/Truck.svg" alt="Truck">
<p class="text-[#191C1F] text-base font-medium">Track Order</p>
</div>

<!-- Team Member 2 -->
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="reset">
<img src="../assets/images/LockOpen.svg" alt="Reset Password">
<p class="text-[#191C1F] text-base font-medium">Reset Password</p>
</div>

<!-- Team Member 3 -->
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="payment">
<img src="../assets/images/oCreditCard.svg" alt="Credit Card">
<p class="text-[#191C1F] text-base font-medium">Payment Option</p>
</div>

<!-- Team Member 4 -->
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="user">
<img src="../assets/images/User.svg" alt="User">
<p class="text-[#191C1F] text-base font-medium">User & Account</p>
</div>

<!-- Team Member 5 -->
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="wishlist">
<img src="../assets/images/Stack.svg" alt="Wishlist">
<p class="text-[#191C1F] text-base font-medium">Wishlist</p>
</div>

<!-- Team Member 6 -->
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="shipping">
<img src="../assets/images/Notepad.svg" alt="Notepad">
<p class="text-[#191C1F] text-base font-medium">Shipping & Billing</p>
</div>

<!-- Team Member 7 -->
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
<div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="cart">
<img src="../assets/images/oCreditCard.svg" alt="Credit Card">
<p class="text-[#191C1F] text-base font-medium">Shoping Cart</p>
<p class="text-[#191C1F] text-base font-medium">Shopping Cart</p>
</div>
</div>
</section>
Expand All @@ -103,7 +96,7 @@ <h1 class="text-[#191C1F] md:text-[32px] text-lg font-semibold flex justify-cent
<!-- Popular Topics -->
<section class="container mx-auto my-[72px]">
<h1 class="text-[#191C1F] text-[32px] font-semibold flex justify-center">Popular Topics</h1>
<div class="flex md:flex-row flex-col items-center justify-center md:gap-44 mt-[40px] gap-10 px-5 md:px-0">
<div class="flex md:flex-row flex-col md:items-center justify-center md:gap-44 mt-[40px] gap-10 px-10 md:px-0">
<ul class="list-disc">
<li class="text-[#191C1F] text-base mb-4">How do I return my item?</li>
<li class="text-[#FA8232] text-base mb-4">What is Clicons Returns Policy?</li>
Expand All @@ -129,26 +122,26 @@ <h1 class="text-[#191C1F] text-[32px] font-semibold flex justify-center">Popular
<span class="uppercase text-white bg-[#2DA5F3] w-[121px] h-[36px] rounded-[2px] flex items-center justify-center">Contact Us</span>
<p class="text-[#191C1F] md:text-[32px] text-lg font-semibold text-center mt-4 mb-[40px] leading-[40px]">Don’t find your answer. <br> Contact with us</p>
<div class="flex md:flex-row flex-col gap-10">
<!-- Card1 -->
<div class="md:w-[536px] h-[256px] bg-white flex gap-6">

<div class="md:w-[536px] h-[256px] bg-white flex gap-6 mx-1 sm:mx-0">
<img src="../assets/images/phoneIcon.svg" class="w-24 h-24 mt-8 ltr:ml-8 rtl:mr-8" alt="Phone">
<div class="mt-8">
<h1 class="text-[#191C1F] font-semibold text-lg">Call us now</h1>
<p class="text-[#5F6C72] font-normal text-sm mt-2 mb-4">we are available online from 9:00 AM to 5:00 PM <br> (GMT95:45) Talk with use now</p>
<span class="text-[#191C1F] text-2xl">+1-202-555-0126</span>
<span class="text-[#191C1F] sm:text-2xl text-lg">+1-202-555-0126</span>
<a href="#" class="uppercase text-white rounded-[2px] bg-[#2DA5F3] w-[152px] h-[48px] flex items-center justify-center mt-6 gap-2">
call now
<img src="../assets/images/ArrowRight.svg" alt="Arrow Right">
</a>
</div>
</div>
<!-- Card 2 -->
<div class="md:w-[536px] h-[256px] bg-white flex gap-6">

<div class="md:w-[536px] h-[256px] bg-white flex gap-6 mx-1 sm:mx-0">
<img src="../assets/images/megIcon.svg" class="w-24 h-24 mt-8 ltr:ml-8 rtl:mr-8" alt="Message">
<div class="mt-8">
<h1 class="text-[#191C1F] font-semibold text-lg">Chat with us</h1>
<p class="text-[#5F6C72] font-normal text-sm mt-2 mb-4">we are available online from 9:00 AM to 5:00 PM <br> (GMT95:45) Talk with use now</p>
<span class="text-[#191C1F] text-2xl">[email protected]</span>
<span class="text-[#191C1F] sm:text-2xl text-lg">[email protected]</span>
<a href="#" class="uppercase text-white rounded-[2px] bg-[#2DB224] w-[168px] h-[48px] flex items-center justify-center mt-6 gap-2">
Contact Us
<img src="../assets/images/ArrowRight.svg" alt="Arrow Right">
Expand All @@ -163,5 +156,21 @@ <h1 class="text-[#191C1F] font-semibold text-lg">Chat with us</h1>
<!-- Start Footer -->
<div id="footer"></div>
<!-- End Footer -->

<script>
const items = document.querySelectorAll('.item');

items.forEach(item => {
item.addEventListener('click', () => {
items.forEach(i => {
i.classList.remove('border-[#FA8232]');
i.classList.add('border-[#FFE7D6]');
});

item.classList.remove('border-[#FFE7D6]');
item.classList.add('border-[#FA8232]');
});
});
</script>
</body>
</html>
Loading

0 comments on commit 260a997

Please sign in to comment.