-
Notifications
You must be signed in to change notification settings - Fork 40
/
Copy pathabout.html
182 lines (165 loc) · 11 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" href="about.css">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
/>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="navbar.css">
</head>
<body>
<div class="container">
<!-- Navbar Section -->
<nav class="navbar">
<div class="navcontainer">
<!-- Logo -->
<a href="#" class="logo">
<img
src="./images/DALL·E 2023-09-11 20.54.30 - Make exact like this image.png"
alt="logo"
height="50"
width="50"
/>
</a>
<!-- Login and SignUp Buttons -->
<div class="auth-buttons" style="display: flex; gap: 10px; margin-left: 20px;">
<a href="Log in.html" class="auth-button">Login</a>
<a href="signup.html" class="auth-button">SignUp</a>
</div>
<!-- Navbar Toggle Button for Mobile -->
<button class="nav-toggle" id="nav-toggle">☰</button>
<!-- Navbar Links -->
<ul class="nav-links" id="nav-links" style="margin-left: auto;">
<li><a href="index.html">Home</a></li>
<li><a href="about.html" class="active">About</a></li>
<li><a href="contact.html">Contact Doctor</a></li>
<li><a href="demand.html">Demand</a></li>
<li><a href="Privacy policy.html">Privacy Policy</a></li>
<li><a href="terms and service.html">Terms and Services</a></li>
<li><a href="contributors/contributor.html">Contributors</a></li>
</ul>
</div>
</nav>
</div>
<header>
<h1 style="text-align: center; margin-top: 40px; font-weight: bold;">About Us</h1>
</header>
<main>
<section class="about-section">
<section class="mission-section">
<h2 style="text-align: center; margin-bottom: 10px;">Our Mission</h2>
<p style="text-align: center; font-size: 18px;">At WoolConnect, our mission is to connect wool enthusiasts from around the world and provide them with the best resources and community support. We strive to create a platform where wool lovers can share their knowledge, experiences, and passion for wool. Our goal is to foster a supportive and inclusive community that encourages learning and growth. We believe in the power of community and the importance of preserving the art of wool crafting. Our mission is to ensure that this tradition continues to thrive in the modern world. Through our platform, we aim to provide educational resources, tutorials, and events that cater to both beginners and experienced wool crafters. We are committed to sustainability and ethical practices in the wool industry, and we strive to promote these values within our community</p>
</section>
<section class="history-section">
<h2 style="text-align: center; margin-bottom: 10px;">Our History</h2>
<p style="text-align: center; font-size: 18px;">Founded in 2020, WoolConnect started as a small online forum and has grown into a vibrant community of wool lovers. Over the years, we have expanded our platform to include a wide range of resources, including tutorials, articles, and events. Our community has grown exponentially, and we are proud to have members from all over the world. Our journey began with a simple idea: to create a space where wool enthusiasts could connect and share their passion. This idea quickly gained traction, and WoolConnect was born. As our community grew, so did our offerings. We introduced new features and resources to meet the evolving needs of our members. Today, WoolConnect is a leading platform for wool enthusiasts, and we continue to innovate and expand our services to better serve our community.</p>
</section>
<section class="team-section">
<h2 style="text-align: center; margin-bottom: 10px;">Our Team</h2>
<p style="text-align: center; font-size: 18px;">Our team is composed of passionate individuals who are dedicated to providing the best experience for our community. Each member of our team brings unique skills and expertise to the table, allowing us to offer a diverse range of content and support. We are committed to continuously improving our platform and meeting the needs of our community. Our team members are not only experts in their respective fields but also share a deep love for wool crafting. This passion drives us to deliver high-quality content and support to our members. We believe in collaboration and teamwork, and we work closely together to ensure that WoolConnect remains a valuable resource for wool enthusiasts. Our team is always here to help, and we are dedicated to providing exceptional customer service and support to our community.</p>
</section>
<section class="story-section">
<h2 style="text-align: center; margin-bottom: 10px;">Our Success Story</h2>
<p style="text-align: center; font-size: 18px;">Through hard work and dedication, we have achieved numerous milestones and have been recognized as a leading platform for wool enthusiasts. Our success is a testament to the strength and passion of our community. Our journey has been filled with challenges and triumphs, and we are proud of what we have accomplished together as a community. We have hosted numerous events, workshops, and tutorials that have brought wool enthusiasts together and fostered a sense of camaraderie. Our platform has been featured in various publications and has received accolades for its contributions to the wool crafting community. We are grateful for the support of our members and are excited to continue growing and evolving as a leading platform for wool enthusiasts.</p>
</section>
</section>
<!-- Scroll Down Link -->
</main>
<!-- footer section -->
<div style="height: 5px; background: linear-gradient(to right, #ff5757, #ff8e8e); margin-top: 12px;"></div>
<footer style="background: linear-gradient(to right, #000000, #434343); color: #ffffff; padding: 20px 15px; font-family: 'Arial', sans-serif; position: relative;">
<!-- Footer Container -->
<div class="footer-container" style="max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px;">
<!-- Left Section (Logo and Description) -->
<div class="footer-left" style="flex: 2; min-width: 250px;">
<!-- Logo -->
<div class="footer-logo" style="margin-bottom: 10px; text-align: center;">
<div style="background-color: #2b2b2a; padding: 15px; border-radius: 6px; display: inline-block;">
<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;">
<h1 style="margin: 0; font-size: 28px; font-weight: bold;">Wool Connect.</h1>
</div>
</div>
<!-- Description -->
<p style="font-size: 14px; line-height: 1.4; text-align: center;">
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.
</p>
</div>
<!-- Quick Links Section -->
<div class="footer-section" style="flex: 1; min-width: 200px;">
<h2 style="font-size: 16px; margin-bottom: 8px;">Quick Links</h2>
<ul style="list-style: none; padding: 0;">
<li><a href="about.html" style="color: white; text-decoration: none; font-size: 14px;">Who We Are</a></li>
<li><a href="#" style="color: white; text-decoration: none; font-size: 14px;">Blog</a></li>
<li><a href="#" style="color: white; text-decoration: none; font-size: 14px;">Work With Us</a></li>
<li><a href="#" style="color: white; text-decoration: none; font-size: 14px;">Investor Relations</a></li>
<li><a href="contact.html" style="color: white; text-decoration: none; font-size: 14px;">Contact Us</a></li>
</ul>
</div>
<!-- Learn More Section -->
<div class="footer-section" style="flex: 1; min-width: 200px;">
<h2 style="font-size: 16px; margin-bottom: 8px;">Learn More</h2>
<ul style="list-style: none; padding: 0;">
<li><a href="Privacy policy.html" style="color: white; text-decoration: none; font-size: 14px;">Privacy Policy</a></li>
<li><a href="terms and service.html" style="color: white; text-decoration: none; font-size: 14px;">Terms of Service</a></li>
<li><a href="contributors/contributor.html" style="color: white; text-decoration: none; font-size: 14px;">Our Contributors</a></li>
</ul>
</div>
</div>
<!-- Social Links -->
<div class="social-links" style="text-align: center; margin-top: 20px;">
<ul style="list-style: none; padding: 0; display: flex; justify-content: center; gap: 15px;">
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" style="color: #ffffff; font-size: 18px; text-decoration: none;"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
<!-- Footer Bottom -->
<div class="footer-bottom" style="text-align: center; margin-top: 10px; font-size: 12px;">
<p>© <span id="ThisYear">2025</span> Wool Connect. All rights reserved.</p>
</div>
<!-- Footer Bottom Border -->
<div style="height: 5px; background: linear-gradient(to right, #414141, #000000); margin-top: 12px;"></div>
</footer>
<button id="scrollBtn" title="Go to top">
<i class="fa-solid fa-arrow-up fa-lg"></i>
</button>
<script>
const toggleButton = document.getElementById("nav-toggle");
const navLinks = document.getElementById("nav-links");
toggleButton.addEventListener("click", () => {
navLinks.classList.toggle("active");
});
// Get the button element
const scrollBtn = document.getElementById('scrollBtn');
// Show the button when the user scrolls down 20px from the top
window.onscroll = function () {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollBtn.style.display = "block";
} else {
scrollBtn.style.display = "none";
}
};
// Scroll to the top of the page when the button is clicked
scrollBtn.onclick = function () {
window.scrollTo({
top: 0,
behavior: "smooth"
});
};
</script>
</body>
</html>