-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
264 lines (254 loc) · 17.5 KB
/
index.html
File metadata and controls
264 lines (254 loc) · 17.5 KB
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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Department of Education | Republic of the Philippines</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<a href="/" class="logo">
<span class="logo-shape">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M50 0 L100 25 V75 L50 100 L0 75 V25 Z" fill="#0038a8"/>
<path d="M50 10 L85 30 V70 L50 90 L15 70 V30 Z" fill="#ffffff"/>
<text x="50" y="62" font-size="30" font-family="sans-serif" font-weight="bold" text-anchor="middle" fill="#ce1126">DepEd</text>
</svg>
</span>
<span>DepEd Philippines</span>
</a>
<button class="mobile-nav-toggle" aria-label="Toggle navigation">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<nav class="main-nav">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#programs">Programs</a></li>
<li><a href="#news">News</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="hero">
<div class="hero-content">
<h1 class="hero-headline">Bansang Makabata, Batang Makabansa.</h1>
<p class="hero-subheadline">Fostering a learner-centered public education system for every Filipino.</p>
<div class="cta-buttons">
<a href="#programs" class="primary">Explore Programs</a>
<a href="#news">Latest Updates</a>
</div>
</div>
</section>
<section id="about" class="animated-section">
<div class="container">
<h2 class="section-title">About the Department</h2>
<p>The Department of Education (DepEd) is the executive department of the Philippine government responsible for ensuring access to, promoting equity in, and improving the quality of basic education. It is the main agency tasked to manage and govern the Philippine system of basic education. It is the chief formulator of Philippine education policy and responsible for the Philippine primary and secondary school systems.</p>
<p>We are dedicated to producing Filipino learners who are patriotric, critical thinkers, and lifelong learners, prepared to contribute to a prosperous and just society.</p>
</div>
</section>
<section id="vision-mission" class="animated-section">
<div class="container">
<div class="vision-mission-grid">
<div class="vm-card vision">
<h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
Our Vision
</h3>
<p>We dream of Filipinos who passionately love their country and whose values and competencies enable them to realize their full potential and contribute meaningfully to building the nation. As a learner-centered public institution, the Department of Education continuously improves itself to better serve its stakeholders.</p>
</div>
<div class="vm-card mission">
<h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
Our Mission
</h3>
<p>To protect and promote the right of every Filipino to quality, equitable, culture-based, and complete basic education where: Students learn in a child-friendly, gender-sensitive, safe, and motivating environment. Teachers facilitate learning and constantly nurture every learner. Administrators and staff, as stewards of the institution, ensure an enabling and supportive environment for effective learning to happen. Family, community, and other stakeholders are actively engaged and share responsibility for developing life-long learners.</p>
</div>
</div>
</div>
</section>
<section id="programs" class="animated-section">
<div class="container">
<h2 class="section-title">Core Programs</h2>
<div class="programs-grid">
<div class="program-card">
<div class="program-card-header">K to 12 Program</div>
<div class="program-card-content">The K to 12 Program covers Kindergarten and 12 years of basic education to provide sufficient time for mastery of concepts and skills, develop lifelong learners, and prepare graduates for tertiary education.</div>
</div>
<div class="program-card">
<div class="program-card-header red">Alternative Learning System (ALS)</div>
<div class="program-card-content">ALS is a parallel learning system that provides a viable option to the existing formal instruction for out-of-school youth and adults who have not been able to begin or complete their basic education.</div>
</div>
<div class="program-card">
<div class="program-card-header">Special Education (SPED) Program</div>
<div class="program-card-content">Ensures that learners with exceptionalities are provided with quality, accessible, and relevant education. This program addresses the specific needs of gifted students and those with disabilities.</div>
</div>
</div>
</div>
</section>
<section id="news" class="animated-section">
<div class="container">
<h2 class="section-title">Latest News</h2>
<div class="news-grid">
<div class="news-card">
<div class="news-card-content">
<p class="news-card-date">August 15, 2024</p>
<h3>DepEd Launches National Oplan Balik Eskwela 2024</h3>
<p>The Department of Education (DepEd) officially launched the Oplan Balik Eskwela (OBE) for the School Year (SY) 2024-2025 to ensure a smooth and orderly opening of classes.</p>
<a href="/news/1">Read More →</a>
</div>
</div>
<div class="news-card">
<div class="news-card-content">
<p class="news-card-date">August 10, 2024</p>
<h3>New Curriculum Framework for K-12 Focuses on Foundational Skills</h3>
<p>DepEd has unveiled a revised curriculum framework for the K-12 program, emphasizing the development of foundational literacy and numeracy skills in early grades.</p>
<a href="/news/2">Read More →</a>
</div>
</div>
<div class="news-card">
<div class="news-card-content">
<p class="news-card-date">July 28, 2024</p>
<h3>Partnership with Tech Firms to Boost Digital Literacy</h3>
<p>DepEd forged new partnerships with leading technology companies to enhance digital literacy programs for both students and teachers across the country.</p>
<a href="/news/3">Read More →</a>
</div>
</div>
</div>
</div>
</section>
<section id="stats" class="animated-section">
<div class="container">
<h2 class="section-title">DepEd in Numbers</h2>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3L1 9l4 2.25V15h2V12.44L12 16l8-4.44V15h2v-3.75L23 9l-11-6zm-8 7.37V10.5l8 4.44v1.83l-8-4.4zm16 0l-8 4.4v1.83l8-4.4V10.5zM12 13.5l-5-2.78V10l5 2.78V13.5zM4 20h16v2H4z"/></svg></div>
<div class="stat-number" data-target="47633">0</div>
<div class="stat-label">Public Schools</div>
</div>
<div class="stat-item">
<div class="stat-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg></div>
<div class="stat-number" data-target="975487">0</div>
<div class="stat-label">Teachers</div>
</div>
<div class="stat-item">
<div class="stat-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg></div>
<div class="stat-number" data-target="27850000">0</div>
<div class="stat-label">Students</div>
</div>
<div class="stat-item">
<div class="stat-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-4-4 1.41-1.41L10 12.17l6.59-6.59L18 7l-8 8z"/></svg></div>
<div class="stat-number" data-target="150">0</div>
<div class="stat-label">Ongoing Initiatives</div>
</div>
<div class="stat-item">
<div class="stat-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-5 6h-2v2h2v2h-2v-2h-2v-2h2v-2h2v2z"/></svg></div>
<div class="stat-number" data-target="5000000">0</div>
<div class="stat-label">Learning Resources</div>
</div>
<div class="stat-item">
<div class="stat-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg></div>
<div class="stat-number" data-target="1200000">0</div>
<div class="stat-label">Scholarships Awarded</div>
</div>
</div>
</div>
</section>
<section id="events" class="animated-section">
<div class="container">
<h2 class="section-title">Upcoming Events</h2>
<div class="events-list">
<div class="event-item">
<div class="event-date">
<span class="month">SEP</span>
<span class="day">05</span>
</div>
<div class="event-details">
<h3>National Teachers' Day Celebration</h3>
<p>A nationwide series of events honoring the dedication of Filipino educators.</p>
</div>
</div>
<div class="event-item">
<div class="event-date">
<span class="month">SEP</span>
<span class="day">20</span>
</div>
<div class="event-details">
<h3>National Literacy Conference 2024</h3>
<p>A gathering of experts and practitioners to discuss strategies for improving literacy across all ages.</p>
</div>
</div>
<div class="event-item">
<div class="event-date">
<span class="month">OCT</span>
<span class="day">15</span>
</div>
<div class="event-details">
<h3>Student Technopreneurship Summit</h3>
<p>An event to showcase innovative projects and ideas from senior high school students nationwide.</p>
</div>
</div>
</div>
</div>
</section>
<section id="updates" class="animated-section">
<div class="container">
<h2 class="section-title">Educational Updates & Initiatives</h2>
<div class="initiatives-container">
<p>DepEd continuously strives to enhance the educational landscape through forward-thinking initiatives. Our current focus is on the MATATAG Agenda: to Make the curriculum relevant, Take steps to accelerate delivery of services, Take good care of learners by promoting well-being and inclusive education, and Give support to teachers. This agenda guides our efforts in curriculum reform, digital transformation, and professional development to ensure every Filipino learner is equipped for the future.</p>
</div>
</div>
</section>
</main>
<footer id="contact">
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<h4>About DepEd</h4>
<p>The Department of Education is committed to providing quality, equitable, culture-based, and complete basic education for all Filipinos.</p>
<div class="footer-social-media">
<a href="https://www.facebook.com/DepartmentOfEducation.PH/" target="_blank" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06c0 5.06 3.67 9.27 8.44 10v-7.15H7.9v-2.89h2.54V9.82c0-2.51 1.49-3.9 3.8-3.9 1.09 0 2.23.19 2.23.19v2.47h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.45 2.89h-2.33V22.06c4.77-.73 8.44-4.94 8.44-10 0-5.53-4.5-10.02-10-10.02z"/></svg>
</a>
<a href="https://twitter.com/DepEd_PH" target="_blank" aria-label="Twitter X">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="https://www.youtube.com/c/DepEdPhilippines" target="_blank" aria-label="Youtube">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.58 7.19c-.23-.86-.9-1.52-1.76-1.75C18.26 5 12 5 12 5s-6.26 0-7.82.44c-.86.23-1.52.89-1.76 1.75C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.9 1.52 1.76 1.75C5.74 19 12 19 12 19s6.26 0 7.82-.44c.86-.23 1.52-.89 1.76-1.75C22 15.25 22 12 22 12s0-3.25-.42-4.81zM9.5 15.5V8.5l6 3.5l-6 3.5z"/></svg>
</a>
</div>
</div>
<div class="footer-col">
<h4>Quick Links</h4>
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#programs">Programs</a></li>
<li><a href="/news/1">News</a></li>
<li><a href="#events">Events</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Contact Us</h4>
<ul>
<li>DepEd Complex, Meralco Ave, Pasig City</li>
<li>(02) 8632-1361</li>
<li>deped.gov.ph</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Department of Education. All Rights Reserved. </p>
<p style="font-size: 0.8rem; color: #aaa; margin-top: 15px; line-height: 1.5;">Disclaimer: This is not the official DepEd website. It is a sample application for demonstration purposes. The official website can be found at <a href="https://www.deped.gov.ph/" target="_blank" style="color: #fff; text-decoration: underline;">www.deped.gov.ph</a>.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>