-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (156 loc) · 9.51 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0, minimum-scale=1"/>
<link rel="logo" href="" media="all">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="index.css" rel="stylesheet" type="text/css">
<link href="bootstrap_theme.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function () {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$('#back-to-top').tooltip('show');
});
</script>
</head>
<!--body navagition-->
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<img src="E2.jpg" class="backgroundimg img-responsive"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<a class="navbar-brand" href="#">
<img src="logo1.jpeg" alt="logo" style="width:40px;">
</a>
<div class="container-fluid">
<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="#"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">HOME</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">ABOUT <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://www.google.co.in/search?safe=active&biw=1280&bih=869&q=nearest+wildlife+sanctuary+from+my+location%5C&npsic=0&rflfq=1&rlha=0&rllag=11797285,77326145,42915&tbm=lcl&ved=0ahUKEwjtld3MrPrXAhVJQ48KHfRpDkYQtgMIKg&tbs=lrf:!2m1!1e2!2m1!1e3!3sIAE,lf:1,lf_ui:1&rldoc=1#rlfi=hd:;si:;mv:!1m3!1d3786089.3018178404!2d78.23420957500002!3d10.574960414705245!3m2!1i860!2i724!4f13.1"> location</a></li>
<li><a href="#">CLASSIFICATION OF ANIMALS</a></li>
<li><a href="#"> </a></li>
</ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<!--quote-->
<div class="container-fluid">
<hr style="border:1px solid black">
<blockquote>
<p>He is closest to God who harms no living creature.</p>
<footer>This famous quote is by <cite title="Bhagavad Gita">Bhagavad Gita</cite></footer>
<blockquote class="blockquote-reverse">
<p>The question is not, Can they reason? nor Can they talk? but, Can they suffer? </p>
<footer>This famous quote is by <cite title="Bhagavad Gita">Jeremy Bentham</cite></footer>
</blockquote>
</blockquote>
<hr style="border:1px solid black">
<!-- rare species -->
<div class="row">
<p><strong><center>RARE SPECIES</center></strong></p>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="img3c">
<img src="Araripe Manakin.jpg" />
<p><strong>The Araripe manakinis a critically endangered bird from the family of manakins.It was discovered in 1996 and scientifically described in 1998.The species epithet commemorates Brazilian zoologist and wildlife filmmaker Werner Bokermann,who died in 1995, which is known simply as the soldadinho.</strong></p>
<a href="https://en.wikipedia.org/wiki/Araripe_manakin"><button class="btn btn-primary bouton-image monBouton">LEARN MORE</button></a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="img3c">
<img src="rhino2.jpg">
<p><strong>The Sumatran rhinoceros is also known as the hairy rhinoceros or in a Asian two-horned rhinoceros (Dicerorhinus sumatrensis) , is a rare member of the family Rhinocerotidae and one of five extant rhinoceroses in the world . It is the most only extant species of the genus Dicerorhinus . It is the very smallest rhinoceros , although it is still a large mammal . A coat of reddish-brown hair covers most of the Sumatran rhino's body. </strong></p>
<a href="https://en.wikipedia.org/wiki/Sumatran_rhinoceros"><button class="btn btn-primary bouton-image sonBouton">LEARN MORE</button></a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="img3c">
<img src="at.jpg">
<p><strong>It has a very strong, black and yellow patterned carapace, used for defense against predators. The patterns are arranged in ray-like markings and help the tortoise blend in with its environment. From a birds eye view the shell has geometrical symbols on it thus giving it its name. This tortoise is very small, and a full grown tortoise can only reach about 5 to 6 inches in diameter.</strong></p>
<a href="https://en.wikipedia.org/wiki/Geometric_tortoise"><button class="btn btn-primary bouton-image tonBouton">LEARN MORE</button></a>
</div>
</div>
</div>
<a href="https://www.google.co.in/search?safe=active&ei=zF4qWp22K8b3vAT2lrHoCw&q=rare+species&oq=rare+sp&gs_l=psy-ab.3.0.0l3j0i20i263k1j0l6.1625.4790.0.6245.8.8.0.0.0.0.122.747.2j5.8.0....0...1.1.64.psy-ab..0.8.876.6..35i39k1j0i67k1j0i131k1.132.fezr29e4QhY"><center><button class="btn btn-primary bouton-image fonBouton">MORE SPECIES</button></center></a><br>
<hr style="border:1px solid black">
</div>
<!-- slide show-->
<div class="container unorder img-responsive">
<ul class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<li><img width="320" height="300" title="" alt="css3" src="cls.jpg"/></li>
<li><img width="320" height="300" title="" alt="" src="par.jpeg"/></li>
<li><img width="320" height="300" title="" alt="" src="tiger.jpeg" /></li>
<li><img width="320" height="300" title="" alt="" src="lion.jpeg" /></li>
</div>
<div class="col-md-4"></div>
</div>
</ul>
</div><br>
<center> <button type="button" class="btn btn-danger btn-lg btnsh" data-toggle="modal" data-target="#myModal">SHARE</button></center>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="background-color: gray">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" >Shoot me with camera dont Shoot me with gun</h4>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/sharer.js/latest/sharer.min.js"></script>
<div class="container" >
<h2>Share This...</h2>
<div class="social">
<a href="#" id="share-fb" class="sharer button"><i class="fa fa-3x fa-facebook-square"></i></a>
<a href="#" id="share-tw" class="sharer button"><i class="fa fa-3x fa-twitter-square"></i></a>
<a href="#" id="share-li" class="sharer button"><i class="fa fa-3x fa-linkedin-square"></i></a>
<a href="#" id="share-gp" class="sharer button"><i class="fa fa-3x fa-google-plus-square"></i></a>
<a href="#" id="share-em" class="sharer button"><i class="fa fa-3x fa-envelope-square"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="text-right">
<a id="back-to-top" href="#" class="btn btn-success btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
<hr style="border:1px solid black">
</body>
</html>