forked from NM-TAFE/civ-web-technologies-classes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
246 lines (230 loc) · 14.1 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<title>Home | C4Prog-WT-2023-S2</title>
<!-- CSS -->
<!-- reset if needed, not if using tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="assets/css/fontawesome.css" rel="stylesheet">
<link href="assets/css/brands.css" rel="stylesheet">
<link href="assets/css/solid.css" rel="stylesheet">
<!-- Personal CSS if required -->
<!-- JavScript -->
<script src="./assets/js/highlight.min.js" defer></script>
</head>
<body class="flex flex-col">
<div class="sticky top-0">
<header class="bg-gray-950 text-white p-2 flex gap-4">
<h1 class="text-4xl grow">ICT40120 Certificate IV in IT (Programming) Web Tech</h1>
<div class="text-2xl flex-row flex gap-1 mt-1 pt-1">
<i class="fa-brands fa-html5 hover:text-blue-300 transition duration-500 ease-in-out"></i>
<i class="fa-brands fa-css3 hover:text-orange-300 transition duration-500 ease-in-out"></i>
<i class="fa-brands fa-js hover:text-amber-300 transition duration-500 ease-in-out"></i>
<p class="-mt-1 ml-2">Dashboard</p>
</div>
</header>
<nav class="mb-4 bg-gray-200 shadow-md shadow-black/25">
<div class="flex flex-row px-2 py-3 items-center gap-4">
<p><a class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none shadow-none
border border-red-800 bg-red-800 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out"
href="./"><i class="fa fa-home"></i></a></p>
<p><a href="./session-01/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out">#01</a></p>
<p><a href="./session-02/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out">#02</a></p>
<p><a href="./session-03/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out">#03</a></p>
<p><a href="./session-04/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out">#04</a></p>
<p><a href="./session-05/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out">#05</a></p>
<p><a href="./session-06/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out">#06</a></p>
<p><a href="./session-07/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out">#07</a></p>
<p><a href="./session-08/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out">#08</a></p>
<p><a href="./session-09/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out">#09</a></p>
<p><a href="session-11/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out">#11</a></p>
<p><a href="./session-12/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out ">#12</a></p>
<p><a href="./session-13/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out ">#13</a></p>
<p><a href="./session-14/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out ">#14</a></p>
<p><a href="./session-15/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out ">#15</a></p>
<p><a href="./session-16/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out ">#16</a></p>
<p><a href="./session-17/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out ">#17</a></p>
<p><a href="./session-18/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out ">#18</a></p>
<p><a href="./session-19/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out ">#19</a></p>
<p><a href="./session-20/" class="px-2 py-1
rounded-lg shadow shadow-black/25 hover:shadow-none
border border-gray-950 bg-gray-950 text-gray-100
hover:border-gray-500 hover:bg-gray-300 hover:text-gray-800
transition duration-500 delay-100 ease-in-out ">#20</a></p>
</div>
</nav>
</div>
<main class="w-3/4 mx-auto bg-gray-50 p-4 border border-gray-200 mb-8 flex-1">
<article>
<header class="-mt-4 -mx-4 px-4 bg-gray-700 text-gray-100">
<h2 class="text-3xl py-4 mb-6">Home</h2>
</header>
<section class="my-4 flex flex-col gap-4">
<h3 class="text-2xl text-gray-800">
Welcome to the Learning Project
</h3>
<p>Links above will go to various sessions in the semester.</p>
<p></p>
</section>
</article>
<section class="grid grid-cols-2 gap-8">
<article class="border border-gray-500
rounded-lg mb-8 p-8
flex flex-col gap-4">
<header>
<h3 class="text-xl font-medium">In and Out of Class Activities</h3>
</header>
<section class="flex flex-col gap-4">
<dl class="flex flex-col gap-4">
<dt class="font-semibold">In Class</dt>
<dd class="pl-4">In class you will be presented with a number of activities and other items to work
on, as well as interactive sessions where demonstration of concepts will be done.
</dd>
<dt class="font-semibold">Out of Class</dt>
<dd class="pl-4">Out of class you will be expected to complete at least an hour's study per week,
sometimes more,
working on further learning, tutorials and other items as required.
</dd>
</dl>
</section>
</article>
<article class="border border-gray-500
rounded-lg mb-8 p-8
flex flex-col gap-4">
<header>
<h3 class="text-xl font-medium">Useful Links & References</h3>
</header>
<section class="flex flex-col gap-4">
<dl class="flex flex-col gap-4">
<dt class="font-semibold">Useful links for you...</dt>
<dd class="flex flex-col gap-2">
<a href="https://www.diigo.com/profile/Ady_Gould?query=html5" target="_blank"
class="p-1 px-4 hover:bg-sky-800 hover:text-white ease-in-out transition duration-500 rounded-full">
<i class="fa-brands fa-html5"></i>
HTML 5 Links on Diigo
</a>
<a href="https://www.diigo.com/profile/Ady_Gould?query=css3" target="_blank"
class="p-1 px-4 hover:bg-green-800 hover:text-white ease-in-out transition duration-500 rounded-full">
<i class="fa-brands fa-css3 "></i>
CSS 3 Links on Diigo
</a>
<a href="https://www.diigo.com/profile/Ady_Gould?query=javascript" target="_blank"
class="p-1 px-4 hover:bg-yellow-800 hover:text-white ease-in-out transition duration-500 rounded-full">
<i class="fa-brands fa-js "></i>
JavaScript Links on Diigo
</a>
<a href="https://www.diigo.com/profile/Ady_Gould" target="_blank"
class="p-1 px-4 hover:bg-pink-800 hover:text-white ease-in-out transition duration-500 rounded-full">
<i class="fa-solid fa-link "></i>
All of Adrian's Diigo Links
</a>
</dd>
</dl>
</section>
</article>
</section>
</main>
<footer class="bg-black text-gray-400 grid grid-cols-2 p-6">
<div class="flex flex-col gap-2">
<p>© Copyright 2024 North Metropolitan TAFE</p>
<p class="text-xs text-gray-600 hover:text-gray-400 transition duration-500 delay-100 ease-in-out">
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">
<i class="text-md fa-brands fa-creative-commons"></i>
<i class="text-md fa-brands fa-creative-commons-by "></i>
<i class="text-md fa-brands fa-creative-commons-nc"></i>
</a>
This work, and any work derived from it, is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">
Creative Commons Attribution-NonCommercial 4.0 International License
</a>.</p>
</div>
<div class="flex flex-row gap-4 items-center justify-right">
<a href="#" class="p-0 m-0"><img src="./assets/images/TAFEWA-Red.svg" alt="TAFEWA Red Logo" class="w-4"><span
class="sr-only">North Metropolitan TAFE</span></a>
<a href="#" class="p-0 m-0"><i class="fa-brands fa-github"></i><span class="sr-only">Adrian's GitHub</span></a>
<a href="#" class="p-0 m-0"><i class="fa fa-link"></i><span class="sr-only">link</span></a>
<a href="#" class="p-0 m-0"><i class="fa fa-link-slash"></i><span class="sr-only">link</span></a>
</div>
</footer>
<script>hljs.highlightAll();</script>
</body>
</html>