Skip to content

Commit 143c2db

Browse files
vishantrathivishantrathi
authored
Merge pull request #85 from Soumyadipgithub/main
I make some major changes on the Footer of the website. I hope you like this one.
2 parents 3981164 + 0345a6d commit 143c2db

File tree

2 files changed

+149
-57
lines changed

2 files changed

+149
-57
lines changed

‎about.html‎

Lines changed: 57 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>About Us</title>
77
<link rel="stylesheet" href="about.css">
8+
<link rel="stylesheet" href="./styles.css" />
89
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
910
<link
1011
rel="stylesheet"
@@ -83,35 +84,67 @@ <h2 style="text-align: center; margin-bottom: 10px;">Our Success Story</h2>
8384
</main>
8485

8586
<!-- footer section -->
86-
<footer class="footer">
87-
<div class="footer-container">
88-
<div class="footer-info">
89-
<h2>Contact Us</h2>
90-
<p>
91-
If you have any questions or inquiries, feel free to reach out to
92-
us.
93-
</p>
94-
<p>Email:
95-
<a href="mailto:contact@woolconnect.com" style="color: white;" style="text-decoration: none;">contact@woolconnect.com</a></p>
96-
<div class="social-icons">
97-
<a href="#" class="social-icon"
98-
><i class="fab fa-facebook-f"></i
99-
></a>
100-
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
101-
<a href="#" class="social-icon"
102-
><i class="fab fa-instagram"></i
103-
></a>
104-
<a href="#" class="social-icon"
105-
><i class="fab fa-linkedin-in"></i
106-
></a>
87+
<footer style="background: linear-gradient(to right, #000000, #434343); color: #ffffff; padding: 20px 15px; font-family: 'Arial', sans-serif; position: relative;">
88+
<!-- Footer Container -->
89+
<div class="footer-container" style="max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px;">
90+
91+
<!-- Left Section (Logo and Description) -->
92+
<div class="footer-left" style="flex: 2; min-width: 250px;">
93+
<!-- Logo -->
94+
<div class="footer-logo" style="margin-bottom: 10px; text-align: center;">
95+
<div style="background-color: #2b2b2a; padding: 15px; border-radius: 6px; display: inline-block;">
96+
<img src="images/DALL·E 2023-09-11 20.54.30 - Make exact like this image.png" alt="Logo" style="width: 40px; height: 40px; margin-bottom: 8px;">
97+
<h1 style="margin: 0; font-size: 28px; font-weight: bold;">Wool Connect.</h1>
10798
</div>
10899
</div>
100+
<!-- Description -->
101+
<p style="font-size: 14px; line-height: 1.4; text-align: center;">
102+
Wool is a natural, renewable fiber sourced from sheep and other animals, known for its warmth, softness, and durability. It’s perfect for creating comfortable, high-quality garments and textiles.
103+
</p>
104+
</div>
105+
106+
<!-- Quick Links Section -->
107+
<div class="footer-section" style="flex: 1; min-width: 200px;">
108+
<h2 style="font-size: 16px; margin-bottom: 8px;">Quick Links</h2>
109+
<ul style="list-style: none; padding: 0;">
110+
<li><a href="about.html" style="color: white; text-decoration: none; font-size: 14px;">Who We Are</a></li>
111+
<li><a href="#" style="color: white; text-decoration: none; font-size: 14px;">Blog</a></li>
112+
<li><a href="#" style="color: white; text-decoration: none; font-size: 14px;">Work With Us</a></li>
113+
<li><a href="#" style="color: white; text-decoration: none; font-size: 14px;">Investor Relations</a></li>
114+
<li><a href="contact.html" style="color: white; text-decoration: none; font-size: 14px;">Contact Us</a></li>
115+
</ul>
109116
</div>
110117

111-
<div class="copyright">
112-
<p>&copy; 2023 Wool Connect. All Rights Reserved.</p>
118+
<!-- Learn More Section -->
119+
<div class="footer-section" style="flex: 1; min-width: 200px;">
120+
<h2 style="font-size: 16px; margin-bottom: 8px;">Learn More</h2>
121+
<ul style="list-style: none; padding: 0;">
122+
<li><a href="Privacy policy.html" style="color: white; text-decoration: none; font-size: 14px;">Privacy Policy</a></li>
123+
<li><a href="terms and service.html" style="color: white; text-decoration: none; font-size: 14px;">Terms of Service</a></li>
124+
<li><a href="contributors/contributor.html" style="color: white; text-decoration: none; font-size: 14px;">Our Contributors</a></li>
125+
</ul>
113126
</div>
114-
</footer>
127+
128+
</div>
129+
130+
<!-- Social Links -->
131+
<div class="social-links" style="text-align: center; margin-top: 20px;">
132+
<ul style="list-style: none; padding: 0; display: flex; justify-content: center; gap: 15px;">
133+
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-facebook-f"></i></a></li>
134+
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-twitter"></i></a></li>
135+
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-linkedin-in"></i></a></li>
136+
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-youtube"></i></a></li>
137+
</ul>
138+
</div>
139+
140+
<!-- Footer Bottom -->
141+
<div class="footer-bottom" style="text-align: center; margin-top: 10px; font-size: 12px;">
142+
<p>&copy; <span id="ThisYear">2025</span> Wool Connect. All rights reserved.</p>
143+
</div>
144+
145+
<!-- Footer Bottom Border -->
146+
<div style="height: 5px; background: linear-gradient(to right, #414141, #000000); margin-top: 12px;"></div>
147+
</footer>
115148

116149
<button id="scrollBtn" title="Go to top">
117150
<i class="fa-solid fa-arrow-up fa-lg"></i>

‎index.html‎

Lines changed: 92 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -316,44 +316,103 @@ <h3>Eco-Friendly Wool Matters</h3>
316316
</section>
317317

318318
<!--TODO: NEW ADD ON THE_END -->
319+
<div style="height: 5px; background: linear-gradient(to right, #ff5757, #ff8e8e); margin-top: 12px;"></div>
320+
<footer style="background: linear-gradient(to right, #000000, #434343); color: #ffffff; padding: 20px 15px; font-family: 'Arial', sans-serif; position: relative;">
321+
<!-- Footer Container -->
322+
<div class="footer-container" style="max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px;">
319323

320-
<footer class="footer">
321-
<div class="footer-container">
322-
<div class="footer-info">
323-
<h2>Contact Us</h2>
324-
<p>
325-
If you have any questions or inquiries, feel free to reach out to
326-
us.
327-
</p>
328-
<p>Email:
329-
<a href="mailto:contact@woolconnect.com" style="color: white;" style="text-decoration: none;">contact@woolconnect.com</a></p>
330-
<div class="social-icons">
331-
<a href="#" class="social-icon"
332-
><i class="fab fa-facebook-f"></i
333-
></a>
334-
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
335-
<a href="#" class="social-icon"
336-
><i class="fab fa-instagram"></i
337-
></a>
338-
<a href="#" class="social-icon"
339-
><i class="fab fa-linkedin-in"></i
340-
></a>
341-
</div>
342-
</div>
324+
<!-- Left Section (Logo and Description) -->
325+
<div class="footer-left" style="flex: 2; min-width: 250px;">
326+
<!-- Logo -->
327+
<div class="footer-logo" style="margin-bottom: 10px; text-align: center;">
328+
<div style="background-color: #2b2b2a; padding: 15px; border-radius: 6px; display: inline-block;">
329+
<img src="images/DALL·E 2023-09-11 20.54.30 - Make exact like this image.png" alt="Logo" style="width: 40px; height: 40px; margin-bottom: 8px;">
330+
<h1 style="margin: 0; font-size: 28px; font-weight: bold;">Wool Connect.</h1>
343331
</div>
332+
</div>
333+
<!-- Description -->
334+
<p style="font-size: 14px; line-height: 1.4; text-align: center;">
335+
Wool is a natural, renewable fiber sourced from sheep and other animals, known for its warmth, softness, and durability. It’s perfect for creating comfortable, high-quality garments and textiles.
336+
</p>
337+
</div>
344338

345-
<div class="copyright">
346-
<p>&copy; <span id="ThisYear"></span> Wool Connect. All Rights Reserved.</p>
347-
</div>
348-
</footer>
339+
<!-- Quick Links Section -->
340+
<div class="footer-section" style="flex: 1; min-width: 200px;">
341+
<h2 style="font-size: 16px; margin-bottom: 8px;">Quick Links</h2>
342+
<ul style="list-style: none; padding: 0;">
343+
<li><a href="about.html" style="color: white; text-decoration: none; font-size: 14px;">Who We Are</a></li>
344+
<li><a href="#" style="color: white; text-decoration: none; font-size: 14px;">Blog</a></li>
345+
<li><a href="#" style="color: white; text-decoration: none; font-size: 14px;">Work With Us</a></li>
346+
<li><a href="#" style="color: white; text-decoration: none; font-size: 14px;">Investor Relations</a></li>
347+
<li><a href="contact.html" style="color: white; text-decoration: none; font-size: 14px;">Contact Us</a></li>
348+
</ul>
349349
</div>
350-
<button id="scrollBtn" title="Go to top">
350+
351+
<!-- Learn More Section -->
352+
<div class="footer-section" style="flex: 1; min-width: 200px;">
353+
<h2 style="font-size: 16px; margin-bottom: 8px;">Learn More</h2>
354+
<ul style="list-style: none; padding: 0;">
355+
<li><a href="Privacy policy.html" style="color: white; text-decoration: none; font-size: 14px;">Privacy Policy</a></li>
356+
<li><a href="terms and service.html" style="color: white; text-decoration: none; font-size: 14px;">Terms of Service</a></li>
357+
<li><a href="contributors/contributor.html" style="color: white; text-decoration: none; font-size: 14px;">Our Contributors</a></li>
358+
</ul>
359+
</div>
360+
361+
</div>
362+
363+
<!-- Social Links -->
364+
<div class="social-links" style="text-align: center; margin-top: 20px;">
365+
<ul style="list-style: none; padding: 0; display: flex; justify-content: center; gap: 15px;">
366+
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-facebook-f"></i></a></li>
367+
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-twitter"></i></a></li>
368+
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-linkedin-in"></i></a></li>
369+
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-youtube"></i></a></li>
370+
</ul>
371+
</div>
372+
373+
<!-- Footer Bottom -->
374+
<div class="footer-bottom" style="text-align: center; margin-top: 10px; font-size: 12px;">
375+
<p>&copy; <span id="ThisYear">2025</span> Wool Connect. All rights reserved.</p>
376+
</div>
377+
378+
<!-- Footer Bottom Border -->
379+
<div style="height: 5px; background: linear-gradient(to right, #414141, #000000); margin-top: 12px;"></div>
380+
</footer>
381+
382+
<button id="scrollBtn" title="Go to top">
351383
<i class="fa-solid fa-arrow-up fa-lg"></i>
352384
</button>
353-
<script src="index.js"></script>
354-
<script>
355-
const currentYear= new Date().getFullYear();
356-
document.getElementById('ThisYear').textContent = currentYear;
357-
</script>
385+
386+
<script>
387+
const toggleButton = document.getElementById("nav-toggle");
388+
const navLinks = document.getElementById("nav-links");
389+
390+
toggleButton.addEventListener("click", () => {
391+
navLinks.classList.toggle("active");
392+
});
393+
394+
// Get the button element
395+
const scrollBtn = document.getElementById("scrollBtn");
396+
397+
// Show the button when the user scrolls down 20px from the top
398+
window.onscroll = function () {
399+
if (
400+
document.body.scrollTop > 20 ||
401+
document.documentElement.scrollTop > 20
402+
) {
403+
scrollBtn.style.display = "block";
404+
} else {
405+
scrollBtn.style.display = "none";
406+
}
407+
};
408+
409+
// Scroll to the top of the page when the button is clicked
410+
scrollBtn.onclick = function () {
411+
window.scrollTo({
412+
top: 0,
413+
behavior: "smooth",
414+
});
415+
};
416+
</script>
358417
</body>
359418
</html>

0 commit comments

Comments
 (0)