Posts

Showing posts from February, 2020

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