tag:blogger.com,1999:blog-41454390218283870362024-03-14T00:10:36.848-07:00ElearnSchoolelearnschoolhttp://www.blogger.com/profile/18092493680700206919noreply@blogger.comBlogger7125tag:blogger.com,1999:blog-4145439021828387036.post-66440131530037887782020-06-10T03:01:00.000-07:002020-06-10T03:01:33.707-07:00How to make Responsive digital Form with HTML and CSSCreate Digital Form for yours website in responsive way. HTML syntax and full CSS Code are given below .with help of this you can easily make responsive Digital Form for any purpouse<div><br /></div><div><u><font color="#d52c1f">HTML Syntax</font></u></div><div><div style="color: #d52c1f; text-decoration-line: underline;"><br /></div><div><html></div><div><head></div><div><title> Login Form Template</title></div><div><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></div><div><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></div><div><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </div><div><meta name="keywords" content="Responsive Form Template" /></div><div><link href=''></div><div><link href=''></div><div><script type="text/javascript" src=" Copy paste source of .jquery file"></script></div><div><link href="css/style.css" rel="stylesheet" type="text/css" media="all" /></div><div></head></div><div><body></div><div> <div class="content"></div><div><span style="white-space: pre;"> </span><h1>Digital Login Form Widget</h1></div><div><span style="white-space: pre;"> </span><div class="main vlcone"></div><div><span style="white-space: pre;"> </span><div class="sin-close"> </div></div><div><span style="white-space: pre;"> </span><div class="rin-left"></div><div><span style="white-space: pre;"> </span><div class="responsive_form"></div><div><span style="white-space: pre;"> </span><h2>Login Here</h2></div><div><span style="white-space: pre;"> </span><form></div><div><span style="white-space: pre;"> </span><input class="logo" type="text" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Username';}" required=""></div><div><span style="white-space: pre;"> </span><input class="key" type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" required=""></div><div><span style="white-space: pre;"> </span><input type="submit" value="Login"></div><div><span style="white-space: pre;"> </span></form></div><div><span style="white-space: pre;"> </span></div></div><div><span style="white-space: pre;"> </span><a href="#">Forgot Password</a></div><div><span style="white-space: pre;"> </span><a href="#" class="login-right">Register</a></div><div><span style="white-space: pre;"> </span><div class="clear"></div></div><div><span style="white-space: pre;"> </span></div></div><div><span style="white-space: pre;"> </span><div class="rin-right"></div><div><span style="white-space: pre;"> </span><h3>DIGITAL PRODUCTS <span>MARKET PLACE</span></h3></div><div><span style="white-space: pre;"> </span><p>A perfect place for buy or sell goods online.</p></div><div><span style="white-space: pre;"> </span></div></div><div><span style="white-space: pre;"> </span><div class="clear"></div></div><div><span style="white-space: pre;"> </span></div><div></body></div><div></html></div><div><br /></div><div><u><font color="#b51200">CSS Code</font></u></div><div><u><font color="#b51200"><br /></font></u></div><div><font><div><br /></div><div><br /></div><div>body{</div><div>padding:0;</div><div>margin:0;</div><div>background:#d24663;</div><div><br /></div><div>font-family: 'Lato', sans-serif !important;</div><div>}</div><div><br /></div><div>h1,h2,h3,h4,h5,h6{</div><div><span style="white-space: pre;"> </span>font-family: 'Salsa', cursive;</div><div><span style="white-space: pre;"> </span>margin:0;<span style="white-space: pre;"> </span> </div><div>}<span style="white-space: pre;"> </span></div><div>p{</div><div><span style="white-space: pre;"> </span>margin:0;</div><div>}</div><div>ul{</div><div><span style="white-space: pre;"> </span>margin:0;</div><div><span style="white-space: pre;"> </span>padding:0;</div><div>}</div><div>label{</div><div><span style="white-space: pre;"> </span>margin:0;</div><div>}</div><div>/*-- main --*/</div><div>.content{</div><div><span style="white-space: pre;"> </span>padding:80px 0;</div><div>}</div><div>.content h1{</div><div><span style="white-space: pre;"> </span>margin-bottom:50px;</div><div><span style="white-space: pre;"> </span>text-align:center;</div><div><span style="white-space: pre;"> </span>font-size:45px;</div><div><span style="white-space: pre;"> </span>font-family: 'Salsa', cursive;</div><div><span style="white-space: pre;"> </span>color:#fff;<span style="white-space: pre;"> </span></div><div>}</div><div>.main {</div><div> width: 60%;</div><div> margin: 0 auto 0 auto;</div><div><span style="white-space: pre;"> </span>background:url(copy paste url of images) no-repeat 0px 0px;</div><div><span style="white-space: pre;"> </span>background-size:cover;</div><div><span style="white-space: pre;"> </span>-webkit-background-size: cover;</div><div><span style="white-space: pre;"> </span>-o-background-size: cover;</div><div><span style="white-space: pre;"> </span>-ms-background-size: cover;</div><div><span style="white-space: pre;"> </span>-moz-background-size: cover;</div><div><span style="white-space: pre;"> </span>min-height:416px;</div><div> position: relative;<span style="white-space: pre;"> </span></div><div> box-shadow: 9px 10px 9px #5A1120;</div><div> -o-box-shadow: 9px 10px 9px #5A1120;</div><div> -moz-box-shadow: 9px 10px 9px #5A1120;</div><div> -webkit-box-shadow: 9px 10px 9px #5A1120;</div><div>}</div><div>.rin-left {</div><div><span style="white-space: pre;"> </span>float:left;</div><div> width: 35%;</div><div> background: rgba(1, 10, 19, 0.69);</div><div> padding: 3em 3em 0;</div><div> height: 368px;</div><div>}</div><div>.rin-right{</div><div><span style="white-space: pre;"> </span>float:left;</div><div><span style="white-space: pre;"> </span>text-align:center;</div><div><span style="white-space: pre;"> </span>width: 53%;</div><div>}</div><div>.rin-right h3 {</div><div> color: #fdb515;</div><div> font-size: 28px;</div><div> margin-top: 70px;</div><div>}</div><div>.rin-right h3 span{</div><div><span style="white-space: pre;"> </span>display:block;</div><div><span style="white-space: pre;"> </span>margin-top:8px;</div><div>}</div><div>.responsive_form form input[type="text"] ,.responsive_form form input[type="password"]{</div><div> width: 85%;</div><div> padding: 0.7em 2.7em 0.7em 0.7em;</div><div> font-size: 14px;</div><div> border: none;</div><div> border-bottom: 2px solid #e6e6e6;</div><div> outline: none;</div><div> color: #ccc;</div><div> margin-bottom: 40px;</div><div>}</div><div>.responsive_form form input.logo {</div><div> background: url(../images/logo.png) no-repeat 97% center #fff;</div><div> background-size: 4.5% !important;</div><div>}</div><div>.responsive_form form input.key {</div><div> background: url(../images/key.png) no-repeat 97% center #fff;</div><div> background-size: 4.5% !important;</div><div>}</div><div>.responsive_form form input[type="submit"] {</div><div> background: #fdb515;</div><div> color: #FFFFFF;</div><div> text-align: center;</div><div> padding: 14px 0;</div><div> border: none;</div><div> font-size: 16px;</div><div> outline: none;</div><div> width: 37%;</div><div> cursor: pointer;</div><div> border-radius: 50px;</div><div> margin-bottom:30px;</div><div><span style="white-space: pre;"> </span>transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-webkit-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-moz-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-o-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-ms-transition:0.5s all;</div><div>}</div><div>.responsive_form form input[type="submit"]:hover{</div><div><span style="white-space: pre;"> </span>background:#d24663;</div><div><span style="white-space: pre;"> </span>transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-webkit-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-moz-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-o-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-ms-transition:0.5s all;</div><div>}</div><div>.rin-left a {</div><div> text-decoration: none;</div><div> color: #fdb515;</div><div> font-size: 14px;</div><div><span style="white-space: pre;"> </span>transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-webkit-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-moz-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-o-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-ms-transition:0.5s all;</div><div>}</div><div>.rin-left a:hover{</div><div><span style="white-space: pre;"> </span>color:#fff;</div><div><span style="white-space: pre;"> </span>transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-webkit-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-moz-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-o-transition:0.5s all;</div><div><span style="white-space: pre;"> </span>-ms-transition:0.5s all;</div><div>}</div><div>.login-right{</div><div><span style="white-space: pre;"> </span>float:right;</div><div>}</div><div>.responsive_form h2 {</div><div> color: #fdb515;</div><div> font-size: 30px;</div><div> margin-bottom: 30px;</div><div>}</div><div><br /></div><div>.rin-right p {</div><div> font-size:22px;</div><div> margin-top: 8em;</div><div> color: #fdb515;</div><div>}</div><div>.sin-close,.sin-close1,.sin-close2,.sin-close4,.sin-close6{</div><div><span style="white-space: pre;"> </span>background: url('copy paste url of images') no-repeat 0px 0px;</div><div><span style="white-space: pre;"> </span>cursor: pointer;</div><div> height: 22px;</div><div> width: 22px;</div><div> position: absolute;</div><div> right: 7px;</div><div> top: 11px;</div><div><span style="white-space: pre;"> </span>-webkit-transition: color 0.2s ease-in-out;</div><div><span style="white-space: pre;"> </span>-moz-transition: color 0.2s ease-in-out;</div><div><span style="white-space: pre;"> </span>-o-transition: color 0.2s ease-in-out;</div><div><span style="white-space: pre;"> </span>transition: color 0.2s ease-in-out;</div><div><span style="white-space: pre;"> </span>z-index: 1;</div><div>}</div><div>/*-- responsive media queries --*/</div><div>@media (max-width: 1440px){</div><div><span style="white-space: pre;"> </span></div><div>}</div><div>@media (max-width: 1366px){</div><div><span style="white-space: pre;"> </span>.rin-right p {</div><div><span style="white-space: pre;"> </span>font-size: 19px;</div><div><span style="white-space: pre;"> </span>}<span style="white-space: pre;"> </span></div><div>}</div><div>@media (max-width: 1280px){</div><div><span style="white-space: pre;"> </span>.rin-left {</div><div><span style="white-space: pre;"> </span>width: 34%;</div><div><span style="white-space: pre;"> </span>}<span style="white-space: pre;"> </span></div><div>}</div><div>@media (max-width: 1080px){</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>width: 69%;</div><div><span style="white-space: pre;"> </span>}<span style="white-space: pre;"> </span></div><div>}</div><div>@media (max-width: 1024px){</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>width: 74%;</div><div><span style="white-space: pre;"> </span>}<span style="white-space: pre;"> </span></div><div>}</div><div>@media (max-width: 991px){</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>width: 76%;</div><div><span style="white-space: pre;"> </span>}<span style="white-space: pre;"> </span></div><div>}</div><div>@media (max-width: 800px){</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>width: 86%;</div><div><span style="white-space: pre;"> </span>}<span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>.rin-left {</div><div><span style="white-space: pre;"> </span>width: 37%;</div><div><span style="white-space: pre;"> </span>padding: 2em 2em 0;</div><div><span style="white-space: pre;"> </span>height: 368px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>min-height: 400px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.content h1 {</div><div><span style="white-space: pre;"> </span>font-size: 38px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="text"], .responsive_form form input[type="password"] {</div><div> width: 80%;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="submit"] {</div><div> padding: 10px 0;</div><div> font-size: 16px;</div><div> outline: none;</div><div> width: 42%;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-right p {</div><div><span style="white-space: pre;"> </span>font-size: 17px;</div><div><span style="white-space: pre;"> </span>}</div><div>}</div><div>@media (max-width: 768px){</div><div><span style="white-space: pre;"> </span>.content {</div><div><span style="white-space: pre;"> </span>padding: 150px 0;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.content h1 {</div><div><span style="white-space: pre;"> </span>margin-bottom: 70px;</div><div><span style="white-space: pre;"> </span>}<span style="white-space: pre;"> </span></div><div>}</div><div>@media (max-width: 736px){</div><div><span style="white-space: pre;"> </span>.content {</div><div><span style="white-space: pre;"> </span>padding: 100px 0;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-right {</div><div><span style="white-space: pre;"> </span>width: 52%;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-right p {</div><div><span style="white-space: pre;"> </span>font-size: 16px;</div><div><span style="white-space: pre;"> </span>margin-top: 11em;</div><div><span style="white-space: pre;"> </span>}</div><div>}</div><div>@media (max-width: 667px){</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>width: 90%;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="submit"] {</div><div><span style="white-space: pre;"> </span>padding: 10px 0;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.responsive_form form input.logo,.responsive_form form input.key {</div><div><span style="white-space: pre;"> </span>background-size: 5.5% !important;</div><div><span style="white-space: pre;"> </span>}</div><div>}</div><div>@media (max-width: 640px){</div><div><span style="white-space: pre;"> </span>.content {</div><div><span style="white-space: pre;"> </span>padding: 65px 0;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.content h1 {</div><div><span style="white-space: pre;"> </span>font-size: 32px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-right h3 {</div><div><span style="white-space: pre;"> </span>font-size: 22px;</div><div><span style="white-space: pre;"> </span>}<span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>.responsive_form h2 {</div><div><span style="white-space: pre;"> </span>font-size: 24px;</div><div><span style="white-space: pre;"> </span>margin-bottom: 15px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.content h1 {</div><div><span style="white-space: pre;"> </span>margin-bottom: 50px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-left {</div><div><span style="white-space: pre;"> </span>width: 40%;</div><div><span style="white-space: pre;"> </span>padding: 1em 1em 0;</div><div><span style="white-space: pre;"> </span>height: 310px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-right p {</div><div><span style="white-space: pre;"> </span>font-size: 17px;</div><div><span style="white-space: pre;"> </span>margin-top: 7em;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>min-height: 326px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.responsive_form form input.logo, .responsive_form form input.key {</div><div><span style="white-space: pre;"> </span>background-size: 6.5% !important;</div><div><span style="white-space: pre;"> </span>}</div><div>}</div><div>@media (max-width: 600px){</div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="text"], .responsive_form form input[type="password"] {</div><div> width: 73%;</div><div>}</div><div>}</div><div>@media (max-width: 568px){</div><div><span style="white-space: pre;"> </span></div><div>}</div><div>@media (max-width: 480px){</div><div><span style="white-space: pre;"> </span>.content h1 {</div><div><span style="white-space: pre;"> </span>font-size: 29px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-right p {</div><div><span style="white-space: pre;"> </span>font-size: 14px;</div><div><span style="white-space: pre;"> </span>margin-top: 9em;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-right h3 {</div><div><span style="white-space: pre;"> </span>font-size: 19px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="submit"] {</div><div><span style="white-space: pre;"> </span>width: 46%;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>p.footer {</div><div><span style="white-space: pre;"> </span>margin-top: 50px;</div><div><span style="white-space: pre;"> </span>font-size: 13px;</div><div><span style="white-space: pre;"> </span>}<span style="white-space: pre;"> </span></div><div>}</div><div>@media (max-width: 414px){</div><div><span style="white-space: pre;"> </span>.rin-left {</div><div><span style="white-space: pre;"> </span>width: 91%;</div><div><span style="white-space: pre;"> </span>}<span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="submit"] {</div><div><span style="white-space: pre;"> </span>width: 32%;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-right {</div><div><span style="white-space: pre;"> </span>width: 100%;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-right h3 {</div><div><span style="white-space: pre;"> </span>margin-top: 35px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-right p {</div><div><span style="white-space: pre;"> </span>margin-top: 4em;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>min-height: 526px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="text"], .responsive_form form input[type="password"] {</div><div><span style="white-space: pre;"> </span>margin-bottom: 30px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>p.footer {</div><div><span style="white-space: pre;"> </span>line-height: 1.8em;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-left {</div><div><span style="white-space: pre;"> </span>height: 290px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.content h1 {</div><div><span style="white-space: pre;"> </span>font-size: 25px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>min-height: 510px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>background: url('copy paste url of images') no-repeat -473px 3px;</div><div><span style="white-space: pre;"> </span>background-size: 289% !important;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="text"], .responsive_form form input[type="password"] {</div><div><span style="white-space: pre;"> </span>width: 85%;</div><div><span style="white-space: pre;"> </span>}</div><div>}</div><div>@media (max-width: 384px){</div><div><span style="white-space: pre;"> </span>p.footer {</div><div><span style="white-space: pre;"> </span>line-height: 1.8em;</div><div><span style="white-space: pre;"> </span>width: 90%;</div><div><span style="white-space: pre;"> </span>margin: 50px auto 0;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>min-height: 505px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>background: url('copy paste url of images') no-repeat -473px 55px;</div><div><span style="white-space: pre;"> </span>background-size: 289% !important;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="text"], .responsive_form form input[type="password"] {</div><div><span style="white-space: pre;"> </span>width: 84%;</div><div><span style="white-space: pre;"> </span>}</div><div>}</div><div>@media (max-width: 375px){</div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="text"], .responsive_form form input[type="password"] {</div><div><span style="white-space: pre;"> </span>width: 83%;</div><div><span style="white-space: pre;"> </span>}</div><div>}</div><div>@media (max-width: 320px){</div><div><span style="white-space: pre;"> </span>.content h1 {</div><div><span style="white-space: pre;"> </span>font-size: 22px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.responsive_form h2 {</div><div><span style="white-space: pre;"> </span>font-size: 22px;</div><div><span style="white-space: pre;"> </span>margin-bottom: 22px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="submit"] {</div><div><span style="white-space: pre;"> </span>padding: 8px 0;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.rin-left {</div><div><span style="white-space: pre;"> </span>width: 88.5%;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.content h1 {</div><div><span style="white-space: pre;"> </span>margin-bottom: 30px;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.content {</div><div><span style="white-space: pre;"> </span>padding: 50px 0;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>p.footer {</div><div><span style="white-space: pre;"> </span>margin: 40px auto 0;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>.main {</div><div><span style="white-space: pre;"> </span>background: url('copy paste url of images') no-repeat -359px 140px;</div><div><span style="white-space: pre;"> </span>background-size: 289% !important;</div><div><span style="white-space: pre;"> </span>}<span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>.responsive_form form input[type="text"], .responsive_form form input[type="password"] {</div><div><span style="white-space: pre;"> </span>width: 80%;</div><div><span style="white-space: pre;"> </span>}</div><div>}</div><div style="color: #b51200; text-decoration-line: underline;"><br /></div><div style="color: #b51200; text-decoration-line: underline;">Create Your Own Responsive Form In Few Minutes</div></font></div><div style="color: #d52c1f; text-decoration-line: underline;"><br /></div></div>elearnschoolhttp://www.blogger.com/profile/18092493680700206919noreply@blogger.com0tag:blogger.com,1999:blog-4145439021828387036.post-40786153072411955192016-04-19T02:38:00.002-07:002016-04-19T02:38:22.911-07:00What is Android ? <div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
Android is an open source and Linux-based Operating System for cellular telephones, for instance, advanced mobile phones and tablet PCs. Android was delivered by the Open Handset Alliance, drove by Google, and different associations.<br />
<br />
Android offers a brought together way to deal with application improvement for cell phones which implies designers require create for Android, and their applications ought to have the capacity to keep running on various gadgets fueled by Android.<br />
<br />
The central beta type of the Android Software Development Kit (SDK) was discharged by Google in 2007 where as the fundamental business adjustment, Android 1.0, was discharged in September 2008.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPN1TJztEi8f6TUIUMqLIVlNSW9tbCkH-lqPASt2089XlIkZuqd7JaBRVm5dySwFTd_wMnVO38_ZwuvmZncRBf6gnuAZZARAUCLlxLxa0_moxjsfrz-S4ccF1r04grae0nml5gRlD5ro/s1600/6gMRtQyY.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPN1TJztEi8f6TUIUMqLIVlNSW9tbCkH-lqPASt2089XlIkZuqd7JaBRVm5dySwFTd_wMnVO38_ZwuvmZncRBf6gnuAZZARAUCLlxLxa0_moxjsfrz-S4ccF1r04grae0nml5gRlD5ro/s320/6gMRtQyY.jpg" width="320" /></a></div>
<br />
On June 27, 2012, at the Google I/O gathering, Google proclaimed the accompanying Android interpretation, 4.1 Jelly Bean. Jam Bean is an incremental redesign, with the fundamental purpose of upgrading the customer interface, both<br />
to the extent handiness and execution.</div>
elearnschoolhttp://www.blogger.com/profile/18092493680700206919noreply@blogger.com0tag:blogger.com,1999:blog-4145439021828387036.post-63800011724786666022016-04-14T02:46:00.000-07:002016-04-14T02:46:52.551-07:00JavaScript Code For Disable Right Click On Web Page<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<br /></div>
<div>
<br /></div>
<div>
<pre style="background-color: #eeeeee; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; font-size: 13px; max-height: 600px; overflow: auto; padding: 5px; white-space: pre-wrap; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; margin: 0px; padding: 0px; white-space: inherit;"><span style="border: 0px; color: #6b291b; margin: 0px; padding: 0px;"><script</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;"> </span><span style="border: 0px; color: #e64320; margin: 0px; padding: 0px;">language</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">=</span><span style="border: 0px; color: #0f74bd; margin: 0px; padding: 0px;">"javascript"</span><span style="border: 0px; color: #6b291b; margin: 0px; padding: 0px;">></span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">
document</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">.</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">onmousedown</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">=</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">disablecl<wbr></wbr>ick</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">;</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">
status</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">=</span><span style="border: 0px; color: #6b291b; margin: 0px; padding: 0px;">"Right Click Disabled"</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">;</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">
</span><span style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">function</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;"> disableclick</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">(</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">event</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">)</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">
</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">{</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">
</span><span style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">(</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">event</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">.</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">button</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">==</span><span style="border: 0px; color: #6b291b; margin: 0px; padding: 0px;">2</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">)</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">
</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">{</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">
alert</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">(</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">status</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">);</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">
</span><span style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">return</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;"> </span><span style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">false</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">;</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">
</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">}</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">
</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">}</span><span style="border: 0px; color: #2e3133; margin: 0px; padding: 0px;">
</span><span style="border: 0px; color: #6b291b; margin: 0px; padding: 0px;"></script></span></code></pre>
<pre style="background-color: #eeeeee; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; font-size: 13px; max-height: 600px; overflow: auto; padding: 5px; white-space: pre-wrap; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; margin: 0px; padding: 0px; white-space: inherit;"><span style="border: 0px; color: #6b291b; margin: 0px; padding: 0px;">
</span></code></pre>
<pre style="background-color: #eeeeee; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; font-size: 13px; max-height: 600px; overflow: auto; padding: 5px; white-space: pre-wrap; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; margin: 0px; padding: 0px; white-space: inherit;"><span style="border: 0px; color: #6b291b; margin: 0px; padding: 0px;">
</span></code></pre>
</div>
</div>
elearnschoolhttp://www.blogger.com/profile/18092493680700206919noreply@blogger.com0tag:blogger.com,1999:blog-4145439021828387036.post-50934377705781481562016-03-17T23:33:00.001-07:002016-03-17T23:51:13.561-07:00Expandable Menu with JQuery<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
Make attractive <b>Expandable Menu</b>:</div>
<div class="MsoNormal">
<i><u><br /></u></i></div>
<div class="MsoNormal">
<span style="background-color: #274e13;"><i><u style="background-color: #274e13;"><span style="font-size: large;"><span style="background-color: #274e13;"><span style="color: white;">(menu.html):</span>-</span></span></u></i></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<ul id="menu"></div>
<div class="MsoNormal">
<li><a href="#">What's new?</a></div>
<div class="MsoNormal">
<ul class="active"></div>
<div class="MsoNormal">
<li><a href="#">Weekly
specials</a></li></div>
<div class="MsoNormal">
<li><a href="#">Last night's
pics!</a></li></div>
<div class="MsoNormal">
<li><a href="#">Users'
comments</a></li></div>
<div class="MsoNormal">
</ul></div>
<div class="MsoNormal">
</li></div>
<div class="MsoNormal">
<li><a href="#">Member
extras</a></div>
<div class="MsoNormal">
<ul></div>
<div class="MsoNormal">
<li><a href="#">Premium
Celebrities</a></li></div>
<div class="MsoNormal">
<li><a href="#">24-hour
Surveillance</a></li></div>
<div class="MsoNormal">
<i><u style="background-color: red;"><br /></u></i></div>
<div class="MsoNormal">
<i><u style="background-color: red;"><span style="background-color: #274e13; color: white; font-size: large;">(menu.css):-</span></u></i></div>
<div class="MsoNormal">
<i><u style="background-color: red;"><span style="font-size: large;"><br /></span></u></i></div>
<div class="MsoNormal">
#menu, #menu ul {</div>
<div class="MsoNormal">
list-style-type: none;</div>
<div class="MsoNormal">
padding: 0;</div>
<div class="MsoNormal">
margin: 0;</div>
<div class="MsoNormal">
}</div>
<div class="MsoNormal">
#menu li {</div>
<div class="MsoNormal">
cursor: pointer;</div>
<div class="MsoNormal">
background: #94C5EB;</div>
<div class="MsoNormal">
border-bottom: 1px solid #444;</div>
<div class="MsoNormal">
}</div>
<div class="MsoNormal">
#menu li a { text-decoration: none; }</div>
<div class="MsoNormal">
#menu > li > a {</div>
<div class="MsoNormal">
padding: 2px 10px;</div>
<div class="MsoNormal">
font-weight: bold;</div>
<div class="MsoNormal">
}</div>
<div class="MsoNormal">
#menu li li {</div>
<div class="MsoNormal">
cursor: auto;</div>
<div class="MsoNormal">
border: 0;</div>
<div class="MsoNormal">
padding: 0 14px;</div>
<div class="MsoNormal">
background-color: #fff;</div>
<br />
<div class="MsoNormal">
}</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<i><u style="background-color: red;"><span style="background-color: #274e13; color: white; font-size: large;">(menu.js):-</span></u></i></div>
<div class="MsoNormal">
<i><u style="background-color: red;"><span style="font-size: large;"><br /></span></u></i></div>
<div class="MsoNormal">
$('#menu > li > ul')</div>
<div class="MsoNormal">
.hide()</div>
<div class="MsoNormal">
.click(function(e) {</div>
<div class="MsoNormal">
e.stopPropagation();</div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
});</div>
</div>
elearnschoolhttp://www.blogger.com/profile/18092493680700206919noreply@blogger.com0tag:blogger.com,1999:blog-4145439021828387036.post-34800306598805408442016-03-15T23:17:00.000-07:002016-03-15T23:17:51.404-07:00Advantage of CSS<div dir="ltr" style="text-align: left;" trbidi="on">
CSS spares time - You can compose CSS once and after that reuse same sheet in various HTML<br />
<br />
pages. You can characterize a style for every HTML component and apply it to the same number of Web<br />
<br />
pages as you need.</div>
elearnschoolhttp://www.blogger.com/profile/18092493680700206919noreply@blogger.com0tag:blogger.com,1999:blog-4145439021828387036.post-64908661452895670792016-03-01T23:01:00.002-08:002016-03-01T23:01:08.967-08:00Expression And Statement In JavaScript<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
Expressions are phrases that make a worth. JavaScript code
is completed more often than not of expressions in various forms.</div>
<div class="MsoNormal">
Statements are phrase
that don’t generate a worth but as an alternative have some class of side-effect.
Examples of side-effects consist of storing variables in recollection and
jumping to a unlike part of the script. Statements often merge keywords such as
variables (var) if or while with one or more expressions so that the side-effects
have standards to effort through. Firebug makes it easy to distinguish among
expressions and statements. When you enter an expression, it outputs the resulting
value:</div>
<div class="MsoNormal">
1 + 2; 3</div>
<div class="MsoNormal">
When you go through a statement, Firebug doesn’t illustrate
you any output, still if the statement includes a few expressions. That’s why I
have to use console.log () in not many of my examples. This if statement
doesn’t produce a value. Instead, it controls whether to evaluate the block
(the code in curly braces).</div>
<div class="MsoNormal">
if (true)</div>
<div class="MsoNormal">
{</div>
<div class="MsoNormal">
console.log("expression");</div>
<br />
<div class="MsoNormal">
}</div>
</div>
elearnschoolhttp://www.blogger.com/profile/18092493680700206919noreply@blogger.com0tag:blogger.com,1999:blog-4145439021828387036.post-13789629480841498162016-02-22T05:04:00.000-08:002016-02-22T05:04:05.040-08:00Introduction Of Cascading Style Sheet<div dir="ltr" style="text-align: left;" trbidi="on">
Cascading Style Sheets, affectionately alluded to as CSS, is a basic configuration dialect planned to<br />
<br />
improve the procedure of making website pages respectable.<br />
<br />
CSS handles the look and feel part of a website page. Utilizing CSS, you can control the shade of the<br />
<br />
content, the style of text styles, the separating between sections, how segments are estimated and laid out,<br />
<br />
what foundation pictures or hues are utilized, and additionally an assortment of different impacts.<br />
<br />
CSS is anything but difficult to learn and see however it gives effective control over the presentation of an<br />
<br />
HTML report. Most ordinarily, CSS is joined with the markup dialects HTML or XHTML.</div>
elearnschoolhttp://www.blogger.com/profile/18092493680700206919noreply@blogger.com1