From f22c824da671cfcc457994e85379fee038ebd47f Mon Sep 17 00:00:00 2001 From: 13Sharad <143598174+13Sharad@users.noreply.github.com> Date: Wed, 23 Oct 2024 03:10:12 +0530 Subject: [PATCH 1/2] Adding Animations effect. --- Loader/Loader.css | 26 ++++++++++++++++++++++++++ aboutus.html | 20 ++++++++++++++------ index.html | 30 +++++++++++++++--------------- 3 files changed, 55 insertions(+), 21 deletions(-) diff --git a/Loader/Loader.css b/Loader/Loader.css index 73aafd5c..7746a7e3 100644 --- a/Loader/Loader.css +++ b/Loader/Loader.css @@ -6,12 +6,14 @@ left: 50%; transform: translate(-50%, -50%); z-index: 9999; + animation: spin 1s linear infinite; /* Add spinning animation to loader */ } /* Main content styling */ .main-content { display: none; opacity: 0; + transition: opacity 0.5s ease; /* Smooth transition for opacity */ } /* Show content when page is loaded */ @@ -30,15 +32,39 @@ body.loaded .popup { /* Smooth fade-in effect for content */ @keyframes fadeIn { + from { + opacity: 0; /* Start from invisible */ + } to { opacity: 1; } } +@keyframes spin { + 0% { + transform: translate(-50%, -50%) rotate(0deg); /* Start rotation */ + } + 100% { + transform: translate(-50%, -50%) rotate(360deg); /* Complete rotation */ + } +} + /* Body styling to prevent scrolling while the loader is visible */ body { margin: 0; padding: 0; overflow: hidden; /* Prevent scrolling while loader is visible */ background-color: #f0f4f8; + transition: background-color 0.5s ease; /* Smooth background color transition */ } + +/* Optional: Add a loading animation style */ +.loader:before { + content: ''; + width: 100%; + height: 100%; + border: 10px solid #ccc; /* Light gray border */ + border-top: 10px solid #e8491d; /* Color for the loader */ + border-radius: 50%; + animation: spin 1s linear infinite; /* Loader spin animation */ +} \ No newline at end of file diff --git a/aboutus.html b/aboutus.html index ed8a7b99..46643864 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,11 +77,15 @@ 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 { @@ -96,7 +102,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 { @@ -110,6 +117,7 @@ font-size: 18px; color: #d0c3df; font-weight: 600; + transition: color 0.3s ease; /* Smooth color transition */ } .rocket { @@ -283,7 +291,7 @@

FAQs Section

- +

Collect your GamingTools

diff --git a/index.html b/index.html index 97a63df1..15fc51c7 100644 --- a/index.html +++ b/index.html @@ -110,7 +110,7 @@

Welcome to GamingTools

@@ -189,7 +189,7 @@

Controllers for Xbox One and Series X

- 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

    - +

    Collect your GamingTools

    From 3f93ae0e5b6734c3383fefa8c8165f390c652db3 Mon Sep 17 00:00:00 2001 From: 13Sharad <143598174+13Sharad@users.noreply.github.com> Date: Thu, 24 Oct 2024 22:10:44 +0530 Subject: [PATCH 2/2] Enhanced Loader Styling --- Loader/Loader.css | 94 +++++++++++++++++++++++++++++++---------------- 1 file changed, 63 insertions(+), 31 deletions(-) diff --git a/Loader/Loader.css b/Loader/Loader.css index 7746a7e3..478c1b70 100644 --- a/Loader/Loader.css +++ b/Loader/Loader.css @@ -1,70 +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; - animation: spin 1s linear infinite; /* Add spinning animation to loader */ + 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 */ +} + +/* 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 */ +/* Main content styling remains the same */ .main-content { display: none; opacity: 0; - transition: opacity 0.5s ease; /* Smooth transition for opacity */ + 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; /* Start from invisible */ + opacity: 0; } to { opacity: 1; } } +/* Spin animation for loader */ @keyframes spin { 0% { - transform: translate(-50%, -50%) rotate(0deg); /* Start rotation */ + 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% { - transform: translate(-50%, -50%) rotate(360deg); /* Complete rotation */ + background: radial-gradient(circle, #f39c12 0%, #e8491d 100%); } } -/* Body styling to prevent scrolling while the loader is visible */ +/* 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; /* Smooth background color transition */ -} - -/* Optional: Add a loading animation style */ -.loader:before { - content: ''; - width: 100%; - height: 100%; - border: 10px solid #ccc; /* Light gray border */ - border-top: 10px solid #e8491d; /* Color for the loader */ - border-radius: 50%; - animation: spin 1s linear infinite; /* Loader spin animation */ + transition: background-color 0.5s ease; } \ No newline at end of file