Mugen Application

CSS Tooltips
Tooltip

 URL to QR Code Generator



 



 
 






Copy the Code and paste it to your website, forum, blog anywhere


 

#qr_codegen_box{
 background: rgb(225,90,0);
 position: relative;
 border: 1px solid rgb(205,70,0);
 padding: 3px;
 display: block;
 margin: 0 auto;
 width: 100%;
 max-width: 650px;
 border-radius: 2px;
}
#qr_codegen_box > div > img{
 width: 100%;
 max-width: 30px;
 position: relative;
}
#box_title{
 background: rgb(225,90,0);
 padding: 20px 10px;
 color: rgb(85,30,0);
 font-family:Roboto,verdana,arial;
 font-size: 5vmin;
 font-weight: 600;
 text-shadow: 0 -1px 0 rgba(0,0,0,1);
}
#input_field{
 width: 90%;
 margin: 2em auto;
}
#input_field > input[type=text]{
 padding: 10px;
 border: 0px;
 display: block;
 width: 100% ;
 font: 5vmin Roboto,verdana,helvetica,arial;
}
#submit_btn{
 width: -webkit-fit-content;
 width: -moz-fit-content;
 display: block;
 margin: 2em auto;
}
#submit_btn > input[type=submit],#submit_btn > input[type=reset]{
 background: transparent;
 border: 1px solid rgb(255,255,255);
 padding: 15px 10px;
 border-radius: 5px;
 font: 1.5em Roboto,verdana,arial;
 color: white;
 cursor: pointer;
 transition: all 0.3s ease-in-out;
}
#submit_btn > input[type=submit]:hover,#submit_btn > input[type=reset]:hover{
 background: white;
 color: rgb(225,90,0);
}
#response{
 position: relative;
 display: block;
 width: 300px;
 margin: 0 auto 10px;
}
#qr_code_display{
 display: none;
}
#code_container{
 position: relative;
 display:none;
 width: 90%;
 margin: 0 auto 20px;
 border-top: 1px solid #bbb;
 background: #ececec;
 padding: 5px;
}
#code_container > p{
 font: 14px verdana,helvetica,arial;
 color: rgb(100,100,100);
 margin: 0 auto 10px;
 padding: 0;
}
#embed_code{
 display: ;
 border: 1px solid #ccc;
 width: 100%;
 min-height: 100px;
 max-height: 400px;
 padding: 5px;
 font: 16px verdana,helvetica,arial;
}

$(function(){
 $("#btn").click(function() {
 var url = $("#text_feild").val();
 var encodeURL = encodeURIComponent(url);
 var text = "";
 $("#qr_code_display").fadeIn(1000).html(text);
 $("#code_container").fadeIn(1000);
 $("#embed_code").text(text);
 $("#reset").fadeIn(1000);
 $("#input_field").hide();
 $("input[type=submit]").hide();
 });
 $("#reset").click(function(){
 $("#qr_code_display").hide();
 $("#code_container").hide();
 $("#reset").hide();
 $("#input_field").show();
 $("input[type=submit]").show();
 });
});