first cards and initial styling

assets/css/Card-Carousel-slider.css

@@ -0,0 +1,59 @@
+@media (min-width: 768px) {
+  .carousel-inner .active, .carousel-inner .active + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
+    display: block;
+  }
+}
+
+@media (min-width: 768px) {
+  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
+    transition: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev {
+    position: relative;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@media (min-width: 768px) {
+  .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
+    position: absolute;
+    top: 0;
+    right: -25%;
+    z-index: -1;
+    display: block;
+    visibility: visible;
+  }
+}
+
+@media (min-width: 768px) {
+  .active.carousel-item-left + .carousel-item-next.carousel-item-left, .carousel-item-next.carousel-item-left + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
+    position: relative;
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+}
+
+@media (min-width: 768px) {
+  .carousel-inner .carousel-item-prev.carousel-item-right {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    display: block;
+    visibility: visible;
+  }
+}
+
+@media (min-width: 768px) {
+  .active.carousel-item-right + .carousel-item-prev.carousel-item-right, .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
+    position: relative;
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+    display: block;
+    visibility: visible;
+  }
+}
+

assets/css/Card-Carousel.css

@@ -0,0 +1,33 @@
+.carousel {
+  margin-bottom: 0;
+  padding: 0 40px 30px 40px;
+}
+
+.carousel {
+  margin-bottom: 0;
+  padding: 0 40px 30px 40px;
+}
+
+@media (min-width: 768px) {
+  .carousel-inner .active, .carousel-inner .active + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
+    display: block;
+  }
+}
+
+@media (min-width: 768px) {
+  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
+    transition: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
+    position: absolute;
+    top: 0;
+    right: -25%;
+    z-index: -1;
+    display: block;
+    visibility: visible;
+  }
+}
+

assets/css/Nunito Sans.css

@@ -1,6 +1,6 @@
 @font-face {
 	font-family: 'Nunito Sans';
-	src: url(../../assets/fonts/Nunito%20Sans-ecd6842615851b5f6156dd55d5fbfa38.woff2?h=433e1c5745f95ce8e6874541f3d7acce) format('woff2');
+	src: url(../../assets/fonts/Nunito%20Sans-ecd6842615851b5f6156dd55d5fbfa38.woff2?h=043f5eff9901a53204b00e06de95ca1d) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -9,7 +9,7 @@
 
 @font-face {
 	font-family: 'Nunito Sans';
-	src: url(../../assets/fonts/Nunito%20Sans-10a50402d9a357ca83dd97fe4bc807a2.woff2?h=433e1c5745f95ce8e6874541f3d7acce) format('woff2');
+	src: url(../../assets/fonts/Nunito%20Sans-10a50402d9a357ca83dd97fe4bc807a2.woff2?h=043f5eff9901a53204b00e06de95ca1d) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -18,7 +18,7 @@
 
 @font-face {
 	font-family: 'Nunito Sans';
-	src: url(../../assets/fonts/Nunito%20Sans-7d232153fcfb708c6c30c79dffa8815c.woff2?h=433e1c5745f95ce8e6874541f3d7acce) format('woff2');
+	src: url(../../assets/fonts/Nunito%20Sans-7d232153fcfb708c6c30c79dffa8815c.woff2?h=043f5eff9901a53204b00e06de95ca1d) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -27,7 +27,7 @@
 
 @font-face {
 	font-family: 'Nunito Sans';
-	src: url(../../assets/fonts/Nunito%20Sans-10d9b1f95c4cc0063d3b2dacdfbc2a73.woff2?h=433e1c5745f95ce8e6874541f3d7acce) format('woff2');
+	src: url(../../assets/fonts/Nunito%20Sans-10d9b1f95c4cc0063d3b2dacdfbc2a73.woff2?h=043f5eff9901a53204b00e06de95ca1d) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -36,7 +36,7 @@
 
 @font-face {
 	font-family: 'Nunito Sans';
-	src: url(../../assets/fonts/Nunito%20Sans-f6bde0b5d8ed17a42bd59e7fc3393f4e.woff2?h=433e1c5745f95ce8e6874541f3d7acce) format('woff2');
+	src: url(../../assets/fonts/Nunito%20Sans-f6bde0b5d8ed17a42bd59e7fc3393f4e.woff2?h=043f5eff9901a53204b00e06de95ca1d) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;

assets/css/Nunito.css

@@ -1,6 +1,6 @@
 @font-face {
 	font-family: 'Nunito';
-	src: url(../../assets/fonts/Nunito-ae24e2fe6aaa2e727df26b8833f0cfc9.woff2?h=0cc8675b80953828ef4e46da973dd85b) format('woff2');
+	src: url(../../assets/fonts/Nunito-ae24e2fe6aaa2e727df26b8833f0cfc9.woff2?h=a36bfc2fb2ed43e90a41434fc5005f29) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -9,7 +9,7 @@
 
 @font-face {
 	font-family: 'Nunito';
-	src: url(../../assets/fonts/Nunito-0bbae4b8d3ed61dddea4297be3c38942.woff2?h=0cc8675b80953828ef4e46da973dd85b) format('woff2');
+	src: url(../../assets/fonts/Nunito-0bbae4b8d3ed61dddea4297be3c38942.woff2?h=a36bfc2fb2ed43e90a41434fc5005f29) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -18,7 +18,7 @@
 
 @font-face {
 	font-family: 'Nunito';
-	src: url(../../assets/fonts/Nunito-c68edf39ed030043e69f2b0f46973c67.woff2?h=0cc8675b80953828ef4e46da973dd85b) format('woff2');
+	src: url(../../assets/fonts/Nunito-c68edf39ed030043e69f2b0f46973c67.woff2?h=a36bfc2fb2ed43e90a41434fc5005f29) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -27,7 +27,7 @@
 
 @font-face {
 	font-family: 'Nunito';
-	src: url(../../assets/fonts/Nunito-1fa406b9715c64194a44f3b92c660607.woff2?h=0cc8675b80953828ef4e46da973dd85b) format('woff2');
+	src: url(../../assets/fonts/Nunito-1fa406b9715c64194a44f3b92c660607.woff2?h=a36bfc2fb2ed43e90a41434fc5005f29) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -36,7 +36,7 @@
 
 @font-face {
 	font-family: 'Nunito';
-	src: url(../../assets/fonts/Nunito-4424868b0705481a854267c9a2f823e8.woff2?h=0cc8675b80953828ef4e46da973dd85b) format('woff2');
+	src: url(../../assets/fonts/Nunito-4424868b0705481a854267c9a2f823e8.woff2?h=a36bfc2fb2ed43e90a41434fc5005f29) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;

assets/js/Card-Carousel-slider.js

@@ -0,0 +1,20 @@
+$('#carouselExample').on('slide.bs.carousel', function (e) {
+
+    var $e = $(e.relatedTarget);
+    var idx = $e.index();
+    var itemsPerSlide = 4;
+    var totalItems = $('.carousel-item').length;
+    
+    if (idx >= totalItems-(itemsPerSlide-1)) {
+        var it = itemsPerSlide - (totalItems - idx);
+        for (var i=0; i<it; i++) {
+            // append slides to end
+            if (e.direction=="left") {
+                $('.carousel-item').eq(i).appendTo('.carousel-inner');
+            }
+            else {
+                $('.carousel-item').eq(0).appendTo('.carousel-inner');
+            }
+        }
+    }
+});

index.html

@@ -5,6 +5,13 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <title>shork.eu</title>
+    <link rel="icon" type="image/png" sizes="1000x1000" href="assets/img/shork.eu-1.png?h=4885080971c1b340494cab284275a421">
+    <link rel="icon" type="image/png" sizes="1000x1000" href="assets/img/shork.eu.png?h=4885080971c1b340494cab284275a421" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="1000x1000" href="assets/img/shork.eu.png?h=4885080971c1b340494cab284275a421">
+    <link rel="icon" type="image/png" sizes="1000x1000" href="assets/img/shork.eu.png?h=4885080971c1b340494cab284275a421" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="1000x1000" href="assets/img/shork.eu.png?h=4885080971c1b340494cab284275a421">
+    <link rel="icon" type="image/png" sizes="1000x1000" href="assets/img/shork.eu.png?h=4885080971c1b340494cab284275a421">
+    <link rel="icon" type="image/png" sizes="1000x1000" href="assets/img/shork.eu.png?h=4885080971c1b340494cab284275a421">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="assets/css/Hiruko-BlackAlternate.css">
     <link rel="stylesheet" href="assets/css/LT%20Saeada%20Black.css?h=97612a6badd072ee03e87366e5666138">
@@ -18,10 +25,12 @@
     <link rel="stylesheet" href="assets/css/LT%20Saeada%20Regular.css?h=94cccd0d5ad8ea5ad29cfdfa0928b6c1">
     <link rel="stylesheet" href="assets/css/LT%20Saeada%20Semi-Bold.css?h=97612a6badd072ee03e87366e5666138">
     <link rel="stylesheet" href="assets/css/LT%20Saeada%20Thin.css?h=13dfdf7baf0061f60ebc742c4d7a6ec2">
-    <link rel="stylesheet" href="assets/css/Nunito.css?h=0cc8675b80953828ef4e46da973dd85b">
+    <link rel="stylesheet" href="assets/css/Nunito.css?h=a36bfc2fb2ed43e90a41434fc5005f29">
-    <link rel="stylesheet" href="assets/css/Nunito%20Sans.css?h=433e1c5745f95ce8e6874541f3d7acce">
+    <link rel="stylesheet" href="assets/css/Nunito%20Sans.css?h=043f5eff9901a53204b00e06de95ca1d">
     <link rel="stylesheet" href="assets/css/bss-overrides.css?h=0ec74ea6b6b4fe613b02be1560ff30e9">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
+    <link rel="stylesheet" href="assets/css/Card-Carousel-slider.css?h=d9ce4ffb7e6fb6b0eb1b95010276e3c6">
+    <link rel="stylesheet" href="assets/css/Card-Carousel.css?h=82b02d582b536e56e53eda48449816a0">
     <link rel="stylesheet" href="assets/css/Navbar-Right-Links-icons.css?h=befd8a398792e305b7ffd4a176b5b585">
 </head>
 
@@ -45,13 +54,36 @@
                     <p class="fs-2 my-3" style="color: var(--bs-primary-bg-subtle);"><strong><span style="color: var(--bs-primary-border-subtle);">Hope you enjoy your stay!</span></strong></p><button class="btn btn-warning btn-lg rounded-pill me-2" type="button">Button</button><a class="btn btn-outline-primary btn-lg rounded-pill" role="button" href="#">Button</a>
                 </div>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-6 d-flex d-sm-block">
-                <div class="m-xl-5 p-xl-5"><img class="rounded img-fluid object-fit-scale" data-bss-disabled-mobile="true" data-bss-hover-animate="jello" style="min-height: 300px;" src="assets/img/shork.eu@2x.png?h=4885080971c1b340494cab284275a421"></div>
+                <div class="m-xl-5 p-xl-5"><img class="rounded img-fluid object-fit-scale" width="2000" height="2000" data-bss-disabled-mobile="true" data-bss-hover-animate="jello" style="display: inline-flex;" src="assets/img/shork.eu@2x.png?h=4885080971c1b340494cab284275a421"></div>
+            </div>
+        </div>
+    </div>
+    <div class="text-start d-md-flex w-auto justify-content-md-center p-4">
+        <div class="card-group rounded-4 gap-3 flex-sm-column flex-lg-row" style="width: fit-content;">
+            <div class="card text-start rounded-5" style="background: rgba(173,225,255,0.33);color: rgb(255,255,255);text-align: left;box-shadow: inset -1px 1px 2px 0px rgba(255,255,255,0.200), inset -1px 1px 2px rgba(0,0,0,0.250);filter: blur(0px);backdrop-filter: blur(30px);-webkit-backdrop-filter: blur(30px);margin: 0px;padding: 8px;">
+                <div class="card-body">
+                    <h4 class="card-title" style="font-size: xx-large;font-family: 'LT Saeada Semi-Bold';">Discover</h4>
+                    <p class="card-text" style="font-size: larger;">Take a tour and see <strong>what's inside :3</strong></p><button class="btn btn-primary" type="button">Button</button>
+                </div>
+            </div>
+            <div class="card text-start rounded-5" style="background: rgba(173,225,255,0.33);color: rgb(255,255,255);text-align: left;box-shadow: inset -1px 1px 2px 0px rgba(255,255,255,0.200), inset -1px 1px 2px rgba(0,0,0,0.250);filter: blur(0px);backdrop-filter: blur(30px);-webkit-backdrop-filter: blur(30px);margin: 0px;padding: 8px;">
+                <div class="card-body">
+                    <h4 class="card-title" style="font-size: xx-large;font-family: 'LT Saeada Semi-Bold';">Community</h4>
+                    <p class="card-text" style="font-size: larger;">Just want to hang around? <br>Join our <strong>Discord!</strong></p><button class="btn btn-primary" type="button">Button</button>
+                </div>
+            </div>
+            <div class="card text-start rounded-5" style="background: rgba(173,225,255,0.33);color: rgb(255,255,255);text-align: left;box-shadow: inset -1px 1px 2px 0px rgba(255,255,255,0.200), inset -1px 1px 2px rgba(0,0,0,0.250);filter: blur(0px);backdrop-filter: blur(30px);-webkit-backdrop-filter: blur(30px);margin: 0px;padding: 8px;">
+                <div class="card-body">
+                    <h4 class="card-title" style="font-size: xx-large;font-family: 'LT Saeada Semi-Bold';">Need help?</h4>
+                    <p class="card-text" style="font-size: larger;">If you require assistance, you can always reach out to us!</p><button class="btn btn-primary" type="button">Button</button>
+                </div>
             </div>
         </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="assets/js/bs-init.js?h=ec5d4df3c798a2943b2ecbac76ebfde0"></script>
+    <script src="assets/js/Card-Carousel-slider.js?h=3feb358dbd002c5018a80cc6f16a1d4d"></script>
 </body>
 
 </html>