Posts

Showing posts from March, 2018

create geolocation in html

-
<!DOCTYPE html> <html>     <head>     <title>geolocation</title>     </head>         <body>     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var x=document.getElementById("mapp"); function getLocation()   {   if (navigator.geolocation)     {     navigator.geolocation.getCurrentPosition(showPosition,showError);     }   else { x.innerHTML="Geolocation is not supported by this browser."; }   } function showPosition(position)   {   lat=position.coords.latitude;   lon=position.coords.longitude;   latlon=new google.maps.LatLng(lat, lon)   display=document.getElementById('display')   displa...
Post a Comment
Read more

animated progress bar

-
Image
            ---------- Index.html ---------- <!DOCTYPE html> <html> <head> <title>Animated Progress Bar</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="percentcount" class="percent-count"> </div> <div class="progress-bar"> <div class="progress" id="progress"> </div> </div> </body> <script type="text/javascript" src="script.js"></script> </html>             ---------- style.css ---------- *{ box-sizing: border-box; } body{ margin: 0; padding: 0; background: black; } .percent-count{ width: 450px; height: 50px; margin: 100px auto; font-size: 50px; text-align: center; color: white; } .percent-bar{ width: 506px; height: 26px; background-color: #bbb; border-radius: 13px; ...
Post a Comment
Read more

Image Hover WIth style effect

-
Image
     In this tutorials i am create image hover effect to black to original effect turn . You can add this code from your website to effect from the image into your listed company and partner name and their images . Try your code and enjoy . learn something new. <!DOCTYPE html> <html> <head> <title>Image hover effect</title> <style type="text/css"> img {   -webkit-filter: grayscale(100%);   filter: grayscale(100%); } img:hover {   transition: filter .5s ease-in-out;   -webkit-filter: grayscale(0%);   filter: grayscale(0%); } </style> </head> <body> <img src="1.jpg"> </body> </html>
Post a Comment
Read more