-
Notifications
You must be signed in to change notification settings - Fork 0
/
gridder.html
191 lines (185 loc) · 9.54 KB
/
gridder.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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery.gridder.min.css" rel="stylesheet">
<!-- Custom CSS -->
<!--<link href="css/style.css" rel="stylesheet">-->
<link href="css/gridder.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!-- Gridder navigation -->
<ul class="gridder">
<li class="gridder-list" data-griddercontent="#dianbo">
<div class="gridder-thumb">
<img src="img/dianbo.png" class="img-circle"/>
<span class="title text-center">Dianbo Liu</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#gillian">
<div class="gridder-thumb">
<img src="img/gillian.png" class="img-circle"/>
<span class="title text-center">Gillian Dunphy</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#stefan">
<div class="gridder-thumb">
<img src="img/stefan.png" class="img-circle"/>
<span class="title text-center">Stefan Tomov</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#thiago">
<div class="gridder-thumb">
<img src="img/thiago.png" class="img-circle"/>
<span class="title text-center">Thiago Britto-Borges</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#sarah">
<div class="gridder-thumb">
<img src="img/sarah.png" class="img-circle"/>
<span class="title text-center">Sarah-Lena Offenburger</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#fabio">
<div class="gridder-thumb">
<img src="img/fabio.png" class="img-circle"/>
<span class="title text-center">Fábio Madeira</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#darya">
<div class="gridder-thumb">
<img src="img/darya.png" class="img-circle"/>
<span class="title text-center">Darya Baranovka</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#kushal">
<div class="gridder-thumb">
<img src="img/kushal.png" class="img-circle"/>
<span class="title text-center">Kushal Rugjee</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#sam">
<div class="gridder-thumb">
<img src="img/sam.png" class="img-circle"/>
<span class="title text-center">Sam Watkins</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#dora">
<div class="gridder-thumb">
<img src="img/dora.png" class="img-circle"/>
<span class="title text-center">Teodora Maghear</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#alasdair">
<div class="gridder-thumb">
<img src="img/alasdair.png" class="img-circle"/>
<span class="title text-center">Alasdair McGill</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#yuri">
<div class="gridder-thumb">
<img src="img/yuri.png" class="img-circle"/>
<span class="title text-center">Yuri Alexandrov</span>
</div>
</li>
</ul>
<!-- Gridder content -->
<div id="dianbo" class="gridder-content">Dianbo Liu is the licence holder for the
upcoming TEDxUniversityofDundee event. He is the leader
of the team and is currently studying for a PhD within the
Computational and Physical Biology department at the
University of Dundee. He is interested in making links
among seemingly unrelated fields, and therefore come up
with innovative and useful inventions.</div>
<div id="gillian" class="gridder-content">Gillian Dunphy was born and raised in Glasgow but was
compelled to make the lengthy journey to Dundee after being
lured by its East Coast charm. She is currently studying for
a PhD in Immunology at the University of Dundee. She is
currently managing a team of student volunteers in the areas
of Graphic Design and Stage Design. She is also involved in
marketing and speaker recruitment.</div>
<div id="stefan" class="gridder-content">Stefan Tomov is a recent University of Dundee
graduate in the field of Economics and Politics. He comes
from Bulgaria and is currently the Deputy President of
Dundee University Students' Association (DUSA). Stefan is
responsible for securing the logistics required to make
TEDxUniversityofDundee a resounding success.</div>
<div id="thiago" class="gridder-content">Thiago Britto-Borges is a Brazilian PhD student within
the Computational Biology department of the University of Dundee
He has an inexhaustible passion for learning and enjoys spreading knowledge. Thiago
is responsible for developing and designing the TEDxUniversityofDundee website.</div>
<div id="sarah" class="gridder-content">Sarah-Lena Offenburger is pursuing a PhD in
Neurobiology at the University of Dundee. When Sarah is not
in the lab, you will probably find her doing sports, taking
pictures or just having a coffee with friends. Sarah is a
curator within our team and is responsible for recruiting
and liasing with the speakers of the event.</div>
<div id="fabio" class="gridder-content">Originally from Portugal, Fábio Madeira is
currently studying for a PhD within the Cell and Molecular
Biology department at the University of Dundee,
specialising in Computational Biology. Alongside with Thiago, he helps managing and developing the website of the event.</div>
<div id="darya" class="gridder-content">is the president of Enterprise
Gym which is a University of Dundee department where
students learn about entrepreneurship. She comes from the
small and pretty town of Liepaya, which is located on the
Latvian coast of the Baltic Sea. Darya is responsible for
the recruitment of volunteers and organising the logistics
of the event.</div>
<div id="kushal" class="gridder-content">moved from the island of
Mauritius to equally sunny Dundee to pursue a PhD in
Microbiology. His role in the team is to co-ordinate the
overall organisation of the TEDx event and to ensure that
progress is being made.</div>
<div id="sam" class="gridder-content">is currently studying Computer Science at the University of Dundee.
He is in his third year now and interested in Web
Programming, Product Development and Entrepreneurship. Sam
is our Social Media Officer, taking care of our Twitter and
Facebook accounts.</div>
<div id="dora" class="gridder-content">is the Enterprise Assistant & Coordinator
at the Enterprise Gym, University of Dundee.
Her perseverance and passion for entrepreneurship and innovation has seen her work her way up in the roles in the department.
She received her BSc in business Economics with marketing from Dundee University in 2014. Dora is actively contributing her
expertise in a number of areas of the project.</div>
<div id="alasdair" class="gridder-content">is Head of Enterprise &
Entrepreneurial Strategy at the University of Dundee.
Not a man to sit about, Alasdair has a brain that's always
busy and he loves thinking of creative ways to make a
difference. As well as his role at the university, Alasdair
is also a director and founder of several companies in
industries as diverse as retail, software, sports and
financial services. He is a formidable adviser within our
team.</div>
<div id="yuri" class="gridder-content">is currently pursuing a master's
degree in Data Engineering. He studies Data because he likes
to observe and find patterns in the environment that
surrounds us. Yuri serves as a curator along with Sarah in
our team. He is involved in the recruitment of speakers.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.gridder.min.js"></script>
<script>
$(function() {
// Call Gridder
$('.gridder').gridderExpander({
scroll: true,
scrollOffset: 30,
scrollTo: "panel", // panel or listitem
animationSpeed: 400,
animationEasing: "easeInOutExpo",
onStart: function(){
console.log("Gridder Inititialized");
},
onContent: function(){
console.log("Gridder Content Loaded");
},
onClosed: function(){
console.log("Gridder Closed");
}
});
});
</script>
</body>
</html>