Add shoutout block

docs/_includes/elements/external-link.html

@@ -0,0 +1,7 @@
+<a
+  class={{ include.classes }}
+  href="{{ include.url }}"
+  target="_blank"
+  rel="nofollow">
+  {{ include.text }}
+</a>

docs/_sass/love.sass

@@ -109,3 +109,19 @@
     &:nth-child(3n-1),
     &:nth-child(3n)
       margin-left: 1.5rem
+
+.bd-shoutout
+  background-color: $background
+  padding: 2rem
+  text-align: center
+  &:not(:last-child)
+    margin-bottom: 3rem
+
+.bd-shoutout-text
+  &.title
+    opacity: 0.8
+  &.subtitle
+    opacity: 0.5
+
+.bd-shoutout-button
+  margin-top: -0.75rem

docs/css/bulma-docs.css

@@ -12730,6 +12730,28 @@ svg {
   }
 }
 
+.bd-shoutout {
+  background-color: whitesmoke;
+  padding: 2rem;
+  text-align: center;
+}
+
+.bd-shoutout:not(:last-child) {
+  margin-bottom: 3rem;
+}
+
+.bd-shoutout-text.title {
+  opacity: 0.8;
+}
+
+.bd-shoutout-text.subtitle {
+  opacity: 0.5;
+}
+
+.bd-shoutout-button {
+  margin-top: -0.75rem;
+}
+
 .bd-bootstrap-table {
   margin: 3rem 0;
 }

docs/videos.html

@@ -40,7 +40,7 @@ videos:
               Videos
             </h1>
             <p class="subtitle is-4">
-              Learn Bulma with interactive <a href="{{ site.data.meta.scrimba_url }}" target="_blank" rel="nofollow">Scrimba</a> tutorials
+              Learn Bulma with interactive {% include external-link.html url=site.data.meta.scrimba_url text="Scrimba" %} tutorials
             </p>
           </div>
 
@@ -49,7 +49,22 @@ videos:
           </div>
         </header>
 
-        <div class="bd-content">
+        <div class="bd-shoutout message is-success">
+          <p class="title is-4 bd-shoutout-text">
+            Learn Bulma for free!
+          </p>
+
+          <p class="subtitle bd-shoutout-text">
+            Build 3 beautiful websites in 58 minutes
+          </p>
+
+          <p class="bd-shoutout-button">
+            {% include external-link.html
+                classes="button is-success"
+                url=site.data.meta.scrimba_url
+                text="Enroll in the course" %}
+          </p>
+        </div>
 
         {% for video in page.videos %}
           <div class="bd-video">
@@ -97,8 +112,6 @@ videos:
             </div>
           </div>
         {% endfor %}
-
-        </div>
       </div>
     </div>
   </div>