Skip to content

Commit 93a502f

Browse files
WassCodeurWassCodeur
committed
Add initial SVG images and JavaScript files for language selection and slider functionality
1 parent c791eaf commit 93a502f

File tree

112 files changed

+4652
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+4652
-0
lines changed

‎CoC.html‎

Lines changed: 894 additions & 0 deletions
Large diffs are not rendered by default.

‎assets/css/coc.css‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
:root {
2+
--primary-green: #27ae60;
3+
--secondary-green: #e8f5e9;
4+
--text-dark: #333333;
5+
--text-light: #666666;
6+
--background-light: #f5f5f5;
7+
--background-white: #ffffff;
8+
--accent-yellow: #ffd700;
9+
}
10+
11+
/* Hero Section */
12+
.coc-hero {
13+
text-align: center;
14+
margin-top: 150px;
15+
padding: 4rem 1rem;
16+
background-color: var(--background-light);
17+
}
18+
19+
.coc-hero h1 {
20+
font-size: 2.2rem;
21+
margin-bottom: 1rem;
22+
color: var(--text-dark);
23+
}
24+
25+
.coc-hero p {
26+
font-size: 1.1rem;
27+
color: var(--text-light);
28+
max-width: 700px;
29+
margin: 0 auto 2rem;
30+
}
31+
32+
/* Main Content */
33+
.container {
34+
max-width: 1100px;
35+
margin: 0 auto;
36+
padding: 2rem 1rem;
37+
}
38+
39+
.section-title {
40+
text-align: center;
41+
margin-bottom: 2.5rem;
42+
color: var(--text-dark);
43+
position: relative;
44+
}
45+
46+
.section-title::after {
47+
content: "";
48+
display: block;
49+
width: 50px;
50+
height: 3px;
51+
background-color: var(--primary-green);
52+
margin: 0.5rem auto 0;
53+
}
54+
55+
.content-card {
56+
background-color: white;
57+
border-radius: 8px;
58+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
59+
padding: 2rem;
60+
margin-bottom: 2rem;
61+
}
62+
63+
h2 {
64+
font-size: 1.5rem;
65+
margin: 1.5rem 0 1rem;
66+
color: var(--text-dark);
67+
border-bottom: 2px solid var(--secondary-green);
68+
padding-bottom: 0.5rem;
69+
}
70+
71+
h3 {
72+
font-size: 1.2rem;
73+
margin: 1.2rem 0 0.8rem;
74+
color: var(--text-dark);
75+
}
76+
77+
p {
78+
margin-bottom: 1rem;
79+
color: var(--text-light);
80+
}
81+
82+
ul,
83+
ol {
84+
margin-bottom: 1rem;
85+
padding-left: 2rem;
86+
color: var(--text-light);
87+
}
88+
89+
li {
90+
margin-bottom: 0.5rem;
91+
}
92+
93+
.highlight {
94+
background-color: var(--secondary-green);
95+
border-left: 4px solid var(--primary-green);
96+
padding: 1rem;
97+
margin: 1rem 0;
98+
}
99+
100+
.contact-info {
101+
background-color: var(--secondary-green);
102+
border-radius: 8px;
103+
padding: 1.5rem;
104+
margin: 1.5rem 0;
105+
}
106+
107+
.green-button {
108+
display: inline-block;
109+
background-color: var(--primary-green);
110+
color: white;
111+
padding: 0.8rem 2rem;
112+
border-radius: 4px;
113+
text-decoration: none;
114+
font-weight: 500;
115+
margin-top: 1rem;
116+
}
117+
118+
/* Footer */
119+
footer {
120+
background-color: var(--background-light);
121+
padding: 2rem 5%;
122+
text-align: center;
123+
margin-top: 3rem;
124+
}
125+
126+
.footer-logo {
127+
margin-bottom: 1rem;
128+
}
129+
130+
.footer-logo img {
131+
height: 30px;
132+
}
133+
134+
.footer-nav {
135+
display: flex;
136+
justify-content: center;
137+
list-style: none;
138+
margin-bottom: 1rem;
139+
}
140+
141+
.footer-nav li {
142+
margin: 0 1rem;
143+
}
144+
145+
.footer-nav a {
146+
text-decoration: none;
147+
color: var(--text-dark);
148+
font-size: 0.9rem;
149+
}
150+
151+
.social-links {
152+
display: flex;
153+
justify-content: center;
154+
margin: 1rem 0;
155+
}
156+
157+
.social-links a {
158+
margin: 0 0.5rem;
159+
color: var(--text-dark);
160+
text-decoration: none;
161+
}
162+
163+
.copyright {
164+
font-size: 0.8rem;
165+
color: var(--text-light);
166+
}
167+
168+
@media (max-width: 768px) {
169+
.navbar {
170+
flex-direction: column;
171+
padding: 1rem;
172+
}
173+
174+
.nav-links {
175+
margin-top: 1rem;
176+
flex-wrap: wrap;
177+
justify-content: center;
178+
}
179+
180+
.nav-links li {
181+
margin: 0.5rem;
182+
}
183+
184+
.coc-hero h1 {
185+
font-size: 1.8rem;
186+
}
187+
188+
.coc-hero p {
189+
font-size: 1rem;
190+
}
191+
}

‎assets/css/getinvolve.css‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
.community-section-container {
2+
background-color: #ecf4e9;
3+
margin-top: 10px;
4+
}
5+
6+
.community-section {
7+
display: flex;
8+
align-items: center;
9+
padding: 4rem 2rem;
10+
max-width: 1200px;
11+
margin: 0 auto;
12+
gap: 4rem;
13+
padding: 40px 0;
14+
text-align: center;
15+
16+
}
17+
18+
.community-content {
19+
flex: 1;
20+
}
21+
22+
.get-involved-tag {
23+
background-color: #e8f4e8;
24+
color: #2c9f2c;
25+
padding: 5px 10px;
26+
border-radius: 20px;
27+
display: inline-block;
28+
margin-bottom: 1rem;
29+
font-size: 0.875rem;
30+
}
31+
32+
.community-title {
33+
font-size: 2.5rem;
34+
font-weight: bold;
35+
margin-bottom: 1.5rem;
36+
line-height: 1.2;
37+
}
38+
39+
.contact-button {
40+
background-color: #2c9f2c;
41+
color: white;
42+
border: none;
43+
padding: 0.75rem 1.5rem;
44+
border-radius: 5px;
45+
cursor: pointer;
46+
transition: background-color 0.3s ease;
47+
}
48+
49+
.contact-button:hover {
50+
background-color: #259425;
51+
}
52+
53+
.community-options {
54+
display: flex;
55+
flex-direction: column;
56+
gap: 1.5rem;
57+
}
58+
59+
/* .vertical-line {
60+
position: absolute;
61+
left: 20px;
62+
top: 0;
63+
bottom: 0;
64+
width: 2px;
65+
background-color: rgba(0, 0, 0, 0.2);
66+
height: 100%;
67+
} */
68+
69+
.option {
70+
display: flex;
71+
align-items: center;
72+
gap: 1rem;
73+
}
74+
75+
.option-icon {
76+
width: 50px;
77+
height: 50px;
78+
79+
border-radius: 50%;
80+
display: flex;
81+
align-items: center;
82+
justify-content: center;
83+
}
84+
85+
.option-icon img {
86+
width: 30px;
87+
height: 30px;
88+
}
89+
90+
.option-content h3 {
91+
font-size: 1.125rem;
92+
margin-bottom: 0.5rem;
93+
}
94+
95+
.option-content p {
96+
color: #666;
97+
font-size: 0.875rem;
98+
}
99+
100+
@media (max-width: 768px) {
101+
.community-section {
102+
flex-direction: column;
103+
text-align: center;
104+
gap: 2rem;
105+
}
106+
107+
.community-options {
108+
align-items: center;
109+
}
110+
111+
.option {
112+
flex-direction: column;
113+
text-align: center;
114+
}
115+
}

0 commit comments

Comments
 (0)