shork.eu/Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first cards and initial styling

Browse source
This commit is contained in:
eryn sharkness 2025-08-14 02:58:06 +02:00
parent f5720eee2f
commit a313ffc22f
8 changed files with 158 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
assets/css/Card-Carousel-slider.css Normal file
View file

@ -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;
}
}

33
assets/css/Card-Carousel.css Normal file
View file

@ -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;
}
}

10
assets/css/Nunito Sans.css
View file

@ -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;

10
assets/css/Nunito.css
View file

@ -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;

BIN
assets/img/shork.eu-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 584 KiB

BIN
assets/img/shork.eu.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 795 KiB

20
assets/js/Card-Carousel-slider.js Normal file
View file

@ -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');
}
}
}
});

40
index.html
View file

@ -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%20Sans.css?h=433e1c5745f95ce8e6874541f3d7acce">
<link rel="stylesheet" href="assets/css/Nunito.css?h=a36bfc2fb2ed43e90a41434fc5005f29">
<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="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="col-md-6 d-flex d-sm-block">
<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>