TeamKoalaWebSite/index.html at master · JAudibert/TeamKoalaWebSite · GitHub

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
<html>
<head>
	<meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  	<style>
      /* add your CSS here */
#container {
  border: 2px solid #bbbcbf;
  box-shadow: 5px 5px 10px #bbbcbf;
  padding: 10px;
  background: #a7d9ef;
  margin: 1px;
}
div {
	width: 300px;
}
.cardframe {

}

/*Animal Info*/
span {
  font-weight: bold;
}


#interesting-fact {
	font-style: italic;
}

ul {
  padding: 0px;
}
li {
  list-style-type: none;
}

.animal-info {
  border: 2px solid #bbbcbf;
  padding: 10px;
  width: 280px;
  background: #d3e5ed;
  border-radius: 5px;
}


/*Animal Pic*/
img {
  width: 275px;
  border-radius: 5px;
}

</style>
</head>
<body style="background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);">
    <!-- Sidebar -->
    <div class="w3-sidebar w3-light-grey w3-bar-block" style="width:15%">
            <h3 class="w3-bar-item">Menu</h3>
  <a href="#" class="w3-bar-item w3-button">Home Page</a>
  <a href='index1.html' class="w3-bar-item w3-button">Gallery</a>
  <a href="#" class="w3-bar-item w3-button"><strike>Diet Information</strike></a>
  <a href="#" class="w3-bar-item w3-button"><strike>Mating and Reproduction Information</strike></a>
  <a href="habitat.html" class="w3-bar-item w3-button">Habitat Information</a>
  <a href="#" class="w3-bar-item w3-button"><strike>Anatmoy and Biology</strike></a>
  <a href="#" class="w3-bar-item w3-button"><strike>Behavior</strike></a>
</div>
	<div id="container" style="margin: 5 auto; ">
      <div class="cardframe">
		<h1>Koala Facts</h1>

		<img src="https://upload.wikimedia.org/wikipedia/commons/4/49/Koala_climbing_tree.jpg" alt="Koala">
		<div id="card" class="animal-info">
			<p id="interesting-fact">The word koala comes from the Dharug gula.</p>
			<ul id="facts">
				<li><span>Scientific Name</span>: Phascolarctos cinereus</li>
				<li><span>Average Length</span>: 70 to 90cm</li>
				<li><span>Average Lifespan</span>: 13 – 18 years (In the wild)</li>
				<li><span>Habitat</span>: Australia</li>
			</ul>
			<p id="summary">The koala (Phascolarctos cinereus, or, inaccurately, koala bear[a]) is an arboreal herbivorous marsupial native to Australia</p>

          </div>
		</div>
	</div>
</body>
</html>