        Tabs Code

        <div class="tab-container">

  <div class="tabs">
    <button class="tab active" data-tab="tab1">TAB 1</button>
    <button class="tab" data-tab="tab2">TAB 2</button>
    <button class="tab" data-tab="tab3">TAB 3</button>
  </div>

  <div class="tab-content active" id="tab1">
    <h2>TAB 1</h2>
    <p>TEXT HERE</p>
  </div>

  <div class="tab-content" id="tab2">
    <h2>TAB 2</h2>
    <p>TEXT HERE</p>
  </div>

  <div class="tab-content" id="tab3">
    <h2>TAB 3</h2>
    <p>TEXT HERE</p>
  </div>

</div>

<style>

.tab-container {
    max-width: 500px;
    margin: 2rem auto;
    font-family: sans-serif;
    background: white;
    padding: 1rem;
}

.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tab {
    flex: 1;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: none;
    background: #eee;
}

.tab:hover {
    background: #b3b3b3;
}

.tab.active {
    background: #b3b3b3;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

</style>

<script>

const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');

tabs.forEach((tab) => {

    tab.addEventListener('click', () => {

        const target = tab.dataset.tab;

        tabs.forEach((t) => t.classList.remove('active'));
        contents.forEach((c) => c.classList.remove('active'));

        tab.classList.add('active');
        document.getElementById(target).classList.add('active');

    });

});

</script>
        

    

Preview

        Saturate on Hover Code

        <!DOCTYPE html>

<html>

<head>

<style>

.hover-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    filter: saturate(0);
    transition: filter 0.3s ease;
}

.hover-image:hover {
    filter: saturate(100%);
}

</style>

</head>

<body>

<img
    class="hover-image"
    src="https://file.garden/aofOrNw76xUdyI-5/art/e40311e60a2bd9b924e8ff98b5fd2a2a.gif"
>

</body>

</html>
        

    

Preview

        Button Code

        <a href="https://yourlinkherehahayayowo.com" class="button">
    Click
</a>

<style>

.button {
    display: inline-block;
    padding: 8px 16px;
    background: white;
    color: black;
    border: 2px solid #ccc;
    text-decoration: none;
    transition: 0.1s;
}

.button:hover {
    background: #ddd;
}

.button:active {
    transform: scale(0.9);
}

</style>
        

    

Preview

        Scrollable Moving Gradient Text Box

        <!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    min-height: 300vh;
    font-family: Arial, sans-serif;
}

.box {
    width: 400px;
    height: 260px;
    margin: 100px auto;
    border: 4px solid #000;
    overflow: hidden;
    position: relative;
}

.box::before {
    content: "";
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 300%;
    background: linear-gradient(
        180deg,
        #ff00FF 0%,
        #FF0000 25%,
        #00FF00 50%,
        #00FFFF 75%,
        #3344FF 100%
    );
    z-index: 0;
    transform: translateY(var(--move, 0px));
}

.text {
    position: relative;
    z-index: 1;
    padding: 20px;
}
</style>
</head>

<body>

<div class="box" id="box">
    <div class="text">
        text
        <br><br>
        more text
		<br><br>
    </div>
</div>

<script>
window.addEventListener("scroll", function() {
    document.getElementById("box").style.setProperty(
        "--move",
        (window.scrollY * -0.7) + "px"
    );
});
</script>

</body>
</html>
        

    

Preview

        Overlay Code

        <style>
.overlay {
  position: fixed;
  inset: 0;
  background: url("https://file.garden/aofOrNw76xUdyI-5/art/e40311e60a2bd9b924e8ff98b5fd2a2a.gif") repeat;
  background-size: 80px;
  opacity: .2;
  pointer-events: none;
  z-index: 9999;
  animation: move 100s linear infinite;
}

@keyframes move {
  to { background-position: 2000px 2000px; }
}
</style>

<div class="overlay"></div>

CONTENT HERE
        

    

Preview

        Pagedoll

        
<style>
.pagedoll {
  position: fixed;
  bottom: 0;
  right: 20px;
  width: 180px;
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
</style>

<img class="pagedoll"
src="https://file.garden/aofOrNw76xUdyI-5/art/cb75fc5a2a76367987a420a556fba2f1.jpg"
alt="pagedoll">
        

    

Preview

        Slideshow

        <!DOCTYPE html>
<html>
<head>
<style>
.slideshow {
  width: 400px;
  margin: 50px auto;
  text-align: center;
}

.slide {
  display: none;
  width: 100%;
}

.slide.active {
  display: block;
}

button {
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background: #000;
}
</style>
</head>

<body>

<div class="slideshow">

  <img class="slide active" src="https://64.media.tumblr.com/1dc8436ed407a0db0152142c279b6389/98791c5023786ff9-2e/s1280x1920/7766ae45ea9e2fc8387754c71e761ad5c51890f4.gifv">
  <img class="slide" src="https://64.media.tumblr.com/0a0876f98014079cc94025c9eba8d838/11b17862fecc92b2-30/s1280x1920/bfac04ff44465ef059540585a52e0eabf12d1f8d.gifv">
  <img class="slide" src="https://64.media.tumblr.com/c33d4e85dc0f5d1c60da6145b369686d/fd0a5d804a675577-a7/s540x810/4af577ed232dceda32fed23e7d49351a74a1dff8.gifv">
  <img class="slide" src="https://64.media.tumblr.com/c617dc7d38aa65138689f63170ed544f/c7d0e471a673d083-ac/s400x600/70e7936cbcaac8690d510a6ae8be0457624c786b.gifv">
  <img class="slide" src="https://64.media.tumblr.com/29369105862788d3897f7b0cee07f51c/a3f1f5f7b04b67d6-f9/s500x750/30623bc1decd5d3daacc9980d17a87bf9916a8d5.gifv">
  <img class="slide" src="https://64.media.tumblr.com/d50dc2b1a299586533f9b955b9b640b9/4823dca4545f676b-c9/s1280x1920/a94244343d0cf9302ab97694694980a8bf11c27e.gifv">

  <div>
    <button onclick="changeSlide(-1)">back</button>
    <button onclick="changeSlide(1)">forward</button>
  </div>

  <div>
    <span class="dot active" onclick="showSlide(0)"></span>
    <span class="dot" onclick="showSlide(1)"></span>
    <span class="dot" onclick="showSlide(2)"></span>
    <span class="dot" onclick="showSlide(3)"></span>
    <span class="dot" onclick="showSlide(4)"></span>
    <span class="dot" onclick="showSlide(5)"></span>
  </div>

</div>

<script>
let current = 0;

const slides = document.querySelectorAll(".slide");
const dots = document.querySelectorAll(".dot");

function showSlide(n) {
  current = n;

  slides.forEach(slide => slide.classList.remove("active"));
  dots.forEach(dot => dot.classList.remove("active"));

  slides[current].classList.add("active");
  dots[current].classList.add("active");
}

function changeSlide(n) {
  current = (current + n + slides.length) % slides.length;
  showSlide(current);
}

setInterval(() => {
  changeSlide(1);
}, 3000);
</script>

</body>
</html>

        

    