API tools faq
paste
Advertisement
mfrantz

Untitled

mfrantz
Jan 22nd, 2018
207
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 68.29 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!--A Design by W3layouts
  3. Author: W3layout
  4. Author URL: http://w3layouts.com
  5. License: Creative Commons Attribution 3.0 Unported
  6. License URL: http://creativecommons.org/licenses/by/3.0/
  7. -->
  8. <!DOCTYPE html>
  9. <html lang="en">
  10. <head>
  11. <title>The Bike Trip Project</title>
  12. <meta name="viewport" content="width=device-width, initial-scale=1">
  13. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  14. <meta name="keywords" content="The Bike Trip Project travel biking life bicycle freedom traveler youtuber university DTU greece europe" />
  15. <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
  16. <!-- bootstrap-css -->
  17. <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
  18. <!--// bootstrap-css -->
  19. <!-- css -->
  20. <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
  21. <link rel="stylesheet" href="css/style_counter.css" type="text/css" media="all" />
  22. <!--// css -->
  23. <!-- font-awesome icons -->
  24. <link href="css/font-awesome.css" rel="stylesheet">
  25. <!-- //font-awesome icons -->
  26. <!-- gallery -->
  27. <link type="text/css" rel="stylesheet" href="css/cm-overlay.css" />
  28. <!-- //gallery -->
  29. <!-- counter -->
  30. <link rel="stylesheet" href='css/dscountdown.css' type='text/css' media='all' />
  31. <link href="css/style_counter.css" rel="stylesheet" type="text/css" media="all" />
  32. <!-- //counter -->
  33. <!-- font -->
  34. <link href="//fonts.googleapis.com/css?family=Kaushan+Script&amp;subset=latin-ext" rel="stylesheet">
  35. <link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  36. <!-- //font -->
  37. <!-- favicon -->
  38. <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
  39. <!-- //favicon -->
  40. <!-- realtime-map -->
  41. <link rel="stylesheet" type="text/css" href="css/realtime_map.css">
  42. <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
  43. <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
  44. <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
  45. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  46. <!-- //realtime-map -->
  47. <script src="js/jquery-1.11.1.min.js"></script>
  48. <script src="js/bootstrap.js"></script>
  49. <script src="js/SmoothScroll.min.js"></script>
  50. <script src="js/jarallax.js"></script>
  51. <script type="text/javascript">
  52. jQuery(document).ready(function($) {
  53. $(".scroll").click(function(event){
  54. event.preventDefault();
  55. $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
  56. });
  57. });
  58. </script>
  59. <!-- Google Analytics Snippet -->
  60. <script>
  61. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  62. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  63. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  64. })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  65.  
  66. ga('create', 'UA-100208268-1', 'auto');
  67. ga('send', 'pageview');
  68. </script>
  69. <!-- //Google Analytics Snippet -->
  70. </head>
  71. <body>
  72. <!-- banner -->
  73. <div class="banner" id="home">
  74. <div class="banner-dot">
  75. <div class="header-top">
  76. <div class="container banner-drop">
  77. <div class="agile-logo">
  78. <h1><a href="index.html">THE BIKE TRIP PROJECT</h1>
  79. </div>
  80. <div class="header-right">
  81. <nav>
  82. <ul>
  83. <li class="active">
  84. <a href="index.html"><span>Home</span></a>
  85. </li>
  86. <li>
  87. <a href="#counter" class="scroll"><span>Countdown</span></a>
  88. </li>
  89. <li>
  90. <a href="#about" class="scroll"><span>About</span></a>
  91. </li>
  92. <li>
  93. <a href="#tracking" class="scroll"><span>Metrics</span></a>
  94. </li>
  95. <li>
  96. <a href="#tools" class="scroll"><span>Tools</span></a>
  97. </li>
  98. <li>
  99. <a href="#realtime-map" class="scroll"><span>Realtime Map</span></a>
  100. </li>
  101. <li>
  102. <a href="#visualizations" class="scroll"><span>Visualizations</span></a>
  103. </li>
  104. <li>
  105. <a href="#gallery" class="scroll"><span>Gallery</span></a>
  106. </li>
  107. <li>
  108. <a href="#contributors" class="scroll"><span>Contributors</span></a>
  109. </li>
  110. <!-- <li>
  111. <a href="#blog" class="scroll"><span>Blog</span></a>
  112. </li>
  113. <li>
  114. <a href="#team" class="scroll"><span>Team</span></a>
  115. </li> -->
  116. <!-- <li>
  117. <a href="#contact" class="scroll"><span>Contact Us</span></a>
  118. </li> -->
  119. </ul>
  120. </nav>
  121. <div class="menu-icon"><span></span></div>
  122. </div>
  123. <div class="clearfix"> </div>
  124. <script>
  125. (function($){
  126. $(".menu-icon").on("click", function(){
  127. $(this).toggleClass("open");
  128. $(".container").toggleClass("nav-open");
  129. $("nav ul li").toggleClass("animate");
  130. });
  131.  
  132. })(jQuery);
  133. </script>
  134. </div>
  135. </div>
  136. <div class="w3layouts-slider">
  137. <div class="container">
  138. <div class="slider">
  139. <div class="callbacks_container">
  140. <ul class="rslides callbacks callbacks1" id="slider4">
  141. <li>
  142. <div class="wthree-banner-grids">
  143. <div class="col-md-6 agileits-banner-left">
  144. <h4>The project</h4>
  145. <!-- <h4>consectetur</h4> -->
  146. </div>
  147. <div class="col-md-6 agileinfo-banner-right">
  148. <p>This project will depict the bike trip metrics of 2 cyclists, crossing an entire continent on bicycles, for a distance of about 3000km.</p>
  149. <div class="banner-border"> </div>
  150. <div class="w3-button">
  151. <a href="#" data-toggle="modal" data-target="#myModal">Read More</a>
  152. </div>
  153. </div>
  154. <div class="clearfix"> </div>
  155. </div>
  156. </li>
  157. <li>
  158. <div class="wthree-banner-grids">
  159. <div class="col-md-6 agileits-banner-left">
  160. <h4>The metrics</h4>
  161. <!-- <h4>adipiscing </h4> -->
  162. </div>
  163. <div class="col-md-6 agileinfo-banner-right">
  164. <p>Various data will be collected concerning mapping distances and self-tracking measures, which will be visualized after the end of the trip.</p>
  165. <div class="banner-border"> </div>
  166. <div class="w3-button">
  167. <a href="#" data-toggle="modal" data-target="#myModal">Read More</a>
  168. </div>
  169. </div>
  170. <div class="clearfix"> </div>
  171. </div>
  172. </li>
  173. </ul>
  174. </div>
  175. <script src="js/responsiveslides.min.js"></script>
  176. <script>
  177. // You can also use "$(window).load(function() {"
  178. $(function () {
  179. // Slideshow 4
  180. $("#slider4").responsiveSlides({
  181. auto: true,
  182. pager:true,
  183. nav:true,
  184. speed: 500,
  185. namespace: "callbacks",
  186. before: function () {
  187. $('.events').append("<li>before event fired.</li>");
  188. },
  189. after: function () {
  190. $('.events').append("<li>after event fired.</li>");
  191. }
  192. });
  193.  
  194. });
  195. </script>
  196. <!--banner Slider starts Here-->
  197. </div>
  198. <div class="social-icon">
  199. <a href="https://www.facebook.com/thebiketripproject/" class="social-button facebook"><i class="fa fa-facebook fa-2x"></i></a>
  200. <a href="https://www.instagram.com/thebiketripproject/" class="social-button google"><i class="fa fa-instagram fa-2x"></i></a>
  201. <a href="https://www.youtube.com/channel/UCkQ1YhA4lX0NoHKuFIauXMw" class="social-button dribbble"><i class="fa fa-youtube fa-2x"></i></a>
  202. <a href="mailto:info@thebiketripproject.com" class="social-button email"><i class="fa fa-envelope fa-2x"></i></a>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. <!-- //banner -->
  209. <!-- modal -->
  210. <div class="modal about-modal fade" id="myModal" tabindex="-1" role="dialog">
  211. <div class="modal-dialog" role="document">
  212. <div class="modal-content">
  213. <div class="modal-header">
  214. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  215. <h4 class="modal-title">Expected route</h4>
  216. </div>
  217. <div class="modal-body">
  218. <div class="agileits-w3layouts-info">
  219. <img src="images/scheduled_map.png" alt="" />
  220. <p>Starting point : Tallinn, Estonia </br>
  221. Termination : Thessaloniki, Greece </br>
  222. Duration : 30 days </br>
  223. Distance: 3376km </br>
  224. ETD : 05/07/2017 </br>
  225. ETA : 04/08/2017
  226. </p>
  227. </div>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. <!-- //modal -->
  233. <!-- countdown -->
  234. <div class="container">
  235. <div class="col-md-12 tracking-top-left">
  236. <p align="center">PROJECT COUNTDOWN</p>
  237. </div>
  238. </div>
  239. </div>
  240. <div class="demo2" id="counter">
  241. <script type="text/javascript" src="js/dscountdown.min.js"></script>
  242. <script>
  243. jQuery(document).ready(function($){
  244. $('.demo2').dsCountDown({
  245. endDate: new Date("july 04, 2017 23:59:00"),
  246. theme: 'black'
  247. });
  248. });
  249. </script>
  250. </div>
  251. <!-- countdown -->
  252. <!-- about -->
  253. <div class="about" id="about">
  254. <div class="col-xs-6 w3-agileits-about-left">
  255.  
  256. </div>
  257. <div class="col-xs-6 agile-about-right">
  258. <h2>Angelos</h2>
  259. <h5>A <span style="font-weight:bold">Data Scientist</span> working at Maersk Group while studying at the <span style="font-weight:bold">Technical University of Denmark</span> in Copenhagen.</h5>
  260. <p>Born in: 1988</br>
  261. Weight: 81kg </br>
  262. Height: 183cm </br></br>
  263. </p>
  264. <h4><span style="font-style:italic">"Development and technology in harmony with nature and the environment are the things that I mostly try to combine in my life. I cannot really separate my professional from my personal life. I constantly search for new challenges to ameliorate myself and stay restless against the passivity of the contemporary world."</span></h4>
  265. </div>
  266. <div class="clearfix"> </div>
  267. <div class="col-xs-6 agile-about-left">
  268. <h2>Antreas</h2>
  269. <h5>A <span style="font-weight:bold">Physiotherapy - Orient Medicine Practitioner</span> living and working as a freelancer in Athens.</h5>
  270. <p>Born in: 1986</br>
  271. Weight: 75kg </br>
  272. Height: 175cm </br></br>
  273. </p>
  274. <h4><span style="font-style:italic">"Ηelping people healing themselves is my main practice in society. Personally, though I am addicted to any kind of physical activity, from triathlon races, to climbing and paragliding!
  275. I truly enjoy being outdoors, traveling and challenging myself by setting new goals.
  276. Long story short, I prefer to live rather than simply exist.
  277. "</span></h4>
  278. </div>
  279. <div class="col-xs-6 w3-agileits-about-right">
  280.  
  281. </div>
  282. <div class="clearfix"> </div>
  283. </div>
  284. <!-- //about -->
  285. <!-- tracking -->
  286. <div class="tracking" id="tracking">
  287. <div class="container">
  288. <div class="tracking-top">
  289. <div class="col-md-6 tracking-top-left">
  290. <h3>The Metrics</h3>
  291. <h5>Data collected for analysis.</h5>
  292. <p>During the trip various data will be collected concerning mapping distances and self-tracking measures, which will be analysed and visualized on this website after the end of the trip.</p>
  293. </div>
  294. <div class="col-md-6 tracking-top-right">
  295. <div class="tracking-icons">
  296. <div class="col-sm-6 tracking-grid">
  297. <div class="tracking-grid-icon">
  298. <i class="fa fa-map-marker fa-3x" aria-hidden="true"></i>
  299. <p>Coordinates</p>
  300. </div>
  301. </div>
  302. <div class="col-sm-6 tracking-grid">
  303. <div class="tracking-grid-icon">
  304. <i class="fa fa-expand fa-3x" aria-hidden="true"></i>
  305. <p>Elevation Gain</p>
  306. </div>
  307. </div>
  308. <div class="clearfix"> </div>
  309. </div>
  310. </div>
  311. <div class="clearfix"> </div>
  312. </div>
  313. <div class="w3-agile-tracking-grids">
  314. <div class="col-md-6 tracking-left">
  315. <div class="tracking-icons">
  316. <div class="col-sm-6 tracking-grid">
  317. <div class="tracking-grid-icon">
  318. <i class="fa fa-bicycle fa-3x" aria-hidden="true"></i>
  319. <p>Cycling Distance</p>
  320. </div>
  321. </div>
  322. <div class="col-sm-6 tracking-grid">
  323. <div class="tracking-grid-icon">
  324. <i class="fa fa-road fa-3x" aria-hidden="true"></i>
  325. <p>Speed</p>
  326. </div>
  327. </div>
  328. <div class="clearfix"> </div>
  329. </div>
  330. <div class="tracking-icons tracking-icons-bottom">
  331. <div class="col-sm-6 tracking-grid">
  332. <div class="tracking-grid-icon">
  333. <i class="fa fa-heartbeat fa-3x" aria-hidden="true"></i>
  334. <p>Active/Resting Heartbeat</p>
  335. </div>
  336. </div>
  337. <div class="col-sm-6 tracking-grid">
  338. <div class="tracking-grid-icon">
  339. <i class="fa fa-clock-o fa-3x" aria-hidden="true"></i>
  340. <p>Biking Time</p>
  341. </div>
  342. </div>
  343. <div class="clearfix"> </div>
  344. </div>
  345. </div>
  346. <div class="col-md-6 tracking-left">
  347. <div class="tracking-icons">
  348. <div class="col-sm-6 tracking-grid">
  349. <div class="tracking-grid-icon">
  350. <i class="fa fa-sun-o fa-3x" aria-hidden="true"></i>
  351. <p>Weather</p>
  352. </div>
  353. </div>
  354. <div class="col-sm-6 tracking-grid">
  355. <div class="tracking-grid-icon">
  356. <i class="fa fa-bell-slash fa-3x" aria-hidden="true"></i>
  357. <p>Sleep</p>
  358. </div>
  359. </div>
  360. <div class="clearfix"> </div>
  361. </div>
  362. <div class="tracking-icons tracking-icons-bottom">
  363. <div class="col-sm-6 tracking-grid">
  364. <div class="tracking-grid-icon">
  365. <i class="fa fa-tint fa-3x" aria-hidden="true"></i>
  366. <p>Water Consumption</p>
  367. </div>
  368. </div>
  369. <div class="col-sm-6 tracking-grid">
  370. <div class="tracking-grid-icon">
  371. <i class="fa fa-cutlery fa-3x" aria-hidden="true"></i>
  372. <p>Calories Burnt/Consumed</p>
  373. </div>
  374. </div>
  375. <div class="clearfix"> </div>
  376. </div>
  377. </div>
  378. <div class="clearfix"> </div>
  379. </div>
  380. </div>
  381. </div>
  382. <!-- //tracking -->
  383. <!-- tools -->
  384. <div class="about" id="tools">
  385. <div class="col-xs-6 agile-about-left">
  386. <h2>Hardware</h2>
  387. <ul>
  388. <li>Motorola Nexus 6</li>
  389. <li>LG Nexus 4</li>
  390. <li>Sony M4Aqua</li>
  391. <li>Garmin Vivosmart HR+</li>
  392. <li>FitBit Charge</li>
  393. <li>2 x Anker PowerCore+ 26800mAh</li>
  394. <li>2 x Anker PowerPort+ 1 with Quick Charge 3.0</li>
  395. </ul>
  396. </div>
  397. <div class="col-xs-6 agile-about-right">
  398. <h2>Software/Apps</h2>
  399. <ul>
  400. <li>Garmin Connect</li>
  401. <li>FitBit</li>
  402. <li>Strava</li>
  403. <li>Google Fit</li>
  404. <li>Adobe Clip</li>
  405. <li>LifeSum</li>
  406. <li>Custom app for coordinate sync and weather API call</li>
  407. </ul>
  408. </div>
  409. <div class="clearfix"> </div>
  410. </div>
  411. <!-- //tools -->
  412.  
  413. <!-- map -->
  414. <!-- <div id='realtime-map'> -->
  415. <div id='realtime-map' class="container">
  416. <div class="w3ls-heading">
  417. </br>
  418. <h3>Realtime Map</h3></br>
  419. <p>Here you may check where we are, anytime during the trip. The map will be updated once a day with a new point showing info on the map.</p></br>
  420. </div>
  421. </div>
  422. <div id="realtime_map"></div> <!-- class="agileits-w3layouts-map" -->
  423. <script type="text/javascript" src="js/leaflet-sleep.js"></script>
  424. <script type="text/javascript" src="js/realtime_map.js"></script>
  425.  
  426. <!-- Visualizations -->
  427. <!-- Interactive map -->
  428. <div id='visualizations' class="container">
  429. <div class="w3ls-heading">
  430. </br>
  431. <h3>Interactive Biking Map</h3></br>
  432. <p class="vis_desc">This is the main and the most complex visualization of the whole project. It depicts all active metrics in a way that you can track every step of the trip while we were biking along the route. By clicking on each of the bars on top left of the graph, a set of linegraphs will appear, related to the day of the trip. Additionally, the specified day route will be highlighted with green color on the map. On mouse over the linegraphs, you may navigate through the day routes and a pointer will mark the position on the map. You may also want to check weather and wind data during the trip by adding extra layers on top of the map. To do so mouse over the top right panel of the map and choose which data to show. Play around, it is pure fun!</p></br>
  433. </div>
  434. </div>
  435. <div class="visualWrapper">
  436. <iframe src="http://www.thebiketripproject.com/d3_visualizations/interactive_map/index.html" allowfullscreen frameborder="0">
  437. </iframe>
  438. </div>
  439. <!-- TOTALS -->
  440. <div class="container">
  441. <div class="w3ls-heading">
  442. </br>
  443. <h3>Totals per day</h3></br>
  444. <p class="vis_desc">To sum up the data you saw above, just go through the graph below. Mouse over the linegraphs and see the averages per day or don't, and see the totals and averages of the whole trip. Check the total elevation gain of the trip. It sums up to a quarter way to space!</p></br>
  445. </div>
  446. </div>
  447. <div class="visualWrapper">
  448. <iframe src="http://www.thebiketripproject.com/d3_visualizations/totals_linegraphs/index.html" allowfullscreen frameborder="0">
  449. </iframe>
  450. </div>
  451. <!-- WEATHER -->
  452. <div class="container">
  453. <div class="w3ls-heading">
  454. </br>
  455. <h3>Weather</h3></br>
  456. <p class="vis_desc">And here comes the weather data. The two area graphs represent the span between the max and the min temperature and wind for each day. The line in the middle is the average temperature or wind of each day. Mouse over the graph to see the moving circles. It is clear that while we were moving down to the south of Europe, the temperature was rising up. You may also assume that the wind close to the seeside is stronger!</p></br>
  457. </div>
  458. </div>
  459. <div class="visualWrapper">
  460. <iframe src="http://www.thebiketripproject.com/d3_visualizations/weather_areagraph/index.html" allowfullscreen frameborder="0">
  461. </iframe>
  462. </div>
  463. <!-- Resting HeartRate -->
  464. <div class="container">
  465. <div class="w3ls-heading">
  466. </br>
  467. <h3>Resting HeartRate</h3></br>
  468. <p class="vis_desc">By resting we mean the hearbeat captured by the sensors while sleeping or relaxing. It is compared to the one before and after the trip. The yellow background represents the trip dates. You may see that when you are biking on average 7 hours per day, the heart have the tendency to rest more than usual. Have in mind that the resting heartrate of a healthy man, spread between 60 and 90 bpm. The peak you see on days 9, 10 and 11 is because of a cold and being on medication. Weird no?</p></br>
  469. </div>
  470. </div>
  471. <div class="visualWrapper">
  472. <iframe src="http://www.thebiketripproject.com/d3_visualizations/restingHR_linegraph/index.html" allowfullscreen frameborder="0">
  473. </iframe>
  474. </div>
  475. <!-- Sleep -->
  476. <div class="container">
  477. <div class="w3ls-heading">
  478. </br>
  479. <h3>Sleep</h3></br>
  480. <p class="vis_desc">Although we spent 25 out of 28 night on tent, we enjoyed sleeping a lot! Each of the bars below start with the exact time we fall asleep and ends with the time we woke up. The line graph is a sum of the total minutes slept per day. One can inspect the pattern here. While heading south, the sun was setting earlier than in the north, thus we were sleeping earlier and woking up earlier to catch up with the daily program. Day one's sleep was on a bench at Tallinn's airport, that's why it is so short!</p></br>
  481. </div>
  482. </div>
  483. <div class="visualWrapper">
  484. <iframe src="http://www.thebiketripproject.com/d3_visualizations/sleep_barchart/index.html" allowfullscreen frameborder="0">
  485. </iframe>
  486. </div>
  487. <!-- Calories -->
  488. <div class="container">
  489. <div class="w3ls-heading">
  490. </br>
  491. <h3>Calories and Water</h3></br>
  492. <p class="vis_desc">Last but not least is a graph depicting the difference between the calories burnt and the calories consumed each day. The green dashed line represents the calories burnt and the red the calories consumed. This graph assumes that when the calories burnt exceed the calories consumed, you eat more than you need so you gain weight. We should mention that Angelos lost 2.5kgs and Andreas kept the same weight so we suppose that we didn't take into account the 2495Kcal that a man with our shape needs to stay alive without having to be on bike all day long. Each blue block on the bottom, represents 0.5L of water consumed by one person.</p></br>
  493. </div>
  494. </div>
  495. <div class="visualWrapper">
  496. <iframe src="http://www.thebiketripproject.com/d3_visualizations/calories/index.html" allowfullscreen frameborder="0">
  497. </iframe>
  498. </div>
  499. <!-- Additional Info -->
  500. <div class="container">
  501. <div class="w3ls-heading">
  502. </br>
  503. <h3>Additional Info</h3></br>
  504. <p class="vis_desc">You may find documentation on how to build a project similar to this one <a href="https://github.com/oikonang/bike_trip_project/wiki">here</a> or you can check the open-source code created for this project by clicking <a href="https://github.com/oikonang/bike_trip_project">here</a>. You may also contact us, follow us or watch additional pictures and videos of the trip by clicking on the social media icons on top of this webpage. Thank you for the support! I hope you enjoyed as much as we did!</p></br>
  505. </div>
  506. </div>
  507. <!-- //Visualizations -->
  508. <!-- </div> -->
  509. <!-- map -->
  510. <!-- gallery -->
  511. <div class="gallery" id="gallery">
  512. <div class="container">
  513. <div class="w3ls-heading">
  514. <h3>Gallery</h3>
  515. <p>Here you may find images from our previous trips along with updated image from the bike trip project!</p>
  516. </div>
  517. </div>
  518. <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
  519. <ul id="myTab" class="nav nav-tabs" role="tablist">
  520. <li role="presentation" class="active"><a href="#home-main" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">All</a></li>
  521. <li role="presentation"><a href="#learning" role="tab" id="learning-tab" data-toggle="tab" aria-controls="learning">Previous Trips</a></li> <!-- Everyday -->
  522. <li role="presentation"><a href="#playing" role="tab" id="playing-tab" data-toggle="tab" aria-controls="playing">The Bike Trip Project</a></li> <!-- Occasion -->
  523. </ul>
  524. <div id="myTabContent" class="tab-content">
  525. <div role="tabpanel" class="tab-pane fade in active" id="home-main" aria-labelledby="home-tab">
  526. <div class="w3_tab_img">
  527. <div class="col-md-3 w3_tab_img_left">
  528. <div class="demo">
  529. <a class="cm-overlay" href="images/2_1.jpg">
  530. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_1.jpg" alt=" " class="img-responsive" />
  531. </figure>
  532. </a>
  533. </div>
  534. </div>
  535. <div class="col-md-3 w3_tab_img_left">
  536. <div class="demo">
  537. <a class="cm-overlay" href="images/2_2.jpg">
  538. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_2.jpg" alt=" " class="img-responsive" />
  539. </figure>
  540. </a>
  541. </div>
  542. </div>
  543. <div class="col-md-3 w3_tab_img_left">
  544. <div class="demo">
  545. <a class="cm-overlay" href="images/2_3.jpg">
  546. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_3.jpg" alt=" " class="img-responsive" />
  547. </figure>
  548. </a>
  549. </div>
  550. </div>
  551. <div class="col-md-3 w3_tab_img_left">
  552. <div class="demo">
  553. <a class="cm-overlay" href="images/2_4.jpg">
  554. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_4.jpg" alt=" " class="img-responsive" />
  555. </figure>
  556. </a>
  557. </div>
  558. </div>
  559. <div class="col-md-3 w3_tab_img_left">
  560. <div class="demo">
  561. <a class="cm-overlay" href="images/2_5.jpg">
  562. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_5.jpg" alt=" " class="img-responsive" />
  563. </figure>
  564. </a>
  565. </div>
  566. </div>
  567. <div class="col-md-3 w3_tab_img_left">
  568. <div class="demo">
  569. <a class="cm-overlay" href="images/2_6.jpg">
  570. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_6.jpg" alt=" " class="img-responsive" />
  571. </figure>
  572. </a>
  573. </div>
  574. </div>
  575. <div class="col-md-3 w3_tab_img_left">
  576. <div class="demo">
  577. <a class="cm-overlay" href="images/2_7.jpg">
  578. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_7.jpg" alt=" " class="img-responsive" />
  579. </figure>
  580. </a>
  581. </div>
  582. </div>
  583. <div class="col-md-3 w3_tab_img_left">
  584. <div class="demo">
  585. <a class="cm-overlay" href="images/2_8.jpg">
  586. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_8.jpg" alt=" " class="img-responsive" />
  587. </figure>
  588. </a>
  589. </div>
  590. </div>
  591. <div class="col-md-3 w3_tab_img_left">
  592. <div class="demo">
  593. <a class="cm-overlay" href="images/2_9.jpg">
  594. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_9.jpg" alt=" " class="img-responsive" />
  595. </figure>
  596. </a>
  597. </div>
  598. </div>
  599. <div class="col-md-3 w3_tab_img_left">
  600. <div class="demo">
  601. <a class="cm-overlay" href="images/2_10.jpg">
  602. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_10.jpg" alt=" " class="img-responsive" />
  603. </figure>
  604. </a>
  605. </div>
  606. </div>
  607. <div class="col-md-3 w3_tab_img_left">
  608. <div class="demo">
  609. <a class="cm-overlay" href="images/1.jpg">
  610. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/1.jpg" alt=" " class="img-responsive" />
  611. </figure>
  612. </a>
  613. </div>
  614. </div>
  615. <div class="col-md-3 w3_tab_img_left">
  616. <div class="demo">
  617. <a class="cm-overlay" href="images/2.jpg">
  618. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2.jpg" alt=" " class="img-responsive" />
  619. </figure>
  620. </a>
  621. </div>
  622. </div>
  623. <div class="col-md-3 w3_tab_img_left">
  624. <div class="demo">
  625. <a class="cm-overlay" href="images/3.jpg">
  626. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/3.jpg" alt=" " class="img-responsive" />
  627. </figure>
  628. </a>
  629. </div>
  630. </div>
  631. <div class="col-md-3 w3_tab_img_left">
  632. <div class="demo">
  633. <a class="cm-overlay" href="images/4.jpg">
  634. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/4.jpg" alt=" " class="img-responsive" />
  635. </figure>
  636. </a>
  637. </div>
  638. </div>
  639. <div class="col-md-3 w3_tab_img_left">
  640. <div class="demo">
  641. <a class="cm-overlay" href="images/5.jpg">
  642. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/5.jpg" alt=" " class="img-responsive" />
  643. </figure>
  644. </a>
  645. </div>
  646. </div>
  647. <div class="col-md-3 w3_tab_img_left">
  648. <div class="demo">
  649. <a class="cm-overlay" href="images/6.jpg">
  650. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/6.jpg" alt=" " class="img-responsive" />
  651. </figure>
  652. </a>
  653. </div>
  654. </div>
  655. <div class="col-md-3 w3_tab_img_left">
  656. <div class="demo">
  657. <a class="cm-overlay" href="images/7.jpg">
  658. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/7.jpg" alt=" " class="img-responsive" />
  659. </figure>
  660. </a>
  661. </div>
  662. </div>
  663. <div class="col-md-3 w3_tab_img_left">
  664. <div class="demo">
  665. <a class="cm-overlay" href="images/8.jpg">
  666. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/8.jpg" alt=" " class="img-responsive" />
  667. </figure>
  668. </a>
  669. </div>
  670. </div>
  671. <div class="col-md-3 w3_tab_img_left">
  672. <div class="demo">
  673. <a class="cm-overlay" href="images/9.jpg">
  674. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/9.jpg" alt=" " class="img-responsive" />
  675. </figure>
  676. </a>
  677. </div>
  678. </div>
  679. <div class="col-md-3 w3_tab_img_left">
  680. <div class="demo">
  681. <a class="cm-overlay" href="images/10.jpg">
  682. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/10.jpg" alt=" " class="img-responsive" />
  683. </figure>
  684. </a>
  685. </div>
  686. </div>
  687. <div class="col-md-3 w3_tab_img_left">
  688. <div class="demo">
  689. <a class="cm-overlay" href="images/11.jpg">
  690. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/11.jpg" alt=" " class="img-responsive" />
  691. </figure>
  692. </a>
  693. </div>
  694. </div>
  695. <div class="col-md-3 w3_tab_img_left">
  696. <div class="demo">
  697. <a class="cm-overlay" href="images/12.jpg">
  698. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/12.jpg" alt=" " class="img-responsive" />
  699. </figure>
  700. </a>
  701. </div>
  702. </div>
  703. <div class="col-md-3 w3_tab_img_left">
  704. <div class="demo">
  705. <a class="cm-overlay" href="images/13.jpg">
  706. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/13.jpg" alt=" " class="img-responsive" />
  707. </figure>
  708. </a>
  709. </div>
  710. </div>
  711. <div class="col-md-3 w3_tab_img_left">
  712. <div class="demo">
  713. <a class="cm-overlay" href="images/14.jpg">
  714. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/14.jpg" alt=" " class="img-responsive" />
  715. </figure>
  716. </a>
  717. </div>
  718. </div>
  719. <div class="col-md-3 w3_tab_img_left">
  720. <div class="demo">
  721. <a class="cm-overlay" href="images/15.jpg">
  722. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/15.jpg" alt=" " class="img-responsive" />
  723. </figure>
  724. </a>
  725. </div>
  726. </div>
  727. <div class="col-md-3 w3_tab_img_left">
  728. <div class="demo">
  729. <a class="cm-overlay" href="images/16.jpg">
  730. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/16.jpg" alt=" " class="img-responsive" />
  731. </figure>
  732. </a>
  733. </div>
  734. </div>
  735. <div class="col-md-3 w3_tab_img_left">
  736. <div class="demo">
  737. <a class="cm-overlay" href="images/17.jpg">
  738. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/17.jpg" alt=" " class="img-responsive" />
  739. </figure>
  740. </a>
  741. </div>
  742. </div>
  743. <div class="col-md-3 w3_tab_img_left">
  744. <div class="demo">
  745. <a class="cm-overlay" href="images/18.jpg">
  746. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/18.jpg" alt=" " class="img-responsive" />
  747. </figure>
  748. </a>
  749. </div>
  750. </div>
  751. <div class="col-md-3 w3_tab_img_left">
  752. <div class="demo">
  753. <a class="cm-overlay" href="images/19.jpg">
  754. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/19.jpg" alt=" " class="img-responsive" />
  755. </figure>
  756. </a>
  757. </div>
  758. </div>
  759. <div class="col-md-3 w3_tab_img_left">
  760. <div class="demo">
  761. <a class="cm-overlay" href="images/20.jpg">
  762. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/20.jpg" alt=" " class="img-responsive" />
  763. </figure>
  764. </a>
  765. </div>
  766. </div>
  767. <div class="col-md-3 w3_tab_img_left">
  768. <div class="demo">
  769. <a class="cm-overlay" href="images/21.jpg">
  770. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/21.jpg" alt=" " class="img-responsive" />
  771. </figure>
  772. </a>
  773. </div>
  774. </div>
  775. <div class="col-md-3 w3_tab_img_left">
  776. <div class="demo">
  777. <a class="cm-overlay" href="images/22.jpg">
  778. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/22.jpg" alt=" " class="img-responsive" />
  779. </figure>
  780. </a>
  781. </div>
  782. </div>
  783. <div class="col-md-3 w3_tab_img_left">
  784. <div class="demo">
  785. <a class="cm-overlay" href="images/23.jpg">
  786. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/23.jpg" alt=" " class="img-responsive" />
  787. </figure>
  788. </a>
  789. </div>
  790. </div>
  791. <div class="col-md-3 w3_tab_img_left">
  792. <div class="demo">
  793. <a class="cm-overlay" href="images/24.jpg">
  794. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/24.jpg" alt=" " class="img-responsive" />
  795. </figure>
  796. </a>
  797. </div>
  798. </div>
  799. <div class="col-md-3 w3_tab_img_left">
  800. <div class="demo">
  801. <a class="cm-overlay" href="images/25.jpg">
  802. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/25.jpg" alt=" " class="img-responsive" />
  803. </figure>
  804. </a>
  805. </div>
  806. </div>
  807. <div class="col-md-3 w3_tab_img_left">
  808. <div class="demo">
  809. <a class="cm-overlay" href="images/26.jpg">
  810. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/26.jpg" alt=" " class="img-responsive" />
  811. </figure>
  812. </a>
  813. </div>
  814. </div>
  815. <div class="col-md-3 w3_tab_img_left">
  816. <div class="demo">
  817. <a class="cm-overlay" href="images/27.jpg">
  818. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/27.jpg" alt=" " class="img-responsive" />
  819. </figure>
  820. </a>
  821. </div>
  822. </div>
  823. <div class="clearfix"> </div>
  824. </div>
  825. </div>
  826. <div role="tabpanel" class="tab-pane fade" id="learning" aria-labelledby="learning-tab">
  827. <div class="w3_tab_img">
  828. <div class="col-md-3 w3_tab_img_left">
  829. <div class="demo">
  830. <a class="cm-overlay" href="images/1.jpg">
  831. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/1.jpg" alt=" " class="img-responsive" />
  832. </figure>
  833. </a>
  834. </div>
  835. </div>
  836. <div class="col-md-3 w3_tab_img_left">
  837. <div class="demo">
  838. <a class="cm-overlay" href="images/2.jpg">
  839. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2.jpg" alt=" " class="img-responsive" />
  840. </figure>
  841. </a>
  842. </div>
  843. </div>
  844. <div class="col-md-3 w3_tab_img_left">
  845. <div class="demo">
  846. <a class="cm-overlay" href="images/3.jpg">
  847. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/3.jpg" alt=" " class="img-responsive" />
  848. </figure>
  849. </a>
  850. </div>
  851. </div>
  852. <div class="col-md-3 w3_tab_img_left">
  853. <div class="demo">
  854. <a class="cm-overlay" href="images/4.jpg">
  855. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/4.jpg" alt=" " class="img-responsive" />
  856. </figure>
  857. </a>
  858. </div>
  859. </div>
  860. <div class="col-md-3 w3_tab_img_left">
  861. <div class="demo">
  862. <a class="cm-overlay" href="images/5.jpg">
  863. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/5.jpg" alt=" " class="img-responsive" />
  864. </figure>
  865. </a>
  866. </div>
  867. </div>
  868. <div class="col-md-3 w3_tab_img_left">
  869. <div class="demo">
  870. <a class="cm-overlay" href="images/6.jpg">
  871. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/6.jpg" alt=" " class="img-responsive" />
  872. </figure>
  873. </a>
  874. </div>
  875. </div>
  876. <div class="col-md-3 w3_tab_img_left">
  877. <div class="demo">
  878. <a class="cm-overlay" href="images/7.jpg">
  879. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/7.jpg" alt=" " class="img-responsive" />
  880. </figure>
  881. </a>
  882. </div>
  883. </div>
  884. <div class="col-md-3 w3_tab_img_left">
  885. <div class="demo">
  886. <a class="cm-overlay" href="images/8.jpg">
  887. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/8.jpg" alt=" " class="img-responsive" />
  888. </figure>
  889. </a>
  890. </div>
  891. </div>
  892. <div class="col-md-3 w3_tab_img_left">
  893. <div class="demo">
  894. <a class="cm-overlay" href="images/9.jpg">
  895. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/9.jpg" alt=" " class="img-responsive" />
  896. </figure>
  897. </a>
  898. </div>
  899. </div>
  900. <div class="col-md-3 w3_tab_img_left">
  901. <div class="demo">
  902. <a class="cm-overlay" href="images/10.jpg">
  903. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/10.jpg" alt=" " class="img-responsive" />
  904. </figure>
  905. </a>
  906. </div>
  907. </div>
  908. <div class="col-md-3 w3_tab_img_left">
  909. <div class="demo">
  910. <a class="cm-overlay" href="images/11.jpg">
  911. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/11.jpg" alt=" " class="img-responsive" />
  912. </figure>
  913. </a>
  914. </div>
  915. </div>
  916. <div class="col-md-3 w3_tab_img_left">
  917. <div class="demo">
  918. <a class="cm-overlay" href="images/12.jpg">
  919. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/12.jpg" alt=" " class="img-responsive" />
  920. </figure>
  921. </a>
  922. </div>
  923. </div>
  924. <div class="col-md-3 w3_tab_img_left">
  925. <div class="demo">
  926. <a class="cm-overlay" href="images/13.jpg">
  927. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/13.jpg" alt=" " class="img-responsive" />
  928. </figure>
  929. </a>
  930. </div>
  931. </div>
  932. <div class="col-md-3 w3_tab_img_left">
  933. <div class="demo">
  934. <a class="cm-overlay" href="images/14.jpg">
  935. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/14.jpg" alt=" " class="img-responsive" />
  936. </figure>
  937. </a>
  938. </div>
  939. </div>
  940. <div class="col-md-3 w3_tab_img_left">
  941. <div class="demo">
  942. <a class="cm-overlay" href="images/15.jpg">
  943. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/15.jpg" alt=" " class="img-responsive" />
  944. </figure>
  945. </a>
  946. </div>
  947. </div>
  948. <div class="col-md-3 w3_tab_img_left">
  949. <div class="demo">
  950. <a class="cm-overlay" href="images/16.jpg">
  951. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/16.jpg" alt=" " class="img-responsive" />
  952. </figure>
  953. </a>
  954. </div>
  955. </div>
  956. <div class="col-md-3 w3_tab_img_left">
  957. <div class="demo">
  958. <a class="cm-overlay" href="images/17.jpg">
  959. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/17.jpg" alt=" " class="img-responsive" />
  960. </figure>
  961. </a>
  962. </div>
  963. </div>
  964. <div class="col-md-3 w3_tab_img_left">
  965. <div class="demo">
  966. <a class="cm-overlay" href="images/18.jpg">
  967. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/18.jpg" alt=" " class="img-responsive" />
  968. </figure>
  969. </a>
  970. </div>
  971. </div>
  972. <div class="col-md-3 w3_tab_img_left">
  973. <div class="demo">
  974. <a class="cm-overlay" href="images/19.jpg">
  975. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/19.jpg" alt=" " class="img-responsive" />
  976. </figure>
  977. </a>
  978. </div>
  979. </div>
  980. <div class="col-md-3 w3_tab_img_left">
  981. <div class="demo">
  982. <a class="cm-overlay" href="images/20.jpg">
  983. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/20.jpg" alt=" " class="img-responsive" />
  984. </figure>
  985. </a>
  986. </div>
  987. </div>
  988. <div class="col-md-3 w3_tab_img_left">
  989. <div class="demo">
  990. <a class="cm-overlay" href="images/21.jpg">
  991. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/21.jpg" alt=" " class="img-responsive" />
  992. </figure>
  993. </a>
  994. </div>
  995. </div>
  996. <div class="col-md-3 w3_tab_img_left">
  997. <div class="demo">
  998. <a class="cm-overlay" href="images/22.jpg">
  999. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/22.jpg" alt=" " class="img-responsive" />
  1000. </figure>
  1001. </a>
  1002. </div>
  1003. </div>
  1004. <div class="col-md-3 w3_tab_img_left">
  1005. <div class="demo">
  1006. <a class="cm-overlay" href="images/23.jpg">
  1007. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/23.jpg" alt=" " class="img-responsive" />
  1008. </figure>
  1009. </a>
  1010. </div>
  1011. </div>
  1012. <div class="col-md-3 w3_tab_img_left">
  1013. <div class="demo">
  1014. <a class="cm-overlay" href="images/24.jpg">
  1015. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/24.jpg" alt=" " class="img-responsive" />
  1016. </figure>
  1017. </a>
  1018. </div>
  1019. </div>
  1020. <div class="col-md-3 w3_tab_img_left">
  1021. <div class="demo">
  1022. <a class="cm-overlay" href="images/25.jpg">
  1023. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/25.jpg" alt=" " class="img-responsive" />
  1024. </figure>
  1025. </a>
  1026. </div>
  1027. </div>
  1028. <div class="col-md-3 w3_tab_img_left">
  1029. <div class="demo">
  1030. <a class="cm-overlay" href="images/26.jpg">
  1031. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/26.jpg" alt=" " class="img-responsive" />
  1032. </figure>
  1033. </a>
  1034. </div>
  1035. </div>
  1036. <div class="col-md-3 w3_tab_img_left">
  1037. <div class="demo">
  1038. <a class="cm-overlay" href="images/27.jpg">
  1039. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/27.jpg" alt=" " class="img-responsive" />
  1040. </figure>
  1041. </a>
  1042. </div>
  1043. </div>
  1044. <div class="clearfix"> </div>
  1045. </div>
  1046. </div>
  1047. <div role="tabpanel" class="tab-pane fade" id="playing" aria-labelledby="playing-tab">
  1048. <!-- New images for the bike trip project -->
  1049. <div class="col-md-3 w3_tab_img_left">
  1050. <div class="demo">
  1051. <a class="cm-overlay" href="images/2_1.jpg">
  1052. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_1.jpg" alt=" " class="img-responsive" />
  1053. </figure>
  1054. </a>
  1055. </div>
  1056. </div>
  1057. <div class="col-md-3 w3_tab_img_left">
  1058. <div class="demo">
  1059. <a class="cm-overlay" href="images/2_2.jpg">
  1060. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_2.jpg" alt=" " class="img-responsive" />
  1061. </figure>
  1062. </a>
  1063. </div>
  1064. </div>
  1065. <div class="col-md-3 w3_tab_img_left">
  1066. <div class="demo">
  1067. <a class="cm-overlay" href="images/2_3.jpg">
  1068. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_3.jpg" alt=" " class="img-responsive" />
  1069. </figure>
  1070. </a>
  1071. </div>
  1072. </div>
  1073. <div class="col-md-3 w3_tab_img_left">
  1074. <div class="demo">
  1075. <a class="cm-overlay" href="images/2_4.jpg">
  1076. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_4.jpg" alt=" " class="img-responsive" />
  1077. </figure>
  1078. </a>
  1079. </div>
  1080. </div>
  1081. <div class="col-md-3 w3_tab_img_left">
  1082. <div class="demo">
  1083. <a class="cm-overlay" href="images/2_5.jpg">
  1084. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_5.jpg" alt=" " class="img-responsive" />
  1085. </figure>
  1086. </a>
  1087. </div>
  1088. </div>
  1089. <div class="col-md-3 w3_tab_img_left">
  1090. <div class="demo">
  1091. <a class="cm-overlay" href="images/2_6.jpg">
  1092. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_6.jpg" alt=" " class="img-responsive" />
  1093. </figure>
  1094. </a>
  1095. </div>
  1096. </div>
  1097. <div class="col-md-3 w3_tab_img_left">
  1098. <div class="demo">
  1099. <a class="cm-overlay" href="images/2_7.jpg">
  1100. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_7.jpg" alt=" " class="img-responsive" />
  1101. </figure>
  1102. </a>
  1103. </div>
  1104. </div>
  1105. <div class="col-md-3 w3_tab_img_left">
  1106. <div class="demo">
  1107. <a class="cm-overlay" href="images/2_8.jpg">
  1108. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_8.jpg" alt=" " class="img-responsive" />
  1109. </figure>
  1110. </a>
  1111. </div>
  1112. </div>
  1113. <div class="col-md-3 w3_tab_img_left">
  1114. <div class="demo">
  1115. <a class="cm-overlay" href="images/2_9.jpg">
  1116. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_9.jpg" alt=" " class="img-responsive" />
  1117. </figure>
  1118. </a>
  1119. </div>
  1120. </div>
  1121. <div class="col-md-3 w3_tab_img_left">
  1122. <div class="demo">
  1123. <a class="cm-overlay" href="images/2_10.jpg">
  1124. <figure class="imghvr-shutter-in-out-diag-2"><img src="images/2_10.jpg" alt=" " class="img-responsive" />
  1125. </figure>
  1126. </a>
  1127. </div>
  1128. </div>
  1129. <div class="clearfix"> </div>
  1130. </div>
  1131. </div>
  1132. </div>
  1133. </div>
  1134. <script src="js/jquery.tools.min.js"></script>
  1135. <script src="js/jquery.mobile.custom.min.js"></script>
  1136. <script src="js/jquery.cm-overlay.js"></script>
  1137. <script>
  1138. $(document).ready(function(){
  1139. $('.cm-overlay').cmOverlay();
  1140. });
  1141. </script>
  1142. </div>
  1143. <!-- //gallery -->
  1144.  
  1145. <!-- contributors -->
  1146. <div class="blog" id="contributors">
  1147. <div class="container">
  1148. <div class="w3ls-heading">
  1149. <h3>Contributors</h3>
  1150. <p>Special thanks to the supervisors and the special contributor of the project</p>
  1151. </div>
  1152. <div class="agile-blog-grids">
  1153. <div class="col-md-3 agile-blog-grid">
  1154. <div class="agile-blog-grid-img">
  1155. <img src="images/sune.jpeg" alt="" />
  1156. <a href="https://sunelehmann.com/" align='center'>Sune Lehmann</a>
  1157. <!-- <p>Posted By <a href="#">Admin</a> &nbsp;&nbsp; on Sept 24, 2016 &nbsp;&nbsp; <a href="#">Comments (07)</a></p> -->
  1158. </div>
  1159. <div class="agile-blog-grid-info">
  1160. <p>Associate Professor at the Department of <span style="font-weight:bold">Applied Mathematics and Computer Science</span>, at the <span style="font-weight:bold">Technical University of Denmark</span>.</p>
  1161. </div>
  1162. </div>
  1163. <div class="col-md-3 agile-blog-grid">
  1164. <div class="agile-blog-grid-img">
  1165. <img src="images/jakob.jpeg" alt="" />
  1166. <a href="http://oaklab.org/">Jakob Eg Larsen</a>
  1167. <!-- <p>Posted By <a href="#">Admin</a> &nbsp;&nbsp; on Oct 26, 2016 &nbsp;&nbsp; <a href="#">Comments (10)</a></p> -->
  1168. </div>
  1169. <div class="agile-blog-grid-info">
  1170. <p>Associate Professor at the Department of <span style="font-weight:bold">Applied Mathematics and Computer Science</span>, at the <span style="font-weight:bold">Technical University of Denmark</span>.</p>
  1171. </div>
  1172. </div>
  1173. <div class="col-md-3 agile-blog-grid">
  1174. <div class="agile-blog-grid-img">
  1175. <img src="images/tmp_ang.jpeg" alt="" /></a>
  1176. <a href="https://oikonang.github.io/about/">Angelos Ikonomakis</a>
  1177. <!-- <p>Posted By <a href="#">Admin</a> &nbsp;&nbsp; on Nov 08, 2016 &nbsp;&nbsp; <a href="#">Comments (15)</a></p> -->
  1178. </div>
  1179. <div class="agile-blog-grid-info">
  1180. <p>Masters student in Digital Media Engineering at the Department of <span style="font-weight:bold">Applied Mathematics and Computer Science</span>, at the <span style="font-weight:bold">Technical University of Denmark</span></p>
  1181. </div>
  1182. </div>
  1183. <div class="col-md-3 agile-blog-grid">
  1184. <div class="agile-blog-grid-img">
  1185. <img src="images/ricky.jpg" alt="" /></a>
  1186. <a href="http://www.richmondweb.it/">Riccardo Cannistrà</a>
  1187. <!-- <p>Posted By <a href="#">Admin</a> &nbsp;&nbsp; on Nov 08, 2016 &nbsp;&nbsp; <a href="#">Comments (15)</a></p> -->
  1188. </div>
  1189. <div class="agile-blog-grid-info">
  1190. <p>Masters student in Digital Media Engineering at the Department of <span style="font-weight:bold">Applied Mathematics and Computer Science</span>, at the <span style="font-weight:bold">Technical University of Denmark</span></p>
  1191. </div>
  1192. </div>
  1193. <div class="clearfix"> </div>
  1194. </div>
  1195. </div>
  1196. </div>
  1197. <!-- //contributors -->
  1198. <!-- team -->
  1199. <!-- <div class="team" id="team">
  1200. <div class="container">
  1201. <div class="w3ls-heading">
  1202. <h3>Team</h3>
  1203. <h5>Meet Our Team</h5>
  1204. </div>
  1205. <div class="agileinfo-team-grids">
  1206. <div class="col-md-3 wthree-team-grid">
  1207. <img src="images/sune.jpeg" alt="">
  1208. <div class="wthree-team-grid-info">
  1209. <h4>Mary Jane</h4>
  1210. <p>Vestibulum</p>
  1211. <div class="team-social-grids">
  1212. <ul>
  1213. <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  1214. <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  1215. <li><a href="#"><i class="fa fa-rss"></i></a></li>
  1216. </ul>
  1217. </div>
  1218. </div>
  1219. </div>
  1220. <div class="col-md-3 wthree-team-grid">
  1221. <img src="images/jakob.jpeg" alt="">
  1222. <div class="wthree-team-grid-info">
  1223. <h4>Peter Parke</h4>
  1224. <p>Vestibulum</p>
  1225. <div class="team-social-grids">
  1226. <ul>
  1227. <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  1228. <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  1229. <li><a href="#"><i class="fa fa-rss"></i></a></li>
  1230. </ul>
  1231. </div>
  1232. </div>
  1233. </div>
  1234. <div class="col-md-3 wthree-team-grid">
  1235. <img src="images/ricky.jpg" alt="">
  1236. <div class="wthree-team-grid-info">
  1237. <h4>Jennifer Watson</h4>
  1238. <p>Vestibulum</p>
  1239. <div class="team-social-grids">
  1240. <ul>
  1241. <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  1242. <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  1243. <li><a href="#"><i class="fa fa-rss"></i></a></li>
  1244. </ul>
  1245. </div>
  1246. </div>
  1247. </div>
  1248. <div class="col-md-3 wthree-team-grid">
  1249. <img src="images/ang.jpg" alt="">
  1250. <div class="wthree-team-grid-info">
  1251. <h4>Steven Wilson</h4>
  1252. <p>Vestibulum</p>
  1253. <div class="team-social-grids">
  1254. <ul>
  1255. <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  1256. <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  1257. <li><a href="#"><i class="fa fa-rss"></i></a></li>
  1258. </ul>
  1259. </div>
  1260. </div>
  1261. </div>
  1262. <div class="clearfix"> </div>
  1263. </div>
  1264. </div>
  1265. </div> -->
  1266. <!-- //team -->
  1267. <!-- contact -->
  1268. <!-- <div class="contact" id="contact">
  1269. <div class="container">
  1270. <div class="w3ls-heading">
  1271. <h3>Contact</h3>
  1272. <h5>Get In Touch</h5>
  1273. </div>
  1274. <div class="contact-form">
  1275. <form action="#" method="post">
  1276. <input type="text" placeholder="Name" required="">
  1277. <input type="email" placeholder="Email" required="">
  1278. <input type="text" placeholder="Telephone" required="">
  1279. <textarea placeholder="Message" required=""></textarea>
  1280. <input type="submit" value="SUBMIT">
  1281. </form>
  1282. </div>
  1283. </div>
  1284. </div> -->
  1285. <!-- //contact -->
  1286.  
  1287. <!-- footer -->
  1288. <div id='footer'>
  1289. <div class="container">
  1290. <div align='center' class="col-md-6 tracking-top-left">
  1291. <p>MADE AT</p><br /><br />
  1292. <a href="http://dtu.dk" align='center'><img src="images/dtu.png"/></a>
  1293. </div>
  1294. <div align='center' class="col-md-6 tracking-top-left-logo">
  1295. <!-- <p>ALL RIGHTS RESERVED</p> --><br /><br />
  1296. <a href="http://thebiketripproject.com" align='center'><img src="images/LOGO_TEXT_1.png"/></a>
  1297. </div>
  1298. </div>
  1299. </div>
  1300. <!-- //Footer -->
  1301. <!-- copyright -->
  1302. <div class="copyright">
  1303. <div class="container">
  1304. <p>© 2017 The bike trip project. All rights reserved.</p>
  1305. <p> Design by <a href="https://oikonang.github.io/">oikonang</a>, <a href="https://github.com/ThanasisSamaras/">tsamaras</a> and <a href="http://w3layouts.com">W3layouts</a></p>
  1306. </div>
  1307. </div>
  1308. <!-- //copyright -->
  1309. <script type="text/javascript" src="js/move-top.js"></script>
  1310. <script type="text/javascript" src="js/easing.js"></script>
  1311. <!-- here stars scrolling icon -->
  1312. <script type="text/javascript">
  1313. $(document).ready(function() {
  1314. /*
  1315. var defaults = {
  1316. containerID: 'toTop', // fading element id
  1317. containerHoverID: 'toTopHover', // fading element hover id
  1318. scrollSpeed: 1200,
  1319. easingType: 'linear'
  1320. };
  1321. */
  1322.  
  1323. $().UItoTop({ easingType: 'easeOutQuart' });
  1324.  
  1325. });
  1326. </script>
  1327.  
  1328. </body>
  1329. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!