diff --git a/Frontend/Html/ShowCase.html b/Frontend/Html/ShowCase.html
new file mode 100644
index 0000000..3c13087
--- /dev/null
+++ b/Frontend/Html/ShowCase.html
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Game Jam Name
+ Name Of Author
+
+
+
+
+ Beskrivelse
+
+
+
+
+
+
+
+
+
+
+
Hej dkjhhnsd hid hgndnf ghnd df
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Frontend/Javascript/jcarousel.responsive.js b/Frontend/Javascript/jcarousel.responsive.js
new file mode 100644
index 0000000..3e78e51
--- /dev/null
+++ b/Frontend/Javascript/jcarousel.responsive.js
@@ -0,0 +1,49 @@
+(function($) {
+ $(function() {
+ var jcarousel = $('.jcarousel');
+
+ jcarousel
+ .on('jcarousel:reload jcarousel:create', function () {
+ var carousel = $(this),
+ width = carousel.innerWidth();
+
+ if (width >= 600) {
+ width = width / 3;
+ } else if (width >= 350) {
+ width = width / 2;
+ }
+
+ carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
+ })
+ .jcarousel({
+ wrap: 'circular'
+ });
+
+ $('.jcarousel-control-prev')
+ .jcarouselControl({
+ target: '-=1'
+ });
+
+ $('.jcarousel-control-next')
+ .jcarouselControl({
+ target: '+=1'
+ });
+
+ $('.jcarousel-pagination')
+ .on('jcarouselpagination:active', 'a', function() {
+ $(this).addClass('active');
+ })
+ .on('jcarouselpagination:inactive', 'a', function() {
+ $(this).removeClass('active');
+ })
+ .on('click', function(e) {
+ e.preventDefault();
+ })
+ .jcarouselPagination({
+ perPage: 1,
+ item: function(page) {
+ return '' + page + '';
+ }
+ });
+ });
+})(jQuery);
diff --git a/Frontend/Styles/ShowCase.css b/Frontend/Styles/ShowCase.css
new file mode 100644
index 0000000..8b3db9c
--- /dev/null
+++ b/Frontend/Styles/ShowCase.css
@@ -0,0 +1,173 @@
+body,
+html {
+ background-color: rgb(18, 18, 18) !important;
+ color: rgba(255, 255, 255, .55) !important;
+ font-family: Arial, Helvetica, sans-serif !important;
+ margin: 40px !important;
+ padding: 10px !important;
+ height: 100%;
+}
+
+#gameTitle {
+ margin-bottom: 10px;
+}
+
+#groupId {
+ margin-bottom: 10px;
+}
+
+#suggestions {
+ justify-content: center;
+ background-color: blue;
+ margin-top: 20px;
+}
+
+#isWebBased {
+ border-radius: 15px;
+ color: rgba(255, 255, 255, .55);
+ background-color: rgb(18, 18, 18);
+ border: double;
+ height: 30px;
+ font-weight: bold;
+ margin: 8px;
+}
+
+#gameFil {
+ border-radius: 15px;
+ color: rgba(255, 255, 255, .55);
+ background-color: rgb(18, 18, 18);
+ border: double;
+ height: 30px;
+ font-weight: bold;
+ margin: 8px;
+}
+
+#thumbnailFile {
+ max-width: 100%;
+ max-height: 100%;
+}
+
+#description {
+ margin-bottom: 10px;
+}
+
+.carousel-item active {
+ display: flex !important;
+}
+
+.d-block w-100 {
+ padding: 10px;
+ margin: 20px !important;
+}
+
+.jcarousel-wrapper {
+ margin: 20px auto;
+ position: relative;
+ /*border: 10px solid #fff;*/
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ -webkit-box-shadow: 0 0 2px #999;
+ -moz-box-shadow: 0 0 2px #999;
+ box-shadow: 0 0 2px #999;
+}
+
+/** Carousel **/
+
+.jcarousel {
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+}
+
+.jcarousel ul {
+ width: 10000em;
+ position: relative;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.jcarousel li {
+ width: 100%;
+ float: left;
+ border: 1px solid #fff;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.jcarousel img {
+ display: block;
+ max-width: 100%;
+ height: auto !important;
+}
+
+/** Carousel Controls **/
+
+.jcarousel-control-prev,
+.jcarousel-control-next {
+ position: absolute;
+ top: 50%;
+ margin-top: -15px;
+ width: 30px;
+ height: 30px;
+ text-align: center;
+ background: #4E443C;
+ color: #fff;
+ text-decoration: none;
+ text-shadow: 0 0 1px #000;
+ font: 24px/27px Arial, sans-serif;
+ -webkit-border-radius: 30px;
+ -moz-border-radius: 30px;
+ border-radius: 30px;
+ -webkit-box-shadow: 0 0 4px #F0EFE7;
+ -moz-box-shadow: 0 0 4px #F0EFE7;
+ box-shadow: 0 0 4px #F0EFE7;
+}
+
+.jcarousel-control-prev {
+ left: 15px;
+}
+
+.jcarousel-control-next {
+ right: 15px;
+}
+
+/** Carousel Pagination **/
+
+.jcarousel-pagination {
+ position: absolute;
+ bottom: -40px;
+ left: 50%;
+ -webkit-transform: translate(-50%, 0);
+ -ms-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ margin: 0;
+}
+
+.jcarousel-pagination a {
+ text-decoration: none;
+ display: inline-block;
+ font-size: 11px;
+ height: 10px;
+ width: 10px;
+ line-height: 10px;
+ background: #fff;
+ color: #4E443C;
+ border-radius: 10px;
+ text-indent: -9999px;
+ margin-right: 7px;
+ -webkit-box-shadow: 0 0 2px #4E443C;
+ -moz-box-shadow: 0 0 2px #4E443C;
+ box-shadow: 0 0 2px #4E443C;
+}
+
+.jcarousel-pagination a.active {
+ background: #4E443C;
+ color: #fff;
+ opacity: 1;
+ -webkit-box-shadow: 0 0 2px #F0EFE7;
+ -moz-box-shadow: 0 0 2px #F0EFE7;
+ box-shadow: 0 0 2px #F0EFE7;
+}
\ No newline at end of file
diff --git a/Frontend/Styles/jcarousel.responsive.css b/Frontend/Styles/jcarousel.responsive.css
new file mode 100644
index 0000000..2b44cae
--- /dev/null
+++ b/Frontend/Styles/jcarousel.responsive.css
@@ -0,0 +1,117 @@
+.jcarousel-wrapper {
+ margin: 20px auto;
+ position: relative;
+ /* border: 10px solid #fff;*/
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ -webkit-box-shadow: 0 0 2px #999;
+ -moz-box-shadow: 0 0 2px #999;
+ box-shadow: 0 0 2px #999;
+}
+
+/** Carousel **/
+
+.jcarousel {
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+}
+
+.jcarousel ul {
+ width: 10000em;
+ position: relative;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.jcarousel li {
+ width: 200px;
+ float: left;
+ border: 1px solid #fff;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.jcarousel img {
+ display: block;
+ max-width: 100%;
+ height: auto !important;
+}
+
+/** Carousel Controls **/
+
+.jcarousel-control-prev,
+.jcarousel-control-next {
+ position: absolute;
+ top: 50%;
+ margin-top: -15px;
+ width: 30px;
+ height: 30px;
+ text-align: center;
+ background: #4E443C;
+ color: #fff;
+ text-decoration: none;
+ text-shadow: 0 0 1px #000;
+ font: 24px/27px Arial, sans-serif;
+ -webkit-border-radius: 30px;
+ -moz-border-radius: 30px;
+ border-radius: 30px;
+ -webkit-box-shadow: 0 0 4px #F0EFE7;
+ -moz-box-shadow: 0 0 4px #F0EFE7;
+ box-shadow: 0 0 4px #F0EFE7;
+}
+
+.jcarousel-control-prev {
+ left: 15px;
+}
+
+.jcarousel-control-next {
+ right: 15px;
+}
+
+/** Carousel Pagination **/
+
+.jcarousel-pagination {
+ position: absolute;
+ bottom: -40px;
+ left: 50%;
+ -webkit-transform: translate(-50%, 0);
+ -ms-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ margin: 0;
+}
+
+.jcarousel-pagination a {
+ text-decoration: none;
+ display: inline-block;
+
+ font-size: 11px;
+ height: 10px;
+ width: 10px;
+ line-height: 10px;
+
+ background: #fff;
+ color: #4E443C;
+ border-radius: 10px;
+ text-indent: -9999px;
+
+ margin-right: 7px;
+
+
+ -webkit-box-shadow: 0 0 2px #4E443C;
+ -moz-box-shadow: 0 0 2px #4E443C;
+ box-shadow: 0 0 2px #4E443C;
+}
+
+.jcarousel-pagination a.active {
+ background: #4E443C;
+ color: #fff;
+ opacity: 1;
+
+ -webkit-box-shadow: 0 0 2px #F0EFE7;
+ -moz-box-shadow: 0 0 2px #F0EFE7;
+ box-shadow: 0 0 2px #F0EFE7;
+}