-
Notifications
You must be signed in to change notification settings - Fork 122
/
join_community.html
143 lines (126 loc) · 3.47 KB
/
join_community.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Social</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #7be4b0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
padding: 20px; /* Reduced padding */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
width: 60%; /* Reduced width */
max-width: 350px; /* Reduced max width */
height: auto; /* Dynamic height */
}
.container img {
width: 40%; /* Full width within the container */
max-width: 250px; /* Reduced maximum width */
height: auto; /* Maintain aspect ratio */
border-radius: 10px;
}
.container h1 {
font-size: 24px;
margin: 15px 0; /* Adjusted margin */
}
.social-btn {
display: block;
background-color: #4CAF50;
color: white;
border: none;
padding: 12px; /* Slightly reduced padding */
text-align: center;
text-decoration: none;
font-size: 16px; /* Slightly smaller font */
border-radius: 8px;
margin: 8px 0; /* Reduced margin between buttons */
cursor: pointer;
transition: background-color 0.3s;
}
.social-btn:hover {
background-color: #45a049;
}
/* Circular button at the top-right corner */
.dark-mode-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #333;
color: white;
border: none;
width: 40px; /* Reduced button size */
height: 40px; /* Reduced button size */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s;
}
.dark-mode-btn:hover {
background-color: #555;
}
.dark-mode-btn i {
font-size: 18px; /* Adjusted icon size */
}
</style>
</head>
<body>
<div class="container">
<img src="images/code_social_logo.png" alt="Code Social">
<h1>Stay Connected</h1>
<a href="https://www.instagram.com" class="social-btn">Instagram</a>
<a href="https://www.discord.com" class="social-btn">Discord</a>
<a href="https://www.youtube.com" class="social-btn">Youtube</a>
<a href="https://www.twitter.com" class="social-btn">Twitter</a>
<!-- Circular Switch to Dark Mode Button -->
<button class="dark-mode-btn" onclick="toggleDarkMode()">
<i>🌙</i>
</button>
</div>
<script>
function toggleDarkMode() {
const body = document.body;
body.classList.toggle('dark-mode');
// Update button icon/text if needed
const btn = document.querySelector('.dark-mode-btn i');
if (body.classList.contains('dark-mode')) {
btn.textContent = '☀️';
} else {
btn.textContent = '🌙';
}
}
</script>
<style>
/* Dark Mode Styles */
body.dark-mode {
background-color: #333;
color: white;
}
body.dark-mode .container {
background-color: #444;
color: white;
}
body.dark-mode .social-btn {
background-color: #666;
}
body.dark-mode .social-btn:hover {
background-color: #777;
}
</style>
</body>
</html>