Fsoc-level-medium/about.html at main · FSOC-OSS/Fsoc-level-medium · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - Fsoc-Medium</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <nav>
            <div class="logo">Fsoc-Medium</div>
            <ul class="nav-links">
                <li><a href="index.html" class="nav-link">Dashboard</a></li>
                <li><a href="about.html" class="nav-link active">About</a></li>
                <li><a href="index.html#contact" class="nav-link">Contact</a></li>
            </ul>
            <button id="theme-toggle" class="theme-btn">
                    Toggle Theme
            </button>
        </nav>
    </header>

    <main class="container">
        <section class="card about-section">
            <h2>Our Mission</h2>
            <p>Our mission is to empower developers by creating intuitive, efficient, and innovative tools that solve real-world problems. We believe in the power of open collaboration and strive to build a community where creativity and technology intersect to drive progress.</p>
        </section>

        <section class="card about-section">
            <h2>Our History</h2>
            <p>Founded in 2020, Fsoc-Medium started as a small project driven by a passion for clean code and user-centric design. From a simple task manager, it has evolved into a comprehensive dashboard aimed at boosting productivity for individuals and teams worldwide. Our journey is a testament to continuous improvement and community feedback.</p>
        </section>

        <section class="card about-section">
            <h2>Meet the Team</h2>
            <div class="team-grid">
                <div class="team-member">
                    <img src="https://i.pravatar.cc/150?img=11" alt="Team Member 1">
                    <h3>Alex Rivera</h3>
                    <p>Lead Developer</p>
                </div>
                <div class="team-member">
                    <img src="https://i.pravatar.cc/150?img=5" alt="Team Member 2">
                    <h3>Jordan Lee</h3>
                    <p>UI/UX Designer</p>
                </div>
                <div class="team-member">
                    <img src="https://i.pravatar.cc/150?img=8" alt="Team Member 3">
                    <h3>Casey Smith</h3>
                    <p>Project Manager</p>
                </div>
                 <div class="team-member">
                    <img src="https://i.pravatar.cc/150?img=12" alt="Team Member 4">
                    <h3>Morgan Taylor</h3>
                    <p>QA Engineer</p>
                </div>
            </div>
        </section>

        <section class="card about-section">
            <h2>Our Milestones</h2>
            <ul class="timeline">
                <li>
                    <div class="timeline-content">
                        <h3>2020 - Project Inception</h3>
                        <p>Fsoc-Medium was born as a command-line tool for personal task management.</p>
                    </div>
                </li>
                 <li>
                    <div class="timeline-content">
                        <h3>2022 - First Public Release</h3>
                        <p>Launched the first web-based version with a public API, gaining 1,000 active users in the first month.</p>
                    </div>
                </li>
                <li>
                    <div class="timeline-content">
                        <h3>2024 - Open Source</h3>
                        <p>The project was fully open-sourced to encourage community contributions and transparency.</p>
                    </div>
                </li>
                 <li>
                    <div class="timeline-content">
                        <h3>2025 - 100,000 Users</h3>
                        <p>Reached a major milestone, serving over 100,000 users worldwide with our productivity tools.</p>
                    </div>
                </li>
            </ul>
        </section>
    </main>

    <footer>
        <div class="footer-nav">
             <a href="index.html">Dashboard</a> | <a href="about.html">About</a> | <a href="index.html#contact">Contact</a>
        </div>
        <p>&copy; <span id="year"></span> Fsoc-Medium Project. All rights reserved.</p>
    </footer>

    <script src="script.js"></script>

    <script>
    const themeBtn = document.getElementById('theme-toggle');

    const currentTheme = localStorage.getItem('theme');
    if (currentTheme) {
        document.body.classList.add(currentTheme);
    }

    themeBtn.addEventListener('click', () => {
        document.body.classList.toggle('dark-theme');

        if (document.body.classList.contains('dark-theme')) {
            localStorage.setItem('theme', 'dark-theme');
        } else {
            localStorage.removeItem('theme');
        }
    });
    </script>


    <section class="card about-section">
  <h2>Check Weather</h2>
  <div class="weather-search">
    <input
      id="city-input"
      type="text"
      placeholder="Enter a city"
      aria-label="Enter city name"
    >
    <button id="search-weather-btn">Search</button>
  </div>
  <div id="weather-info"></div>
</section>
</body>
</html>