Skip to main content

Posts

Showing posts from August, 2020

Random Captcha Generator

 How to generate random captcha || JAVASCRIPT techinc Here, you will going to teach how to generate random captcha by javascript #CODE: <!DOCTYPE html>     <html>         <head>             <title></title>         </head>         <body>             <canvas width=150 height=70 style="border:1px solid black;"></canvas><br>             <button style="width:150px;             height:40px;             color: red;             -webkit-tap-highlight-color:rgba(0,0,0,0);" onclick="generateCaptcha()">Generate Captcha</button>             <style type="text/css">                 body{                     text-align:center;                     background-color:#00FA9A;                                             }                 canvas{                     background:white;                 }             </style>             <script type="text/javascript"> let
Post a Comment
Read more

Walking man loading animation by HTML

  THE WALKING MAN LOADING ANIMATION || FULL CODE OF HTML #CODE:                           <!DOCTYPE html> <html>     <head>         <title>Page Title</title>         <style type="text/css">             body {     margin:0px;     padding:0px;     background-color:orange; } .main{     position:relative ;     transform:translate (-50%,-50%);     top:50%;     left:10%; } .cir{     position:absolute;     height:50px;     width:50px;     top:31vh;     left:153px;     background-color:white;     border-radius:50%;     animation:up 1.5s infinite ;     transition:0.5s; } @keyframes up{    50%{         transform:translateY(10px) ;     } } .body2{     position:absolute ;     top:8vh;     left:-45px;     width:55px;     height:100px;     background-color:white;     border-radius: 700px 50px 10px 10px;     transform:skew(-5deg); } .foot1{     position:absolute ;     top:65vh;     left:90px;     width:30px;     height:15px;     background-color:white;  
Post a Comment
Read more

#MY PROFILE PAGE || #ABOUT ME PAGE

       How to design MY PROFILE page ?  #CODE :                            <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"></meta>  <title>codoblog's profile card</title> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script type="text/javascript">    </script> <style type="text/css">   *{ margin:0; padding:0; box-sizing:border-box; } body { font-family:'Montserrat',sans-serif; font-weight:300; line-height:1.2; font-size:14px; background:#fff; } main { width:100%; max-width:400px; padding:0 25px; margin:auto; } nav { position:relative; width:100%; height:56px; display:fle
Post a Comment
Read more

How to create Stopwatch by using Html and Javascript | Digital Stopwatch

How to create Stopwatch by using Html-Css-Javascript || Digital StopWatch  #CODE  :  <!DOCTYPE html> <html> <head> <title>Stopwatch</title> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style type="text/css"> body{ margin: 0;     padding: 0;     background-color: #6495ED;     box-sizing: border-box; } .con{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 5px; background: #ececec; box-shadow: 20px 20px 60px red, -20px -20px 60px #fff; height: 380px; width: 280px; } .time{ border-radius: 50%; background: #fff; box-shadow: inset 20px 20px 60px green, inset -20px -20px 60px #fff; height: 150px; width: 150px; position: absolute; margin: 60px 0 0 65px; transform: scale(1.5); } .buttons{ text-align:
Post a Comment
Read more