diff --git a/css/res/arrow.svg b/css/res/arrow.svg
new file mode 100644
index 0000000..d6a7be9
--- /dev/null
+++ b/css/res/arrow.svg
@@ -0,0 +1,63 @@
+
+
+
+
diff --git a/css/res/hero.png b/css/res/hero.png
new file mode 100644
index 0000000..68b7ee7
Binary files /dev/null and b/css/res/hero.png differ
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..98e4827
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,57 @@
+@charset "UTF-8";
+body {
+ overflow-y: scroll;
+ /* Keep scroll functionality */
+ -ms-overflow-style: none;
+ /* IE and Edge */
+ scrollbar-width: none;
+ /* Firefox */
+}
+
+body::-webkit-scrollbar {
+ display: none;
+}
+
+.hero {
+ color: white;
+ background-image: url("res/hero.png");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-attachment: fixed;
+ height: 100vh;
+}
+
+.arrow {
+ vertical-align: bottom;
+ text-align: center;
+ cursor: pointer;
+ width: 70px;
+ margin: 0 auto;
+ margin-top: 70vh;
+ height: 100px;
+}
+
+.arrow:after {
+ content: "";
+ margin-top: 70vh;
+ width: 70px;
+ height: 100px;
+ position: absolute;
+ background-image: url("res/arrow.svg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ -webkit-animation: 3s infinite ease;
+ animation: 3s infinite ease;
+ animation-name: การเคลื่อนไหวที่-1;
+}
+@keyframes การเคลื่อนไหวที่-1 {
+ 0%, 100% {
+ top: 50px;
+ }
+ 50% {
+ top: 80px;
+ }
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/css/styles.scss b/css/styles.scss
new file mode 100644
index 0000000..24cca52
--- /dev/null
+++ b/css/styles.scss
@@ -0,0 +1,71 @@
+@mixin animation-keyframes {
+ $animation-number: 0 !default !global;
+ $animation-number: $animation-number + 1 !global;
+ $name: unquote("การเคลื่อนไหวที่-#{$animation-number}");
+ animation-name: $name;
+ @at-root {
+ @keyframes #{$name} {
+ @content;
+ }
+ }
+}
+
+
+body {
+ overflow-y: scroll; /* Keep scroll functionality */
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+
+body::-webkit-scrollbar {
+ display: none;
+}
+
+.hero {
+ color: white;
+ background-image: url("res/hero.png");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-attachment: fixed;
+
+ height: 100vh;
+}
+
+.container .arrow {
+}
+
+.arrow {
+ vertical-align: bottom;
+ text-align: center;
+ cursor: pointer;
+ width: 70px;
+ margin: 0 auto;
+ margin-top: 70vh;
+ height: 100px;
+}
+
+.arrow:after {
+ content: "";
+ margin-top: 70vh;
+ width: 70px;
+ height: 100px;
+ position: absolute;
+ background-image: url('res/arrow.svg');
+ background-size: cover;
+ background-repeat: no-repeat;
+
+ -webkit-animation: 3s infinite ease;
+ animation: 3s infinite ease;
+
+ @include animation-keyframes {
+ 0%,
+ 100% {
+ top: 50px;
+ }
+
+ 50% {
+ top: 80px;
+ }
+ }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8bb8916
--- /dev/null
+++ b/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+ TrailTruths
+
+
+
+
+
+ oh wow some more section!
+
+
+
+
+
+
+
+
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..c341c5a
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,12 @@
+$(document).ready(function(){
+ $("#arrow").click(function(){
+ $('html, body').animate({
+ scrollTop: $("#info-section").offset().top}, 1250);
+ });
+
+ $(".jumbotron").css({ height: $(window).height() + "px" });
+
+ $(window).on("resize", function() {
+ $(".jumbotron").css({ height: $(window).height() + "px" });
+ });
+});