x

JavierAndPJCreations · Apr 4, 2024 · 4ee5dd3 · 4ee5dd3
1 parent 983fd04
commit 4ee5dd3
Showing 1 changed file with 152 additions and 0 deletions.
diff --git a/games.html b/games.html
@@ -10,6 +10,158 @@
     .center {
 text-align: center;
 }
+  </style>
+  <style>
+    :root {
+  --carousel-height: 350px;
+  --carousel-radius: 0.5em;
+  --carousel-nav-btn-dim: 3em;
+  --carousel-page-nav-btn-dim: 0.5em;
+  --carousel-caption-padding: 2em;
+  --carousel-caption-color: #fff;
+  --carousel-caption-bg: linear-gradient(
+    to bottom,
+    transparent,
+    hsl(0 0 0 / 65%) 80%
+  );
+  --carousel-inner-spacing: 2em;
+  --carousel-prev-next-btn-bg: #fff;
+  --carousel-prev-next-btn-color: #333;
+  --carousel-pagination-margin: 1em;
+  --carousel-pagination-gap: 0.75em;
+  --carousel-pagination-btn-bg: #aaa;
+  --carousel-pagination-btn-active-bg: #333;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font: 1em/160% sans-serif;
+}
+
+img,
+video,
+iframe {
+  max-width: 100%;
+}
+
+.carousel-inner {
+  overflow: hidden;
+  position: relative;
+  min-height: var(--carousel-height);
+  border-radius: var(--carousel-radius);
+}
+
+.carousel-title {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+
+.carousel-title + .carousel-description {
+  color: #888;
+  margin-top: 0;
+}
+
+.slide {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transition: transform 0.5s cubic-bezier(0.42, 0, 0.58, 1);
+}
+
+.slide-content {
+  position: relative;
+  z-index: 5000;
+  height: 100%;
+}
+
+.slide-caption {
+  width: 100%;
+  position: absolute;
+  padding: var(--carousel-caption-padding);
+  left: 0;
+  bottom: 0;
+  color: var(--carousel-caption-color);
+  background-image: var(--carousel-caption-bg);
+}
+
+.slide-caption a {
+  color: currentColor;
+}
+
+.slide-caption h3,
+.slide-caption p {
+  margin: 0;
+}
+
+.slide-caption p {
+  font-size: 75%;
+  opacity: 0.6;
+}
+
+.slide img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.carousel-btn {
+  width: var(--carousel-nav-btn-dim);
+  height: var(--carousel-nav-btn-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  color: var(--carousel-prev-next-btn-color);
+  background-color: var(--carousel-prev-next-btn-bg);
+}
+
+.carousel-btn--prev-next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.1s ease-in-out;
+}
+
+.carousel-btn--prev-next:hover {
+  transform: translateY(-50%) scale(1.2);
+}
+
+.carousel-btn--prev {
+  left: var(--carousel-inner-spacing);
+}
+
+.carousel-btn--next {
+  right: var(--carousel-inner-spacing);
+}
+
+.carousel-pagination {
+  margin-top: var(--carousel-pagination-margin);
+  display: flex;
+  gap: var(--carousel-pagination-gap);
+  justify-content: center;
+}
+
+.carousel-pagination .carousel-btn {
+  background-color: var(--carousel-pagination-btn-bg);
+  height: var(--carousel-page-nav-btn-dim);
+  width: var(--carousel-page-nav-btn-dim);
+  border-radius: 50%;
+  color: transparent;
+  transition: transform 0.25s, background-color 0.25s ease-in-out;
+}
+
+.carousel-pagination .carousel-btn--active {
+  transform: scale(1.5);
+  background-color: var(--carousel-pagination-btn-active-bg);
+}
+
   </style>
   <body> 
     <style>