-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (144 loc) · 6.54 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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZeroDay C00kie 資安工作坊</title>
<link rel="shortcut icon" href="favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/ebc8a22fda.js" crossorigin="anonymous"></script>
</head>
<body class="bg-orange-50 min-h-screen flex flex-col">
<header class="flex mt-5 items-center justify-center">
<div class="text-gray-600 text-5xl font-bold mr-2">>_</div>
<img class="h-52 w-52" src="./logo.png">
</header>
<hr style="border: 1px solid rgb(167, 167, 167);">
<main class="container mx-auto lg:p-12 p-8 flex-grow text-center">
<div class="flex justify-center">
<img class="h-40 w-auto" src="./title.png">
</div>
<section id="schedule" class="mb-12">
<h2 class="text-3xl font-semibold mb-4 text-amber-600">時間流程</h2>
<div class="flex justify-center text-lg bg-white py-4 shadow rounded-xl">
<ul class="list-none list-inside mx-3 text-right text-gray-600">
<li>08:30 - 09:00</li>
<li>09:00 - 12:00</li>
<li>12:00 - 13:00</li>
<li>13:00 - 14:30</li>
<li>14:30 - 16:00</li>
<li>16:00 - 17:00</li>
</ul>
<ul class="list-none list-inside mx-3 text-left text-gray-600">
<li>報到</li>
<li>資安資安，安什麼心？</li>
<li>午餐時間</li>
<li>Linux 基礎操作</li>
<li>基礎網頁安全</li>
<li>講者經驗分享</li>
</ul>
</div>
</section>
<section id="speakers" class="mb-12">
<h2 class="text-3xl font-semibold mb-4 text-amber-600">講者介紹</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white py-4 rounded-xl shadow">
<div class="flex justify-center pb-3">
<img class="w-32 h-32 p-1 rounded-full ring-2 ring-orange-300"
src="https://cdn-file.yuan-tw.net/xiung_3.png" alt="osga">
</div>
<h3 class="text-xl font-semibold mb-2">黃宥睿</h3>
<div class="flex justify-center text-sm md:text-lg">
<ul class="list-none list-outside mx-3 text-nowrap font-bold text-left text-gray-600">
<li>THJCC</li>
<li>SCAICT</li>
<li>臺灣資安跨校社團</li>
<li>MyFirstCTF 2024</li>
<li>SITCON 2024 閃電講</li>
</ul>
<ul class="list-none list-outside mx-3 text-nowrap text-right text-gray-600">
<li>出題者</li>
<li>資訊組講師</li>
<li>顧問</li>
<li>銀質獎</li>
<li>主持人</li>
</ul>
</div>
<br>
<hr style="border: 1px solid rgb(167, 167, 167);">
<br>
<ul class="text-2xl">
<a href='https://www.instagram.com/os324_/'><i class="px-2 fa-brands fa-instagram"></i></a>
<a href='https://osga.lol'><i class="px-2 fa-solid fa-circle-user"></i></a>
</ul>
</div>
<div class="bg-white py-4 rounded-xl shadow flex-col ">
<div class="flex justify-center pb-3">
<img class="w-32 h-32 p-1 rounded-full ring-2 ring-orange-300"
src="https://cdn-file.yuan-tw.net/xiung_4.png" alt="osga">
</div>
<h3 class="text-xl font-semibold mb-2">呂承紘</h3>
<div class="text-sm md:text-lg flex justify-center">
<ul class="list-none list-outside mx-3 text-nowrap font-bold text-left text-gray-600">
<li>臺科電子工程系</li>
<li>外商公司實習工程師</li>
<li>四零四網路資訊企業社</li>
<li>金盾獎 2023 高中職組</li>
<li>全國學習歷程未來教育論壇</li>
</ul>
<ul class="list-none list-outside mx-3 text-nowrap text-right text-gray-600">
<li>資安人才正取</li>
<li>現職</li>
<li>負責人</li>
<li>第一名</li>
<li>學生代表</li>
</ul>
</div>
<br>
<hr style="border: 1px solid rgb(167, 167, 167);">
<br>
<ul class="text-2xl">
<a href='https://www.instagram.com/howtolosemoney.cc/'> <i class="px-2 fa-brands fa-instagram"></i></a>
<a href="https://ricky.place"><i class="px-2 fa-solid fa-circle-user"></i></a>
</ul>
</div>
</div>
</section>
<section id="content" class="mb-12">
<h2 class="text-3xl font-semibold mb-4 text-amber-600">課程內容</h2>
<ul class="list-none list-inside text-gray-600 text-lg bg-white shadow rounded-xl py-4">
<li>中心講師課程 - 資安資安，安什麼心？</li>
<li>學生講師 — Linux 基礎操作</li>
<li>學生講師 — 基礎網頁安全</li>
<li>學生講師 – 經驗分享</li>
<br>
<li><a style="text-decoration: underline;" class="text-blue-600" href="https://hackmd.io/@osga/SyN8RmPtR"
target="_blank">詳細課程資訊 [ HackMD ]</a></li>
</ul>
</section>
<div class="text-center">
<a onclick="alert('請見社團 LINE 群')"
class="bg-orange-300 text-gray-700 font-black px-8 py-5 text-2xl rounded-full hover:bg-orange-400 transition duration-300">立即報名！！</a>
</div>
<div class="container mt-20 lg:flex lg:justify-center">
<img
class="h-auto lg:mx-3 md:max-w-md rounded-lg border-orange-200 border-4 transition-all duration-300 blur-sm hover:blur-none hover:scale-125"
src="https://cdn-file.yuan-tw.net/xiung_2.png" alt="海報">
<br>
<br>
<img
class="h-auto lg:mx-3 md:max-w-md rounded-lg border-orange-200 border-4 transition-all duration-300 blur-sm hover:blur-none hover:scale-125"
src="https://cdn-file.yuan-tw.net/xiung_1.png" alt="海報">
</div>
<div class="mt-10">
<h2 class="text-xl font-semibold mb-4 text-amber-800">協辦單位：<p class="text-lg text-amber-600">教育部高中職資安教學資源與推廣中心</p><p class="text-lg text-amber-600">臺北市立內湖高中</p></h2>
</div>
</main>
<footer class="text-black p-4 mt-12">
<div class="container mx-auto text-center">
<p class="mt-2">聯絡我們：<a href="https://instagram.com/zeroday_cookie">Instagram</a></p>
<p>© 2024 ZeroDay C00kie 零日餅乾社</p>
</div>
</footer>
</body>
</html>