Copied a lot of stuff from my template repo

src/style/_cards.scss

@@ -0,0 +1,56 @@
+.cards {
+    display: flex;
+    flex-wrap: wrap;
+
+    h1,h2,h3 {
+        margin: 0;
+    }
+
+    .card {
+        flex: 1 0 400px;
+        box-sizing: border-box;
+        margin: 1rem .25em;
+        border: 1px solid rgba(0,0,0,.125);
+        border-radius: .25rem;
+
+        > a {
+            color: unset;
+            text-decoration: none;
+        }
+
+        .card-header {
+            background-color: red;
+            padding: .75rem 1.25rem;
+            background-color: rgba(0,0,0,.03);
+            border: 0px solid rgba(0,0,0,.125);
+            border-bottom-width: 1px;
+
+            @media screen and (max-width: $breakpoint-xs) {
+                border-width: 1px;
+            }
+        }
+
+        .card-body {
+            padding: .75rem 1.25rem;
+
+            @media screen and (max-width: $breakpoint-xs) {
+                padding: 0;
+            }
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+            flex: 1 0 280px;
+            border-width: 0;
+            padding-bottom: 15px;
+            border-bottom-width: 1px;
+        }
+
+        img {
+            max-width: 100%;
+            max-height: 250px;
+            display: inline;
+        }
+
+        
+    }
+ }

src/style/_footer.scss

@@ -0,0 +1,47 @@
+footer {
+    background-color: #fff;
+    border-top: 1px solid #d8d8d8;
+    bottom: 0;
+    color: $footer-color;
+    position: absolute;
+    width: 100%;
+    z-index: 10;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin-top: 60px;
+    min-height: 250px;
+    font-size: .85rem;
+
+    .footer-row {
+      display: flex;
+      width: 100%;
+      max-width: 1440px;
+      padding: 50px 120px;
+      margin: auto;
+
+      @media screen and (max-width: $breakpoint-lg) {
+        padding: 50px;
+      }
+
+      @media screen and (max-width: $breakpoint-sm) {
+        padding: 20px;
+      }
+
+      .column {
+        margin: 0 10px;
+        flex-direction: column;
+        flex-basis: 100%;
+        flex: 1;
+      }
+
+      a {
+        color: $footer-color;
+      }
+    
+      img {
+        display: inline-block;
+        margin: 0px 10px;
+      }
+    }
+  }

src/style/_navigation.scss

@@ -0,0 +1,75 @@
+.nav {
+  transition: background-color .3s ease-in-out,border-color .3s ease-in-out;
+  background-color: #000;
+  border-bottom: 1px solid rgb(128, 0, 0);
+  color: #FFF;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+
+  nav {
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 80px;
+
+    .header-logo img {
+      height: 35px;
+    }
+
+    .nav-links {
+      list-style: none;
+      display: flex;
+      align-items: center;
+
+      a {
+        display: inline-block;
+        text-decoration: none;
+
+        li {
+          margin: 0px 20px;
+          color: #FFF;
+          border-bottom: 1px solid transparent;
+
+          &:hover,
+          &.active {
+            border-color: inherit;
+            padding: 5px 0px;
+          }
+        }
+      }
+    }
+
+    .nav-left {
+      display: flex;
+
+      .header-logo {
+        margin-right: 20px;
+      }
+    }
+  }
+}
+
+body.hero .nav {
+  background-color: transparent;
+  border-bottom: 1px solid transparent;
+
+  a li {
+    color: #FFF;
+  }
+}
+
+body.hero.scroll .nav {
+  background-color: #000;
+  border-bottom: 1px solid rgb(128, 0, 0);
+
+  .header-logo img {
+    filter: none;
+  }
+
+  a li {
+    color: #FFF;
+  }
+}

src/style/_reset.scss

@@ -0,0 +1,78 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default padding */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Natural flow and rhythm in articles by default */
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

src/style/_variables.scss

@@ -0,0 +1,11 @@
+$fa-font-path: "../font/webfonts";
+
+$breakpoint-xs: 576px;
+$breakpoint-sm: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+
+$primary-color: #09003d;
+$primary-color: #09003d18;
+$hero-color: #fff;
+$footer-color: #898f9c;

src/style/combined.scss

@@ -0,0 +1,184 @@
+@import "_variables.scss";
+@import "fontawesome/fontawesome.scss";
+
+@import "_reset.scss";
+@import "_navigation.scss";
+@import "_style.scss";
+@import "_footer.scss";
+@import "_cards.scss";
+
+@font-face {
+  font-family: "FiraSans";
+  src: url("../font/FiraSans-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "FiraSans";
+  src: url("../font/FiraSans-Light.ttf") format("truetype");
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "FiraSans";
+  src: url("../font/FiraSans-Medium.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: system-ui;
+  font-style: normal;
+  font-weight: 300;
+  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"),
+    local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"),
+    local("Roboto-Light"), local("DroidSans"), local("Tahoma");
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  background-color: #fff !important;
+  font-family: "FiraSans", system-ui, sans-serif;
+  position: absolute;
+  top: 80px;
+  width: 100%;
+}
+
+h2,h3 {
+  margin-top: 20px;
+}
+
+p {
+  margin-bottom: 15px;
+}
+
+#content {
+  padding: 50px;
+  width: 100%;
+  max-width: 1440px;
+  margin: auto;
+  
+  @media screen and (max-width: $breakpoint-xs) {
+    padding: 20px;
+  }
+
+  padding-bottom: 300px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+a.btn {
+  color: #000 !important;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  line-height: 1.42857143;
+  font-size: 1em;
+  padding: 6px 12px;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+
+  &.btn-sm {
+    font-size: .8em;
+  }
+
+  &.btn-lg {
+    font-size: 1.5em;
+  }
+
+  &.btn-xl {
+    font-size: 2em;
+  }
+
+  &:hover {
+    color: #333 !important;
+    background-color: #e6e6e6;
+    border-color: #adadad;
+  }
+
+  &.btn-light {
+    color: #FFF !important;
+
+    &:hover {
+      color: #333 !important;
+    }
+  }
+}
+
+body.hero {
+  // background: rgba(0, 0, 0, 0)
+  //   linear-gradient(to right, rgb(252, 70, 107), rgb(63, 94, 251)) repeat scroll
+  //   0% 0%;
+  background: linear-gradient(-45deg, #000, rgb(128, 0, 0), #000);
+	background-size: 400% 100%;
+	animation: bggradient 8s ease infinite;
+  background-repeat: no-repeat;
+}
+
+@keyframes bggradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
+
+#hero {
+  color: $hero-color;
+  display: flex;
+  font-weight: lighter;
+  height: calc(100vh - 80px);
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  h1 {
+    font-size: 7vw;
+    font-weight: normal;
+  }
+
+  h2 {
+    font-size: 4vw;
+    font-weight: lighter;
+  }
+
+  h3 {
+    font-size: 2vw;
+    font-weight: lighter;
+  }
+
+  a {
+    color: $hero-color;
+  }
+
+  hr {
+    color: $hero-color;
+    width: 20%;
+    opacity: 0.3;
+  }
+
+  @media only screen and (max-width: $breakpoint-xs) {
+    h2 {
+      font-size: 6vw;
+    }
+
+    h3 {
+      font-size: 4vw;
+    }
+  }
+}

src/style/fontawesome/_animated.scss

@@ -0,0 +1,20 @@
+// Animated Icons
+// --------------------------
+
+.#{$fa-css-prefix}-spin {
+  animation: fa-spin 2s infinite linear;
+}
+
+.#{$fa-css-prefix}-pulse {
+  animation: fa-spin 1s infinite steps(8);
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/style/fontawesome/_bordered-pulled.scss

@@ -0,0 +1,20 @@
+// Bordered & Pulled
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  border: solid .08em $fa-border-color;
+  border-radius: .1em;
+  padding: .2em .25em .15em;
+}
+
+.#{$fa-css-prefix}-pull-left { float: left; }
+.#{$fa-css-prefix}-pull-right { float: right; }
+
+.#{$fa-css-prefix},
+.fas,
+.far,
+.fal,
+.fab {
+  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+}

src/style/fontawesome/_core.scss

@@ -0,0 +1,21 @@
+// Base Class Definition
+// -------------------------
+
+.#{$fa-css-prefix},
+.fas,
+.far,
+.fal,
+.fad,
+.fab {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+}
+
+%fa-icon {
+  @include fa-icon;
+}

src/style/fontawesome/_fixed-width.scss

@@ -0,0 +1,6 @@
+// Fixed Width Icons
+// -------------------------
+.#{$fa-css-prefix}-fw {
+  text-align: center;
+  width: $fa-fw-width;
+}

src/style/fontawesome/_larger.scss

@@ -0,0 +1,23 @@
+// Icon Sizes
+// -------------------------
+
+// makes the font 33% larger relative to the icon container
+.#{$fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -.0667em;
+}
+
+.#{$fa-css-prefix}-xs {
+  font-size: .75em;
+}
+
+.#{$fa-css-prefix}-sm {
+  font-size: .875em;
+}
+
+@for $i from 1 through 10 {
+  .#{$fa-css-prefix}-#{$i}x {
+    font-size: $i * 1em;
+  }
+}

src/style/fontawesome/_list.scss

@@ -0,0 +1,18 @@
+// List Icons
+// -------------------------
+
+.#{$fa-css-prefix}-ul {
+  list-style-type: none;
+  margin-left: $fa-li-width * 5/4;
+  padding-left: 0;
+
+  > li { position: relative; }
+}
+
+.#{$fa-css-prefix}-li {
+  left: -$fa-li-width;
+  position: absolute;
+  text-align: center;
+  width: $fa-li-width;
+  line-height: inherit;
+}

src/style/fontawesome/_mixins.scss

@@ -0,0 +1,56 @@
+// Mixins
+// --------------------------
+
+@mixin fa-icon {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+}
+
+@mixin fa-icon-rotate($degrees, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
+  transform: rotate($degrees);
+}
+
+@mixin fa-icon-flip($horiz, $vert, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
+  transform: scale($horiz, $vert);
+}
+
+
+// Only display content to screen readers. A la Bootstrap 4.
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+@mixin sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+  &:active,
+  &:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+  }
+}

src/style/fontawesome/_rotated-flipped.scss

@@ -0,0 +1,24 @@
+// Rotated & Flipped Icons
+// -------------------------
+
+.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
+.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
+.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
+
+.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
+.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
+.#{$fa-css-prefix}-flip-both, .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); }
+
+// Hook for IE8-9
+// -------------------------
+
+:root {
+  .#{$fa-css-prefix}-rotate-90,
+  .#{$fa-css-prefix}-rotate-180,
+  .#{$fa-css-prefix}-rotate-270,
+  .#{$fa-css-prefix}-flip-horizontal,
+  .#{$fa-css-prefix}-flip-vertical,
+  .#{$fa-css-prefix}-flip-both {
+    filter: none;
+  }
+}

src/style/fontawesome/_screen-reader.scss

@@ -0,0 +1,5 @@
+// Screen Readers
+// -------------------------
+
+.sr-only { @include sr-only; }
+.sr-only-focusable { @include sr-only-focusable; }

src/style/fontawesome/_stacked.scss

@@ -0,0 +1,31 @@
+// Stacked Icons
+// -------------------------
+
+.#{$fa-css-prefix}-stack {
+  display: inline-block;
+  height: 2em;
+  line-height: 2em;
+  position: relative;
+  vertical-align: middle;
+  width: ($fa-fw-width*2);
+}
+
+.#{$fa-css-prefix}-stack-1x,
+.#{$fa-css-prefix}-stack-2x {
+  left: 0;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.#{$fa-css-prefix}-stack-1x {
+  line-height: inherit;
+}
+
+.#{$fa-css-prefix}-stack-2x {
+  font-size: 2em;
+}
+
+.#{$fa-css-prefix}-inverse {
+  color: $fa-inverse;
+}

src/style/fontawesome/brands.scss

@@ -0,0 +1,22 @@
+/*!
+ * Font Awesome Free 5.12.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Brands';
+  font-style: normal;
+  font-weight: normal;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-brands-400.eot');
+  src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
+  url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
+}
+
+.fab {
+  font-family: 'Font Awesome 5 Brands';
+}

src/style/fontawesome/fontawesome.scss

@@ -0,0 +1,16 @@
+/*!
+ * Font Awesome Free 5.12.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+@import 'mixins';
+@import 'core';
+@import 'larger';
+@import 'fixed-width';
+@import 'list';
+@import 'bordered-pulled';
+@import 'animated';
+@import 'rotated-flipped';
+@import 'stacked';
+@import 'icons';
+@import 'screen-reader';

src/style/fontawesome/regular.scss

@@ -0,0 +1,23 @@
+/*!
+ * Font Awesome Free 5.12.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-regular-400.eot');
+  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
+  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
+}
+
+.far {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 400;
+}

src/style/fontawesome/solid.scss

@@ -0,0 +1,24 @@
+/*!
+ * Font Awesome Free 5.12.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-solid-900.eot');
+  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
+  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
+}
+
+.fa,
+.fas {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}

src/style/fontawesome/v4-shims.scss

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 5.12.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+@import 'shims';

src/typescript/script.ts

@@ -1 +1,9 @@
-console.log(1);
+// Scroll Listener
+if (document.body.classList.contains("hero")) {
+    window.addEventListener("scroll", function () {
+        if (window.scrollY > 10)
+            document.body.classList.add("scroll");
+        else
+            document.body.classList.remove("scroll");
+    });
+}