✨ Add demo web app to home page

index.md

@@ -46,7 +46,6 @@ stars-bounce: true
     license: 'GPLv3',
     waitForLoad: true,
     onResized: ({ iframe, height, width, type }) => {
-      console.log('onResized');
       if (document.readyState === 'complete') {
         if (preventScroll > 3) {
           const offset = iframe.offsetTop;
@@ -60,10 +59,15 @@ stars-bounce: true
   }, '#sophiaFrame' );
 </script>
 
-<div class="container text-center mt-5 mw-800 px-0">
-    <h3 class="font-weight-bold highlightcolor mt-3">MongoDB REST API in action</h3>
-    <img src="/images/restheart.gif" class="img-fluid"/>
-</div>
+<section id="demo-webapp" class="pt-2 pb-2">
+    <h3 class="font-weight-bold highlightcolor mt-3 text-center">Simple Demo Web App</h3>
+    <p class="codepen" data-height="800" data-theme-id="dark" data-default-tab="result" data-slug-hash="yLmyvEd" data-pen-title="RESTHeart Demo Web App" data-user="ujibang" style="height: 800px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+    <span>See the Pen <a href="https://codepen.io/ujibang/pen/yLmyvEd">
+    RESTHeart Demo Web App</a> by Andrea Di Cesare (<a href="https://codepen.io/ujibang">@ujibang</a>)
+    on <a href="https://codepen.io">CodePen</a>.</span>
+    </p>
+    <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+</section>
 
 <!-- <section id="article-at-aws-blog" class="call-to-action black-background">
     <div class="container-fluid">