I hope to join your slack community.

assets/main.js

@@ -0,0 +1,16 @@
+jQuery(document).ready(function ($) {
+
+    $('nav li a').click(function(e){
+        e.preventDefault();
+        let articleID = $(this).attr('href');
+        let article = $(articleID);
+        let articleTop = article.offset().top;
+
+        $("html, body").animate({ scrollTop: articleTop }), 3000;
+    });
+
+    $('.backToTop').click(function(e){
+        e.preventDefault();
+        $("html, body").animate({ scrollTop: 0 }, 1500);
+    });
+});

assets/style.css

@@ -0,0 +1,171 @@
+body {
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight: 300;
+    color: #fff;
+    margin: 0;
+}
+a {
+    transition: all .3s ease;
+}
+p, ul, ol {
+    font-size: 1.25em;
+    line-height: 1.65;
+    font-weight: 300;
+}
+code {
+    background: rgba(255, 255, 255, 0.075);
+    border-radius: 4px;
+    font-family: "Courier New", monospace;
+    font-size: 0.9rem;
+    margin: 0 0.25rem;
+    padding: 0.25rem 0.65rem;
+}
+h1, h2, h3, h4, h5, h6 {
+    color: #ffffff;
+    font-weight: 600;
+    line-height: 1.5;
+    margin: 0 0 1rem 0;
+    text-transform: uppercase;
+    letter-spacing: 0.2rem;
+}
+h1 {
+    font-size: 3rem;
+    line-height: 1.3;
+    letter-spacing: 0.5rem;
+}
+h2 {
+    font-size: 2rem;
+    line-height: 1.4;
+    letter-spacing: 0.5rem;
+}
+h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
+    border-bottom: solid 1px #ffffff;
+    padding-bottom: 0.5rem;
+    margin: 0 0 2rem 0;
+}
+
+#main ul {
+    list-style: disc;
+    margin: 0 0 2rem 0;
+    padding-left: 1em;
+}
+#main ul li {
+    padding-left: 0.5em;
+}
+#main a {
+    border-bottom: dotted 1px rgba(255, 255, 255, 0.5);
+    text-decoration: none;
+    color: inherit;
+}
+#main a:hover,
+#main a:focus {
+    border-bottom: double rgba(255, 255, 255, 0.5);
+}
+
+#header,
+article {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.logo img {
+    height: 130px;
+    width: 130px;
+}
+.title h1 {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+.logo {
+    margin-bottom: 22px;
+}
+.title {
+    margin: 30px 0;
+}
+nav {
+    margin-top: 38px;
+}
+nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+nav li {
+    margin: 1em 0;
+}
+nav a {
+    color: #fff;
+    font-size: .8em;
+    padding: 8px 1em;
+    border: 2px solid #fff;
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: 0.2rem;
+}
+nav a:hover,
+nav a:focus {
+    color: #565656;
+    background-color: white;
+}
+#bg {
+    background-image: 
+        linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)),
+        url("bg.jpeg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: fixed;
+    top: 0; bottom: 0;
+    left: 0; right: 0;
+    z-index: -1;
+}
+#wrapper {
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.article-inner {
+    background-color: rgba(27, 31, 34, 0.85);
+    padding: 4.5rem 1.25rem 1.5rem 1.25rem;
+    margin: 4.5rem auto;
+    position: relative;
+}
+.backToTop {
+    position: absolute;
+    top: 1.25rem;
+    right: 1.25rem;
+}
+
+#footer {
+    padding: 1.25rem;
+}
+
+@media screen and (min-width: 600px) {
+    nav ul {
+        display: grid;
+        grid-template-columns: auto auto auto;
+        grid-gap: 1em;
+    }
+    nav li {
+        margin: 0;
+    }
+    h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
+        width: -moz-max-content;
+        width: -webkit-max-content;
+        width: -ms-max-content;
+        width: max-content;
+    }
+    .article-inner {
+        padding: 4.5rem 2.5rem 1.5rem 2.5rem;
+        margin: 4.5rem auto;
+    }
+    .backToTop {
+        top: 2.5rem;
+        right: 2.5rem;
+    }
+    #footer {
+        padding: 0;
+    }
+}