add Ocean Protocol banner to front page

_src/_assets/scss/_oceanprotocol.scss

@@ -0,0 +1,49 @@
+.oceanprotocol {
+    display: block;
+    box-shadow: none;
+    height: 100%;
+    background: #141414;
+    padding-top: $spacer / 2;
+    padding-bottom: $spacer / 2;
+
+    &:hover,
+    &:focus {
+        background: #fff;
+
+        .oceanprotocol__title {
+            opacity: 1;
+            color: #141414;
+        }
+
+        .oceanprotocol__logo {
+            fill: #141414;
+        }
+    }
+
+    .row {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+    }
+}
+
+.oceanprotocol__title {
+    font-size: .65rem;
+    margin: 0;
+    opacity: .8;
+    color: #fff;
+
+    @media ($screen-sm) {
+        font-size: .75rem;
+    }
+}
+
+.oceanprotocol__logo {
+    fill: #fff;
+    width: 1rem;
+    height: 1rem;
+    margin-right: $spacer / 4;
+    margin-bottom: -.3rem;
+    display: inline-block;
+}

_src/_assets/scss/ipdb.scss

@@ -19,6 +19,7 @@
 @import 'alerts';
 @import 'cookiebanner';
 @import 'syntax';
+@import 'oceanprotocol';
 
 .content--page--markdown {
     padding-top: $spacer * 2;

_src/_includes/oceanprotocol.html

@@ -0,0 +1,9 @@
+<a class="banner--ocean oceanprotocol" href="https://oceanprotocol.com/?utm_source=ipdb.io&utm_medium=banner&utm_campaign=ocean_banner">
+    <div class="row row--wide">
+        <h1 class="oceanprotocol__title">
+            <svg class="oceanprotocol__logo">
+                <use xlink:href="/assets/img/sprite.svg#logo-oceanprotocol"></use>
+            </svg>
+            Meet Ocean. A Decentralized Data Exchange Protocol</h1>
+    </div>
+</a>

_src/index.html

@@ -8,6 +8,8 @@ css: page-front
 
 {% assign content = site.data.content-front %}
 
+{% include oceanprotocol.html %}
+
 <header class="hero section">
 
     {% include menu-main.html %}