Admin

$w.onReady(function(){ var states = ['box', 'box59', 'box63']; var stateNumber = 0; function slideShow() { $w('#multiStateBox1').changeState(states[stateNumber]); if (stateNumber < states.length - 1) { stateNumber++; } else { stateNumber = 0; } setTimeout(slideShow, 8000); } slideShow(); });

<canvas id="inkCanvas"></canvas> <style> #inkCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; } </style> <script> const canvas = document.getElementById('inkCanvas'); const ctx = canvas.getContext('2d'); let particles = []; canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); document.addEventListener('mousemove', (e) => { createInkParticles(e.pageX, e.pageY); }); function createInkParticles(x, y) { // Change the number of particles created per mouse move event by adjusting the loop limit for (let i = 0; i < 7; i++) { particles.push(new Particle(x, y)); } } class Particle { constructor(x, y) { this.x = x; this.y = y; // Change the initial size of the particles by adjusting the multiplier and addition this.size = Math.random() * 5 + 1; // Adjust the speed of the particles by changing the multiplier and subtraction values this.speedX = Math.random() * 2 - 1; this.speedY = Math.random() * 2 - 1; // Modify the lifespan of particles by changing the random range this.life = Math.random() * 100 + 50; // Change the color of particles by editing the HSL values this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; } update() { // Adjust particle movement speed by modifying the speedX and speedY values this.x += this.speedX; this.y += this.speedY; // Decrease particle lifespan per frame this.life--; // Adjust the rate at which the particles shrink by changing the multiplier this.size *= 0.95; } draw() { ctx.fillStyle = this.color; ctx.beginPath(); // You can change the shape of the particles by replacing ctx.arc with another drawing method ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } function handleParticles() { for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); // Remove particles when their lifespan ends if (particles[i].life <= 0) { particles.splice(i, 1); i--; } } } function animate() { // Clear the canvas for the next frame ctx.clearRect(0, 0, canvas.width, canvas.height); // Change the composite operation for different blending effects ctx.globalCompositeOperation = 'lighter'; handleParticles(); // Recursively call animate() to create an animation loop requestAnimationFrame(animate); } animate(); </script>

<div id="snow-container"></div> <style> #snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 9999; } .snowflake { position: absolute; background-color: white; opacity: 0.8; border-radius: 50%; animation: fall linear infinite; } @keyframes fall { 0% { transform: translateY(-10px); } 100% { transform: translateY(100vh); } } </style> <script> (function () { const snowContainer = document.getElementById('snow-container'); const snowflakeCount = 100; const snowflakeSize = { min: 2, max: 5 }; const fallDuration = { min: 5, max: 15 }; for (let i = 0; i < snowflakeCount; i++) { const snowflake = document.createElement('div'); snowflake.classList.add('snowflake'); const size = Math.random() * (snowflakeSize.max - snowflakeSize.min) + snowflakeSize.min; snowflake.style.width = `${size}px`; snowflake.style.height = `${size}px`; const leftPosition = Math.random() * 100; snowflake.style.left = `${leftPosition}vw`; const duration = Math.random() * (fallDuration.max - fallDuration.min) + fallDuration.min; snowflake.style.animationDuration = `${duration}s`; // Randomly set animation delay to make snowflakes appear at different stages const delay = Math.random() * duration; snowflake.style.animationDelay = `-${delay}s`; snowContainer.appendChild(snowflake); } })(); </script>

<style> body, html { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; background: linear-gradient(135deg, #0F2027 0%, #203A43 100%); } #particles-js { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } </style> <body> <div id='particles-js'></div> <script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script> <script> particlesJS('particles-js', { particles: { number: { value:50, density: { enable: true, value_area: 800 } }, color: { value: '#ffffff' }, shape: { type: 'circle', stroke: { width: 0, color: '#000000' }, polygon: { nb_sides: 5 }, }, opacity: { value: 0.5, random: false }, size: { value: 3, random: true }, line_linked: { enable: true, distance: 150, color: '#ffffff', opacity: 0.4, width: 1, }, move: { enable: true, speed: 6, direction: 'none', random: false, straight: false, out_mode: 'out', bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 }, }, }, interactivity: { detect_on: 'canvas', events: { onhover: { enable: true, mode: 'grab' }, onclick: { enable: true, mode: 'push' }, resize: true, }, modes: { grab: { distance: 140, line_linked: { opacity: 1 } }, bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, repulse: { distance: 200, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 }, }, }, retina_detect: true, }); </script> </body>

<div class="wrapper"> <div class="hero"> <h1 class="hero__heading">Travel Guide</h1> </div> <div class="hero hero--secondary" aria-hidden="true" data-hero> <p class="hero__heading">Plan Your Tour</p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <style> @import url("https://fonts.googleapis.com/css?family=Montserrat:700"); * { box-sizing: border-box; } body { font-family: Montserrat, sans-serif; margin: 0; padding: 0; background-color: rgb(9, 14, 23); color: #ffffff; overflow-x: hidden; } .wrapper { position: relative; width: 100%; } .hero { min-height: 100vh; padding: clamp(1rem, 2vw, 5rem); display: flex; align-items: center; justify-content: center; text-align: center; } .hero--secondary { --mask: radial-gradient(circle at var(--x, 70%) var(--y, 50%), black 15%, transparent 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, #FF5733, #FFC300, #DAF7A6); color: rgb(9, 14, 23); -webkit-mask-image: var(--mask); mask-image: var(--mask); pointer-events: none; } .hero__heading { font-size: clamp(2rem, 5vw, 8rem); text-transform: uppercase; margin: 0; max-width: fit-content; } </style> <!-- JS: Mouse movement interaction --> <script> const hero = document.querySelector('[data-hero]'); window.addEventListener('mousemove', (e) => { const { clientX, clientY } = e; const x = Math.round((clientX / window.innerWidth) * 100); const y = Math.round((clientY / window.innerHeight) * 100); gsap.to(hero, { '--x': `${x}%`, '--y': `${y}%`, duration: 0.3, ease: 'sine.out', }); }); </script>

<style> #dynamicHeading { font-family: Arial, sans-serif; color: #F25041; display: inline-block; overflow: hidden; white-space: wrap; /* Use nowrap instead of wrap to prevent line breaks */ font-size: 10vw; /* Default size using vw units */ font-weight: bold; text-align: center; /* Center align the text */ } .dynamicWord { color: #3A848C; display: inline-block; animation: fade 0.5s ease-in-out; font-size: 10vw; /* Default size using vw units */ font-weight: bold; min-width: 100px; /* Adjust this value to fit the longest word */ text-align: center; } @keyframes fade { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } /* Media queries to cap the font size */ @media (max-width: 450px) { #dynamicHeading, .dynamicWord { font-size: 45px; /* Minimum font size for small screens */ } } @media (min-width: 1000px) { #dynamicHeading, .dynamicWord { font-size: 100px; /* Maximum font size for large screens */ } } </style> <div id="dynamicHeading"> Discover the Finest <span class="dynamicWord">Pure</span> Spices </div> <script> // Array of words to replace "X" const words = ["Pure", "Blend", "VIP", "World"]; let currentIndex = 0; // Function to update the heading function updateHeading() { const dynamicWordElement = document.querySelector(".dynamicWord"); dynamicWordElement.innerHTML = words[currentIndex]; dynamicWordElement.style.animation = "none"; // Reset animation dynamicWordElement.offsetHeight; // Trigger reflow dynamicWordElement.style.animation = null; // Restart animation currentIndex = (currentIndex + 1) % words.length; } // Preload all words window.addEventListener('load', () => { words.forEach(word => { const span = document.createElement('span'); span.style.visibility = 'hidden'; span.innerText = word; document.body.appendChild(span); document.body.removeChild(span); }); // Initial call to set the heading immediately updateHeading(); // Update the heading every 3 seconds setInterval(updateHeading, 3000); }); </script>

https://wix.to/3DXmBDG Important - Wix will show a warning before installation since it is an external App. However, it's safe since it doesn't use any API. It's just a simple collection of codes. If you have a problem with any code, feel free to comment below. If you want to support my work, You can do that here - https://buymeacoffee.com/wixstudio

"ownershipFundingInfo": [ { "@type": "OwnershipInfo", "acquiredFrom": { "@type": "Organization", "name": "Funding source or Owner name", "url": "https://example.com/ownership-info" } } ], "actionableFeedbackPolicy": { "@type": "CreativeWork", "name": "Actionable Feedback Policy", "url": "https://example.com/actionable-feedback-policy" }, "correctionPolicy": { "@type": "CreativeWork", "name": "Correction Policy", "url": "https://example.com/correction-policy" }, "ethicsPolicy": { "@type": "CreativeWork", "name": "Ethics Policy", "url": "https://example.com/ethics-policy" }, "diversityPolicy": { "@type": "CreativeWork", "name": "Diversity Policy", "url": "https://example.com/diversity-policy" }, "diversityStaffingReport": { "@type": "CreativeWork", "name": "Diversity Staffing Report", "url": "https://example.com/diversity-staffing-report" }

<style>   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');   body {     font-family: 'Poppins', sans-serif;     text-align: center;   }   #countdown {     font-size: 16px;     color: white;    } </style> <body> <div id="countdown"></div> <script>   const endDate = new Date("August 14, 2024 23:59:59").getTime();   const countdown = setInterval(() => {     const now = new Date().getTime();     const distance = endDate - now;     const days = Math.floor(distance / (1000  60  60 * 24));     const hours = Math.floor((distance % (1000  60  60  24)) / (1000  60 * 60));     const minutes = Math.floor((distance % (1000  60  60)) / (1000 * 60));     const seconds = Math.floor((distance % (1000 * 60)) / 1000);     document.getElementById("countdown").innerHTML =       days + " Days : " + hours + " Hours : " + minutes + " Minutes : " + seconds + " Seconds ";     if (distance < 0) {       clearInterval(countdown);       document.getElementById("countdown").innerHTML = "SALE ENDED";     }   }, 1000); </script> </body>

<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; margin: 0; background: transparent; } body { display: flex; align-items: center; justify-content: center; font-family: 'Orbitron', sans-serif; background: transparent; } .cybr-btn { --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%)); --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%); --primary-hue: 0; --primary-lightness: 50; --color: hsl(0, 0%, 100%); --font-size: 26px; --shadow-primary-hue: 180; --shadow-secondary-hue: 60; --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%); --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%); --border: 4px; --shimmy-distance: 5; --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%); --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%); --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%); --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%); --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%); color: var(--color); cursor: pointer; background: transparent; text-transform: uppercase; font-size: var(--font-size); outline: transparent; letter-spacing: 2px; position: relative; font-weight: 700; border: 0; min-width: 300px; height: 75px; line-height: 75px; transition: background 0.2s; text-decoration: none; display: inline-block; text-align: center; padding: 0 30px; overflow: hidden; } .cybr-btn:hover { --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.8%)); } .cybr-btn:active { --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.6%)); } .cybr-btn:after, .cybr-btn:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; clip-path: var(--clip); z-index: -1; } .cybr-btn:before { background: var(--shadow-primary); transform: translate(var(--border), 0); } .cybr-btn:after { background: var(--primary); } .cybr-btn__glitch { position: absolute; top: calc(var(--border) * -1); left: calc(var(--border) * -1); right: calc(var(--border) * -1); bottom: calc(var(--border) * -1); background: var(--shadow-primary); text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary); clip-path: var(--clip); animation: glitch 2s infinite; display: none; } .cybr-btn:hover .cybr-btn__glitch { display: block; } .cybr-btn__glitch:before { content: ''; position: absolute; top: calc(var(--border) * 1); right: calc(var(--border) * 1); bottom: calc(var(--border) * 1); left: calc(var(--border) * 1); clip-path: var(--clip); background: var(--primary); z-index: -1; } @keyframes glitch { 0% { clip-path: var(--clip-one); } 2%, 8% { clip-path: var(--clip-two); transform: translate(calc(var(--shimmy-distance) * -1%), 0); } 6% { clip-path: var(--clip-two); transform: translate(calc(var(--shimmy-distance) * 1%), 0); } 9% { clip-path: var(--clip-two); transform: translate(0, 0); } 10% { clip-path: var(--clip-three); transform: translate(calc(var(--shimmy-distance) * 1%), 0); } 13% { clip-path: var(--clip-three); transform: translate(0, 0); } 14%, 21% { clip-path: var(--clip-four); transform: translate(calc(var(--shimmy-distance) * 1%), 0); } 25% { clip-path: var(--clip-five); transform: translate(calc(var(--shimmy-distance) * 1%), 0); } 30% { clip-path: var(--clip-five); transform: translate(calc(var(--shimmy-distance) * -1%), 0); } 35%, 45% { clip-path: var(--clip-six); transform: translate(calc(var(--shimmy-distance) * -1%)); } 40% { clip-path: var(--clip-six); transform: translate(calc(var(--shimmy-distance) * 1%)); } 50% { clip-path: var(--clip-six); transform: translate(0, 0); } 55% { clip-path: var(--clip-seven); transform: translate(calc(var(--shimmy-distance) * 1%), 0); } 60% { clip-path: var(--clip-seven); transform: translate(0, 0); } 31%, 61%, 100% { clip-path: var(--clip-four); } } </style> <body> <a href="https://yourdemolink.com" class="cybr-btn" target="_blank"> Cyberpunk<span aria-hidden>_</span> <span aria-hidden class="cybr-btn__glitch">Cyberpunk_</span> </a> </body>

.demo { font-size: 4rem; color: #ffffff; text-shadow: 0 1px 0 #cccccc, 0 2px 0 #17f0da, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); position: relative; }

<style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: 'Roboto', sans-serif; background-color: #ffffff; } #count { font-size: 32px; font-weight: bold; } </style> <body> <div id="count">0</div> <script> let count = 0; const target = 10000; const speed = 10; // Adjust this value for speed control function updateCount() { const increment = target / 100; // Adjust to control increment speed if (count < target) { count += increment; document.getElementById('count').textContent = Math.ceil(count).toLocaleString() + '+'; setTimeout(updateCount, speed); } else { document.getElementById('count').textContent = target.toLocaleString() + '+'; } } updateCount(); </script> </body>

Code without percent value <div id="progressBar"> <div id="progress"></div> </div> <style> #progressBar { position: fixed; top: 0; left: 0; width: 100%; height: 5px; background-color: #ddd; z-index: 1000; } #progress { height: 100%; background-color: #4caf50; width: 0%; } </style> <script> document.addEventListener('scroll', function() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrolled = (scrollTop / scrollHeight) * 100; document.getElementById('progress').style.width = scrolled + '%'; }); </script> Code with a percent value <div id="progressContainer"> <div id="progressBar"> <div id="progress"> <span id="progressText">0%</span> </div> </div> </div> <style> #progressContainer { position: fixed; top: 0; left: 0; width: 100%; height: 10px; z-index: 1000; pointer-events: none; } #progressBar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ddd; border: 1px solid #333; border-radius: 10px; overflow: hidden; } #progress { height: 100%; background-color: #4caf50; width: 0%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; border-radius: 8px; } #progressText { position: relative; z-index: 1; color: #fff; } </style> <script> document.addEventListener('scroll', function() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrolled = (scrollTop / scrollHeight) * 100; document.getElementById('progress').style.width = scrolled + '%'; document.getElementById('progressText').textContent = Math.round(scrolled) + '%'; }); </script>

. threedcard { transform: rotateX(51deg) rotateZ(-43deg); transform-style: preserve-3d; border-radius: 32px; backface-visibility: hidden; box-shadow: 0px 10px 20px 0 rgba(0, 0, 0, 0.15); /* Adjusted shadow for a direct perpendicular effect */ transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out; } .threedcard:hover { transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(-43deg); box-shadow: -20px 30px 28px -10px rgba(34, 33, 81, 0.15); /* Adjusted shadow for hover state */ }

Code tk<!-- Include the kursor library --> <script src="https://cdn.jsdelivr.net/npm/kursor@0.1.6/dist/kursor.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/kursor@0.1.6/dist/kursor.min.css" rel="stylesheet"> <script> document.addEventListener('DOMContentLoaded', function() { new kursor({ type: 1, // Choose the type of cursor removeDefaultCursor: false, color: '#000000' // Customize the cursor color }); }); </script>

Put this meta tag in your blog, post, or any other page's Additional Tags to add keywords to your page. Meta Tags have a character limit so keep them short and relevant. Do not overstuff the keywords. Feel Free to ask any follow-up questions. <meta name="keywords" content="Place Your Meta Tags here, Seperate them vis Comma"/>

<style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 25px <!--Edit font size here --> } body { background-color: #eeeeea; } .wrapper { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .container { height: 400px; display: flex; flex-wrap: nowrap; justify-content: start; } .card { width: 80px; border-radius: .75rem 2rem; background-size: cover; cursor: pointer; overflow: hidden; margin: 0 10px; display: flex; align-items: flex-end; transition: .6s cubic-bezier(.28,-0.03,0,.99); box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.8); } .card > .row { color: white; display: flex; flex-wrap: nowrap; } .card > .row > .icon { background: #223; color: white; border-radius: 50%; width: 50px; display: flex; justify-content: center; align-items: center; margin: 15px; } .card > .row > .description { display: flex; justify-content: center; flex-direction: column; overflow: hidden; height: 80px; width: 520px; opacity: 0; transform: translateY(30px); transition-delay: .3s; transition: all .3s ease; } .description p { color: #b0b0ba; padding-top: 5px; } .description h4 { text-transform: uppercase; } input { display: none; } input:checked + label { width: 600px; } input:checked + label .description { opacity: 1 !important; transform: translateY(0) !important; } .card[for="c1"] { background-image: url('https://static.wixstatic.com/media/8874a0_8c7c1c90c2a4405c8e603e2567020467~mv2.png'); } .card[for="c2"] { background-image: url('https://static.wixstatic.com/media/8874a0_8ae5611d5684447eb651145e7ec57c70~mv2.png'); } .card[for="c3"] { background-image: url('https://static.wixstatic.com/media/8874a0_a37ac81662ed4b7ebe80cae48f215cb8~mv2.png'); } .card[for="c4"] { background-image: url('https://static.wixstatic.com/media/8874a0_4e24aa3fb74046418b43ac547363f896~mv2.png'); } </style> </head> <body> <div class="wrapper"> <div class="container"> <input type="radio" name="slide" id="c1" checked> <label for="c1" class="card"> <div class="row"> <div class="icon">1</div> <div class="description"> <h4>Men's Wear</h4> <p>Best Men's Fashion Elements</p> </div> </div> </label> <input type="radio" name="slide" id="c2" > <label for="c2" class="card"> <div class="row"> <div class="icon">2</div> <div class="description"> <h4>Women's Wear</h4> <p>Accessories, Apperal, and More</p> </div> </div> </label> <input type="radio" name="slide" id="c3" > <label for="c3" class="card"> <div class="row"> <div class="icon">3</div> <div class="description"> <h4>Sports Wear</h4> <p>Sports Shoes, Training wears, and more.</p> </div> </div> </label> <input type="radio" name="slide" id="c4" > <label for="c4" class="card"> <div class="row"> <div class="icon">4</div> <div class="description"> <h4>New Arrivals</h4> <p>Fresh Articles in the Store</p> </div> </div> </label> </div> </div> </body> </html>