-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
112 lines (107 loc) · 3.41 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Mozilla splash page</title>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"
rel="stylesheet"
type="text/css"
/>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Mozilla</h1>
<img
src="images/firefox_logo-only_RGB120_tinified.png"
alt=""
title="firefox logo"
/>
</header>
<main>
<article>
<iframe
width="400"
height="315"
src="https://www.youtube.com/embed/ojcNcvb1olg"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<h2>Rocking the free web</h2>
<p>
Mozilla are a global community of technologists, thinkers, and
builders, working together to keep the Internet alive and accessible,
so people worldwide can be informed contributors and creators of the
Web. We believe this act of human collaboration across an open
platform is essential to individual growth and our collective future.
</p>
<p>
Click on the images below to find more information about the cool
stuff Mozilla does.
<a href="https://www.flickr.com/photos/mathiasappel/21675551065/"
>Red panda picture</a
>
by Mathias Appel.
</p>
</article>
<div class="further-info">
<a href="https://www.mozilla.org/en-US/firefox/new/">
<img
srcset="
images/firefox_logo-only_RGB120_tinified.png 120w,
images/firefox_logo-only_RGB400_tinified.png 400w
"
sizes="(max-width: 500px) 120px,
400px"
src="images/firefox_logo-only_RGB400_tinified.png"
alt="Firefox logo"
/>
</a>
<a href="https://www.mozilla.org/">
<img
srcset="
images/mozilla-dinosaur-head120_tinified.png 120w,
images/mozilla-dinosaur-head400_tinified.png 400w
"
sizes="(max-width: 500px) 120px,
400px"
src="images/mozilla-dinosaur-head400_tinified.png"
alt="Mozilla dinosaur head"
/>
</a>
<a href="https://addons.mozilla.org/">
<img
srcset="
images/firefox-addons120_tinified.jpg 120w,
images/firefox-addons400_tinified.jpg 400w
"
sizes="(max-width: 500px) 120px,
400px"
src="images/firefox-addons400_tinified.jpg"
alt="Firefox addons"
/>
</a>
<a href="https://developer.mozilla.org/en-US/">
<img src="images/mdn.svg" alt="Developer Mozilla logo" />
</a>
<div class="clearfix"></div>
</div>
<div class="red-panda">
<picture>
<source
media="(max-width: 550px)"
srcset="images/red-panda-portrait600_tinified.jpg"
/>
<img
src="images/red-panda1200_tinified.jpg"
alt="Large portrait red-panda image"
/>
</picture>
</div>
</main>
</body>
</html>