Graphic Website




 

Comments

Post a Comment

Popular posts from this blog

Hover Button Effects

Image
  <!DOCTYPE html> <html> <head> <title> Hover Button Effects </title> </head> <body> <a href =" # "> <span> </span> <span> </span> <span> </span> <span> </span> Buttons </a> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; box-sizing: border-box; font-family: arial; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1f242d; } a{ position: relative; display: inline-block; padding: 10px 30px; text-decoration: none; text-transform: uppercase; color: rgba(255,255,255, 0.4); background: #262c37; letter-spacing: 2px; font-size: 16px; transition: 0.5s; } a:hover{ color: rgba(255, 255, 255, 1); } a span{ display: block; position: absolute; background: #2894ff; } a span:nth-child(1){ left: 0px; bottom: 0px; width: ...
Read more

Check Box

Image
<!DOCTYPE html> <html> <head> <title>Check Box</title> </head> <body> <div class="list"> <h2>CSS Only Item Check List</h2> <label> <input type="checkbox" name=""> <i></i> <span>Lorem text is the dummy text for this site</span> </label> <label> <input type="checkbox" name=""> <i></i> <span>Lorem text is the dummy text for this site</span> </label> <label> <input type="checkbox" name=""> <i></i> <span>Lorem text is the dummy text for this site</span> </label> <label> <input type="checkbox" name=""> <i></i> <span>Lorem text is the dummy text for this site</span> </label> <label...
Read more

Wave Water

  <!DOCTYPE html> <html> <head> <title> Water </title> </head> <body> <div class =" content "> <h2> Water </h2> <h2> Water </h2> </div> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; font-family: arial; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } .content{ position: relative; } .content h2{ position: absolute; transform: translate(-50%, -50%); font-size: 8em; } .content h2:nth-child(1){ color: transparent; -webkit-text-stroke : 2px #03a9f4; } .content h2:nth-child(2){ color: #03a9f4; -webkit-text-stroke : 2px #03a9f4; animation: animate 4s ease-in-out infinite; } @keyframes animate{ 0%,100% { clip-path: polygon(0% 39%, 13% 39%, 25% 40%, 34% 41%, 46% 45%, 58% 48%, 65% 52%, 72% 56%, 83% 59%, 88% 59%, 96% 59%, ...
Read more