-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (133 loc) · 4.84 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<title>Snap Ranger</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114.png" />
<link rel="apple-touch-icon" sizes="255x255" href="apple-touch-icon.png" />
<style>
html,
body {
height: 370px;
padding: 0;
margin: 0;
}
#search {
float: right;
margin-top: 9px;
width: 250px;
}
.search {
padding: 5px 0;
width: 230px;
height: 30px;
position: relative;
left: 10px;
float: left;
line-height: 22px;
}
.search input {
position: absolute;
width: 0px;
float: Left;
margin-left: 210px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
height: 30px;
line-height: 18px;
padding: 0 2px 0 2px;
border-radius: 1px;
}
.search:hover input,
.search input:focus {
width: 200px;
margin-left: 0px;
}
.btn {
height: 30px;
position: absolute;
right: 0;
top: 5px;
border-radius: 1px;
}
#avatar {
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
max-height: 500px;
max-width: 500px;
}
.wrapper {
width: 250px;
height: 250px;
margin: 25px auto;
overflow: hidden;
border-radius: 50%;
position: relative;
}
.wrapper #avatar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
</style>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<!-- nav bar -->
<div class="navbar navbar-inverse">
<!-- container fluid -->
<div class="container-fluid">
<!-- navbar-header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Snap Ranger</a>
</div> <!-- /navbar-header -->
<!-- list of pages -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right ">
<li><a href="index.html">About</a></li>
<li><a href="app.html">View Map</a></li>
<li><a href="profile.html">Profile</a></li>
</ul> <!-- /list of pages -->
</div>
</div> <!-- /container fluid -->
</div> <!-- /nav bar -->
<div>
<div class="col-sm-2"></div>
<div class="col-sm-7">
<h1>About Snap Ranger</h1>
<div class="col-sm-8">
<p>
The Snap Ranger web app aims to engage the local community with the Gold Coast wildlife.</br>
</br>
Australia is filled with unique animals, many of which can be found on the Gold Coast. Snap Ranger provides the means to identify and educuate oneself about local wildlife whilst enjoying the Gold Coast's scenic nature.</br>
</br>
Using a digital map in the app, you can travel to known locations in the real world to try and find animals whose locations have been recorded by previous government studies.</br>
</br>
When an animal of significance is located, a user can take a photo and log the record. Upload images and complete your understanding of nature on the Coast. Comment on where you discovered the animal to assist future Snap Rangers as well as future government studies.</br>
</br>
Snap Ranger includes national parks location, endangered animal locations and places where studies have been recorded regarding the environment on the Gold Coast.</br>
</br>
For developing this app, open data from National Database, Queensland Government, Gold Coast City Council will be used.
</p>
</div>
<img class="sm-col-1 pull-right" src="images/snapRanger.png">
</div>
<div class="col-sm-2"></div>
</div>
</body>
</html>