BYOD-OpenSource-Site/community.html at main · ElixirTechCommunity/BYOD-OpenSource-Site · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open Source Community - Open Source World</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <h1>Open Source World</h1>
            </div>
            <ul class="nav-links">
                <li><a href="index.html">Home</a></li>
                <li><a href="history.html">History</a></li>
                <li><a href="benefits.html">Benefits</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="community.html" class="active">Community</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="page-header">
            <h1>Join the Open Source Community</h1>
            <p>Connect with developers worldwide and make a difference</p>
        </section>

        <section class="community-platforms">
            <h2>Popular Open Source Platforms</h2>
            <div class="platforms-grid">
                <div class="platform-card">
                    <i class="fab fa-github"></i>
                    <h3>GitHub</h3>
                    <p>The world's largest platform for open source development, hosting millions of repositories and developers.</p>
                    <a href="#" class="platform-link">Visit GitHub</a>
                </div>
                <div class="platform-card">
                    <i class="fab fa-gitlab"></i>
                    <h3>GitLab</h3>
                    <p>A complete DevOps platform that enables teams to collaborate and build better software.</p>
                    <a href="#" class="platform-link">Visit GitLab</a>
                </div>
                <div class="platform-card">
                    <i class="fab fa-bitbucket"></i>
                    <h3>Bitbucket</h3>
                    <p>A Git-based source code repository hosting service owned by Atlassian.</p>
                    <a href="#" class="platform-link">Visit Bitbucket</a>
                </div>
            </div>
        </section>

        <section class="community-events">
            <h2>Open Source Events</h2>
            <div class="events-grid">
                <div class="event-card">
                    <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Hacktoberfest">
                    <div class="event-info">
                        <h3>Hacktoberfest</h3>
                        <p class="event-date">October 1-31</p>
                        <p>A month-long celebration of open source software, encouraging participation in open source projects.</p>
                        <a href="#" class="event-link">Learn More</a>
                    </div>
                </div>
                <div class="event-card">
                    <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Google Summer of Code">
                    <div class="event-info">
                        <h3>Google Summer of Code</h3>
                        <p class="event-date">May-August</p>
                        <p>A global program focused on bringing new contributors into open source software development.</p>
                        <a href="#" class="event-link">Learn More</a>
                    </div>
                </div>
                <div class="event-card">
                    <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="FOSDEM">
                    <div class="event-info">
                        <h3>FOSDEM</h3>
                        <p class="event-date">February</p>
                        <p>Free and Open source Software Developers' European Meeting, one of the largest open source events.</p>
                        <a href="#" class="event-link">Learn More</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="community-guidelines">
            <h2>Community Guidelines</h2>
            <div class="guidelines-content">
                <div class="guideline">
                    <i class="fas fa-handshake"></i>
                    <h3>Be Respectful</h3>
                    <p>Treat all community members with respect and kindness. Everyone has different backgrounds and experiences.</p>
                </div>
                <div class="guideline">
                    <i class="fas fa-comments"></i>
                    <h3>Communicate Clearly</h3>
                    <p>Be clear and concise in your communication. Use appropriate channels for different types of discussions.</p>
                </div>
                <div class="guideline">
                    <i class="fas fa-heart"></i>
                    <h3>Be Inclusive</h3>
                    <p>Welcome and support people of all backgrounds and identities. Help create a safe and welcoming environment.</p>
                </div>
                <div class="guideline">
                    <i class="fas fa-book"></i>
                    <h3>Follow Documentation</h3>
                    <p>Read and follow project documentation, contribution guidelines, and code of conduct.</p>
                </div>
            </div>
        </section>

        <section class="get-involved">
            <h2>How to Get Involved</h2>
            <div class="involvement-options">
                <div class="option-card">
                    <i class="fas fa-code"></i>
                    <h3>Contribute Code</h3>
                    <p>Submit bug fixes, new features, or improvements to existing projects.</p>
                </div>
                <div class="option-card">
                    <i class="fas fa-book-open"></i>
                    <h3>Write Documentation</h3>
                    <p>Help improve project documentation, tutorials, and guides.</p>
                </div>
                <div class="option-card">
                    <i class="fas fa-comment-dots"></i>
                    <h3>Answer Questions</h3>
                    <p>Help others by answering questions in forums and issue trackers.</p>
                </div>
                <div class="option-card">
                    <i class="fas fa-bug"></i>
                    <h3>Report Bugs</h3>
                    <p>Help improve software by reporting bugs and issues you encounter.</p>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>About Open Source World</h3>
                <p>Your gateway to understanding and participating in the open source movement.</p>
            </div>
            <div class="footer-section">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="history.html">History</a></li>
                    <li><a href="benefits.html">Benefits</a></li>
                    <li><a href="projects.html">Projects</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Connect With Us</h3>
                <div class="social-links">
                    <a href="#"><i class="fab fa-github"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 Open Source World. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>