-
Notifications
You must be signed in to change notification settings - Fork 0
/
page1.html
72 lines (65 loc) · 2.24 KB
/
page1.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pandas Forever</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<!--[if lt IE 9]>
<script src="files/html5shiv.js"></script>
<![endif]-->
<style>
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h1, h2 { font-weight: bold; margin: 5px 0; }
p { font-size: 1em; margin: 5px 0; }
ul { padding-left: 10px; margin: 10px 0; list-style-type: disc; }
li { margin-left: 10px; padding-left: 10px; }
header, article, aside, footer { border: 1px solid #111;
header, article, aside, footer { border: 1px solid #111;
padding: 10px 1em; margin: 0 5% 10px; }
header { margin-top: 10px; }
}
body { background-color: green; }
@media only screen and (min-width: 40em) {
body { background-color: blue; }
}
</style>
</head>
<body>
<header role="banner">
<h1>Pandas Forever</h1>
<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/links/">Links</a></li>
<li><a href="/contact/">Contact</a></li>
</nav>
</header>
<article>
<h2>Pandas in Wolong</h2>
<p>The Wolong National Nature Preserve, in the Sichuan Province of China, is home to more than 150 giant pandas. It's one of the key sites for panda breeding research, and 66 cubs have been born at Wolong since it was established in 1980. Pandas are an endangered species, with between 1500 and 3000 living in the wild, and less than 300 in captivity (research centers and zoos).</p>
</article>
<aside role="complementary">
<h2>Related Links</h2>
<ul>
<li><a href="http://www.flickr.com/groups/
pandasunlimited/">Pandas Unlimited</a></li>
<li><a href="http://nationalzoo.si.edu/animals/
webcams/giant-panda.cfm">National Zoo Panda
Cams</a></li>
<li><a href="http://worldwildlife.org/species/
giant-panda">Panda Facts at WWF</a></li>
</ul>
</aside>
<footer role="contentinfo">
<p>© 2014 Pandas Forever</p>
</footer>
</body>
</html>