Raz Programming school

 How to create side navigation menu Side navigation menu is menu which placed either on the  left side of the or on the right side on the page. so today we are going to create it . How to build First create a div and inside div create ul . Now add <li> you want and inside <li> add <a> tag. Add style and you will get this. Here is the code <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > html ,  body { padding  : 0 ; margin  : 0 ; font-family : Arial, Helvetica, sans-serif; } .side-nav { position  :fixed ; display  :block; width  : 300px ; height  : 100% ; box-shadow : 0   0   8px   8px  rgba( 0 , 0 , 0 , 0.2 ); overflow-x :hidden ; } .side-nav   ul { display  :block ; padding  : 0 ; } .side-nav   ul   li { list-style-type  :none ; margin-left  : 10px ; } .side-nav   ul   li   img { position  :relative ; bottom : -5px ; width  : 20px ; height  : 20px ; padding-right  : 5px ; } .side-na

 How to create responsive form in css In this post we are going to show you how to create a responsive form with html and css. It is very easy to create and designing of responsive Form like this. In this form we have created two input field whcih is beautifully designed with css  button and a link.  It is very responsive and is very easy for everyone to create form like that.  Here is the code . <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .flow-text { font-weight  : 200 ; font-size  : 20px ; color :#222; background  :rgba( 140 , 20 , 20 , 0.1 ) ; padding : 5px ; border-radius  : 3px  ; } p { font-weight  : 250 ; font-size  : 16px ; } .input { width :auto; height : auto; padding-top :  7px ; padding-bottom :  7px ; border : 1px  solid #ddd; outline :  0 ; border : 1px  solid #ddd; transition : .5s ; border-radius :  3px ; } .input:hover { box-shadow :  0   4px   4px   2px  #1c4166; } .full { width

 Create slot  machine game using Javascript and Html In this post we will create a simple slot machine game using  javascript and Html. How it work Simple slot machine game created with javascript and html. It work base on the random number generator and We set time Interval It will give you 100 coin at the begining  At each roll it will cut 10 coin from yours coin If all the number are same then you will get 100 coin If the numbers are not same then you will get the fail message Enjoy the game rate my game out of 10. If you have any problem regarding to any thing in javascript and html  or you have some ideas then tell us in the command box. Here is the code <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .game-area  { padding  : 10px ; margin  : 5px ; background  :transparent ; box-shadow  : 0   0   8px   8px  rgba( 0 , 0 , 0 , 0.2 ); border-radius  : 10px ; } .info-box { height  : 50px ; text-align

 How to create html online Editor in blogger To put the online editor in your blog follow these step: 1.First create a page 2.Then change the compose view to html view and past the code <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .text { width  : 100% ; height  : 500px ; overflow  :scroll ; color  :#6463d7; } .iframe { width  : 100% ; height  : 500px ; overflow  :scroll ; } </ style > </ head > < body > < textarea    contenteditable = "true"   id = "div"   class = "text" ><! DOCTYPE   html > < html > < head > < title ></ title > </ head > < body > </ body > </ html ></ textarea > < button   onclick = " res(); "   class = "btn" > Result </ button > < iframe   src = ""   id = "iframe"   class = "iframe" ></ iframe >

 How to create color generator with html and javascript Color generator will generate hexadecimal code and rgb code . User can create any type of color through it. So lets begin. Here is the code < html > < head > < style   type = "text/css" > #colored { width : 300px ; height  : 100px ; border : 1px  solid #ddd ; } </ style > </ head > < body > < div   id = "colored" ></ div > < p > Red </ p > < input   oninput = " getColor() "   id = "red"   type = "range"   max = "255"   min = "0"   step = "1"   value = "30" > < p > Green </ p > < input   oninput = " getColor() " id = "green"   type = "range"   max = "255"   min = "0"   step = "1"   value = "30" > < p > Blue  </ p > < input   oninput = " getColor() " id = "blue&qu

 How to create a responsive accordion with html and css Accordions are useful when you want to toggle between hiding and showing large amount of content. We will create accordion with very simple and easy way. Here is the code <! DOCTYPE   html > < html > < head > < style > button.accordion  {      background-color : #cb4d4d;      color : #fff;      cursor : pointer;      padding :  18px ;      width :  100% ;      border : none;      text-align : left;      outline : none;      font-size :  15px ;      transition :  0.4s ; } button.accordion.active , button.accordion:hover  {      background-color : #7d1e1e; } button.accordion:after  { /* Unicode character for "plus" sign (+) is '\02795' */        content :  '\02795' ;      font-size :  13px ;      color : #777;      float : right;      margin-left :  5px ; } button.accordion.active:after  { /* Unicode character for "minus" sign (-) is '\2796' */        content :  &qu

 how to create a progress bar with html and javascript  So today in this tutorial we are going to create a responsive  progress bar with html and javascript and will add some css to look more responsive. It will show a filling bar and percentage  inside the filling bar. When we click on the download button the progress bar will start to progress. Here is the code <! DOCTYPE   html > < html > < head > < style   type = "text/css" > .progressBar   { width  : 340px ; height : 25px ; border  : 1px  solid #ddd ; border-radius  : 10px ; } .bar { width  : 0% ; height  : 25px ; background  :#d32f2f ; line-height : 25px  ; text-align  :center; color  :#fff; border-radius  : 10px  ; } .btn { width  : 100px ; height  : 40px ; border-radius  : 10px ; background  :#ddd; border  : 0 ; outline  : 0 ; } .btn:active  { box-shadow  : 0   0   8px   8px  rgba( 0 , 0 , 0 , 0.2 ); } </ style > < title ></ title > </ head > < body > < div   cl

Simple visitor counter with html and javascript This will help you to count your daily and monthly visitors. actually it is fake but it is very good to impress the visitors. if you want to add it into your blog then follow the step. 1. Open blogger dashboard and click on layout. 2.After clicking on layout , and then click on add widget. 3.then select html and javascript widget and past the following co de. Here is the code <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .box { width  : 90% ; margin  : 10px ; display  :inline-block; } .title { color  :#222 ; font-weight  :lighter; padding  : 5px  ; } .link { color  :#3764a3; font-weight  :normal; padding  : 5px  ; text-decoration  :none; } .text { padding  : 5px  ; font-size  :xx-large; font-family :Courier new,monospace; } .new { padding  : 2px   2px   2px   2px ; font-size  :smaller; line-height  : 20px ; color  :#fff; background  :#af1145; border-ra