html
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
<!DOCTYPE html>
<html lang = "en">
<head>
<title>PANTHERA</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name = "keywords" content = "Tigers, Sher, Endangered Tigers, Endangered Species, Animals, Tiger's Team, list of the species of the tiger"/>
<meta name = "author" content = "Suyash Purwar"/>
<meta name = "description" content = "A website to show condition of Tigers"/>
<link rel="shortcut icon" type="image/x-icon" href="https://s-media-cache-ak0.pinimg.com/originals/1e/1c/a6/1e1ca6c03f5c197b82661c93011c7bf3.png">
<!--<meta http-equiv = "refresh" content = "12000"/>-->
</head>
<body class = "w3-animate-opacity">
<!--here goes my navigation-->
<!--navigation for large sized screens-->
<div class = "w3-bar w3-block w3-top w3-hide-medium w3-hide-small" id = "nav-style">
<a href = "HOME PAGE.html">
<div class = "w3-btn w3-transparent w3-center" title = "Home">
HOME
</div>
</a>
<div class = "w3-btn w3-transparent w3-center" title = "Species" onclick = "myDrop('Menu')">
SPECIES
</div>
<a href = "THREATS.html">
<div class = "w3-btn w3-transparent w3-center" title = "Threats">
Enter to Rename, Shift+Enter to Preview
css
css
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
body{
background-image: url('http://2.bp.blogspot.com/-1OVqX3wHmHY/T__hysA7ueI/AAAAAAAAB8I/GP47b2vAc_c/s1600/sitting-tiger-hd-animal-wallpaper-tigers.jpg');
background-repeat: no-repeat;
height: 100%;
background-size: cover;
position: absolute;
background-attachment: fixed;
width: 100%;
}
body, html{
height: 100%;
}
/*Position For icons just after the image*/
#for_icons{
margin-top: 14%;
text-align: center;
padding-top: 80px;
}
.caption{
margin-top: 5%;
margin-left: 5%;
width: 370px;
height: 200px;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
//for navigation on small screen
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
//for tabs
function openAnimal(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-border-black", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.firstElementChild.className += " w3-border-black";
}
alert("Click every image and button please. I will take some time to load because of the images");
alert("Click on the oversized icons below the small icons")
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run