-
Notifications
You must be signed in to change notification settings - Fork 0
/
Phylogenetic.html
122 lines (114 loc) · 4.94 KB
/
Phylogenetic.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tweeter | Bird Phylogeny</title>
<html>
<style>
.navigation {
display: flex;
justify-content: space-between;
}
</style>
</html>
</head>
<body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobile Menu</title>
<link rel="stylesheet" href="slicknav.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:400" rel="stylesheet">
<style>
body{background: url(../static/static/bg.jpg);font-family: 'Oswald', sans-serif;font-size: 15px;font-weight: 400; line-height: 1.5em;}
.inner_main_menu {margin: 0 auto; width: 1170px;}
.inner_main_menu ul{margin: 0; padding: 80px 0 0; list-style: none;text-align: right;}
.inner_main_menu ul li{float: none; display: inline-block;position: relative}
.inner_main_menu ul li:nth-child(1){float: left;}
.inner_main_menu ul li:nth-child(2){float: left;}
.inner_main_menu ul li:nth-child(3){float: left;}
.inner_main_menu ul li a{color: #262626; font-size: 20px; text-transform: uppercase;text-decoration: none; display: block;padding: 10px 20px;}
.inner_main_menu ul li a:hover{color: #6FDA44}
.inner_main_menu ul li ul{position: absolute; top: 40px; left: -9999999px; width: 200px;background: #262626; padding: 0;}
.inner_main_menu ul li:hover ul{left: 0px;}
.inner_main_menu ul li ul li{float: left;width: 100%;text-align: left;}
.inner_main_menu ul li ul li a{color: #fff;text-transform: capitalize; font-size: 15px;}
.inner_main_menu ul li ul li a:hover{background: #ddd; color: #262626;}
.inner_main_menu ul li ul li ul{top: 0; left: -999999px;}
.inner_main_menu ul li:hover ul li ul{top: 0; left: -999999px;}
.inner_main_menu ul li ul li:hover ul{top: 0; left: 200px;}
.inner_main_menu ul li:hover a{color: #6FDA44}
.inner_main_menu ul li:hover ul li a{color: #ffffff}
.inner_main_menu ul li ul li a:hover{color: #262626}
.inner_main_menu ul li ul li:hover a{background: #ddd; color: #262626;}
.inner_main_menu ul li ul li:hover ul li a{background: #262626; color: #fff;}
.inner_main_menu ul li ul li ul li a:hover{background: #ddd; color: #262626;}
.slicknav_menu {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
font-size: 16px;
padding: 5px;
display: none;
position: fixed;
right: 0;
width: 100%;
z-index: 99999;
}
ul.slicknav_nav {
background: #262626 none repeat scroll 0 0;
left: 0;
position: absolute;
top: 0;
width: 80%;
}
.slicknav_btn {top: 35px;}
#main_menu{width: 100%; position: relative;}
.logo_area{width: 300px; height: 300px; position: absolute; left: 50%; top: 0; content: ""; margin-left:-150px; text-align: center; }
@media only screen and (min-width: 200px) and (max-width: 767px) {
.slicknav_menu{display: block;}
.inner_main_menu{display: none;}
.logo_area {height: auto;left: 0;margin-left: 0;position: relative;top: 0;width: 130px;}
.logo_area img{height: auto;width: 100%;}
}
</style>
</head>
<body>
<style>
img {
position: absolute;
right: -100px;
bottom: 50px;
}
</style>
<div id="main_menu">
<div class="logo_area">
<a href="/easteregg" target="_blank"><img src="../static/static/mainlogo.png" alt="" ></a>
</div>
<div class="inner_main_menu">
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/aboutus/">About</a>
<ul>
<li><a href="/aboutus/aditi/">Aditi</a></li>
<li><a href="/aboutus/sophie/">Sophie</a></li>
<li><a href="/aboutus/grace/">Grace</a></li>
<li><a href="/aboutus/luke/">Luke</a></li>
</ul>
</li>
<li><a href="/twitter">Twitter API</a></li>
<li><a href="/database/">Contact</a></li>
<li><a href="/Phylogenetic/">Phylogeny</a></li>
<li><a href="https://docs.google.com/document/d/1NFgEh_1AZGfm3fGWLUgGT7Xm9tNoPROnnH0_pO72MzM/edit?usp=sharing">Journal</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.min.js"></script>
<a><img src="https://i.pinimg.com/originals/89/b3/12/89b312470f03f98871098c53a2f03a7f.jpg" alt="" style="width:30%; right:550px; bottom: 20px;"></a>
</body>
</html>