diff --git a/Loader/Loader.css b/Loader/Loader.css index 73aafd5c..478c1b70 100644 --- a/Loader/Loader.css +++ b/Loader/Loader.css @@ -1,44 +1,102 @@ +/* Enhanced Loader Styling */ .loader { - width: 120px; /* Adjust size */ - height: 120px; /* Adjust size */ - position: fixed; /* Stay fixed in the center */ + width: 100px; + height: 100px; + position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; + border: 10px solid rgba(0, 0, 0, 0.1); + border-top: 10px solid #3498db; /* Main color for the loader */ + border-radius: 50%; + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */ + animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; /* Smoother, slower animation */ } -/* Main content styling */ +/* Adding a glowing pulse effect to the loader */ +.loader::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 70px; + height: 70px; + background: radial-gradient(circle, #f39c12 0%, #e8491d 100%); /* Dynamic gradient */ + border-radius: 50%; + transform: translate(-50%, -50%) scale(0.8); + box-shadow: 0 0 20px rgba(255, 105, 180, 0.6), 0 0 40px rgba(255, 105, 180, 0.4); /* Soft glow */ + animation: pulsate 1.2s ease-in-out infinite, colorChange 3s ease-in-out infinite; /* Add color change effect */ +} + +/* Main content styling remains the same */ .main-content { display: none; opacity: 0; + transition: opacity 0.5s ease; } -/* Show content when page is loaded */ +/* Hide loader and show content when the page is loaded */ body.loaded .loader { - display: none; /* Hide loader */ + display: none; } body.loaded .main-content { - display: block; /* Show main content */ - animation: fadeIn 1s ease-in-out forwards; /* Fade in animation */ -} - -body.loaded .popup { - display: flex; /* Show popup after loading */ + display: block; + animation: fadeIn 1s ease-in-out forwards; } /* Smooth fade-in effect for content */ @keyframes fadeIn { + from { + opacity: 0; + } to { opacity: 1; } } -/* Body styling to prevent scrolling while the loader is visible */ +/* Spin animation for loader */ +@keyframes spin { + 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg); + } +} + +/* Pulsating animation for inner circle */ +@keyframes pulsate { + 0% { + transform: translate(-50%, -50%) scale(0.8); + } + 50% { + transform: translate(-50%, -50%) scale(1.1); /* Slightly bigger pulsate */ + } + 100% { + transform: translate(-50%, -50%) scale(0.8); + } +} + +/* Color change animation */ +@keyframes colorChange { + 0% { + background: radial-gradient(circle, #f39c12 0%, #e8491d 100%); + } + 50% { + background: radial-gradient(circle, #8e44ad 0%, #3498db 100%); + } + 100% { + background: radial-gradient(circle, #f39c12 0%, #e8491d 100%); + } +} + +/* Prevent scrolling while the loader is visible */ body { margin: 0; padding: 0; - overflow: hidden; /* Prevent scrolling while loader is visible */ + overflow: hidden; background-color: #f0f4f8; -} + transition: background-color 0.5s ease; +} \ No newline at end of file diff --git a/aboutus.html b/aboutus.html index 7906eda4..a350a18f 100644 --- a/aboutus.html +++ b/aboutus.html @@ -23,7 +23,7 @@ margin: 0; padding: 0; background-color: white; - + transition: background-color 0.5s ease; /* Smooth transition for background color */ } .container { @@ -49,11 +49,13 @@ h1{ color: rgb(255, 255, 255); text-align: center; - transition: transform 0.3s ease-in-out; + /* transition: transform 0.3s ease-in-out; */ + transition: transform 0.3s ease-in-out, color 0.3s ease; /* Added color transition */ } h1:hover { transform: scale(1.2); + color: #f4be0c; /* Change color on hover for visual feedback */ } h2{ @@ -75,13 +77,17 @@ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; text-align: center; + position: relative; /* Positioning context for hover effects */ + overflow: hidden; /* Prevents overflow for scaling effects */ } .feature:hover { - transform: translateX(-5px); - box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15); + /* transform: translateX(-5px); */ + transform: translateY(-5px); /* Smooth upward shift */ + /* box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15); */ + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */ } .feature h3 { @@ -98,7 +104,8 @@ font-size: 48px; color: #e8491d; margin-bottom: 15px; - transition: all 0.3s ease; + /* transition: all 0.3s ease; */ + transition: transform 0.3s ease; /* Smooth scaling */ } .feature:hover .feature-icon { @@ -112,6 +119,7 @@ font-size: 18px; color: #d0c3df; font-weight: 600; + transition: color 0.3s ease; /* Smooth color transition */ } .rocket { @@ -285,7 +293,7 @@

FAQs Section

- Controller + Controller
@@ -222,7 +222,7 @@

Wireless Controllers for Nintendo Switch

Controller + alt="Controller" loading="lazy">
@@ -254,7 +254,7 @@

VR Headset from Meta

Controller + alt="Controller" loading="lazy">
@@ -286,7 +286,7 @@

VR Headset from Apple

Controller + alt="Controller" loading="lazy">
@@ -317,7 +317,7 @@

High Performance Gaming Mouse

- Gaming Mouse + Gaming Mouse
@@ -348,7 +348,7 @@

Mechanical Gaming Keyboard

- Gaming Keyboard + Gaming Keyboard
@@ -379,7 +379,7 @@

Wireless Gaming Headset

- Gaming Headset + Gaming Headset
@@ -410,7 +410,7 @@

Ergonomic Gaming Chair

- Gaming Chair + Gaming Chair
@@ -491,7 +491,7 @@

Sarah malik

  • - +

    Shopping on this website was a breeze! I love how user-friendly the interface is; @@ -508,7 +508,7 @@

    John Doe

  • - +

    My order arrived much faster than I anticipated, which was a huge plus. The @@ -525,7 +525,7 @@

    Alex Johnson

  • - +

    As a serious gamer, I always look for high-quality gear that can enhance my @@ -566,7 +566,7 @@

    Contact Our Customer Support Team

    - Contact Image
    @@ -595,7 +595,7 @@

    Contact Our Customer Support Team