Posts

Showing posts from November, 2019

Light Box

Image
<!DOCTYPE html> <html> <head> <title> Jquery Light Box </title> <!-- <script type="text/javascript" src="../jquery-lib.js"></script> --> <script src =" https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "> </script> <style type =" text/css "> .center{ margin: 0 auto; } .container{ width: 100%; height: 600px; margin: 0 auto; background-image: url("images/backimg5.jpg"); } #big-photo{ width: 650px; height: 500px; margin-top: 40px; float: left; margin-left: 100px; border:10px solid white; } .bigphoto1{ width: 600px; height: 500px; border:10px solid white; margin-top: 40px; float: left; background-color: red; z-index: 10; } #thumbs{ width: 250px; height: 500px; border: 10px solid white; float: right; margin-top:...
Post a Comment
Read more

Skill Bar

Image
<!DOCTYPE HTML> <html> <head> <meta http-equiv =" Content-Type " content =" text/html; charset=utf-8 "> <title> CSS3 Skill Bar Animation </title> <style type =" text/css "> body { background-color: gray; margin: 0; padding: 0; font: 12px normal Verdana, Arial, Helvetica, sans-serif; height: 100%; color:#fff; } * {margin: 0; padding: 0; outline: none;} .container { width: 960px; margin: 0 auto; overflow: hidden; } .content{ width:278px; margin:0; position:relative; float:left; font-size:12px; line-height:2em; padding:30px 0 30px; } .col { width:280px; } #skill { list-style:none; padding-top:30px; } #skill li { margin-bottom:70px; background:#000; height:20px; border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; } #skill li em { position:relative; top:-30px; } .expand { ...
Post a Comment
Read more

RIght Click

<body class="tg-home" onLoad="disableClick()" oncontextmenu="return false"> //hide code// document.onkeydown = function(e) {     if(e.keyCode == 123) {      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){      return false;     }       }  ///F12//  //------------------------------ function unloadJS(scriptName) {   var head = document.getElementsByTagName('head').item(0);   var js = document.g...
Post a Comment
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...
Post a Comment
Read more

Window Hover

Image
<!DOCTYPE html> <html> <head> <title> web </title> <link rel =" stylesheet " type =" text/css " href =" main-css/varun.css "> </head> <body> <div class =" wrapper "> <div class =" image-box "> <img src =" image/image.jpg " alt =" image "> <div class =" opacity-box1 "> </div> <div class =" opacity-box "> </div> </div> </div> </body> </html> <style type =" text/css "> .body{ margin: 0; padding: 0; } .wrapper{ width: 1003px; height: 500px; background-color: #ccc; } .image-box{ width: 200px; height: 200px; background-color: #f0f; float: left; margin: 50px 0px 0px 300px; position: relative; overflow: hidden; } .opacity-box1{ width: 100px; height: 200px; background-color: #000; opaci...
Post a Comment
Read more

Merge-section

Image
<!DOCTYPE html> <html> <head> <title> Hover Effects </title> </head> <body> <div id =" tours " class =" pt-5 "> <div class =" clearfix "> <div class =" tour1 clearfix "> <a href =" # " class =" clearfix "> <figure> <img src ="" alt ="" class =" img-responsive "> </figure> <div class =" caption "> <div class =" txt1 "> Rajasthan , India </div> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard. </p> </div> </a> </div> <div class =" tour1 clearfix "> <a href =" # " class =" clearfix "> ...
Post a Comment
Read more

Hover Effects

Image
<!DOCTYPE html> <html> <head> <title> Effects </title> <link rel =" stylesheet " href =" https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css "> </head> <body> <section id =" homeservices " class =" sectionhome fade-up animated fadeInUp "> <div class =" container clearfix "> <div class =" row "> <div class =" grid_4 homeservice "> <div class =" imgserviceopen "> <img alt ="" src ="" class =" circle "> </div> <div class =" imgservice "> <div class =" percentagehome easyPieChart " data-percent =" 90 " style =" width: 140px; height: 140px; line-height: 140px; "> <img alt ="" src =...
Post a Comment
Read more

Top

Image
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id =" top "> <a href =" # "> <img src =" top.png "> </a> </div> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; scroll-behavior: smooth; } body{ height: 2000px; } #top{ position: fixed;bottom: 80px; right: 40px; width: 180px; height: 180px; } </style> <script type =" text/javascript "> var scroll = document.getElementById("top") window.addEventListener("scroll", function () { scroll.style.transform = "rotate("+window.pageYOffset+"deg)"; }) </script>
Post a Comment
Read more