Untitled

dabblet.css

div {
 background: url("https://cdn.dorik.com/6661e0b170f284001e508395/images/DALLE-2024-06-09-03.15.49-A-black-t-shirt-on-a-white-background.-The-t-shirt-is-plain-with-a-crew-neck-and-short-sleeves.-The-fabric-appears-smooth-and-slightly-fitted-with-n-sNfzb.webp") no-repeat;
 width: 400px;
 height: 400px;
 background-size: contain;
 position: relative;
}
img {
	mix-blend-mode: screen;
	max-width: 120px;
	height: 200px;
	text-align: center;
	        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;}

dabblet.html

<div><img src="https://cdn.dorik.com/6661e0b170f284001e508395/images/icon-purple-480x480-PwX3P.png"/></div>

dabblet.js

// Function to clear the active style from both buttons
function clearActiveStyle() {
    document.getElementById('monthly-btn').style.backgroundColor = '';
    document.getElementById('monthly-btn').style.color = '';
    document.getElementById('yearly-btn').style.backgroundColor = '';
    document.getElementById('yearly-btn').style.color = '';
}

// Set initial state
window.onload = function() {
    document.getElementById('monthly-btn').style.backgroundColor = '#333';
    document.getElementById('monthly-btn').style.color = 'white';
    document.getElementById('monthly-pricing').style.display = 'block';
};

document.getElementById('monthly-btn').addEventListener('click', function() {
    clearActiveStyle();
    this.style.backgroundColor = '#333';
    this.style.color = 'white';
    document.getElementById('monthly-pricing').style.display = 'block';
    document.getElementById('yearly-pricing').style.display = 'none';
});

document.getElementById('yearly-btn').addEventListener('click', function() {
    clearActiveStyle();
    this.style.backgroundColor = '#333';
    this.style.color = 'white';
    document.getElementById('yearly-pricing').style.display = 'block';
    document.getElementById('monthly-pricing').style.display = 'none';
});

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}