forked from Code-Social/official-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
202 lines (173 loc) · 8.87 KB
/
index.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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<title>Code Social | Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="script.js" defer></script>
<script type="text/javascript" src="darkmode.js" defer></script>
</head>
<body>
<nav class="navbar">
<a href="index.html"><img src="/official-website/images/logo.png"
class="logo"></a>
<span class="website-name">Code Social</span>
<ul>
<li>
<a href="#">Live Events</a>
<ul class="dropdown">
<li><a href="#"> Why don't you react?</a></li>
</ul>
</li>
<li class="community">
<a href="#">Join our Community</a>
<ul class="dropdown">
<li><a href="#">Whatsapp</a></li>
<li><a href="#">Discord</a></li>
</ul>
</li>
<li class="hamburger-menu">
<a href="#" class="toggle-button">
<button class="bar"></button>
<button class="bar"></button>
<button class="bar"></button>
</a>
<ul class="dropdown">
<li><a href="#"> Meet Our Team</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
</li>
<li>
<button id="theme-switch">
</button>
</li>
</ul>
</nav>
<section class="about-community">
<h2>About Community</h2>
<p>
Code Social Community is a learning-focused community dedicated to providing individuals with resources, opportunities to learn, grow, and develop their skills in various technologies. The community helps individuals to explore their interests, expand their knowledge, and connect with like-minded people.
At Code Social Community, members have access to a wealth of resources and learning opportunities, including free learning sessions, mentorship programs, and peer-to-peer learning sessions. The community also provides opportunities for members to network and connect with others in the tech industry.
In addition to its learning and networking opportunities, Code Social Community also serves as a hub for resources, tools, and other materials that can help members enhance their skills and stay up-to-date with the latest trends and best practices in the tech industry.
Whether you are just starting out in your career or are a seasoned professional looking to expand your knowledge and skills, this community offers something for everyone. With its focus on hands-on learning, mentorship, and networking opportunities, Code Social Community is an excellent place to connect with like-minded individuals, build your skills, and take your career to the next level.
</p>
<!-- Social Media Icons -->
<div class="social-icons">
<a href="https://wa.me/your-whatsapp-number" target="_blank">
<img src="images/whatsapp-icon.png" alt="WhatsApp">
</a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank">
<img src="images/discord-icon.png" alt="Discord">
</a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank">
<img src="images/linkedin-icon.png" alt="LinkedIn">
</a>
<a href="https://github.com/Code-Social" target="_blank"></a>
<img src="/images/gitHub.png" alt="Discord">
</a>
</div>
</section>
<section class="calendar">
<div class="calendar-header">Event Calendar</div>
<div class="calendar-grid" id="calendar-grid"></div>
<!-- Event Customization Form -->
<div class="event-form">
<h3>Add Event</h3>
<input type="date" id="event-date" required>
<input type="text" id="event-title" placeholder="Event Title" required>
<button id="add-event">Add Event</button>
</div>
</section>
<br>
<footer>
<section class="footer-section">
<div class="container">
<div class="footer-grid">
<!-- Logo and About Section -->
<div class="footer-logo-section">
<img class="footer-logo" src="/official-website/images/logo.png" alt="Logo" />
<p class="footer-text">Code Social Community is a vibrant and inclusive space for tech enthusiasts to learn, grow, and connect. Founded in 2023, our mission is to empower individuals with resources, mentorship, and
opportunities to cultivate their skills, explore their interests,
and collaborate with like-minded peers. Join us on our journey to create something extraordinary together!</p>
<ul class="social-icons">
<li><a href="https://wa.me/your-whatsapp-number" target="_blank">
<img src="./images/whatsapp-icon.png" alt="WhatsApp"></a>
</li>
<li><a href="https://discord.gg/MSTNyRSPYW" target="_blank">
<img src="./images/discord-icon.png" alt="Discord">
</a>
</li>
<li><a href="https://www.linkedin.com/company/code-social/" target="_blank">
<img src="./images/linkedin-icon.png" alt="LinkedIn">
</a>
</li>
</ul>
</div>
<!-- Company Links -->
<div class="footer-links">
<p class="footer-title">Quick Links</p>
<ul class="footer-list">
<li><a href="#">About Us</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Community Guidelines</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<!-- Help Links -->
<div class="footer-links">
<p class="footer-title">Help</p>
<ul class="footer-list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Volunteer Opportunities</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
</div>
<hr class="footer-divider" />
<p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code-social</p>
</div>
</section>
<footer>
<p>© 2024 Code Social. All rights reserved.</p>
</footer>
<script>
const events = [
{ date: '2024-10-06', title: 'React Workshop' },
{ date: '2024-10-14', title: 'Node.js Webinar' },
{ date: '2024-10-21', title: 'CSS Masterclass' },
];
function generateCalendar() {
const calendarGrid = document.getElementById('calendar-grid');
const daysInMonth = new Date(2024, 9, 0).getDate(); // October 2024
// Clear existing calendar
calendarGrid.innerHTML = '';
for (let day = 1; day <= daysInMonth; day++) {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day';
dayElement.innerText = day;
const event = events.find(e => new Date(e.date).getDate() === day);
if (event) {
const eventElement = document.createElement('div');
eventElement.className = 'event';
eventElement.innerText = event.title;
dayElement.appendChild(eventElement);
}
calendarGrid.appendChild(dayElement);
}
}
document.getElementById('add-event').addEventListener('click', () => {
const date = document.getElementById('event-date').value;
const title = document.getElementById('event-title').value;
if (date && title) {
events.push({ date, title });
generateCalendar();
document.getElementById('event-title').value = '';
}
});
document.addEventListener('DOMContentLoaded', generateCalendar);
</script>
</body>
</html>