-
Notifications
You must be signed in to change notification settings - Fork 0
/
About.html
153 lines (142 loc) · 5.87 KB
/
About.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
{% set name = data["name"] %}
{% set grade = data["grade"] %}
{% set about = data["about"] %}
{% set contributions = data["contributions"] %}
<!-- use of Jinja Templates to make use of less code and make it more efficient-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tweeter | About Us</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">
<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>
</body>
<body>
<div class="col-9" >
<h1>About Us:</h1>
</div>
<div class="product" style="margin-top: 2%;">
<div class="row" style="padding: 10%; padding-top: 0%; padding-bottom: 5%;"> <div class="col-5" style="text-align: left;">
{% block individual %}
<h4>Click on each person's name to access their individual video and learn more about them</h4>
{% endblock %}
<!-- code for how each person's about us page is going to be spaced and organized-->
</div>
</div>
<body>
<!--underneath provides the code for the theme used in each about us page-->
<script src="https://threejs.org/build/three.js"></script>
<script src="{{ url_for('static', filename='vanta.dots.min.js') }}"></script>
<style>
html, body {
margin: 0;
height: 100%;
color: black;
}
</style>
</body>
</div>
</html>