-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
196 lines (191 loc) · 5.55 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Course in 2021 Summer</title>
<link rel="stylesheet" href="./css/app.css" />
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
</head>
<body>
<header class="bg-blue-800 mb-8">
<div class="container mx-auto py-10 text-center select-none">
<span class="text-3xl sm:text-4xl md:text-5xl text-white"
>網頁程式設計 軟體教具</span
>
</div>
</header>
<section class="mt-8 sm:mt-16 md:mt-24 mb-8">
<div class="container mx-auto mt-12 mb-10">
<div class="container text-center mb-3 md:mb-8 select-none">
<span class="text-2xl sm:text-3xl md:text-4xl">課程目錄</span>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 p-5">
<a
href="./Course/course1.html"
class="
text-center
p-6
bg-blue-600
rounded-lg
select-none
cursor-pointer
hover:bg-blue-800
"
>
<span class="block text-gray-50 text-lg">網站面面觀</span>
<span class="block text-gray-200 text-base">認識 web and HTML</span>
</a>
<a
href="https://web-course-2nd-tool.vercel.app/"
class="
text-center
p-6
bg-blue-600
rounded-lg
select-none
cursor-pointer
hover:bg-blue-800
"
>
<span class="block text-gray-50 text-lg">想要好看的頁面?</span>
<span class="block text-gray-200 text-base">增加香料 CSS</span>
</a>
<a
href="https://web-course-3rd-tool.vercel.app/"
class="
text-center
p-6
bg-blue-600
rounded-lg
select-none
cursor-pointer
hover:bg-blue-800
"
>
<span class="block text-gray-50 text-lg">工程師就是懶!</span>
<span class="block text-gray-200 text-base"
>使用 CSS Framework</span
>
</a>
<a
href="https://web-cource-4th-tool.vercel.app/"
class="
text-center
p-6
bg-blue-600
rounded-lg
select-none
cursor-pointer
hover:bg-blue-800
"
>
<span class="block text-gray-50 text-lg">為你的網頁加一點功能</span>
<span class="block text-gray-200 text-base"
>加入 JavaScript 魔法</span
>
</a>
<a
class="
text-center
p-6
bg-blue-600
rounded-lg
select-none
cursor-pointer
hover:bg-blue-800
"
>
<span class="block text-gray-50 text-lg">加密的情話(1)</span>
<span class="block text-gray-200 text-base">QRcode 產生器專題</span>
</a>
<a
class="
text-center
p-6
bg-blue-600
rounded-lg
select-none
cursor-pointer
hover:bg-blue-800
"
>
<span class="block text-gray-50 text-lg">加密的情話(2)</span>
<span class="block text-gray-200 text-base"
>QRcode 產生器 上架</span
>
</a>
</div>
</div>
</section>
<footer class="bg-gray-200 mt-12 fixed left-0 right-0 bottom-0">
<div class="container mx-auto py-2 text-center select-none">
Power By CXPhoenix
</div>
</footer>
<div id="NotReleaseModal" class="hidden">
<div
class="
fixed
top-0
left-0
w-full
h-full
bg-black bg-opacity-50
flex
justify-center
items-center
"
>
<div
class="
bg-white
rounded-xl
w-full
sm:w-3/4
md:w-1/2
h-auto
grid grid-cols-1
p-6
gap-3
"
>
<div class="text-center">
<i class="fas fa-tools text-xl sm:text-2xl md:text-3xl"></i>
</div>
<div class="text-center">
<span class="text-lg sm:text-xl md:text-2xl"
>Opps! 尚未開放...</span
>
</div>
<div class="text-center">
<span class="text-base sm:text-lg md:text-xl"
>本區域還在施工，所以沒有開放喔～</span
>
</div>
<button
id="NotReleaseModalBtn"
onclick="closeModal"
class="
bg-blue-600
hover:bg-blue-800
rounded-lg
text-center
py-3
select-none
"
>
<span class="text-white">我知道了！</span>
</button>
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>