diff --git a/src/web/.gitignore b/src/web/.gitignore
new file mode 100755
index 0000000..5509140
--- /dev/null
+++ b/src/web/.gitignore
@@ -0,0 +1 @@
+*.DS_Store
diff --git a/src/web/README.md b/src/web/README.md
new file mode 100755
index 0000000..76ca3a3
--- /dev/null
+++ b/src/web/README.md
@@ -0,0 +1,32 @@
+# Grid Layout with Scrollable Content View
+
+A Masonry-powered grid layout with a motion hover effect on the grid items and a scrollable content view.
+
+
+
+[Article on Codrops](https://tympanus.net/codrops/?p=35959)
+
+[Demo](http://tympanus.net/Development/GridLayoutScrollableContent/)
+
+## Credits
+
+- [Masonry](http://masonry.desandro.com/) by David DeSandro.
+- [imagesLoaded](https://imagesloaded.desandro.com/) by Dave DeSandro
+- [Charming](https://github.com/yuanqing/charming) by Yuan Qing
+- [TweenMax](https://greensock.com/tweenmax) by Greensock
+- Images from [Unsplash.com](https://unsplash.com/)
+
+## License
+This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.
+
+## Misc
+
+Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)
+
+
+[© Codrops 2018](http://www.codrops.com)
+
+
+
+
+
diff --git a/src/web/css/base.css b/src/web/css/base.css
new file mode 100644
index 0000000..5406c91
--- /dev/null
+++ b/src/web/css/base.css
@@ -0,0 +1,616 @@
+article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
+ display: block;
+}
+
+audio, canvas, video {
+ display: inline-block;
+}
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+[hidden] {
+ display: none;
+}
+
+html {
+ font-family: sans-serif;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+}
+
+body {
+ margin: 0;
+}
+
+a:focus {
+ outline: thin dotted;
+}
+
+a:active, a:hover {
+ outline: 0;
+}
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+b, strong {
+ font-weight: bold;
+}
+
+dfn {
+ font-style: italic;
+}
+
+hr {
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+}
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+code, kbd, pre, samp {
+ font-family: monospace, serif;
+ font-size: 1em;
+}
+
+pre {
+ white-space: pre-wrap;
+}
+
+q {
+ quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+small {
+ font-size: 80%;
+}
+
+sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+img {
+ border: 0;
+}
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+figure {
+ margin: 0;
+}
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+ border: 0;
+ padding: 0;
+}
+
+button, input, select, textarea {
+ font-family: inherit;
+ font-size: 100%;
+ margin: 0;
+}
+
+button, input {
+ line-height: normal;
+}
+
+button, select {
+ text-transform: none;
+}
+
+button, html input[type="button"], input[type="reset"], input[type="submit"] {
+ -webkit-appearance: button;
+ cursor: pointer;
+}
+
+button[disabled], html input[disabled] {
+ cursor: default;
+}
+
+input[type="checkbox"], input[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+}
+
+input[type="search"] {
+ -webkit-appearance: textfield;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+textarea {
+ overflow: auto;
+ vertical-align: top;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+*,
+*::after,
+*::before {
+ box-sizing: border-box;
+}
+
+body {
+ --color-text: #4800d4;
+ --color-bg: #e8e8e8;
+ --color-link: #ec1752;
+ --color-link-hover: #eb1851;
+ --color-info: #272526;
+ --grid-item-bg: #f1f1f1;
+ --color-close: #ec1752;
+ font-family: Futura, "futura-pt", sans-serif;
+ min-height: 100vh;
+ color: #57585c;
+ color: var(--color-text);
+ background-color: #fff;
+ background-color: var(--color-bg);
+}
+
+/* Page Loader */
+.js .loading::before {
+ content: '';
+ position: fixed;
+ z-index: 100000;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--color-bg);
+}
+
+.js .loading::after {
+ content: '';
+ position: fixed;
+ z-index: 100000;
+ top: 50%;
+ left: 50%;
+ width: 60px;
+ height: 60px;
+ margin: -30px 0 0 -30px;
+ pointer-events: none;
+ border-radius: 50%;
+ opacity: 0.4;
+ background: var(--color-link);
+ animation: loaderAnim 0.7s linear infinite alternate forwards;
+}
+
+@keyframes loaderAnim {
+ to {
+ opacity: 1;
+ transform: scale3d(0.5, 0.5, 1);
+ }
+}
+
+a {
+ text-decoration: none;
+ color: var(--color-link);
+ outline: none;
+}
+
+a:hover,
+a:focus {
+ color: var(--color-link-hover);
+ outline: none;
+}
+
+.hidden {
+ position: absolute;
+ overflow: hidden;
+ width: 0;
+ height: 0;
+ pointer-events: none;
+}
+
+/* Icons */
+.icon {
+ display: block;
+ width: 1.5em;
+ height: 1.5em;
+ margin: 0 auto;
+ fill: currentColor;
+}
+
+main {
+ position: relative;
+}
+
+.frame {
+ position: relative;
+ padding: 1.5rem 2.5rem;
+}
+
+.frame a:hover {
+ color: #4c33f7;
+}
+
+/* Header */
+.codrops-header {
+ position: relative;
+ z-index: 100;
+ text-align: center;
+ font-size: 1rem;
+}
+
+.codrops-header__title {
+ font-size: 1rem;
+ font-weight: normal;
+ margin: 0;
+ padding: 0;
+}
+
+.info {
+ margin: 0 0 0 1.25em;
+ color: var(--color-info);
+}
+
+.github {
+ display: block;
+ margin: 0.15em 0.15em 0.15em 0.5em;
+ padding: 0.25em;
+}
+
+.title {
+ text-align: center;
+}
+
+.title__name,
+.title__sub {
+ font-weight: normal;
+ margin: 0;
+ font-size: 1rem;
+}
+
+.title__sub {
+ position: relative;
+ margin: 0;
+}
+
+/* Top Navigation Style */
+.codrops-links {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ white-space: nowrap;
+}
+
+.codrops-icon {
+ display: inline-block;
+ margin: 0.15em;
+ padding: 0.25em;
+}
+
+.grid-wrap {
+ position: relative;
+ max-width: 1100px;
+ margin: 0 auto;
+ padding: 6rem 1rem 0;
+}
+
+.grid-wrap--hidden {
+ height: 0;
+ overflow: hidden;
+}
+
+.grid {
+ margin: 0 auto;
+ position: relative;
+ display: none;
+}
+
+.js .grid {
+ display: block;
+}
+
+.grid__item {
+ width: 260px;
+ position: relative;
+ padding: 2.75rem;
+ margin-bottom: 5rem;
+}
+
+.grid__item-wrap {
+ position: relative;
+}
+
+.grid__item-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--grid-item-bg);
+}
+
+.grid__item-img {
+ pointer-events: none;
+ width: 200px; /* width of container */
+ height: 200px; /* height of container */
+ object-fit: cover;
+ outline: 1px solid transparent;
+}
+
+.grid__item:nth-child(even) .grid__item-img {
+ transform: rotate3d(0, 0, 1, 4deg);
+}
+
+.grid__item:nth-child(odd) .grid__item-img {
+ transform: rotate3d(0, 0, 1, -4deg);
+}
+
+.grid__item-title {
+ font-weight: normal;
+ position: absolute;
+ left: 0;
+ top: 0;
+ margin: 0 0 0 1rem;
+ -webkit-writing-mode: vertical-rl;
+ writing-mode: vertical-rl;
+ transform: rotate(180deg);
+ transform-origin: 0 50%;
+}
+
+.grid__item-number {
+ font-weight: bold;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ font-size: 2.65rem;
+ margin: 0 0 0.15rem;
+}
+
+.grid__item-number > span {
+ display: inline-block;
+}
+
+.content {
+ margin: 0 auto;
+ grid-template-columns: 100%;
+ grid-template-rows: 100%;
+ align-items: center;
+ pointer-events: none;
+}
+
+.js .content {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1000;
+}
+
+.content__item {
+ padding: 10rem 5vw 10rem;
+ grid-area: 1 / 1 / 1 / 1;
+}
+
+.js .content__item {
+ height: 0;
+ opacity: 0;
+ overflow: hidden;
+ padding: 0;
+ pointer-events: none;
+}
+
+.js .content__item--current {
+ height: auto;
+ opacity: 1;
+ padding: 3rem 5vw 10rem;
+ pointer-events: auto;
+}
+
+.content__item-intro {
+ position: relative;
+ display: grid;
+ grid-template-columns: 100%;
+ grid-template-rows: 100%;
+ align-items: center;
+}
+
+.content__item-img {
+ position: relative;
+ height: auto;
+ max-width: 100%;
+ display: block;
+ margin: 0 auto;
+ grid-area: 1 / 1 / 1 / 1;
+}
+
+.js .content__item-img {
+ visibility: hidden;
+}
+
+.content__item-title {
+ position: relative;
+ font-size: 7vw;
+ line-height: 1;
+ text-align: center;
+ margin: 0;
+ padding: 0 5vw;
+ white-space: nowrap;
+ grid-area: 1 / 1 / 1 / 1;
+}
+
+.content__item-title > span {
+ white-space: pre;
+ display: inline-block;
+}
+
+.content__item-subtitle {
+ text-align: center;
+ font-size: 1.25rem;
+ font-weight: normal;
+ margin: 3rem auto;
+}
+
+.content__item-text {
+ text-align: justify;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.content__item-text p {
+ margin: 0;
+}
+
+.content__close {
+ position: absolute;
+ top: 0.75rem;
+ left: 50%;
+ z-index: 10000;
+ transform: translateX(-50%);
+ background: none;
+ border: 0;
+ margin: 0;
+ padding: 0;
+ cursor: pointer;
+ color: var(--color-text);
+}
+
+.content__close:focus {
+ outline: none;
+}
+
+.content__item--current ~ .content__close {
+ pointer-events: auto;
+}
+
+.content__indicator {
+ position: absolute;
+ top: calc(100vh - 6rem);
+ left: calc(50% - 0.75rem);
+ display: none;
+}
+
+.js .content__item-title > span,
+.js .content__item-subtitle,
+.js .content__item-text,
+.content__close,
+.content__indicator {
+ opacity: 0;
+}
+
+@media screen and (min-width: 55em) {
+ .frame {
+ display: grid;
+ align-items: start;
+ justify-items: start;
+ grid-template-columns: 40% 60%;
+ grid-template-areas: 'title header';
+ }
+
+ .codrops-header {
+ grid-area: header;
+ justify-self: end;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ align-items: center;
+ text-align: left;
+ }
+
+ .codrops-links {
+ margin: 0 0 0 1.5rem;
+ }
+
+ .title {
+ grid-area: title;
+ display: flex;
+ text-align: left;
+ }
+
+ .title__sub {
+ position: relative;
+ padding: 0 0 0 5rem;
+ margin: 0 0 0 1rem;
+ }
+
+ .title__sub::before {
+ content: '';
+ height: 1px;
+ width: 4rem;
+ background: currentColor;
+ position: absolute;
+ top: 0.65rem;
+ left: 0;
+ }
+
+ .title__sub-works {
+ display: block;
+ }
+
+ .grid__item-number {
+ right: -2.45rem;
+ }
+
+ .grid__item-title {
+ margin-left: -0.25rem;
+ }
+
+ .content__item-subtitle {
+ font-size: 3vw;
+ }
+
+ .content__item-text {
+ column-count: 2;
+ column-gap: 20px;
+ }
+
+ .content__item-img {
+ max-width: none;
+ height: calc(100vh - 6rem);
+ }
+
+ .content__item-subtitle {
+ max-width: 50%;
+ }
+
+ .content__indicator {
+ display: block;
+ }
+}
diff --git a/src/web/favicon.ico b/src/web/favicon.ico
new file mode 100644
index 0000000..f554c90
Binary files /dev/null and b/src/web/favicon.ico differ
diff --git a/src/web/index.html b/src/web/index.html
new file mode 100755
index 0000000..900b82b
--- /dev/null
+++ b/src/web/index.html
@@ -0,0 +1,99 @@
+
+
+
+
+
+ Steps Leaderboard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
fit-o-freaks
+ zeta
+
+
+ {{range .}}
+
+
+
+
{{.Name}}
+
+
+ Week: {{.StepsWeek}}
+ Day: {{.StepsDay}}
+
+
+ {{end}}
+
+
+
+