-
Notifications
You must be signed in to change notification settings - Fork 0
/
template_about_page.html
266 lines (246 loc) · 13.6 KB
/
template_about_page.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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Default Webpage Template</title>
<!-- Bootstrap -->
<!-- fix for navbar-fixed-top covering content -->
<style type="text/css">
body {
padding-top: 50px;
padding-bottom: 0px;
}
<!-- used to remove side gutters from row -->
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
.background-grey{
background-color: #f4f4f4
}
.background-white{
background-color: #ffffff;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- NAVIGATION BAR -->
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">About<span class="sr-only">(current)</span></a></li>
<li><a href="resources.html">Resources</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projects <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="project_selfLevelingTable.html">Project: Self Leveling Table</a></li>
<li><a href="project_realsenseObjectSegmentation.html">Project: PCL Object Segmentation</a></li>
<li><a href="project_catRobot.html">Project: Schrodinger's Cat Robot</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</div><!-- ./container -->
<!-- PAGE CONTENT -->
<div class="container-fluid background-grey" style="padding-left:0px; padding-right:0px;">
<div class="container background-white" style="padding-bottom:15px; margin-bottom:10px">
<div class="row no-gutter">
<div class="col-md-4 col-sm-8">
<h2>Example Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
auctor quis lacus vitae lobortis. Sed a odio faucibus, tempus enim
eget, ullamcorper leo. Aliquam erat volutpat. Nullam quis erat
fringilla, ullamcorper tellus ac, cursus eros. Vivamus eleifend dui
odio, vel euismod lacus elementum eget. Duis a gravida odio. Nullam
ac nisi viverra, posuere nibh in, venenatis felis. Aliquam erat
volutpat. Donec ut semper ipsum.</p>
</div>
<div class="col-md-4 col-sm-8">
<h2>Example Header</h2>
<p>Praesent sodales, erat quis iaculis lacinia, velit massa dignissim
dolor, sit amet luctus lorem orci in massa. Vestibulum congue ipsum
vitae diam elementum rhoncus. Sed quis risus vitae diam elementum
fermentum nec vel erat. Nullam magna dui, mollis ut convallis non,
sodales in nunc. Aliquam tempor sem eget augue tempus commodo. Etiam
viverra dolor in congue elementum. Sed tristique mauris ut diam
ultricies, at rhoncus nisi feugiat. </p>
</div>
<div class="col-md-4 col-sm-8">
<h2>Example Header</h2>
<p>Duis pretium nec nunc vulputate maximus. Aliquam at rutrum ipsum.
Pellentesque tempor diam non turpis egestas auctor. Nam vestibulum
nulla quis ultricies sodales. Nunc mollis felis eros, et commodo
turpis pulvinar nec. Vivamus in ultrices magna. Mauris sed ornare
ligula. Sed pretium tellus sem, eget dapibus urna vehicula at.
Curabitur eu magna velit. Donec ornare sit amet nibh non consequat.
Nunc nec ultrices ligula, sit amet vulputate dolor. Proin vitae libero
finibus, hendrerit nulla sed, hendrerit magna. Fusce vitae luctus
neque. Nunc vitae aliquam dolor. Sed nisi purus, rhoncus a lacinia
vel, volutpat et nisi. Nullam non magna eu libero iaculis mattis. </p>
</div>
<div class="col-md-4 col-sm-8">
<h2>Example Header</h2>
<p>Donec ut est at neque eleifend blandit et ac ex. Quisque eget
euismod felis, at volutpat quam. Donec euismod elit non metus volutpat
tincidunt. Praesent vitae posuere elit. Fusce ac eleifend eros.
Mauris at scelerisque turpis. Etiam quis diam ut eros commodo porta
vitae vel erat. Aenean nec orci non nulla sollicitudin lobortis a vel
erat. Morbi accumsan ullamcorper tempor. Nullam risus felis, volutpat
tempus ante vitae, tempus luctus quam. Pellentesque ac est lacinia,
placerat arcu nec, bibendum eros. Nam vel ipsum viverra, euismod nunc
eget, volutpat odio. Aliquam sagittis mauris mi, sit amet sagittis
arcu dignissim in. Sed quis est sit amet magna sodales mattis. Morbi
leo lacus, dapibus vitae urna in, auctor mollis augue. </p>
</div>
<div class="col-md-4 col-sm-8">
<h2>Example Header</h2>
<p>Nullam sit amet est lacus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Donec
sollicitudin libero nec libero ullamcorper, non condimentum metus
mattis. Morbi tincidunt consectetur mauris. Vestibulum erat turpis,
rhoncus eu felis quis, tempus tempus mauris. Nam efficitur neque ac
orci condimentum maximus. Sed vestibulum velit fermentum nisl
interdum egestas. Sed a orci a felis finibus rhoncus a quis purus.
Vestibulum ut tristique quam. Suspendisse lobortis enim vel facilisis
sodales. Duis mauris felis, faucibus at orci sit amet, volutpat porta
sem. Aliquam lacinia lacinia scelerisque. Ut vitae ultricies turpis.
Vivamus elementum commodo mauris sit amet luctus. Sed tortor ligula,
eleifend sit amet turpis at, tincidunt pharetra metus. Suspendisse
pretium turpis id ligula dictum fermentum. </p>
</div>
<div class="col-md-4 col-sm-8">
<h2>Example Header</h2>
<p>Suspendisse tincidunt lorem vehicula arcu ullamcorper molestie.
Nulla facilisi. Nunc posuere nec eros gravida pharetra. Ut volutpat
lectus sit amet justo finibus, dignissim ullamcorper sapien tincidunt.
Aliquam erat volutpat. Aliquam porttitor velit a erat venenatis
faucibus. Nunc dui ligula, facilisis a sodales vitae, facilisis non
urna. Fusce id erat odio. </p>
</div>
<div class="col-md-4 col-sm-8">
<h2>Example Header</h2>
<p>Proin tempus, dui sit amet lacinia porta, nulla mi lacinia magna,
vitae ultricies odio arcu nec tellus. Sed imperdiet metus augue, eget
rhoncus tortor imperdiet vel. Pellentesque id molestie tortor.
Phasellus dictum sapien mi, a aliquam diam scelerisque quis.
Suspendisse sed leo tellus. Phasellus id gravida augue. In congue
quis turpis sed pharetra. Sed tellus velit, maximus et ipsum et,
vehicula suscipit justo. Sed aliquam lorem nec magna commodo, nec
eleifend tortor viverra. Sed venenatis sem sed eros porta ornare.
Donec tempus mattis tortor dictum lobortis. </p>
</div>
<div class="col-md-4 col-sm-8">
<h2>Example Header</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Phasellus ac tincidunt nibh. Ut
scelerisque purus et neque luctus pretium. Proin in vulputate libero.
Morbi et nisi feugiat, elementum nisi sit amet, auctor lorem. Donec
et facilisis eros. Fusce vel lorem id risus viverra eleifend ac nec
augue. Fusce lacinia a quam et rutrum. In euismod lacus sit amet
mauris eleifend, consectetur suscipit mauris porta. Nam eget rhoncus
nisi. Nulla lacinia leo at lectus volutpat, vel vehicula nunc
suscipit. Suspendisse vitae dolor justo. </p>
</div>
<div class="col-md-4 col-sm-8">
<h2>Example Header</h2>
<p>Proin nisl nisl, ultricies a semper a, hendrerit quis metus. Etiam
ornare interdum scelerisque. Sed ut nunc dictum odio ultrices posuere
cursus et dui. Etiam ornare rutrum mauris quis cursus. Quisque sit
amet sem vulputate, malesuada sem eget, fringilla ligula. Sed sit
amet congue ipsum. Phasellus eros libero, porttitor eleifend felis
et, varius auctor ante. Curabitur blandit erat libero, lobortis ornare
purus lobortis et. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Duis mattis eros quis
mollis rhoncus. Nulla fringilla nulla ante, vitae congue sem mollis
porttitor. Vivamus sed eros maximus, lobortis metus eu, dapibus
lectus. Vestibulum vestibulum orci non euismod imperdiet. Vivamus et
leo eget ipsum consectetur mattis nec pellentesque nisl. Etiam quis
metus tortor. Morbi euismod, urna at ullamcorper porta, diam eros
rutrum eros, in commodo diam nulla vel elit. </p>
</div>
</div>
<!-- PAGE PROJECT CAROUSEL -->
<div class="col-md-2"></div>
<div class="container col-md-8">
<div id="carousel-project-info" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-project-info" data-slide-to="0" class="active"></li>
<li data-target="#carousel-project-info" data-slide-to="1"></li>
<li data-target="#carousel-project-info" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="lena_color.gif" alt="lena">
<div class="carousel-caption">
<h3>Phasellus at</h3>
<p>Suspendisse a pretium tortor, eget porttitor arcu. Vivamus eget est nulla.</p>
</div>
</div>
<div class="item">
<img src="lena_color.gif" alt="lena">
<div class="carousel-caption">
<h3>Sed tristique</h3>
<p>Suspendisse a pretium tortor, eget porttitor arcu. Vivamus eget est nulla.</p>
</div>
</div>
<div class="item">
<img src="lena_color.gif" alt="lena">
<div class="carousel-caption">
<h3>Sed tristique</h3>
<p>Suspendisse a pretium tortor, eget porttitor arcu. Vivamus eget est nulla.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-project-info" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-project-info" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--<div class="col-md-2"></div>-->
</div>
</div>
<!-- PAGE FOOTER -->
<div class="navbar-inverse navbar-bottom" style>
<div class="container">
<p class="navbar-text pull-left">copyright</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>