Switch to new json format for Team members
using inline js & flex
Source taken from: https://codepen.io/VisualAngle/pen/vjKbPg
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">