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 -->