Add trial link

Author: kaizau

_layouts/website/page.html

@@ -0,0 +1,29 @@
+{% extends template.self %}
+
+{% block body %}
+  <div class="FmCta">
+    <a class="FmCtaLogo" href="https://frontendmasters.com/">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.7 145.8" class="logo"><path d="M182.6 20c1.7-1.8 4.2-2.7 7.7-2.7 2.5 0 5 .4 7.4 1.1 3.2 1 6.2 2.3 9 4a335.5 335.5 0 0 0-14.8 49.7 357 357 0 0 0-4.6 24c-1 6.3-1.6 12.8-1.7 19.3 0 2.2.3 4.5 1 6.6a8 8 0 0 0 2.7 4.2 16.1 16.1 0 0 1-7.1 5.2 23.5 23.5 0 0 1-8.7 1.7c-4 .1-7.7-1.2-10.6-3.8-3-2.5-4.4-6.8-4.4-13 0-3 .4-6 .8-9.1a492 492 0 0 1 10.8-47.4l-1.3.1c-.4.2-.7.5-1 .9l-40.6 62a40.8 40.8 0 0 1-13 2.5c-2.4 0-4.8-.5-7-1.5a9.1 9.1 0 0 1-4.3-5.4 273.5 273.5 0 0 0 1.8-21.5 949 949 0 0 0 1.4-29.6v-5.9c0-.6-.2-1.1-.4-1.6a1.3 1.3 0 0 0-1.1-.4c-9 16.2-16.7 29.8-23.3 40.8a307.2 307.2 0 0 1-17.8 27A69 69 0 0 1 50 141.2c-4.1 3-8.1 4.5-12 4.4-4.2.1-8.2-1.6-11-4.7-3-3.1-5-7.4-6-12.8.7.2 1.4.3 2.2.3 4.7 0 9.3-2 13.7-6 5.1-4.5 9.7-9.7 13.7-15.3 4.7-6.4 9.5-13.7 14.4-21.8C69.9 77.3 75 69 80.7 60.6c2-3.4 4.6-6.6 7.5-9.4 2.2-2 5-3.1 8-3 2 0 4 .3 5.9.8 1.1.1 2.1-.7 2.1-1.9-.7-9-3.4-15.8-8-20.6-4.7-4.7-11.3-7-19.8-7-6.9-.1-13.6 1.6-19.6 4.8-6.1 3.3-11.5 7.7-15.9 13a64 64 0 0 0-14.5 40.5c0 5.1 1.6 8.5 4.7 10a20.6 20.6 0 0 1-6.9 6 17.5 17.5 0 0 1-8.4 2.2c-4.2.1-8.2-1.4-11.2-4.3S0 84.2 0 77.9c0-7 1.1-13.8 3.4-20.4A79.4 79.4 0 0 1 26.6 23a96.9 96.9 0 0 1 36-20.3C69.2 1 75.7 0 82.5 0c16.2 0 28.5 5 36.6 15.1 8.2 10 12.3 25.8 12.3 47.1a308.6 308.6 0 0 1-1 26.3c.5 0 1 0 1.4-.2.4-.2.7-.5.8-.8l15-21.9h-.1c5.1-7.2 23.7-34.6 28.8-41.9.2-.4 1.6-2.8 3.2-3.2h.4l1.2-.1h.2a5.8 5.8 0 0 0 1.4-.3z"></path></svg>
+    </a>
+    <div class="FmCtaText">
+      <a href="https://frontendmasters.com/trial/">Get free, lifetime access to 5 popular courses</a>
+    </div>
+    <button data-cta-close class="FmCtaClose">&times;</button>
+  </div>
+
+  {{ super() }}
+
+  <script>
+    var $ctaCloseButton = document.querySelector("[data-cta-close]");
+    if ($ctaCloseButton) {
+      if (sessionStorage.fmCtaReactEnlightenmentClosed) {
+        $ctaCloseButton.parentElement.remove();
+      } else {
+        $ctaCloseButton.addEventListener("click", function() {
+          sessionStorage.fmCtaReactEnlightenmentClosed = "yes";
+          $ctaCloseButton.parentElement.remove();
+        })
+      }
+    }
+  </script>
+{% endblock %}

styles/website.css

@@ -1,3 +1,8 @@
+body {
+	display: flex;
+	flex-direction: column;
+}
+
 cite{
 	margin-top: -30px;
 	font-size:10px;
@@ -10,14 +15,69 @@ cite{
 }
 
 .book .book-body .page-wrapper .page-inner section.normal hr {
-    height: 1px;
-    padding: 0;
-    margin: 0.7em 0;
-    overflow: hidden;
-    background-color: #e7e7e7;
-    border: none;
+	height: 1px;
+	padding: 0;
+	margin: 0.7em 0;
+	overflow: hidden;
+	background-color: #e7e7e7;
+	border: none;
 }
 
 table code, .markdown-section table code {
 	background-color: transparent !important;
 }
+
+small{
+	font-size:10px;
+}
+
+.FmCta {
+	align-items: flex-start;
+	background: #000;
+	color: #fff;
+	display: flex;
+	gap: 15px;
+	line-height: 2;
+	padding: 10px 15px;
+}
+
+.FmCtaLogo svg {
+	fill: #c02d28;
+	vertical-align: middle;
+	width: 25px;
+}
+
+.FmCtaLogo:hover svg {
+	fill: #dd625e;
+}
+
+.FmCtaText {
+	display: flex;
+	flex: 1;
+	gap: 15px;
+}
+
+.FmCtaText a {
+	color: #ccc;
+	font-weight: bold;
+}
+
+.FmCtaText a:hover {
+	color: #fff;
+}
+
+.FmCtaClose {
+	background: none;
+	border: none;
+	color: #888;
+	font-size: 25px;
+	height: 30px;
+	line-height: 1;
+	outline: none;
+	padding-bottom: 5px;
+	width: 30px;
+}
+
+.FmCtaClose:hover {
+	color: #fff;
+}