Add new carbon adds to the index

index.html

@@ -62,7 +62,7 @@
                 <a class="top-nav-link scroll-link" data-target=".main-content" href="##">Features</a>
               </span>
               <span class="nav-item">
-                <a class="top-nav-link" href="/docs/">Documentation</a>
+                <a class="top-nav-link" href="/docs/">Docs</a>
               </span>
               <span class="nav-item">
                 <a class="top-nav-link" href="https://github.com/artf/grapesjs" target="_blank">
@@ -101,7 +101,8 @@
         <!--a href="https://github.com/artf/grapesjs/zipball/master" class="btn btn-rnd">Download</a-->
       </div>
 
-      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=grapesjscom" id="_carbonads_js"></script>
+      <div id="native-carbon"></div>
+      <script async type="text/javascript" src="./js/carbon.js"></script>
 
       <div class="bann-cont-c">
         <div class="bann-cont">

js/carbon.js

@@ -0,0 +1,27 @@
+var loadAd = function() {
+  if(typeof _bsa !== 'undefined' && _bsa) {
+    _bsa.init('custom', 'CK7I62QJ', 'placement:grapesjscom', {
+      target: '#native-carbon',
+      template: '<div id="carbonads">' +
+          '<a class="carbon-link" href="##link##" target="_blank" rel="noopener">'+
+            '<span class="carbon-wrap">'+
+              '<span class="carbon-img">'+
+                '<img src="##logo##" alt="" border="0" style="max-width: 130px; padding: 10px; background-color: ##backgroundColor##">'+
+              '</span>'+
+              '<span class="carbon-text">##description##</span>'+
+              '<div class="carbon-cta-c">'+
+                '<span class="carbon-cta" style="background-color: ##ctaBackgroundColor##; color: ##ctaTextColor##">##callToAction##</span>'+
+              '</div>'+
+            '</span>'+
+          '</a>'+
+        '</div>',
+    });
+  }
+};
+
+(function(){
+  var scr = document.createElement('script');
+  scr.src = '//m.servedby-buysellads.com/monetization.js';
+  scr.onload = loadAd;
+  document.head.appendChild(scr);
+})();

stylesheets/stylesheet.css

@@ -766,7 +766,8 @@ a {
   border: 1px solid rgba(0,0,0,0.1);
 }
 
-#carbonads span {
+.carbon-wrap,
+.carbon-link {
   display: block;
   overflow: hidden;
   text-align: left;
@@ -785,6 +786,19 @@ a {
   border-radius: 3px;
 }
 
+.carbon-cta-c {
+  text-align: right;
+  padding-top: 5px;
+}
+
+.carbon-cta {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 3px;
+  font-weight: bold;
+  font-size: 12px;
+}
+
 #carbonads a {
   color: rgba(255,255,255,0.95);
   text-shadow: none;