393 lines
14 KiB
HTML
393 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh" class="light">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>林赛花杯写作比赛 - 以文字传递温情</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||
/>
|
||
<style>
|
||
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap");
|
||
body {
|
||
font-family: "Noto Sans SC", sans-serif;
|
||
}
|
||
|
||
/* 淡入动画 */
|
||
.fade-in {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: all 0.6s ease;
|
||
}
|
||
.fade-in.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 主题切换 */
|
||
.theme-transition {
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="theme-transition bg-white text-gray-800">
|
||
<!-- 导航栏 -->
|
||
<header
|
||
class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 theme-transition"
|
||
>
|
||
<div
|
||
class="container mx-auto px-4 py-3 flex justify-between items-center"
|
||
>
|
||
<div class="flex items-center">
|
||
<div
|
||
class="w-10 h-10 rounded-full bg-amber-500 flex items-center justify-center text-white font-bold mr-2"
|
||
>
|
||
林
|
||
</div>
|
||
<div>
|
||
<h1 class="text-xl font-bold text-amber-600">林赛花杯</h1>
|
||
<p class="text-xs text-gray-500 -mt-1">写作比赛</p>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="hidden md:flex space-x-8">
|
||
<a
|
||
href="index.html"
|
||
class="font-medium text-amber-600 border-b-2 border-amber-500 pb-1"
|
||
>首页</a
|
||
>
|
||
<a
|
||
href="about.html"
|
||
class="font-medium text-gray-600 hover:text-amber-500 transition"
|
||
>关于比赛</a
|
||
>
|
||
<a
|
||
href="awards.html"
|
||
class="font-medium text-gray-600 hover:text-amber-500 transition"
|
||
>奖项设置</a
|
||
>
|
||
<a
|
||
href="works.html"
|
||
class="font-medium text-gray-600 hover:text-amber-500 transition"
|
||
>优秀作品</a
|
||
>
|
||
<a
|
||
href="contact.html"
|
||
class="font-medium text-gray-600 hover:text-amber-500 transition"
|
||
>联系咨询</a
|
||
>
|
||
</nav>
|
||
|
||
<div class="flex items-center space-x-4">
|
||
<!-- 主题切换 -->
|
||
<button
|
||
id="theme-toggle"
|
||
class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition"
|
||
>
|
||
<i class="fas fa-moon text-gray-600"></i>
|
||
</button>
|
||
|
||
<!-- 移动端菜单按钮 -->
|
||
<button
|
||
id="mobile-menu-toggle"
|
||
class="md:hidden p-2 rounded-lg bg-gray-100"
|
||
>
|
||
<i class="fas fa-bars text-gray-700"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 移动端菜单 -->
|
||
<div
|
||
id="mobile-menu"
|
||
class="md:hidden bg-white shadow-lg py-4 px-6 hidden theme-transition"
|
||
>
|
||
<div class="flex flex-col space-y-4">
|
||
<a href="index.html" class="font-medium text-amber-600">首页</a>
|
||
<a href="about.html" class="font-medium text-gray-600">关于比赛</a>
|
||
<a href="awards.html" class="font-medium text-gray-600">奖项设置</a>
|
||
<a href="works.html" class="font-medium text-gray-600">优秀作品</a>
|
||
<a href="contact.html" class="font-medium text-gray-600">联系咨询</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero横幅 -->
|
||
<section
|
||
class="pt-32 pb-20 bg-gradient-to-br from-amber-50 to-amber-100 theme-transition"
|
||
>
|
||
<div class="container mx-auto px-4">
|
||
<div class="max-w-3xl mx-auto text-center fade-in">
|
||
<h1 class="text-4xl md:text-5xl font-bold text-amber-800 mb-6">
|
||
林赛花杯写作比赛
|
||
</h1>
|
||
<p class="text-xl md:text-2xl text-amber-600 mb-6">
|
||
以文字传递温情，用笔墨书写华章
|
||
</p>
|
||
<p class="text-gray-600 mb-10 max-w-2xl mx-auto">
|
||
马来西亚柔佛州华文写作比赛，由林赛花教育基金主办，柔佛州华校校友会联合会承办，面向全柔独中及国中学生。
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||
<a
|
||
href="about.html"
|
||
class="px-6 py-3 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition shadow-md"
|
||
>了解比赛</a
|
||
>
|
||
<a
|
||
href="works.html"
|
||
class="px-6 py-3 border-2 border-amber-500 text-amber-600 rounded-lg font-medium hover:bg-amber-50 transition"
|
||
>欣赏作品</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 主要入口卡片 -->
|
||
<section class="py-16 bg-white theme-transition">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">
|
||
探索林赛花杯
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<!-- 比赛介绍卡片 -->
|
||
<div
|
||
class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition fade-in"
|
||
>
|
||
<div
|
||
class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-xl mb-4"
|
||
>
|
||
<i class="fas fa-book-open"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-800 mb-3">比赛介绍</h3>
|
||
<p class="text-gray-600 mb-4">
|
||
了解林赛花教育基金背景、比赛宗旨与参赛细则，掌握最新比赛信息。
|
||
</p>
|
||
<a
|
||
href="about.html"
|
||
class="text-amber-600 font-medium flex items-center hover:text-amber-700 transition"
|
||
>
|
||
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 优秀作品卡片 -->
|
||
<div
|
||
class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition fade-in"
|
||
>
|
||
<div
|
||
class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-xl mb-4"
|
||
>
|
||
<i class="fas fa-trophy"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-800 mb-3">优秀作品</h3>
|
||
<p class="text-gray-600 mb-4">
|
||
欣赏往届获奖学生的优秀作品，感受文字的力量与华文写作的魅力。
|
||
</p>
|
||
<a
|
||
href="works.html"
|
||
class="text-amber-600 font-medium flex items-center hover:text-amber-700 transition"
|
||
>
|
||
查看作品 <i class="fas fa-arrow-right ml-2 text-sm"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 联系咨询卡片 -->
|
||
<div
|
||
class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition fade-in"
|
||
>
|
||
<div
|
||
class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-xl mb-4"
|
||
>
|
||
<i class="fas fa-envelope"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-800 mb-3">联系咨询</h3>
|
||
<p class="text-gray-600 mb-4">
|
||
咨询比赛相关事宜或获取更多信息，我们期待您的关注与支持！
|
||
</p>
|
||
<a
|
||
href="contact.html"
|
||
class="text-amber-600 font-medium flex items-center hover:text-amber-700 transition"
|
||
>
|
||
联系我们 <i class="fas fa-arrow-right ml-2 text-sm"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 最新公告 -->
|
||
<section class="py-16 bg-gray-50 theme-transition">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4">
|
||
最新公告
|
||
</h2>
|
||
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
|
||
获取林赛花杯写作比赛的最新动态与资讯
|
||
</p>
|
||
|
||
<div class="max-w-4xl mx-auto">
|
||
<!-- 公告1 -->
|
||
<div class="bg-white rounded-xl shadow-md p-6 mb-6 fade-in">
|
||
<div
|
||
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||
>
|
||
<h3 class="text-xl font-bold text-gray-800">
|
||
第九届林赛花杯写作比赛正式启动
|
||
</h3>
|
||
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||
>2023年10月15日</span
|
||
>
|
||
</div>
|
||
<p class="text-gray-600 mb-4">
|
||
第九届林赛花杯写作比赛现已开始接受投稿，本届主题为「传统美德与现代生活」，截稿日期为2024年1月31日。
|
||
</p>
|
||
<a
|
||
href="#"
|
||
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||
>阅读全文 →</a
|
||
>
|
||
</div>
|
||
|
||
<!-- 公告2 -->
|
||
<div class="bg-white rounded-xl shadow-md p-6 mb-6 fade-in">
|
||
<div
|
||
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||
>
|
||
<h3 class="text-xl font-bold text-gray-800">
|
||
第八届林赛花杯获奖名单公布
|
||
</h3>
|
||
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||
>2023年8月28日</span
|
||
>
|
||
</div>
|
||
<p class="text-gray-600 mb-4">
|
||
第八届林赛花杯写作比赛评审工作已完成，共有32篇作品获奖。颁奖典礼将于9月15日举行。
|
||
</p>
|
||
<a
|
||
href="#"
|
||
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||
>阅读全文 →</a
|
||
>
|
||
</div>
|
||
|
||
<!-- 公告3 -->
|
||
<div class="bg-white rounded-xl shadow-md p-6 fade-in">
|
||
<div
|
||
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||
>
|
||
<h3 class="text-xl font-bold text-gray-800">
|
||
写作工作坊顺利举行
|
||
</h3>
|
||
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||
>2023年7月10日</span
|
||
>
|
||
</div>
|
||
<p class="text-gray-600 mb-4">
|
||
林赛花教育基金于7月8日举办了华文写作工作坊，邀请知名作家分享创作经验，吸引近百名学生参与。
|
||
</p>
|
||
<a
|
||
href="#"
|
||
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||
>阅读全文 →</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 统计数据 -->
|
||
<section class="py-16 bg-amber-500 text-white">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||
<div class="fade-in">
|
||
<div class="text-4xl font-bold mb-2">9</div>
|
||
<div class="text-amber-100">成功举办届数</div>
|
||
</div>
|
||
<div class="fade-in">
|
||
<div class="text-4xl font-bold mb-2">320+</div>
|
||
<div class="text-amber-100">累计参赛作品</div>
|
||
</div>
|
||
<div class="fade-in">
|
||
<div class="text-4xl font-bold mb-2">42</div>
|
||
<div class="text-amber-100">合作学校</div>
|
||
</div>
|
||
<div class="fade-in">
|
||
<div class="text-4xl font-bold mb-2">96</div>
|
||
<div class="text-amber-100">获奖学生</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 名言引用 -->
|
||
<section class="py-16 bg-white theme-transition">
|
||
<div class="container mx-auto px-4">
|
||
<div class="max-w-3xl mx-auto text-center">
|
||
<i class="fas fa-quote-left text-amber-500 text-4xl mb-6"></i>
|
||
<blockquote
|
||
class="text-2xl md:text-3xl font-light text-gray-700 italic mb-6 fade-in"
|
||
>
|
||
"读书破万卷，下笔如有神。"
|
||
</blockquote>
|
||
<p class="text-gray-600 text-lg">—— 杜甫</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-gray-800 text-white pt-12 pb-6 theme-transition">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
||
<div>
|
||
<h3 class="text-xl font-bold mb-4 text-amber-400">
|
||
林赛花教育基金
|
||
</h3>
|
||
<p class="text-gray-300">
|
||
致力于推广华文教育与中华传统文化，培养青少年写作能力与人文素养。
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-4 text-amber-400">主办单位</h3>
|
||
<ul class="space-y-2 text-gray-300">
|
||
<li>妙妙机构</li>
|
||
<li>林赛花教育基金</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-4 text-amber-400">承办单位</h3>
|
||
<ul class="space-y-2 text-gray-300">
|
||
<li>柔佛州华校校友会联合会 (PPBP)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-4 text-amber-400">联系信息</h3>
|
||
<ul class="space-y-2 text-gray-300">
|
||
<li>
|
||
<i class="fas fa-envelope mr-2"></i> contact@linsaihua.org
|
||
</li>
|
||
<li><i class="fas fa-phone mr-2"></i> +60 7-123 4567</li>
|
||
<li><i class="fas fa-map-marker-alt mr-2"></i> 马来西亚柔佛州</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t border-gray-700 pt-6 text-center text-gray-400">
|
||
<p>
|
||
© 2023 林赛花教育基金·林赛花杯官方网站 |
|
||
非官方展示站，仅供公益学习使用
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="./assets/script.js"></script>
|
||
</body>
|
||
</html>
|