-
Notifications
You must be signed in to change notification settings - Fork 0
/
animals.html
70 lines (67 loc) · 2.99 KB
/
animals.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
<!DOCTYPE HTML>
<html>
<head>
<title>All About Rainforests!|Animals</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/main.css">
<link rel="stylesheet" type="text/css" href="style/normalize.css">
<script type="text/javascript" src="js/javascript.js" defer></script>
</head>
<body>
<header>
<p><a href="index.html"><img src="images/RainForestHeader.png" alt="Rain Forest Header img"></a></p>
</header>
<nav id="mainlinks">
<ul>
<li><a href="index.html" title="What"><img src="images/what.png" alt="What"></a></li>
<li><a href="animals.html" title="Animals"><img src="images/animals.png" alt="Animals"></a></li>
<li><a href="plants.html" title="Plants"><img src="images/plants.png" alt="Plants"></a></li>
<li><a href="givingback.html" title="Giving Back"><img src="images/givingback.png" alt="Giving Back"></a></li>
</ul>
</nav>
<div id="container">
<p>The rainforest is home to more than half of the world's animals. Colorful and unusual animals dwell in all four layers of the forest. All types of creatures are represented, from tiny insects to large mammals! Below you can see a few of the many animals that dwell here in the rainforest.</p>
</div>
<div class ="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1/4</div>
<img src="images/Afrog.png" alt="Frog picture" style="width:100%">
<div class="text">A poisonous Frog resting on a leaf</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2/4</div>
<img src="images/Ajaguar.png" alt="Jaguar picture" style="width:100%">
<div class="text">A stalking Jaguar</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3/4</div>
<img src="images/Amonkeys.png" alt="Monkey picture" style="width:100%">
<div class="text">A Monkey!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4/4</div>
<img src="images/Asnake.png" alt="Snake picture" style="width:100%">
<div class="text">A snake stalks its prey!
</div>
</div>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
<audio controls autoplay>
<source src="sound/nature.mp3" type="audio/mp3">
</audio>
<footer>
<p>Stay in touch!</p>
<ul id="sociallinks">
<li><p><a href="https://www.facebook.com/jorge.goris.3" target="_blank"><img src="images/socialmedia/facebook.png" alt="Facebook Logo"></a></p></li>
<li><p><a href="https://twitter.com/_JorgeGoris_" target="_blank"><img src="images/socialmedia/twitter.png" alt="Twitter Logo"></a></p></li>
<li><p><a href="https://www.linkedin.com/in/jorge-goris-939052135?trk=hp-identity-name" target="_blank"><img src="images/socialmedia/linkedin.png" alt="Linkedin Logo"></a></p></li>
</ul>
</footer>
</body>
</html>