From 94fc5da74274374a0b2c79f8b4bba75b863f1fac Mon Sep 17 00:00:00 2001
From: YadavAkhileshh <yadavakhil2501@gmail.com>
Date: Fri, 4 Oct 2024 15:50:14 +0530
Subject: [PATCH] footer section

---
 .gitattributes           |   2 +
 index.html               |  82 +++++++++---------
 package-lock.json        |   6 ++
 pull_request_template.md |  66 +++++++--------
 style.css                | 179 +++++++++++++++++++++++----------------
 5 files changed, 190 insertions(+), 145 deletions(-)
 create mode 100644 .gitattributes
 create mode 100644 package-lock.json

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..a743e66a
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+   * text=auto
+   *.json text eol=lf
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e30462b..2c74d0a4 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Collect your GamingTools</title>
     <link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -243,52 +245,52 @@ <h3>Ergonomic Gaming Chair</h3>
             </div>
         </div>
     </div>
-
-    <footer>
-        <div class="footer-container">
-            <div class="footer-content">
-                <div class="footer-section">
-                    <div class="logo-name">
-                        <img src="images/logo.png" alt="Logo" />
-                        <h4>Collect your GamingTools</h4>
-                    </div>
-                    <p>
-                        Collect your GamingTools is your one-stop shop for the best gaming
-                        accessories. We provide a wide range of controllers, VR
-                        accessories, media remotes, and more.
-                    </p>
+    <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-section about">
+                <div class="logo-container">
+                    <img src="images/logo.png" alt="GamingTools Logo" class="footer-logo">
+                    <h2 class="logo-text">Collect your GamingTools</h2>
                 </div>
-                <div class="footer-section">
-                    <h4>Contact Us</h4>
-                    <p class="contact">Email: support@gamingtools.com</p>
-                    <p class="contact">Phone: +123 456 7890</p>
-                    <h4>Our Address</h4>
-                    <p>Park Street, Kolkata - 700001</p>
-                    <p>West Bengal, India</p>
+                <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.
+                </p>
+                <div class="contact">
+                    <span><i class="fas fa-phone"></i> &nbsp; 123-456-789</span>
+                    <span><i class="fas fa-envelope"></i> &nbsp; info@gamingtools.com</span>
                 </div>
-                <div class="footer-section">
-                    <h4 class="follow">Follow Us on</h4>
-                    <div class="social-links">
-                        <a href="https://www.facebook.com/" target="_blank">
-                            <ion-icon name="logo-facebook"></ion-icon>
-                        </a>
-                        <a href="https://www.twitter.com/" target="_blank">
-                            <ion-icon name="logo-twitter"></ion-icon>
-                        </a>
-                        <a href="https://www.instagram.com/" target="_blank" class="instagram-link">
-                            <ion-icon name="logo-instagram" class="instagram-icon"></ion-icon>
-                        </a>
-                        <a href="https://pk.linkedin.com/" target="_blank">
-                            <ion-icon name="logo-linkedin"></ion-icon>
-                        </a>
-                    </div>
+                <div class="socials">
+                    <a href="#"><i class="fab fa-facebook"></i></a>
+                    <a href="#"><i class="fab fa-instagram"></i></a>
+                    <a href="#"><i class="fab fa-twitter"></i></a>
+                    <a href="#"><i class="fab fa-youtube"></i></a>
                 </div>
             </div>
-            <div class="footer-bottom">
-                <p>&copy; 2024 Collect your GamingTools - All rights reserved.</p>
-                <p>Made by Swaraj &#128512;</p>
+            <div class="footer-section links">
+                <h2>Quick Links</h2>
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">Products</a></li>
+                    <li><a href="#">About Us</a></li>
+                    <li><a href="#">Contact</a></li>
+                    <li><a href="#">FAQ</a></li>
+                </ul>
+            </div>
+            <div class="footer-section contact-form">
+                <h2>Contact Us</h2>
+                <form action="#" method="post">
+                    <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>
+                        Send
+                    </button>
+                </form>
             </div>
         </div>
+        <div class="footer-bottom">
+            &copy; 2024 GamingTools | Designed by Swaraj
+        </div>
     </footer>
 
     <script src="script.js"></script>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..791d487f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Collect-your-GamingTools",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/pull_request_template.md b/pull_request_template.md
index d1925a13..eada97dd 100644
--- a/pull_request_template.md
+++ b/pull_request_template.md
@@ -1,33 +1,33 @@
-# Pull Request Format
-## PR Title
-### Issue #0 : **ISSUE NAME** solved
-
-## Type of PR
-- **Add X in the box to specify the improvement type.**
-- [X] Bug fix
-- [ ] Feature enhancement
-- [ ] Documentation update
-- [ ] Other (specify): ___________  
-
-
-## Description
-This pull request aims to [briefly describe what the pull request does, e.g., "add a new feature," "fix a bug," "improve documentation," etc.]. 
-
-## Screenshots / Videos (if applicable)
-**Before:**
-- [Describe the state before the changes, e.g., "The section headings in the footer were misaligned, leading to an inconsistent and cluttered appearance."]
-
-**After:**
-- [Describe the state after the changes, e.g., "The section headings in the footer are now properly aligned, providing a clean and professional look."]
-
-## Checklist
-- **Add X in the box to specify.**
-- [X] I have performed a self-review of my code.
-- [ ] I have tested the changes thoroughly before submitting this pull request.
-- [ ] I have provided relevant issue numbers, screenshots, and videos after making the changes.
-- [ ] I have commented my code, particularly in hard-to-understand areas.
-
-### Additional Context
-[Provide any additional context about the changes, such as specific challenges you faced or decisions you made. This can help reviewers understand the rationale behind your changes.]
-
-Thank you for reviewing my pull request!
+# Pull Request Format
+## PR Title
+### Issue #0 : **ISSUE NAME** solved
+
+## Type of PR
+- **Add X in the box to specify the improvement type.**
+- [X] Bug fix
+- [ ] Feature enhancement
+- [ ] Documentation update
+- [ ] Other (specify): ___________  
+
+
+## Description
+This pull request aims to [briefly describe what the pull request does, e.g., "add a new feature," "fix a bug," "improve documentation," etc.]. 
+
+## Screenshots / Videos (if applicable)
+**Before:**
+- [Describe the state before the changes, e.g., "The section headings in the footer were misaligned, leading to an inconsistent and cluttered appearance."]
+
+**After:**
+- [Describe the state after the changes, e.g., "The section headings in the footer are now properly aligned, providing a clean and professional look."]
+
+## Checklist
+- **Add X in the box to specify.**
+- [X] I have performed a self-review of my code.
+- [ ] I have tested the changes thoroughly before submitting this pull request.
+- [ ] I have provided relevant issue numbers, screenshots, and videos after making the changes.
+- [ ] I have commented my code, particularly in hard-to-understand areas.
+
+### Additional Context
+[Provide any additional context about the changes, such as specific challenges you faced or decisions you made. This can help reviewers understand the rationale behind your changes.]
+
+Thank you for reviewing my pull request!
diff --git a/style.css b/style.css
index 8d59ccaf..f0baab2d 100644
--- a/style.css
+++ b/style.css
@@ -295,128 +295,163 @@ button:hover {
     font-weight: 600;
 }
 
-.footer-container {
-    background-color: #444444;
-    color: #fff;
-    padding: 40px 20px;
-    text-align: center;
-    position: relative;
+.footer {
+    background: #303036;
+    color: #d3d3d3;
+    padding: 50px 0 0;
+    font-family: 'Arial', sans-serif;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-around;
-    margin-bottom: 20px;
+    justify-content: space-between;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
 }
 
 .footer-section {
-    flex: 1 1 200px;
-    margin: 10px 20px;
-    max-width: 300px;
-    text-align: left;
+    flex: 1;
+    margin-bottom: 40px;
+    min-width: 300px;
+    padding: 0 20px;
 }
 
-.footer-section .logo-name {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
+.footer h2 {
+    color: white;
+    font-size: 1.3em;
+    margin-bottom: 20px;
 }
 
-.footer-section .logo-name img {
-    height: 50px;
-    margin-right: 10px;
+.logo-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
 }
 
-.footer-section .logo-name h4 {
-    font-size: 18px;
-    margin: 20px 0;
+.footer-logo {
+    width: 60px;
+    height: auto;
+    margin-right: 15px;
 }
 
-.footer-section .contact {
-    font-size: 14px;
-    line-height: 28px;
-    color: #d3d3d3;
-    font-weight: 600;
-    cursor: pointer;
+.logo-text {
+    font-size: 1.5em;
+    margin: 0;
 }
 
-.footer-section .follow {
-    margin-left: 20px;
+.about-text {
+    line-height: 1.5;
+    margin-bottom: 20px;
 }
 
-.footer-section .contact:hover {
-    color: #ffee05;
+.contact span {
+    display: block;
+    font-size: 1.1em;
+    margin-bottom: 8px;
 }
 
-.footer-section h4 {
-    margin-bottom: 20px;
-    margin-top: 16px;
+.socials {
+    margin-top: 20px;
 }
 
-.footer-section p {
-    line-height: 22px;
-    font-size: 14px;
-    font-weight: 400;
-    text-align: justify;
+.socials a {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    background: rgba(255,255,255,0.1);
+    margin-right: 10px;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 50%;
+    color: #d3d3d3;
+    transition: all .3s;
 }
 
-.footer-bottom {
-    border-top: 0.7px dashed #e4e4e4;
-    padding-top: 20px;
-    max-width: 30%;
-    margin: 0 auto;
-    text-align: center;
+.socials a:hover {
+    background: #4CAF50;
+    color: white;
 }
 
-.footer-bottom p {
-    margin: 5px 0;
-    font-size: 12px;
+.links ul {
+    list-style-type: none;
+    padding: 0;
 }
 
-.social-links a {
+.links ul a {
+    display: block;
+    margin-bottom: 10px;
+    font-size: 1.1em;
+    color: #d3d3d3;
     text-decoration: none;
+    transition: all .3s;
 }
 
-.social-links a:first-child {
-    color: #3b5998;
+.links ul a:hover {
+    color: white;
+    padding-left: 10px;
 }
 
-.social-links a:nth-child(2) {
-    color: #1DA1F2;
+.contact-form .text-input {
+    background: #272727;
+    color: #bebdbd;
+    margin-bottom: 20px;
+    line-height: 1.5rem;
+    padding: 10px 15px;
+    border: none;
+    width: 100%;
+    border-radius: 5px;
 }
 
-.social-links a:last-child {
-    color: #0077b5;
+.contact-form textarea.text-input {
+    height: 120px;
+    resize: none;
 }
 
-.instagram-link {
-    display: inline-block;
+.contact-form .contact-btn {
+    float: right;
+    font-size: 1.1em;
+    font-family: 'Arial', sans-serif;
+    background: #4CAF50;
+    color: white;
+    border: none;
+    padding: 12px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all .3s;
 }
 
-.instagram-icon {
-    font-size: 64px;
-    background: radial-gradient(circle at 30% 30%, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
-    mask-image: url('https://unpkg.com/ionicons@5.5.2/dist/svg/logo-instagram.svg');
-    mask-size: cover;
-    color: transparent;
+.contact-form .contact-btn:hover {
+    background: #45a049;
 }
 
-.social-links ion-icon {
-    font-size: 30px;
-    margin: 14px;
-    cursor: pointer;
-    transition: transform 0.3s;
+.footer-bottom {
+    background: #343a40;
+    color: #686868;
+    text-align: center;
+    padding: 15px 0;
+    margin-top: 40px;
 }
 
-.social-links ion-icon:hover {
-    transform: scale(1.2);
+@media screen and (max-width: 768px) {
+    .footer-content {
+        flex-direction: column;
+    }
+    
+    .footer-section {
+        margin-bottom: 30px;
+    }
+    
+    .contact-form .contact-btn {
+        width: 100%;
+        float: none;
+    }
 }
 
 
 
 
-
 /* -----------------------------------------------Responsiveness----------------------------------------------------- */