<!doctype html>
<html>
<head>
<title>Project Title</title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link href="css/frame.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/controls.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/custom.css" media="screen" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/menu.js"></script>
<style>
.menu-index {
color: rgb(255, 255, 255) !important;
opacity: 1 !important;
font-weight: 700 !important;
}
</style>
</head>
<body>
<div class="menu-container"></div>
<div class="content-container">
<div class="content">
<div class="content-table flex-column">
<!-------------------------------------------------------------------------------------------->
<!--Start Intro-->
<div class="flex-row">
<div class="flex-item flex-column">
<img class="image" src="img/dummay-img.png">
</div>
<div class="flex-item flex-column">
<p class="text text-large">
<a target="_blank" href="javascript:void(0)">Author 1</a>, author1 (at) cs.cmu.edu<br>
<a target="_blank" href="javascript:void(0)">Author 2</a>, author2 (at) cs.cmu.edu<br>
<a target="_blank" href="javascript:void(0)">Author 3</a>, author3 (at) cs.cmu.edu<br>
<a target="_blank" href="javascript:void(0)">Laboratory</a><br>
<a target="_blank" href="javascript:void(0)">Institute</a><br>
<a target="_blank" href="javascript:void(0)">Organization</a><br>
<a target="_blank" href="javascript:void(0)">Street Address</a><br>
<a target="_blank" href="javascript:void(0)">City, State, Country</a>
</p>
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-column">
<p class="text add-top-margin">
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit
vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae
sapien ut libero venenatis faucibus. Nullam quis ante.
</p>
</div>
</div>
<!--End Intro-->
<!-------------------------------------------------------------------------------------------->
<!--Start Text Only-->
<div class="flex-row">
<div class="flex-item flex-column">
<h2 class="add-top-margin">Text Only</h2>
<hr>
<p class="text">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser.
</p>
<p class="text">
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga.
</p>
<h3>Break Long URL</h3>
<p class="text">
<a class="break-long-url" target="_blank" href="https://www.google.com/maps/place/Carnegie+Mellon+University/@40.4430576,-79.9431263,17z/data=!4m5!3m4!1s0x8834f21f58679a9f:0x88716b461fc4daf4!8m2!3d40.4428753!4d-79.9430922">https://www.google.com/maps/place/Carnegie+Mellon+University/@40.4430576,-79.9431263,17z/data=!4m5!3m4!1s0x8834f21f58679a9f:0x88716b461fc4daf4!8m2!3d40.4428753!4d-79.9430922</a>
</p>
<h3>Nested List</h3>
<p class="text">
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
condimentum rhoncus, sem quam semper libero, <a target="_blank" href="javascript:void(0)">sit amet adipiscing sem neque</a> sed ipsum. Nam quam nunc, blandit
vel, luctus pulvinar, hendrerit id, lorem.
</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aenean commodo ligula eget dolor.
<ul>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</li>
<li>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
<ul>
<li>Li nov <a target="_blank" href="javascript:void(0)">lingua franca</a>.</li>
<li>It va esser Occidental.</li>
<li>Existent Europan lingues.</li>
</ul>
</li>
<li>Nullam dictum felis eu pede mollis pretium.</li>
</ul>
</li>
<li>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </li>
</ul>
<p class="text">
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del
coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un
simplificat Angles, quam un skeptic Cambridge amico dit me.
</p>
<ol class="nested">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aenean commodo ligula eget dolor.
<ol class="nested">
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</li>
<li>In enim justo, <a target="_blank" href="javascript:void(0)">rhoncus ut, imperdiet a</a>, venenatis vitae, justo.
<ol class="nested">
<li>Li nov lingua franca.</li>
<li>It va esser Occidental.</li>
<li>Existent Europan lingues.</li>
</ol>
</li>
<li>Nullam dictum felis eu pede mollis pretium.</li>
</ol>
</li>
<li>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </li>
</ol>
<h3>List with Customized Reverse Numbering</h3>
<ol class="publication C-list">
<li>
<p class="text-small-margin">
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.
</p>
</li>
<li>
<p class="text-small-margin">
Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
condimentum rhoncus, sem quam semper libero, <a target="_blank" href="javascript:void(0)">sit amet adipiscing sem neque sed ipsum</a>. Nam quam nunc, blandit
vel, luctus pulvinar, hendrerit id, lorem.
</p>
</li>
<li>
<p class="text-small-margin">
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del
coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
</p>
</li>
</ol>
<h3>Math Equations</h3>
<p class="text">
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del
coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
</p>
<img class="image center" src="http://latex.codecogs.com/svg.latex?C\cdot(3\sin\theta_1+3\sin\theta_2-\cos\theta_1-\cos\theta_2)" style="max-width: 300px;">
<p class="text">
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del
coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
</p>
</div>
</div>
<!--End Text Only-->
<!-------------------------------------------------------------------------------------------->
<!--Start Text with Buttons-->
<div class="flex-row">
<div class="flex-item flex-column">
<h2 class="add-top-margin">Buttons and Inputs</h2>
<hr>
<p class="text">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser.
</p>
<div class="control-group">
<button class="custom-button">Default</button>
<button class="custom-button custom-button-primary">Primary</button>
<button class="custom-button custom-button-danger">Danger</button>
<button class="custom-button custom-button-info">Info</button>
<button class="custom-button" disabled>Disabled</button>
<a class="custom-button" target="_blank" href="https://github.com/yenchiah/project-website-template" target="_blank">Hyperlink</a>
<button class="custom-button custom-button-primary stretch-on-mobile">Stretch on Mobile</button>
</div>
<div class="control-group">
<button class="custom-button pulse-black">Pulse</button>
<button class="custom-button custom-button-primary pulse-primary">Pulse</button>
<button class="custom-button custom-button-danger pulse-danger">Pulse</button>
<button class="custom-button custom-button-info pulse-info">Pulse</button>
</div>
<div class="control-group">
<button class="custom-button-flat"><img src="img/home.png"></button>
<button class="custom-button-flat" disabled><img src="img/home.png"></button>
<button class="custom-button-flat small"><img src="img/home.png"></button>
<button class="custom-button-flat large"><img src="img/home.png"></button>
</div>
<div class="control-group">
<button class="custom-button-flat"><img src="img/calendar.png"></button>
<button class="custom-button-flat"><img src="img/play.png"></button>
<button class="custom-button-flat"><img src="img/pause.png"></button>
<button class="custom-button-flat"><img src="img/stop.png"></button>
<button class="custom-button-flat"><img src="img/terrain.png"></button>
<button class="custom-button-flat"><img src="img/close.png"></button>
<button class="custom-button-flat"><img src="img/collection.png"></button>
<button class="custom-button-flat"><img src="img/next.png"></button>
<button class="custom-button-flat"><img src="img/back.png"></button>
<button class="custom-button-flat"><img src="img/setting.png"></button>
<button class="custom-button-flat"><img src="img/book.png"></button>
<button class="custom-button-flat"><img src="img/user.png"></button>
<button class="custom-button-flat"><img src="img/share.png"></button>
<a class="custom-button-flat" href="https://github.com/yenchiah/project-website-template" target="_blank">
<img src="img/link.png">
</a>
</div>
<div class="control-group">
<button class="custom-button-flat"><img src="img/home.png"><span>Home</span></button>
<button class="custom-button-flat" disabled><img src="img/home.png"><span>Disabled</span></button>
<button class="custom-button-flat small"><img src="img/home.png"><span>Small</span></button>
<button class="custom-button-flat large"><img src="img/home.png"><span>Large</span></button>
</div>
<div class="control-group">
<button class="custom-button-flat"><img src="img/calendar.png"><span>Calendar</span></button>
<button class="custom-button-flat"><img src="img/play.png"><span>Play</span></button>
<button class="custom-button-flat"><img src="img/stop.png"><span>Stop</span></button>
<button class="custom-button-flat"><img src="img/terrain.png"><span>Terrain</span></button>
<button class="custom-button-flat"><img src="img/close.png"><span>Close</span></button>
<button class="custom-button-flat"><img src="img/collection.png"><span>Collection</span></button>
<button class="custom-button-flat"><img src="img/next.png"><span>Next</span></button>
<button class="custom-button-flat"><img src="img/back.png"><span>Back</span></button>
<button class="custom-button-flat"><img src="img/setting.png"><span>Setting</span></button>
<button class="custom-button-flat"><img src="img/book.png"><span>Tutorial</span></button>
<button class="custom-button-flat"><img src="img/user.png"><span>User</span></button>
<button class="custom-button-flat"><img src="img/share.png"><span>Share</span></button>
<a class="custom-button-flat" href="https://github.com/yenchiah/project-website-template" target="_blank">
<img src="img/link.png"><span>Hyperlink</span>
</a>
<button class="custom-button-flat stretch-on-mobile"><img src="img/play.png"><span>Stretch on Mobile</span></button>
</div>
<div class="control-group">
<button class="custom-button-flat pulse-black"><img src="img/home.png"><span>Pulse</span></button>
<button class="custom-button-flat pulse-primary"><img src="img/home.png"><span>Pulse</span></button>
<button class="custom-button-flat pulse-danger"><img src="img/home.png"><span>Pulse</span></button>
<button class="custom-button-flat pulse-info"><img src="img/home.png"><span>Pulse</span></button>
</div>
<p class="text">
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del
coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un
simplificat Angles, quam un skeptic Cambridge amico dit me.
</p>
</div>
</div>
<div class="flex-row-space-between">
<div class="flex-item flex-column">
<p class="text badge-text">Large Badge Caption!</p>
</div>
<div class="flex-item flex-column">
<div class="control-group">
<a href="javascript:void(0)" target="_blank" class="custom-image-button">
<img src="img/app-store-badge.png" width="150">
</a>
<a href="javascript:void(0)" target="_blank" class="custom-image-button">
<img src="img/google-play-badge.png" width="150">
</a>
</div>
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-column">
<p class="text">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser.
</p>
<div class="control-group">
<input class="custom-textbox stretch-on-mobile" type="text" placeholder="e.g., 15213">
<textarea class="custom-textbox stretch-on-mobile" placeholder="e.g., 15213"></textarea>
</div>
<div class="control-group">
<input class="custom-textbox stretch-on-mobile" value="http://yenchiah.me/" type="text" readonly>
<textarea class="custom-textbox stretch-on-mobile" readonly>Phasellus viverra nulla ut metus varius laoreet.</textarea>
</div>
<p class="text">
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del
coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un
simplificat Angles, quam un skeptic Cambridge amico dit me.
</p>
</div>
</div>
<!--End Text with Buttons-->
<!-------------------------------------------------------------------------------------------->
<!--Start Text with Images and Image buttons-->
<div class="flex-row">
<div class="flex-item flex-column">
<h2 class="add-top-margin">Images and Image Button</h2>
<hr>
<p class="text">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser.
</p>
</div>
</div>
<div class="flex-row-space-between">
<div class="flex-item flex-column">
<img class="image max-width-400" src="img/dummay-img.png">
<p class="image-caption">Image Caption</p>
</div>
<div class="flex-item flex-column">
<a href="https://github.com/yenchiah/project-website-template" target="_blank" class="image max-width-400">
<img src="img/dummay-img.png">
</a>
<p class="image-caption">Image Button Caption</p>
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-column">
<p class="text">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser.
</p>
</div>
</div>
<!--End Text with Images and Image buttons-->
<!-------------------------------------------------------------------------------------------->
<!--Start Text around Image-->
<div class="flex-row">
<div class="flex-item flex-column">
<h2 class="add-top-margin">Text around Image</h2>
<hr>
<p class="text">
<img class="image image-wrap-text max-width-400" src="img/dummay-img.png">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis.
</p>
</div>
</div>
<!--End Text around Image-->
<!-------------------------------------------------------------------------------------------->
<!--Start Text with Centered Image and Table-->
<div class="flex-row">
<div class="flex-item flex-column">
<h2 class="add-top-margin">Centered Image and Table</h2>
<hr>
<p class="text">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser.
</p>
<p class="text text-center graph-title">
This is the title for the bottom image
</p>
<img class="image center max-width-400 add-top-margin-small" src="img/dummay-img.png">
<p class="text">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser.
</p>
<p class="text text-center graph-title">
This is the title for the bottom table
</p>
<div class="custom-table-container center add-top-margin-small">
<table class="custom-table">
<thead>
<tr class="bg-color-gray">
<th>Number of</th>
<th class="text-center">Unique Users</th>
<th class="text-center">Smell Reports</th>
<th class="text-center">Interaction Events</th>
</tr>
</thead>
<tbody>
<tr>
<td>Enthusiasts</td>
<td class="text-center">9.4%</td>
<td class="text-center">50.6%</td>
<td class="text-center">44.8%</td>
</tr>
<tr class="bg-color-light-gray">
<td>Explorers</td>
<td class="text-center">36.1%</td>
<td class="text-center">37.3%</td>
<td class="text-center">27.3%</td>
</tr>
<tr>
<td>Contributors</td>
<td class="text-center">13.0%</td>
<td class="text-center">12.1%</td>
<td class="text-center">n/a</td>
</tr>
<tr class="bg-color-light-gray">
<td>Observers</td>
<td class="text-center">41.6%</td>
<td class="text-center">n/a</td>
<td class="text-center">27.9%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Size (N)</td>
<td class="text-center">2,237</td>
<td class="text-center">8,112</td>
<td class="text-center">79,447</td>
</tr>
</tfoot>
</table>
</div>
<p class="text text-center graph-title">
This is the title for the bottom very long scrollable table
</p>
<div class="custom-table-container center add-top-margin-small">
<table class="custom-table">
<thead>
<tr class="bg-color-gray">
<th class="text-center">Smell Rating</th>
<th class="text-center">2019</th>
<th class="text-center">2018</th>
<th class="text-center">2017</th>
<th class="text-center">2016</th>
<th class="text-center">2015</th>
<th class="text-center">2014</th>
<th class="text-center">2013</th>
<th class="text-center">2012</th>
<th class="text-center">2011</th>
<th class="text-center">2010</th>
<th class="text-center">2009</th>
<th class="text-center">2008</th>
<th class="text-center">2007</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td class="text-center">1,711 (9.5%)</td>
<td class="text-center">1,199 (13.0%)</td>
<td class="text-center">1,658 (20.4%)</td>
<td class="text-center">1,199 (13.0%)</td>
<td class="text-center">1,658 (20.4%)</td>
<td class="text-center">1,199 (13.0%)</td>
<td class="text-center">1,658 (20.4%)</td>
<td class="text-center">1,199 (13.0%)</td>
<td class="text-center">1,658 (20.4%)</td>
<td class="text-center">1,199 (13.0%)</td>
<td class="text-center">1,658 (20.4%)</td>
<td class="text-center">1,199 (13.0%)</td>
<td class="text-center">1,658 (20.4%)</td>
</tr>
<tr class="bg-color-light-gray">
<td class="text-center">2</td>
<td class="text-center">798 (4.4%)</td>
<td class="text-center">497 (5.4%)</td>
<td class="text-center">665 (8.2%)</td>
<td class="text-center">497 (5.4%)</td>
<td class="text-center">665 (8.2%)</td>
<td class="text-center">497 (5.4%)</td>
<td class="text-center">665 (8.2%)</td>
<td class="text-center">497 (5.4%)</td>
<td class="text-center">665 (8.2%)</td>
<td class="text-center">497 (5.4%)</td>
<td class="text-center">665 (8.2%)</td>
<td class="text-center">497 (5.4%)</td>
<td class="text-center">665 (8.2%)</td>
</tr>
<tr>
<td class="text-center">3</td>
<td class="text-center">4,305 (23.9%)</td>
<td class="text-center">2,649 (28.8%)</td>
<td class="text-center">2,246 (27.7%)</td>
<td class="text-center">2,649 (28.8%)</td>
<td class="text-center">2,246 (27.7%)</td>
<td class="text-center">2,649 (28.8%)</td>
<td class="text-center">2,246 (27.7%)</td>
<td class="text-center">2,649 (28.8%)</td>
<td class="text-center">2,246 (27.7%)</td>
<td class="text-center">2,649 (28.8%)</td>
<td class="text-center">2,246 (27.7%)</td>
<td class="text-center">2,649 (28.8%)</td>
<td class="text-center">2,246 (27.7%)</td>
</tr>
<tr class="bg-color-light-gray">
<td class="text-center">4</td>
<td class="text-center">5,804 (32.3%)</td>
<td class="text-center">2,932 (31.9%)</td>
<td class="text-center">2,171 (26.8%)</td>
<td class="text-center">2,932 (31.9%)</td>
<td class="text-center">2,171 (26.8%)</td>
<td class="text-center">2,932 (31.9%)</td>
<td class="text-center">2,171 (26.8%)</td>
<td class="text-center">2,932 (31.9%)</td>
<td class="text-center">2,171 (26.8%)</td>
<td class="text-center">2,932 (31.9%)</td>
<td class="text-center">2,171 (26.8%)</td>
<td class="text-center">2,932 (31.9%)</td>
<td class="text-center">2,171 (26.8%)</td>
</tr>
<tr>
<td class="text-center">5</td>
<td class="text-center">5,356 (29.8%)</td>
<td class="text-center">1,918 (20.9%)</td>
<td class="text-center">1,372 (16.9%)</td>
<td class="text-center">1,918 (20.9%)</td>
<td class="text-center">1,372 (16.9%)</td>
<td class="text-center">1,918 (20.9%)</td>
<td class="text-center">1,372 (16.9%)</td>
<td class="text-center">1,918 (20.9%)</td>
<td class="text-center">1,372 (16.9%)</td>
<td class="text-center">1,918 (20.9%)</td>
<td class="text-center">1,372 (16.9%)</td>
<td class="text-center">1,918 (20.9%)</td>
<td class="text-center">1,372 (16.9%)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center">Sum</td>
<td class="text-center">17,974</td>
<td class="text-center">9,195</td>
<td class="text-center">8,112</td>
<td class="text-center">9,195</td>
<td class="text-center">8,112</td>
<td class="text-center">9,195</td>
<td class="text-center">8,112</td>
<td class="text-center">9,195</td>
<td class="text-center">8,112</td>
<td class="text-center">9,195</td>
<td class="text-center">8,112</td>
<td class="text-center">9,195</td>
<td class="text-center">8,112</td>
</tr>
</tfoot>
</table>
</div>
<p class="text">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser.
</p>
</div>
</div>
<!--End Text with Centered Image and Table-->
<!-------------------------------------------------------------------------------------------->
<!--Start Text with Adaptive Image-->
<div class="flex-row">
<div class="flex-item flex-column">
<h2 class="add-top-margin">Adaptive Image</h2>
<hr>
<p class="text">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser.
</p>
<a class="image adaptive-image" style="background-image: url('img/dummay-img-long.png'); min-height: 150px;" href="img/dummay-img-long.png" target="_blank"></a>
<p class="text">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser.
</p>
</div>
</div>
<!--End Text with Adaptive Image-->
<!-------------------------------------------------------------------------------------------->
<!--Start Text with Images and Videos-->
<div class="flex-row">
<div class="flex-item flex-column">
<h2 class="add-top-margin">Text with Images and Videos</h2>
<hr>
<p class="text">
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del
coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un
simplificat Angles, quam un skeptic Cambridge amico dit me.
</p>
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-item-stretch flex-column">
<img class="image" src="img/dummay-img.png">
</div>
<div class="flex-item flex-item-stretch flex-column">
<p class="text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem. Sed ut perspiciatis unde.
</p>
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-item-stretch flex-column">
<video preload controls autoplay loop muted playsinline class="image">
<source src="vid/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="flex-item flex-item-stretch flex-column">
<p class="text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam.
</p>
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-column">
<p class="text">
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del
coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un
simplificat Angles, quam un skeptic Cambridge amico dit me.
</p>
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-item-stretch-2 flex-column">
<p class="text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora.
</p>
</div>
<div class="flex-item flex-item-stretch flex-column">
<img class="image" src="img/dummay-img.png">
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-item-stretch-2 flex-column">
<p class="text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora.
</p>
</div>
<div class="flex-item flex-item-stretch flex-column">
<video preload controls autoplay loop muted playsinline class="image">
<source src="vid/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-item-stretch flex-column">
<p class="text">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser.
</p>
</div>
</div>
<!--End Text with Images and Videos-->
<!-------------------------------------------------------------------------------------------->
<!--Start Text with Iframe-->
<div class="flex-row">
<div class="flex-item flex-column">
<h2 class="add-top-margin">Iframe</h2>
<hr>
<p class="text">
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit
vel, luctus pulvinar, hendrerit id, lorem.
</p>
<iframe class="iframe-in-body" src="http://yenchiah.me/geo-heatmap/smell.html"></iframe>
<p class="text">
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit
vel, luctus pulvinar, hendrerit id, lorem.
</p>
</div>
</div>
<!--END Text with Iframe-->
<!-------------------------------------------------------------------------------------------->
<!--Start Text with Gallery-->
<div class="flex-row">
<div class="flex-item flex-column">
<h2 class="add-top-margin">Text with Gallery (Responsive Size)</h2>
<hr>
<p class="text">
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit
vel, luctus pulvinar, hendrerit id, lorem.
</p>
</div>
</div>
<div class="gallery">
<a href="javascript:void(0)" class="flex-column"><img src="img/dummay-img.png">
<div>Image Caption</div>
</a>
<a href="javascript:void(0)" class="flex-column"><img src="img/dummay-img.png">
<div>Image Caption</div>
</a>
<a href="javascript:void(0)" class="flex-column"><img src="img/dummay-img.png">
<div>Image Caption</div>
</a>
<a href="javascript:void(0)" class="flex-column"><img src="img/dummay-img.png">
<div>Image Caption</div>
</a>
<a href="javascript:void(0)" class="flex-column"><img src="img/dummay-img.png">
<div>Image Caption</div>
</a>
<a href="javascript:void(0)" class="flex-column"><img src="img/dummay-img.png">
<div>Image Caption</div>
</a>
<a href="javascript:void(0)" class="flex-column"><img src="img/dummay-img.png">
<div>Image Caption</div>
</a>
<a href="javascript:void(0)" class="flex-column"><img src="img/dummay-img.png">
<div>Image Caption</div>
</a>
</div>
<div class="flex-row">
<div class="flex-item flex-column">
<p class="text">
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit
vel, luctus pulvinar, hendrerit id, lorem.
</p>
</div>
</div>
<!--End Text with Gallery-->
<!-------------------------------------------------------------------------------------------->
<!--Start List of Projects-->
<div class="flex-row">
<div class="flex-item flex-column full-width">
<h2 class="add-top-margin">List of Projects</h2>
<hr>
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-item-stretch flex-column">
<img class="image max-width-400" src="img/dummay-img.png">
</div>
<div class="flex-item flex-item-stretch-4 flex-column">
<p class="text">
<a class="highlight-text" href="javascript:void(0)">Li Europan Lingues es Membres Del Sam Familie</a><br>
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
condimentum rhoncus, sem quam semper libero, sit amet.
</p>
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-item-stretch flex-column">
<img class="image max-width-400" src="img/dummay-img.png">
</div>
<div class="flex-item flex-item-stretch-4 flex-column">
<p class="text">
<a class="highlight-text" href="javascript:void(0)">Li Europan Lingues es Membres Del Sam Familie</a><br>
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
condimentum rhoncus, sem quam semper libero, sit amet.
</p>
</div>
</div>
<div class="flex-row">
<div class="flex-item flex-item-stretch flex-column">
<img class="image max-width-400" src="img/dummay-img.png">
</div>
<div class="flex-item flex-item-stretch-4 flex-column">
<p class="text">
<a class="highlight-text" href="javascript:void(0)">Li Europan Lingues es Membres Del Sam Familie</a><br>
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
condimentum rhoncus, sem quam semper libero, sit amet.
</p>
</div>
</div>
<!--End List of Projects-->
<!-------------------------------------------------------------------------------------------->
<!--Start Credits-->
<div class="flex-row">
<div class="flex-item flex-item-stretch flex-column">
<p class="text text-small text-italic">
Credits: <span class="highlight-text">Organization One</span>: Author One and Author Two / <span class="highlight-text">Organization Two</span>: Author Three and Author Four
</p>
</div>
</div>
</div>
<!--End Credits-->
<!-------------------------------------------------------------------------------------------->
<footer style="border: 1px solid #000;text-align: center;">
<span style="text-align: center;">This is a test footer</span>
</footer>
</div>
</div>
</div>
</body>
</html>