From 89c2a63f6bc06f6d4782aad068c7c3067d337991 Mon Sep 17 00:00:00 2001
From: unknown <dindishriya@gmail.com>
Date: Thu, 17 Oct 2024 10:38:57 +0530
Subject: [PATCH] Changed the user interface of the About us section
---
aboutus.html | 175 ++++++++++++++++++++++++++++++++-------------------
1 file changed, 111 insertions(+), 64 deletions(-)
diff --git a/aboutus.html b/aboutus.html
index 3694ef7d..35cfb178 100644
--- a/aboutus.html
+++ b/aboutus.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
+
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,19 +9,18 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
-
body {
- font-family: 'Poppins', sans-serif;
- line-height: 1.6;
- color: #333;
- margin: 0;
- padding: 0;
- background-color: white;
+ font-family: 'Poppins', sans-serif;
+ line-height: 1.6;
+ background-image: url(https://github.com/shriyadindi/comingsoonpage/blob/main/background.png?raw=true);
+ margin: 0;
+ padding: 0;
+ background-color: white;
}
- .container {
+ .container {
width: 90%;
max-width: 1200px;
@@ -29,54 +29,99 @@
padding: 20px;
}
-
+
.main-content {
padding: 40px 0;
}
- h1, h2 {
- color: #35424a;
+
+ h1,h2
+ {
+ color: #c7becf;
text-align: center;
margin-bottom: 40px;
}
+ h1 span{
+ color: #f4be0c;
+ }
+
+ /* h2{
+ color: #f4be0c;
+ text-align: center;
+ margin-bottom: 40px;
+ } */
+
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
+
.feature {
background: #fff;
padding: 30px;
border-radius: 10px;
- box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
text-align: center;
}
+
.feature:hover {
transform: translateX(-5px);
- box-shadow: 5px 5px 20px rgba(0,0,0,0.15);
+ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15);
}
+
.feature h3 {
color: #e8491d;
margin-top: 20px;
}
+
+ .feature p{
+ color:#8058ad;
+ font-weight: 600;
+ }
+
.feature-icon {
font-size: 48px;
color: #e8491d;
margin-bottom: 15px;
transition: all 0.3s ease;
}
+
.feature:hover .feature-icon {
transform: scale(1.1);
}
+
.intro {
text-align: center;
max-width: 800px;
margin: 0 auto 40px;
font-size: 18px;
- color: #666;
+ color: #d0c3df;
+ font-weight: 600;
+ }
+
+ .rocket {
+ width: 250px;
+ position: absolute;
+ right: 10%;
+ bottom: 0;
+ animation: rocket 4s linear infinite;
+ }
+
+ @keyframes rocket {
+ 0% {
+ bottom: 0;
+ opacity: 0;
+ }
+
+ 100% {
+ bottom: 120%;
+ opacity: 1;
+ }
}
</style>
</head>
+
<body>
<div class="navbar">
<div class="logo-outer">
@@ -94,19 +139,20 @@
<!-- Inside the navbar ul -->
<li class="cart-nav">
-
- <a href="#"><img height="25px " width="25px" src="images/cart.png" alt="Cart Icon"> <span id="cart-count">0</span></a>
-
+
+ <a href="#"><img height="25px " width="25px" src="images/cart.png" alt="Cart Icon"> <span
+ id="cart-count">0</span></a>
+
</li>
-
+
</ul>
-
+
<!-- Hamburger Menu Icon -->
<img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
</nav>
</div>
-
-
+
+
<nav>
<ul id="menuList">
<li><a href="index.html">Game Controllers</a></li>
@@ -122,61 +168,63 @@
<div class="container main-content">
- <h1>About GamingTools</h1>
- <p class="intro">Welcome to GamingTools, your ultimate destination for premium gaming accessories. We're passionate about providing gamers with the best tools to elevate their gaming experience to new heights.</p>
-
- <h2>Why Choose Us</h2>
-
+ <h1>About <span> Gaming </span>Tools</h1>
+ <p class="intro">Welcome to GamingTools, your ultimate destination for premium gaming accessories. We're
+ passionate about providing gamers with the best tools to elevate their gaming experience to new heights.</p>
+
+ <h2>Why Choose Us?</h2>
+
<div class="features-grid">
<div class="feature">
<i class="fas fa-gamepad feature-icon"></i>
<h3>Wide Range of Accessories</h3>
<p>From controllers to VR headsets, we offer a comprehensive selection for all gaming platforms.</p>
</div>
-
+
<div class="feature">
<i class="fas fa-tags feature-icon"></i>
<h3>Competitive Pricing</h3>
<p>Get the best gaming gear at unbeatable prices, with regular discounts and promotions.</p>
</div>
-
+
<div class="feature">
<i class="fas fa-truck feature-icon"></i>
<h3>Free Shipping</h3>
<p>Enjoy free courier services on all orders, making it easy to get your hands on the latest gear.</p>
</div>
-
+
<div class="feature">
<i class="fas fa-user-shield feature-icon"></i>
<h3>Secure Shopping</h3>
<p>Shop with confidence using our secure checkout process to protect your information.</p>
</div>
-
+
<div class="feature">
<i class="fas fa-exchange-alt feature-icon"></i>
<h3>Easy Returns</h3>
<p>Hassle-free returns and exchanges to ensure your complete satisfaction with every purchase.</p>
</div>
-
+
<div class="feature">
<i class="fas fa-headset feature-icon"></i>
<h3>Customer Support</h3>
<p>Our dedicated team is always ready to assist you with any questions or concerns.</p>
</div>
-
+
<div class="feature">
<i class="fas fa-star feature-icon"></i>
<h3>Product Reviews</h3>
<p>Make informed decisions with help from our customer reviews and ratings.</p>
</div>
-
+
<div class="feature">
<i class="fas fa-question-circle feature-icon"></i>
<h3>FAQs Section</h3>
<p>Find quick answers to common questions in our comprehensive FAQ section.</p>
</div>
-
+
</div>
+ <img src="https://github.com/shriyadindi/comingsoonpage/blob/main/rocket.png?raw=true" class="rocket">
</div>
<script src="darkMode.js"></script>
@@ -188,7 +236,8 @@ <h3>FAQs Section</h3>
<h2 class="logo-text">Collect your GamingTools</h2>
</div>
<p class="about-text">
- Your one-stop shop for premium gaming accessories. Elevate your gaming experience with our curated selection of controllers, VR gear, and more.
+ Your one-stop shop for premium gaming accessories. Elevate your gaming experience with our curated
+ selection of controllers, VR gear, and more.
</p>
<div class="contact">
<span><i class="fas fa-phone"></i> 123-456-789</span>
@@ -198,7 +247,7 @@ <h2 class="logo-text">Collect your GamingTools</h2>
<!-- Added classes to the <a> tags to add the Hover animations -->
<a class="facebook" href="#"><i class="fab fa-facebook"></i></a>
<a class="instagram" href="#"><i class="fab fa-instagram"></i></a>
- <a class="twitter" href="#" ><i class="fa-brands fa-x-twitter"></i></a>
+ <a class="twitter" href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a class="youtube" href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
@@ -216,7 +265,8 @@ <h2>Quick Links</h2>
<div class="footer-section contact-form">
<h2>Feedback Form</h2>
<form action="#" method="post">
- <input type="email" name="email" class="text-input contact-input" placeholder="Your email address...">
+ <input type="email" name="email" class="text-input contact-input"
+ placeholder="Your email address...">
<textarea name="message" class="text-input contact-input" placeholder="Your message..."></textarea>
<button type="submit" class="btn btn-big contact-btn">
<i class="fas fa-envelope"></i>
@@ -228,18 +278,18 @@ <h2>Feedback Form</h2>
<div class="footer-bottom">
© 2024 GamingTools | Designed by Swaraj
</div>
-
+
</footer>
<!-- SIDEBAR -->
-
+
<div class="social-sidebar">
<div class="close-btn" id="SideBar" onclick="toggleSidebar()" title="Close Sidebar">×</div>
<ul id="sidebar-content">
- <li><a class= "facebook" href="#"><i class="fa-brands fa-meta"></i></a></li>
- <li><a class="twitter" href="#" ><i class="fa-brands fa-x-twitter"></i></a></li>
- <li><a class= "facebook" href="#"><i class="fa-brands fa-instagram"></i></a></li>
- <li><a class= "facebook" href="#"><i class="fa-brands fa-youtube"></i></a></li>
+ <li><a class="facebook" href="#"><i class="fa-brands fa-meta"></i></a></li>
+ <li><a class="twitter" href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
+ <li><a class="facebook" href="#"><i class="fa-brands fa-instagram"></i></a></li>
+ <li><a class="facebook" href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
<div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
@@ -250,17 +300,18 @@ <h2>Feedback Form</h2>
<!-- Scroll to Top Button -->
<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
<div class="scroll-top-icon">
- <ion-icon name="arrow-up-outline"></ion-icon>
+ <ion-icon name="arrow-up-outline"></ion-icon>
</div>
<svg class="progress-ring" width="60" height="60">
- <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30" cy="30"></circle>
+ <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
+ cy="30"></circle>
</svg>
- </button>
+ </button>
<script>
let cartItemCount = 0;
- // Function to handle Add to Cart button click
+ // Function to handle Add to Cart button click
document.getElementById('cart-btn').addEventListener('click', function () {
cartItemCount++; // Increment cart count
document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
@@ -280,28 +331,24 @@ <h2>Feedback Form</h2>
<script>
window.embeddedChatbotConfig = {
- chatbotId: "awMKW3zFwW7jzUNsN4Q8O",
- domain: "www.chatbase.co"
+ chatbotId: "awMKW3zFwW7jzUNsN4Q8O",
+ domain: "www.chatbase.co"
}
- </script>
- <script
- src="https://www.chatbase.co/embed.min.js"
- chatbotId="awMKW3zFwW7jzUNsN4Q8O"
- domain="www.chatbase.co"
- defer>
- </script>
- <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
- <script>
- AOS.init();
- </script>
+ </script>
+ <script src="https://www.chatbase.co/embed.min.js" chatbotId="awMKW3zFwW7jzUNsN4Q8O" domain="www.chatbase.co" defer>
+ </script>
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+ <script>
+ AOS.init();
+ </script>
- <div class="gtranslate_wrapper"></div>
- <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
- <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+ <div class="gtranslate_wrapper"></div>
+ <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
+ <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
</body>
-</html>
+</html>
\ No newline at end of file