Posts

Neon Light

Image
  <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div class =" box "> <div class =" lightbar "> </div> <div class =" topLayer "> </div> <h2> Neon Text </h2> </div> </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-color: #000; overflow: hidden; } .box{ position: relative; width: 600px; height: 300px; display: flex; justify-content: center; align-items: center; } .box h2{ color: #fff; font-size: 5em; font-weight: 600; letter-spacing: 0.1em; text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff, 0 0 40px #00b3ff, 0 0 80px #00b3ff, 0 0 120px #00b3ff; } .lightbar{ position: absolute; top: 0p...

calender White color Code

 ::-webkit-calendar-picker-indicator { filter: invert(1);}

Jquery DropDown

Image
  Line wrap <!DOCTYPE html> <html lang =" en "> <head> <meta charset =" utf-8 "> <title> Dropdown Menu </title> <link href =" https://fonts.googleapis.com/css?family=Open+Sans " rel =" stylesheet "> <style> body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; } nav { margin: 100px 255px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { float: left; width: 160px; height: 40px; background-color: midnightblue; line-height: 40px; text-align: center; position: relative; } nav li a { display: block; width: 100%; height: 100%; text-decoration: none; ...

Fonts Large

Image
  Line wrap <!DOCTYPE html> <html lang =" eng "> <head> <title> </title> </head> <body> <div class =" container "> <div class =" buttons "> <span class =" btn active " onclick =" document.getElementById('text').style.fontSize = '1em' "> A </span> <span class =" btn " onclick =" document.getElementById('text').style.fontSize = '1.25em' "> A </span> <span class =" btn " onclick =" document.getElementById('text').style.fontSize = '1.75em' "> A </span> </div> <div class =" content " id =" text "> <h2> Change font size </h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus dolor dolore quibusdam nulla odit illo expedita fugiat corrupti, accusamus sit, animi amet ...

On Click Parent

  onClick="parent.location='holiday-packages.html'"

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%, ...