-
Notifications
You must be signed in to change notification settings - Fork 0
/
aboutMLN.html
335 lines (295 loc) · 11.3 KB
/
aboutMLN.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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html>
<head>
<title>About MLN</title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://use.fontawesome.com/6e4d014626.js"></script>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Common styles-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--Custom scripts-->
<script type="text/javascript" src="js/script.js"></script>
<link href="https://developer.cdn.mozilla.net/static/build/styles/mdn.65be1fdadb40.css" rel="stylesheet" type="text/css" />
</head>
<style>
#map{
height: 200px;
width: 100%;
}
#paddingme{
padding-top:15px;
}
#paddingHeading{
padding-top:30px;
padding-bottom:30px;
}
main{
background-image:images/images.jpg;
}
</style>
<script>
function initMap() {
var uluru = {lat:12.971599, lng: 77.594563};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
$(document).ready(function(){
$('.parallax').parallax();
});
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDull4xF7BdHqmr0S94vTLyVUSL7bZF4og&callback=initMap">
</script>
<body>
<nav>
<div class="nav-wrapper purple">
<div id="tabzilla" class = "hide-on-med-and-down">
<a href="//www.mozilla.org/" class="no">mozilla</a>
</div>
<div class = "container">
<a href="index.html" id = "paddingme" class="hide-on-med-and-down">Logo</a>
<a href="index.html" class = "hide-on-large-only">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="aboutMLN.html">About MLN</a></li>
<li><a href="ourEvents.html">Our Events</a></li>
<li><a href="aboutus.html">About Team</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="aboutMLN.html">About MLN</a></li>
<li><a href="ourEvents.html">Our Events</a></li>
<li><a href="aboutus.html">About Team</a></li>
</ul>
</div>
</div>
</nav>
<main><!-- style = "background-color:#c8cbb3;"-->
<div class = "container" >
<h1 class = "center-align" id = "paddingHeading"><b>Mozilla Learning Networks</b></h1>
<div class="row ">
<div class="col s12 item1">
<div class="card white hoverable">
<div class="card-content black-text">
<span class="card-title">Teaching Activities</span>
<p>Start teaching others how to read, write and participate on the web with free activities created by teachers, educators and technologists like you.
Each featured activity includes step-by-step instructions and has been tested in schools, afterschool programs, libraries and community centers around the globe.
Whether learning how to code, understanding why privacy matters, or creating openly-licensed web content, we believe teaching the web should be fun and engaging!</p>
</div>
<div class="card-action">
<a href="https://learning.mozilla.org/en-US/activities">Know more about Teaching Activities</a>
</div>
</div>
</div>
<div class="col s12 item2">
<div class="card white hoverable">
<div class="card-content black-text">
<span class="card-title">Web Literacy</span>
<p>As people learn to read, write, and participate on the web, a cross-cutting set of 21C Skills emerge as skills critical to success in today’s world.
They enable individuals to become teachers, advocates, and community leaders to leverage and advance the web as an open and public resource.</p>
<div class = "row">
<div class = "col s12">
<div class = "row">
<div class = "col s8">
<h5>Read</h5>
</div>
</div>
<div class = "row">
<div class = "col s12">
<p>Reading on the web is a critical skill for engaging content online. They can be viewed as “exploring,” or “navigating the web.”
Just as traditional reading requires knowledge of the text and concepts of print, reading online requires a basic understanding of web mechanics.</p>
</div>
</div>
</div>
<div class = "col s12 ">
<div class = "row">
<div class = "col s8 ">
<h5>Write</h5>
</div>
</div>
<div class = "row">
<div class = "col s12">
<p>Writing on the web enables one to build and create content to make meaning. New genres that blend texts and tools have emerged on the open web and are often referred to as making.
Learning through making involves constructing new content.</p>
</div>
</div>
</div>
<div class = "col s12">
<div class = "row">
<div class = "col s8 ">
<h5>Participate</h5>
</div>
</div>
<div class = "row">
<div class = "col s12">
<p>Participating on the open web includes connecting with the communities that share, build, and sustain meaningful content online.
A healthy online community requires knowledge of how to create, publish and link content, and an understanding of security in order to keep content, identity, and systems safe.</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-action">
<a href="https://learning.mozilla.org/en-US/web-literacy">Know more about Web Literacy</a>
</div>
</div>
</div>
</div>
<div class="col s12 item3">
<div class="card white hoverable">
<div class="card-content black-text">
<span class="card-title">Leadership Opportunities</span>
<p>Explore leadership opportunities in the movement towards a free and open Web.
These roles are short-term opportunities in the movement towards a free and open Web.</p>
<div class = "row">
<div class = "col s12">
<div class = "row">
<div class = "col s8">
<h5>Become a MozFest Volunteer</h5>
</div>
</div>
<div class = "row">
<div class = "col s12">
<p>Help organize the annual Mozilla Festival, a three-day celebration of the world’s most valuable public resource: the open Web.
Terrific for those who are passionate about any aspect of the open Web, whether it’s open data, the Internet of Things, privacy, web literacy, or anything else.</p>
</div>
</div>
</div>
<div class = "col s12 ">
<div class = "row">
<div class = "col s8 ">
<h5>Become a Club Captain</h5>
</div>
</div>
<div class = "row">
<div class = "col s12">
<p>Organize a group that meets regularly to learn how to read, write and participate on the Web.
Plan activities using the Mozilla Clubs curriculum. This role is perfect for educators, college students, and anyone who can meet with a group of learners regularly.</p>
</div>
</div>
</div>
<div class = "col s12">
<div class = "row">
<div class = "col s8 ">
<h5>Become a Fellow</h5>
</div>
</div>
<div class = "row">
<div class = "col s12">
<p>Mozilla Fellowships offer unique opportunities for technologists, researchers, journalists,
and others to influence the future of the open Web through placements with policy, technology, news, and educational institutions.</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-action">
<a href="https://learning.mozilla.org/en-US/opportunities">Know more about Leadership Opportunities</a>
</div>
</div>
</div>
<div class="col s12 item4">
<div class="card white hoverable">
<div class="card-content black-text">
<span class="card-title">Tools</span>
<p>These tools are free and open source, and can be used in a variety of ways to teach learners how to read, write, and participate on the Web.</p>
<div class = "row">
<div class = "col s12">
<div class = "row">
<div class = "col s8">
<h5>WebMaker</h5>
</div>
</div>
<div class = "row">
<div class = "col s12">
<p>Webmaker lets you create, discover and share content in your language on your mobile device.</p>
</div>
</div>
</div>
<div class = "col s12 ">
<div class = "row">
<div class = "col s8 ">
<h5>Thimble</h5>
</div>
</div>
<div class = "row">
<div class = "col s12">
<p>This code editor helps you learn HTML and CSS by creating and remixing Web projects.</p>
</div>
</div>
</div>
<div class = "col s12">
<div class = "row">
<div class = "col s8 ">
<h5>X-Ray Goggles</h5>
</div>
</div>
<div class = "row">
<div class = "col s12">
<p>This code inspector lets you view and remix the code of your favorite web pages.</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-action">
<a href="https://learning.mozilla.org/en-US/tools">Know more about Tools</a>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer purple">
<div class="container">
<div class="row">
<div class = "col l1 s5 offset-s1 offset-l2">
<a class="icons" href="#">
<i class="large fa fa-twitter-square white-text"></i>
</a>
</div>
<div class = "col l1 s5 offset-s1 offset-l1">
<a class="white-text" href="#">
<i class="large fa fa-facebook-square white-text"></i>
</a>
</div>
<div class = "col l1 s5 offset-s1 offset-l1">
<a class="white-text" href="#">
<i class="large fa fa-pencil-square white-text"></i>
</a>
</div>
<div class = "col l1 s5 offset-s1 offset-l1 ">
<a class="white-text" href="#">
<i class="large fa fa-envelope-square white-text"></i>
</a>
</div>
<div class = "col l1 s5 offset-s1 offset-l1 hide-on-med-and-down">
<a class="white-text" href="#">
<i class="large fa fa-phone-square white-text"></i>
</a>
</div>
<div class = "col l1 offset-l1 hide-on-med-and-down">
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!"></a>
</div>
</div>
</footer>
</body>
</html>