Switch to new json format for Team members
using inline js & flex
Source taken from: https://codepen.io/VisualAngle/pen/vjKbPg
diff --git a/bfor.html b/bfor.html
index 0cefda5..5d11163 100644
--- a/bfor.html
+++ b/bfor.html
@@ -18,6 +18,7 @@
<!-- Script: Animated entrance -->
<script src="js/animate-in.js"></script>
<link rel="stylesheet" href="css/animations.css">
+ <link rel="stylesheet" href="css/table.css">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-7639560510014441", enable_page_level_ads: true }); </script>
</head>
@@ -2331,6 +2332,44 @@
</div>
</div>
</div>
+ <div class="py-5" id="team" style="">
+ <div class="container">
+ <div class="row">
+ <div class="mx-auto col-md-12 text-center">
+ <h3 class="display-3">The Team</h3>
+ </div>
+ </div>
+
+ <section id="content"></section>
+ <script type="text/javascript">
+ function showEvents(data) { // Callback when JSON loads
+ var newContent = ''; // Variable to hold HTML
+
+ // BUILD UP STRING WITH NEW CONTENT (could also use DOM manipulation)
+ for (var i = 0; i < data.events.length; i++) { // Loop through object
+ newContent += '<div id="event">';
+ newContent += '<img class="image crop" src="' + data.events[i].image + '" ';
+ newContent += 'alt="' + data.events[i].member + '" />';
+ newContent += '<h3><b>' + data.events[i].member + '</b></h3>';
+ newContent += '<p>' + data.events[i].descriptions + '<br>';
+ newContent += '<i>"' + data.events[i].email + '"</i></p>';
+ newContent += '</div>';
+ }
+
+ // Update the page with the new content
+ document.getElementById('content').innerHTML = newContent;
+ }
+ </script>
+ <script type="text/javascript">
+ //JSON data start
+
+ showEvents({
+ "events":
+ [{"member":"Jackeagle","descriptions":"Founder \/ CEO \/ Lead Developer","email":"jackeagle@blissroms.com","image":"https:\/\/avatars0.githubusercontent.com\/u\/7821082?s=460&v=4"},{"member":"Jon West","descriptions":"CTO \/ Incorporator \/ Developer","email":"electrikjesus@blissroms.com","image":"https:\/\/avatars0.githubusercontent.com/u/8572619?s=460&v=4"},{"member":"Vaughn Newman","descriptions":"Board Member \/ Admin \/ Developer","email":"rwaterspf1@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/xhKBfn9HcjWayS9gQizUuh7JATtI4i-OvVv9Q6XPy5v5IyiI44lqRoxtMIyI3rlLc7OCyparEB9OqGT_Vg=w1920-h1080-no"},{ "member":"Antonio Luciano","descriptions":"Board Member \/ Project Manager \/ App Developer","email":"makaveli.the.dev@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/JOdHk7TYY-SLjAANLuK7t68Oz6w4fDFody-Uwj3rtH6oSZkljniUceYFQ52rbJXeBv4kDgoGhrtamLJlwZc=w1920-h1080-no"},{"member":"BitO BSessiOn","descriptions":"Board Member \/ Developer","email":"bitobsession@blissroms.com","image":"https:\/\/avatars0.githubusercontent.com/u/10974877?s=460&v=4"},{"member":"Evan Galvin","descriptions":"Board Member \/ Product Technology Strategist","email":"evan.galvin@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/eRqBEkS4_cWFEkLce4sVRmyCkAwgsGZwIg1kE12_gjBaghKQ8Omc6V2UJT6q6LwZS8l-LkutUrskyeLFrd0=w1920-h1080-no"},{"member":"Customworx","descriptions":"Board Member \/ Graphic Designer","email":"customworx@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/iu4p6sC5xbTmz7gF5eYCucSHuI_1SBJnRkfNWcNQ6Cw7oCt5ryMHaU_DXpjWEgGX43SnPRs4dSjErXU=w1920-h1080-no"},{"member":"Eric Park","descriptions":"Maintainers Admin\/ App Developer \/ Web Developer","email":"ideaman924@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/-zdwriNcIk1c\/AAAAAAAAAAI\/AAAAAAAAExQ\/XBgOqSUsfsY\/s750-p-rw-no\/photo.jpg"},{"member":"Henri Koivuneva","descriptions":"Web Designer \/ Product Technology Strategist","email":"henri.koivuneva@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/t5rLm4Gex0mmG9VkXzfoXIl0t31pBJwPP798GYNOaLxvi9qjfka867yJl0P-8EXpO8_zeFe-Vq346C56Ww=w1920-h1080-no"},{"member":"Aren Clegg","descriptions":"Lead Developer","email":"aclegg2011@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/8VqQRqDi3dc35qeC_cipzDE5oW8llKvxq0F-uzwmR9jYJvsMtREEaANi874yCBpKvmWy86MwwXC22JDRRKU=w1920-h1080-no"},{"member":"Deepak Sharma","descriptions":"Server \/ Web Administrator","email":"techexhibeo@blissroms.com","image":"https:\/\/avatars3.githubusercontent.com\/u\/7825764?s=400&v=4"},{"member":"Donna West","descriptions":"Board Member \/ Treasurer","email":"daisypoet@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/a-\/AAuE7mC91eukOeGZ1fU2mULqdlLqrcsYmUWGjZZMoXwMAIk=s1920-p-no-il"},{"member":"pimpmaneaton","descriptions":"Lead Developer","email":"shaunsibu@gmail.com","image":"https:\/\/avatars2.githubusercontent.com\/u\/26495451?s=400&v=4"}]
+ });
+ </script>
+ </div>
+ </div>
<div class="py-4 text-center" style="">
<div class="container">
<div class="row">
@@ -2434,7 +2473,7 @@
</div>
<!-- JavaScript dependencies -->
<script src="js/mainani.js" type="text/javascript"></script>
- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+ <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Script: Smooth scrolling between anchors in the same page -->
diff --git a/css/table.css b/css/table.css
new file mode 100644
index 0000000..b4ea35e
--- /dev/null
+++ b/css/table.css
@@ -0,0 +1,187 @@
+.box-table table{
+ border-collapse:collapse;
+ text-align:left;
+ width:100%;
+ margin:0;
+ padding:0;
+ background:#7f8c8d;
+ animation: responsive 5s infinite ease-in-out;
+}
+.box-table{
+ font:normal 12px/150% Arial, Helvetica, sans-serif;
+ overflow:hidden;
+ margin:0 auto;
+ display:block;
+ width:95%;
+ padding:2.5%;
+}
+.box-table table thead th{
+ background-color:#7f8c8d;
+ color:#bdc3c7;
+ text-align:center;
+ padding: 0.75em;
+ font-family: 'Vollkorn', serif;
+ font-weight: bold;
+ font-size: 1.5em;
+ height: 1.5em;
+ vertical-align: top;
+ border-left:0.25em double #95a5a6;
+
+}
+.box-table table tbody td,
+.box-table table tbody tr{
+ font-family: 'Vollkorn', serif;
+ font-size:1em;
+ border:none;
+ padding:1em;
+}
+.box-table table tbody tr:nth-child(odd){
+ background:#ecf0f1;
+ color:#95a5a6;
+}
+.box-table table tbody tr:nth-child(even){
+ background:#bdc3c7;
+ color:#7f8c8d;
+}
+.box-table table tbody tr a{
+ text-decoration:none;
+ color:#e67e22;
+}
+.box-table table tbody tr a:hover{
+ color:#d35400;
+}
+.box-table .user-photo{
+ background:#bdc3c7;
+}
+.box-table .user-tumb{
+ width:6em;
+ height:6em;
+ padding:0;
+ display:table-cell;
+ text-align:center;
+ margin:0 auto;
+ -webkit-border-radius:100%;
+ -moz-border-radius:100%;
+ border-radius:100%;
+}
+
+#content{
+ width:100%;
+ padding: 5px;
+ overflow:hidden;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;}
+#event{
+ width: 208.6px;
+ float: left;
+ text-align: center;
+ padding: 10px;
+ margin: 5px 5px 5px 5px;
+ display: inline-table;}
+#container{ /* center for demo only */
+ max-width:725px;
+ width:100%;
+ overflow:hidden;
+ position:absolute;
+ top:50%;
+ left:50%;
+ margin-right:-50%;
+ transform:translate(-50%, -50%);}
+.image{
+ width:200px;
+ padding-bottom:5px;
+ border-radius:50%;}
+/* = Responsive table
+------------------------*/
+
+/* http://elvery.net/demo/responsive-tables/ */
+@media only screen and (max-width: 800px){
+ .box-table table{
+ width:100%;
+ border-collapse:collapse;
+ border-spacing:0;
+ }
+ .box-table th,
+ .box-table td{
+ margin:0;
+ vertical-align:top;
+ }
+ .box-table th{
+ text-align:left;
+ }
+ .box-table table{
+ display:block;
+ position:relative;
+ width:100%;
+ }
+ .box-table thead{
+ display:block;
+ float:left;
+ }
+ .box-table tbody{
+ display:block;
+ width:auto;
+ position:relative;
+ overflow-x:auto;
+ white-space:nowrap;
+ }
+ .box-table thead tr{
+ display:block;
+ }
+ .box-table th{
+ display:block;
+ text-align:right;
+ }
+ .box-table tbody tr{
+ display:inline-block;
+ vertical-align:top;
+ }
+ .box-table td{
+ display:block;
+ min-height:1.25em;
+ text-align:left;
+ }
+ .box-table th{
+ border-bottom:0;
+ border-left:0;
+ }
+ .box-table td{
+ border-left:0;
+ border-right:0;
+ border-bottom:0;
+ }
+}
+/* = Error
+------------------------*/
+.error_table {
+ display: block;
+ background: #E05E5E;
+ color: #D1D1D1;
+ font-family: 'Vollkorn', serif;
+ text-align: center;
+ font-size: 3em;
+ width: 90%;
+ padding: 5%;
+}
+/* = Loader
+------------------------*/
+.loading_table{
+ background:#d35400;
+ color:#ecf0f1;
+ font-family: 'Vollkorn', serif;
+ text-align: center;
+ font-size: 1em;
+ width: 0;
+ display: block;
+ overflow: hidden;
+ height: 1em;
+ /*padding:0.5em; */
+ animation: table_loader 10s infinite ease;
+}
+@keyframes table_loader{50%{width:100%}}
+@-webkit-keyframes table_loader{50%{width:100%}}
+@-moz-keyframes table_loader{50%{width:100%}}
+@-ms-keyframes table_loader{50%{width:100%}}
+@-o-keyframes table_loader{ 50%{width:100%}}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1e9d787..5555039 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,7 @@
<!-- Script: Animated entrance -->
<script src="js/animate-in.js"></script>
<link rel="stylesheet" href="css/animations.css">
+ <link rel="stylesheet" href="css/table.css">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-7639560510014441", enable_page_level_ads: true }); </script>
</head>
@@ -417,202 +418,45 @@
</div>
</div>
</div>
-
<div class="py-5" id="team" style="">
<div class="container">
<div class="row">
<div class="mx-auto col-md-12 text-center">
- <h3 class="display-3">Who we are</h3>
- <h1 class="pt-5 pb-3">Board Members</h1>
+ <h3 class="display-3">The Team</h3>
</div>
</div>
- <div class="row">
- <div class="col-lg-6">
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/w7i8JBSfddUp88DpBjjdT_PBODfKTiFV8TKHqyZnsU3m0-ppYXsuafqDtBxakFYW3mjIahKkFYBepZIGRQ=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4><b>Jack Eagle </b>- CEO / Founder / Developer</h4>
- <p class="mb-0"> </p>
- </div>
- </div>
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/xhKBfn9HcjWayS9gQizUuh7JATtI4i-OvVv9Q6XPy5v5IyiI44lqRoxtMIyI3rlLc7OCyparEB9OqGT_Vg=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4><b>Vaughn Newman</b> - Board Member / Admin / Developer</h4>
- <p class="mb-0"> </p>
- </div>
- </div>
- </div>
- <div class="col-lg-6">
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/hcV4Tp81H4TJskQhpKckcDBqwnETos_ZOxXsQbiZGOT5OxMC-3pOD5i22j1tPiaubWW74tmnwB0ixvGwELQ=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4><b>Jon West </b>- CTO / Incorporator / Developer</h4>
- <p class="mb-0"> </p>
- </div>
- </div>
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/JOdHk7TYY-SLjAANLuK7t68Oz6w4fDFody-Uwj3rtH6oSZkljniUceYFQ52rbJXeBv4kDgoGhrtamLJlwZc=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Antonio Luciano</b> - Board Member / Project Manager / App Developer</h4>
- <p class="mb-0"> </p>
- </div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-lg-6">
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/LZrBsYT1S4qQI92uCuWx34QSGDcKpwY1G2h3LXT3tEvMPuSA8d6tiY7CsLYvBCznXk4sJhgr6UFk8pg1oA=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4><b>BitO BSessiOn</b> - Board Member / Developer</h4>
- <p class="mb-0"> </p>
- </div>
- </div>
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/iu4p6sC5xbTmz7gF5eYCucSHuI_1SBJnRkfNWcNQ6Cw7oCt5ryMHaU_DXpjWEgGX43SnPRs4dSjErXU=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Customworx </b>- Board Member / Graphic Designer </h4>
- <p class="mb-0"> </p>
- </div>
- </div>
- </div>
- <div class="col-lg-6">
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/eRqBEkS4_cWFEkLce4sVRmyCkAwgsGZwIg1kE12_gjBaghKQ8Omc6V2UJT6q6LwZS8l-LkutUrskyeLFrd0=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4><b>Evan Galvin</b> - Board Member / Product Technology Strategist</h4>
- <p class="mb-0"> </p>
- </div>
- </div>
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/a-/AAuE7mC91eukOeGZ1fU2mULqdlLqrcsYmUWGjZZMoXwMAIk=s1920-p-no-il" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Donna West</b> - Board Member / Treasurer</h4>
- <p class="mb-0"> </p>
- </div>
- </div>
- </div>
- </div>
- </div>
+
+ <section id="content"></section>
+ <script type="text/javascript">
+ function showEvents(data) { // Callback when JSON loads
+ var newContent = ''; // Variable to hold HTML
+
+ // BUILD UP STRING WITH NEW CONTENT (could also use DOM manipulation)
+ for (var i = 0; i < data.events.length; i++) { // Loop through object
+ newContent += '<div id="event">';
+ newContent += '<img class="image crop" src="' + data.events[i].image + '" ';
+ newContent += 'alt="' + data.events[i].member + '" />';
+ newContent += '<h3><b>' + data.events[i].member + '</b></h3>';
+ newContent += '<p>' + data.events[i].descriptions + '<br>';
+ newContent += '<i>"' + data.events[i].email + '"</i></p>';
+ newContent += '</div>';
+ }
+
+ // Update the page with the new content
+ document.getElementById('content').innerHTML = newContent;
+ }
+ </script>
+ <script type="text/javascript">
+ //JSON data start
+
+ showEvents({
+ "events":
+ [{"member":"Jackeagle","descriptions":"Founder \/ CEO \/ Lead Developer","email":"jackeagle@blissroms.com","image":"https:\/\/avatars0.githubusercontent.com\/u\/7821082?s=460&v=4"},{"member":"Jon West","descriptions":"CTO \/ Incorporator \/ Developer","email":"electrikjesus@blissroms.com","image":"https:\/\/avatars0.githubusercontent.com/u/8572619?s=460&v=4"},{"member":"Vaughn Newman","descriptions":"Board Member \/ Admin \/ Developer","email":"rwaterspf1@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/xhKBfn9HcjWayS9gQizUuh7JATtI4i-OvVv9Q6XPy5v5IyiI44lqRoxtMIyI3rlLc7OCyparEB9OqGT_Vg=w1920-h1080-no"},{ "member":"Antonio Luciano","descriptions":"Board Member \/ Project Manager \/ App Developer","email":"makaveli.the.dev@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/JOdHk7TYY-SLjAANLuK7t68Oz6w4fDFody-Uwj3rtH6oSZkljniUceYFQ52rbJXeBv4kDgoGhrtamLJlwZc=w1920-h1080-no"},{"member":"BitO BSessiOn","descriptions":"Board Member \/ Developer","email":"bitobsession@blissroms.com","image":"https:\/\/avatars0.githubusercontent.com/u/10974877?s=460&v=4"},{"member":"Evan Galvin","descriptions":"Board Member \/ Product Technology Strategist","email":"evan.galvin@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/eRqBEkS4_cWFEkLce4sVRmyCkAwgsGZwIg1kE12_gjBaghKQ8Omc6V2UJT6q6LwZS8l-LkutUrskyeLFrd0=w1920-h1080-no"},{"member":"Customworx","descriptions":"Board Member \/ Graphic Designer","email":"customworx@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/iu4p6sC5xbTmz7gF5eYCucSHuI_1SBJnRkfNWcNQ6Cw7oCt5ryMHaU_DXpjWEgGX43SnPRs4dSjErXU=w1920-h1080-no"},{"member":"Eric Park","descriptions":"Maintainers Admin\/ App Developer \/ Web Developer","email":"ideaman924@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/-zdwriNcIk1c\/AAAAAAAAAAI\/AAAAAAAAExQ\/XBgOqSUsfsY\/s750-p-rw-no\/photo.jpg"},{"member":"Henri Koivuneva","descriptions":"Web Designer \/ Product Technology Strategist","email":"henri.koivuneva@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/t5rLm4Gex0mmG9VkXzfoXIl0t31pBJwPP798GYNOaLxvi9qjfka867yJl0P-8EXpO8_zeFe-Vq346C56Ww=w1920-h1080-no"},{"member":"Aren Clegg","descriptions":"Lead Developer","email":"aclegg2011@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/8VqQRqDi3dc35qeC_cipzDE5oW8llKvxq0F-uzwmR9jYJvsMtREEaANi874yCBpKvmWy86MwwXC22JDRRKU=w1920-h1080-no"},{"member":"Deepak Sharma","descriptions":"Server \/ Web Administrator","email":"techexhibeo@blissroms.com","image":"https:\/\/avatars3.githubusercontent.com\/u\/7825764?s=400&v=4"},{"member":"Donna West","descriptions":"Board Member \/ Treasurer","email":"daisypoet@blissroms.com","image":"https:\/\/lh3.googleusercontent.com\/a-\/AAuE7mC91eukOeGZ1fU2mULqdlLqrcsYmUWGjZZMoXwMAIk=s1920-p-no-il"},{"member":"pimpmaneaton","descriptions":"Lead Developer","email":"shaunsibu@gmail.com","image":"https:\/\/avatars2.githubusercontent.com\/u\/26495451?s=400&v=4"}]
+ });
+ </script>
+ </div>
</div>
- <div class="pb-3">
- <div class="container">
- <div class="row">
- <div class="col-md-12">
- <h1 class="pb-3 text-center">Designers, Developers & Maintainers</h1>
- </div>
- </div>
- </div>
- </div>
- <div class="" style="">
- <div class="container">
- <div class="row">
- <div class="col-lg-4 px-4 px-md-0">
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/HZGjbOyPu5kpKga9cR5DxAxQBpO_04MTigb44LigYFP7vhLGsRG2IzzknL5QyxrfhbV7mJ4Bw0MG=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Roger Truttmann</b> </h4>
- <p class="mb-0">Design Manager <br>Graphic Designer</p>
- </div>
- </div>
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/dtVX8GF-3N179O1HzMTW5X7vsegsslETfR1GEsUEvhJC2Pmv9h5jBJJf6fC1iZWYkOiGmFfte2HcBQ=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Eric Park (ideaman924)</b> </h4>
- <p class="mb-0">Developer (BlissRoms) <br>Release Manager (BlissOS)</p>
- </div>
- </div>
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/a-/AAuE7mCPi8kv5ph4aXohFVBXJYIrHYDiEWDrO6rH2lrzdd0=s1920-p-rw-no-il" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Shaun Eaton (pimpmaneaton)</b> </h4>
- <p class="mb-0">Developer <br>Device Maintainer</p>
- </div>
- </div>
- </div>
- <div class="col-lg-4 px-4 px-md-0">
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/t5rLm4Gex0mmG9VkXzfoXIl0t31pBJwPP798GYNOaLxvi9qjfka867yJl0P-8EXpO8_zeFe-Vq346C56Ww=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Henri Koivuneva</b> </h4>
- <p class="mb-0">Web Designer <br>Product Technology Strategist</p>
- </div>
- </div>
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/Oq2NnEoAaexFWMacS4dFgu9JPmQxC38k_YXnNrR_N10PhFZ2vZxmlTlv-3UBB_kwqjTfTYin-ZSA0JSNew=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Călin Neamţu</b> </h4>
- <p class="mb-0">App Developer <br>Team Lead</p>
- </div>
- </div>
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/a-/AAuE7mAHJ_5LWJVD8NEX8j6AetljGKk-_3mhJScGoVCD8g=s1920-p-rw-no-il" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Wes Goodrich (bcrichster)</b> </h4>
- <p class="mb-0">Device Maintainer</p>
- </div>
- </div>
- </div>
- <div class="col-lg-4 px-4 px-md-0">
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/8VqQRqDi3dc35qeC_cipzDE5oW8llKvxq0F-uzwmR9jYJvsMtREEaANi874yCBpKvmWy86MwwXC22JDRRKU=w1920-h1080-no" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Aren Clegg</b> </h4>
- <p class="mb-0">Developer <br>Device Maintainer</p>
- </div>
- </div>
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://avatars3.githubusercontent.com/u/1151945?s=400&v=4" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Greg Kobey (sixohtew)</b> </h4>
- <p class="mb-0">Developer <br>Device Maintainer</p>
- </div>
- </div>
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/a-/AAuE7mCfRHwwjzLHuIusmizG0_u0qLfhAs-yAQfMGCKQHMM=s1920-p-rw-no-il" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4><b>REV3NT3CH</b></h4>
- <p class="mb-0">Developer <br>Device Maintainer</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="" style="">
- <div class="container">
- <div class="row">
- <div class="col-lg-4 px-4 px-md-0">
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/a-/AAuE7mATNi0sLmL4Wtcroe0d3jSnAGFoiGq2FxmgJnfrHg=s1920-p-rw-no-il" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>Deepak Sharma</b> </h4>
- <p class="mb-0">Developer <br>Server Admin</p>
- </div>
- </div>
- </div>
- <div class="col-lg-4 px-4 px-md-0">
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" width="100" alt="Card image cap" src="https://lh3.googleusercontent.com/a-/AAuE7mBy9Mi7RUgATZdEBaQ1M3_LL5y8zg9W0PMbJqcv=s1920-p-rw-no-il"> </div>
- <div class="col-9">
- <h4> <b>Paul Tropea (wrongway213)</b> </h4>
- <p class="mb-0">Device Maintainer</p>
- </div>
- </div>
- </div>
- <div class="col-lg-4 px-4 px-md-0">
- <div class="row mb-4">
- <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/a-/AAuE7mADSA43bIiPv21LCSv4i-E5pivvGxK0czyq1RgO=s1920-p-rw-no-il" width="100" alt="Card image cap"> </div>
- <div class="col-9">
- <h4> <b>SuperDroidBond</b> </h4>
- <p class="mb-0">Device Maintainer</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+
<div class="py-4 text-center">
<div class="container">
<div class="row">