Posts

Wave Text

Image
<!DOCTYPE html> <html> <head> <title>Wave Text</title> </head> <body> <div class="wavy"> <span style="--i:1;">L</span> <span style="--i:2;">o</span> <span style="--i:3;">a</span> <span style="--i:4;">d</span> <span style="--i:5;">i</span> <span style="--i:6;">n</span> <span style="--i:7;">g</span> <span style="--i:8;">.</span> <span style="--i:9;">.</span> <span style="--i:10;">.</span> </div> </body> </html> <style type="text/css"> *{ margin: 0px; padding: 0px; font-family: consolas; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } .wavy{ pos...
Post a Comment
Read more

Light And Dark Mode

Image
<!DOCTYPE html> <html> <head> <title> Light Mode </title> </head> <body> <input type =" checkbox " name =""> <section> <h2> Pure CSS Dark / Light Mode Tricks </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <img src =" img.jpg "> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco la...
Post a Comment
Read more

Button Color

Image
<!DOCTYPE html> <html> <head> <title> Button </title> </head> <body> <div class =" contianer "> <a href =" # "> <span> Read More </span> </a> <a href =" # "> <span> Read More </span> </a> </div> <style type =" text/css "> *{margin: 0px; padding: 0px; font-family: arial;} .contianer{ min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column;} .contianer a{ position: relative; width: 300px; height: 75px; margin: 10px 0px; font-size: 24px; display: inline-flex; justify-content:center; align-items: center; text-decoration: none; transition: 0.5s; color: #000;} .contianer a:hover{color: #fff;} .contianer a:before{content: ''; position: absolute; top:0px; left: 0px; width: 0; height: 100%; background: url(btn-bg1.png); background-size: cover; transf...
Post a Comment
Read more

Sticky vaniila

Image
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <header> <a href =" # " class =" logo "> Logo </a> <ul> <li> <a href =" # "> Home </a> </li> <li> <a href =" # "> About </a> </li> <li> <a href =" # "> Services </a> </li> <li> <a href =" # "> Portfolio </a> </li> <li> <a href =" # "> Team </a> </li> <li> <a href =" # "> Contact Us </a> </li> </ul> </header> <section class =" banner "> </section> <script type =" text/javascript "> window.addEventListener("scroll", function(){ var header = document.querySelector("header"); header.classList.toggle("...
Post a Comment
Read more

Hurt

Image
<!DOCTYPE html> <html> <head> <title> Hurt </title> </head> <body> <script type =" text/javascript "> document.addEventListener("mousemove" , function(e) { var body = document.querySelector('body'); var heart = document.createElement("span"); var x = e.offsetX; var y = e.offsetY; heart.style.left = x+'px'; heart.style.top = y+'px'; var size = Math.random() * 100; heart.style.width = 20+size+'px'; heart.style.height = 20+size+'px'; body.appendChild(heart); setTimeout(function(){ heart.remove(); } , 2000); }) </script> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; } body{ overflow: hidden; background: #000; height: 100vh; } span{ position: absolute; background: url(heart.png); pointer-events: none; transform: tr...
Post a Comment
Read more

Water Wave Div

Image
<!DOCTYPE html> <html> <head> <title> Wave Waters </title> </head> <body> <div class =" container "> <div class =" box "> <div class =" content "> <h2> Water Wave Div </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </div> </div> <svg> <filter id =" wavy "> <feTurbulence x =" 0 " y =" 0 " baseFrequency = ...
Post a Comment
Read more

Wave Div

Image
<!DOCTYPE html> <html> <head> <title> Wave Line </title> </head> <body> <section> <div class =" wave wave1 "> </div> <div class =" wave wave2 "> </div> <div class =" wave wave3 "> </div> <div class =" wave wave4 "> </div> </section> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; } section{ position: relative; width: 100%; height: 100vh; background: #3586ff; overflow: hidden; } section .wave{ position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100px; background: url(wave.png); background-size: 1000px 100px; } section .wave.wave1{ animation: animate 30s linear infinite; z-index: 1000; opacity: 1; animation-delay: 0s; bottom: 0px; } section .wave.wave2{ animation: an...
Post a Comment
Read more