forked from callen6/ProtoBreadcrumbsAndBeanstalks
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.html
89 lines (77 loc) · 2.56 KB
/
main.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
<!DOCTYPE html>
<html>
<head>
<title>Breadcrumbs & Beanstalks</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="modernizer.js">
<script type="text/javascript" src='main.js'></script>
</head>
<body>
<div class="title-container">
<div id="title">Breadcrumbs & Beanstalks</div>
<nav class="navigation-wrapper">
<div class="buttons-wrapper">
<a href="explore-container">
<button class="explore-button">Explore</button>
</a>
</div>
</nav>
</div>
<div class="explore-container">
<a href="#" class="tip">
<div class="orange-box" id="up">
<img src="images/cretaceous.jpg"><span>
<p>Reassessment of Reptilian Diversity Across the Cretaceous-Tertiary Boundary </p>
<p>Robert M. Sullivan</p>
<p>Date: 1987</p>
<p>Subject: Prehistoric Life</p></span></a>
</div>
<div id="up-arrow"><a href="up.html#middle"><img class="arrow-img" src="images/up-arrow.png"></a></div>
<div class="middle-container" id="middle">
<div class="orange-box" id="left">
<a href="#" class="tip">
<img src="images/allabout.jpg"><span>
<p>All About Dinosaurs</p>
<p>Roy Chapman Andrews</p>
<p>Date: 1953</p>
<p>Subject: Dinosaurs</p></span></a>
</div>
<div class="arrow-box" id="left-arrow" ><a href="left.html#middle"><img class="arrow-img" src="images/left-arrow.png"></a></div>
<div class="orange-box" id="center">
<a href="#" class="tip">
<img src="images/completedinosaur.jpeg"><span>
<p>The Complete Dinosaur</p>
<p>Thomas K. Holtz, James 0. Farlow</p>
<p>Date: 1997</p>
<p>Subject: Dinosaurs</p></span></a>
</div>
<div class="arrow-box" id="right-arrow" ><a href="right.html#middle"><img class="arrow-img" src="images/right-arrow.png"></a></div>
<div class="orange-box" id="right">
<a href="#" class="tip">
<img src="images/howbig.jpg"><span>
<p>How Big Were the Dinosaurs</p>
<p>C.E. Thompson</p>
<p>Date: 1998</p>
<p>Subject: Dinosaurs</p></span></a>
</div>
</div>
<div id="down-arrow"><a href="down.html#middle"><img class="arrow-img" src="images/down-arrow.png"></a></div>
<div class="orange-box" id="down">
<a href="#" class="tip">
<img src="images/JurassicWest.jpg"><span>
<p>Jurassic West: The Dinosaurs of the Morrison Formation and Their World</p>
<p>John Foster</p>
<p>Date: 2007</p>
<p>Subject: Dinosaurs - Jurassic</p></span></a>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>