jQuery Change Image on Mouse Over or Image Src (Source) on Hover

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"> <img id="imgdetails" src="http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/2.jpg" /> </div> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span><b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Introduction</span></u></b><b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">: </span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span></div> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /> Here I will explain how to use </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">jQuery</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"> to </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">change image on mouseover or </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">jQuery</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"> change image source or src on mouse over in </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">jQuery</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"> or swap images on mouse over using</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">jQuery.</span><br /> <br /> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">To change image on mouse over we need to write the code like as shown below</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <a href="https://www.blogger.com/null" name="more"></a><br /> <table border="1" cellpadding="0" class="MsoNormalTable" style="border: dashed brown 1.0pt; mso-cellspacing: 1.5pt; mso-padding-alt: 0in 0in 0in 0in; mso-yfti-tbllook: 1184;"> <tbody> <tr> <td style="border: none; padding: .75pt .75pt .75pt .75pt;"> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">html</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">head</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">title</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">jQuery Change Image on Mouseover<span style="color: blue;"></</span><span style="color: #a31515;">title</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">script</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span> <span style="color: red;">src</span><span style="color: blue;">="http://code.jquery.com/jquery-1.8.2.js"></</span><span style="color: #a31515;">script</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">script</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">$(<span style="color: blue;">function</span>() {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">$(<span style="color: #a31515;">"#imgdetails"</span>).hover(<span style="color: blue;">function</span>() {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">$(<span style="color: blue;">this</span>).attr(<span style="color: #a31515;">"src"</span>, <span style="color: #a31515;">"http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/2.jpg"</span>);</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}, <span style="color: blue;">function</span>() {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">$(<span style="color: blue;">this</span>).attr(<span style="color: #a31515;">"src"</span>, <span style="color: #a31515;">"http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/1.jpg"</span>);</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">});</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">})</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">script</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">head</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">id</span><span style="color: blue;">="form1"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">div</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">img</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">id</span><span style="color: blue;">="imgdetails"</span> <span style="color: red;">src</span><span style="color: blue;">="http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/1.jpg"</span> <span style="color: blue;">/></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">div</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">html</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span></div> </td> </tr> </tbody></table> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> </span></u></b></div>

jQuery Change Image on Mouse Over or Image Src (Source) on Hover

Introduction :  Here I will explain how to use jQuery to change image on mouseover or jQuery change image source or src on mouse ov...

Read more »

Create Dynamic Ajax Pie Chart in Asp.net with Database Example

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLXgyl5VUakRA1X5A6YzIc5r4WOnOFeg7RVreq_Y1XQMMDCEAkMb_mwaSrob4YxUYXCwRteWg7HzbNZHvst61jaAwRvLOjYRQOrzLgzp1erj3MbRccKjrf5kx9KXWzgaTUz-ZG5l7nz6VM/s1600/Pie-chart-example-in-asp-net-with-database.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLXgyl5VUakRA1X5A6YzIc5r4WOnOFeg7RVreq_Y1XQMMDCEAkMb_mwaSrob4YxUYXCwRteWg7HzbNZHvst61jaAwRvLOjYRQOrzLgzp1erj3MbRccKjrf5kx9KXWzgaTUz-ZG5l7nz6VM/s1600/Pie-chart-example-in-asp-net-with-database.gif" /></a></div> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Introduction</span></u></b><b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">:</span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /> <b><u><br /> </u></b>Here I will explain how to create dynamic </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">Ajax</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> pie chart in </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">asp.net</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> with database using <a href="https://www.blogger.com/null" target="_blank">c#</a>, vb.net or create pie chart in </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">asp.net with database </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">example</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"> in </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> <a href="https://www.blogger.com/null" target="_blank">c#</a>, <a href="https://www.blogger.com/null" target="_blank">vb.net</a>.</span><br /> <br /> <div class="MsoNormal"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">First design table one table <b>countrydetails</b> in your database like as shown below</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span></div> <div class="MsoNormal"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><br /></span></div> <table border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="border-collapse: collapse; mso-padding-alt: 0in 0in 0in 0in; mso-yfti-tbllook: 1184;"> <tbody> <tr> <td style="background: #E36C0A; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 159.6pt;" valign="top" width="213"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <a href="https://www.blogger.com/null" name="more"></a><b><span style="color: white; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-themecolor: background1;">Column Name</span></b><span style="color: white; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-themecolor: background1;"></span></div> </td> <td style="background: #E36C0A; border-left: none; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 174.3pt;" valign="top" width="232"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <b><span style="color: white; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-themecolor: background1;">Data Type</span></b><span style="color: white; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-themecolor: background1;"></span></div> </td> <td style="background: #E36C0A; border-left: none; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 144.9pt;" valign="top" width="193"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <b><span style="color: white; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-themecolor: background1;">Allow Nulls</span></b><span style="color: white; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-themecolor: background1;"></span></div> </td> </tr> <tr> <td style="border-top: none; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 159.6pt;" valign="top" width="213"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">ID</span></div> </td> <td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; width: 174.3pt;" valign="top" width="232"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Int(set identity property=true)</span></div> </td> <td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; width: 144.9pt;" valign="top" width="193"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">No</span></div> </td> </tr> <tr> <td style="border-top: none; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 159.6pt;" valign="top" width="213"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">name</span></div> </td> <td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; width: 174.3pt;" valign="top" width="232"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Varchar(50)</span></div> </td> <td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; width: 144.9pt;" valign="top" width="193"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">no</span></div> </td> </tr> <tr> <td style="border-top: none; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 159.6pt;" valign="top" width="213"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">value</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span></div> </td> <td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; width: 174.3pt;" valign="top" width="232"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Int</span></div> </td> <td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; width: 144.9pt;" valign="top" width="193"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">no</span></div> </td> </tr> </tbody></table> <div class="MsoNormal"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Once we create table we need to </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">enter some dummy data for our application purpose.</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span></div> <div class="MsoNormal"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><br /></span></div> <div class="MsoNormal"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">To implement </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">Ajax</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> pie chart with database first we need to add <b>AjaxControlToolkit</b> to your bin folder and design your aspx page like this</span></div> <div class="MsoNormal"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div> <table border="1" cellpadding="0" class="MsoNormalTable" style="border: dashed brown 1.0pt; mso-cellspacing: 1.5pt; mso-padding-alt: 0in 0in 0in 0in; mso-yfti-tbllook: 1184;"> <tbody> <tr> <td style="border: none; padding: .75pt .75pt .75pt .75pt;"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="background: yellow; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas; mso-highlight: yellow;"><%</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">@</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: maroon;">Register</span> <span style="color: red;">TagPrefix</span><span style="color: blue;">="ajaxToolkit"</span> <span style="color: red;">Assembly</span><span style="color: blue;">="AjaxControlToolkit"</span> <span style="color: red;">Namespace</span><span style="color: blue;">="AjaxControlToolkit"</span> <span style="background: yellow; mso-highlight: yellow;">%></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"><</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">html</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"><</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">head</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: red;">runat</span><span style="color: blue;">="server"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"><</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">title</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Pie Chart Example with Database in asp.net<span style="color: blue;"></</span><span style="color: maroon;">title</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">head</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"><</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">body</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"><</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: red;">id</span><span style="color: blue;">="form1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"><</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">div</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: red;">style</span><span style="color: blue;">="</span><span style="color: red;">width</span><span style="color: blue;">:40%"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"><</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">ajaxToolkit</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">:</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">ToolkitScriptManager</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: red;">ID</span><span style="color: blue;">="scriptmanager1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: blue;">/></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"><</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">ajaxToolkit</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">:</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">PieChart</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: red;">ID</span><span style="color: blue;">="countrychart"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">ChartHeight</span><span style="color: blue;">="300"</span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">ChartWidth</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">="450"</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: red;">ChartTitle</span><span style="color: blue;">="World wide Data usage %"</span> <span style="color: red;">ChartTitleColor</span><span style="color: blue;">="#0E426C"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">ajaxToolkit</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">:</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">PieChart</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">div</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">form</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">body</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></</span><span style="color: maroon; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">html</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></span></div> </td> </tr> </tbody></table> <div class="MsoNormal"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">C# Code</span></u></b><br /> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></u></b></div> <div class="MsoNormal"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-bidi-font-weight: bold; mso-fareast-font-family: "Times New Roman";">In code behind add the following namespaces</span><br /> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-bidi-font-weight: bold; mso-fareast-font-family: "Times New Roman";"><br /></span></div> <table border="1" cellpadding="0" class="MsoNormalTable" style="border: dashed brown 1.0pt; mso-cellspacing: 1.5pt; mso-padding-alt: 0in 0in 0in 0in; mso-yfti-tbllook: 1184;"> <tbody> <tr> <td style="border: none; padding: .75pt .75pt .75pt .75pt;"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">using</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> System;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">using</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> System.Data;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">using</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> System.Data.SqlClient;</span></div> </td> </tr> </tbody></table> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">After adding namespaces and write the following code in page load </span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <table border="1" cellpadding="0" class="MsoNormalTable" style="border: dashed brown 1.0pt; mso-cellspacing: 1.5pt; mso-padding-alt: 0in 0in 0in 0in; mso-yfti-tbllook: 1184;"> <tbody> <tr> <td style="border: none; padding: .75pt .75pt .75pt .75pt;"><div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">protected</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: blue;">void</span> Page_Load(<span style="color: blue;">object</span> sender, <span style="color: #2b91af;">EventArgs</span> e)</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">{</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #2b91af; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">DataTable</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> dt = <span style="color: blue;">new</span> <span style="color: #2b91af;">DataTable</span>();</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">using</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> (<span style="color: #2b91af;">SqlConnection</span> con = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlConnection</span>(<span style="color: #a31515;">"Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"</span>))</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">{</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">con.Open();</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #2b91af; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">SqlCommand</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> cmd = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"select name,total=value from countrydetails order by total desc"</span>, con);</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #2b91af; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">SqlDataAdapter</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> da = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlDataAdapter</span>(cmd);</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">da.Fill(dt);</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">con.Close();</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">foreach</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">(<span style="color: #2b91af;">DataRow</span> dr <span style="color: blue;">in</span> dt.Rows)</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">{</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">countrychart.PieChartValues.Add(<span style="color: blue;">new</span> AjaxControlToolkit.<span style="color: #2b91af;">PieChartValue</span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">{</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Category = dr[<span style="color: #a31515;">"name"</span>].ToString(),</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Data = <span style="color: #2b91af;">Convert</span>.ToDecimal(dr[<span style="color: #a31515;">"total"</span>]),</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">});</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">}</span></div> </td> </tr> </tbody></table> <div class="MsoNormal"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">VB.NET Code</span></u></b><br /> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></u></b></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Imports</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> System.Data</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Imports</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> System.Data.SqlClient</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Partial</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: blue;">Class</span> <span style="color: #2b91af;">VBCode</span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Inherits</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> System.Web.UI.<span style="color: #2b91af;">Page</span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Protected</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: blue;">Sub</span> Page_Load(sender <span style="color: blue;">As</span> <span style="color: blue;">Object</span>, e <span style="color: blue;">As</span> <span style="color: #2b91af;">EventArgs</span>) <span style="color: blue;">Handles</span> <span style="color: blue;">Me</span>.Load</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Dim</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> dt <span style="color: blue;">As</span> <span style="color: blue;">New</span> <span style="color: #2b91af;">DataTable</span>()</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Using</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> con <span style="color: blue;">As</span> <span style="color: blue;">New</span> <span style="color: #2b91af;">SqlConnection</span>(<span style="color: #a31515;">"Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"</span>)</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">con.Open()</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Dim</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> cmd <span style="color: blue;">As</span> <span style="color: blue;">New</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"select name,total=value from countrydetails order by total desc"</span>, con)</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Dim</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> da <span style="color: blue;">As</span> <span style="color: blue;">New</span> <span style="color: #2b91af;">SqlDataAdapter</span>(cmd)</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">da.Fill(dt)</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">con.Close()</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">End</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: blue;">Using</span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">For</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: blue;">Each</span> dr <span style="color: blue;">As</span> <span style="color: #2b91af;">DataRow</span> <span style="color: blue;">In</span> dt.Rows</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">countrychart.PieChartValues.Add(<span style="color: blue;">New</span> AjaxControlToolkit.<span style="color: #2b91af;">PieChartValue</span>() <span style="color: blue;">With</span> { _</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">.Category = dr(<span style="color: #a31515;">"name"</span>).ToString(), _</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">.Data = <span style="color: #2b91af;">Convert</span>.ToDecimal(dr(<span style="color: #a31515;">"total"</span>)) _</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">})</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">Next</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">End</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: blue;">Sub</span></span></div> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">End</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"> <span style="color: blue;">Class</span></span></div>

Create Dynamic Ajax Pie Chart in Asp.net with Database Example

Introduction : Here I will explain how to create dynamic Ajax pie chart in asp.net with database using c# , vb.net or create pie char...

Read more »

Best Login Page Design in HTML, CSS with Source Code

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdGkuU9GA03ShZvoy7sJvko4f0tWDkvxyJphyphenhyphentrLlDo_45Jv6-TBFfzFGSx08M6eAL3pdQZwXDHz2fs0ulwXaG2Djyuo-izt77yEZXyf1PNNKFvgAOyeLd9e2nCIVhGJ_4LShfQTzjl10/s1600/LoginPage.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdGkuU9GA03ShZvoy7sJvko4f0tWDkvxyJphyphenhyphentrLlDo_45Jv6-TBFfzFGSx08M6eAL3pdQZwXDHz2fs0ulwXaG2Djyuo-izt77yEZXyf1PNNKFvgAOyeLd9e2nCIVhGJ_4LShfQTzjl10/s1600/LoginPage.png" width="130" /></a></div> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Introduction</span></u></b><b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">:</span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Here I will explain how to create best login page design in html and css with source code or login page design in html and css with source code or simple login form with html and css</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">.</span><br /> <br /> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">To create login page design in html using css we need to write the code like as shown below</span> </span><br /> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">html</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">head</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">meta</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">charset</span><span style="color: blue;">="utf-8"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">title</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">Best Login Page design in html and css<span style="color: blue;"></</span><span style="color: #a31515;">title</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">style</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="text/css"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#5a5656</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-family</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">'Open Sans',</span> <span style="color: blue;">Arial,</span> <span style="color: blue;">Helvetica,</span> <span style="color: blue;">sans-serif</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-size</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">16px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">line-height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">1.5em</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">a</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> { <span style="color: red;">text-decoration</span>: <span style="color: blue;">none</span>; }</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">h1</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> { <span style="color: red;">font-size</span>: <span style="color: blue;">1em</span>; }</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">h1</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">, <span style="color: #a31515;">p</span> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">margin-bottom</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">10px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">strong</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-weight</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">bold</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.uppercase</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> { <span style="color: red;">text-transform</span>: <span style="color: blue;">uppercase</span>; }</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: green; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">/* ---------- LOGIN ---------- */</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">#login</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">margin</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span> <span style="color: blue;">auto</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">300px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: #a31515;">fieldset</span> <span style="color: #a31515;">input[type="text"]</span>, <span style="color: #a31515;">input[type="password"]</span> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#e5e5e5</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#5a5656</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-family</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">'Open Sans',</span> <span style="color: blue;">Arial,</span> <span style="color: blue;">Helvetica,</span> <span style="color: blue;">sans-serif</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-size</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">14px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">outline</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">padding</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">10px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">280px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-appearance</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">:<span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: #a31515;">fieldset</span> <span style="color: #a31515;">input[type="submit"]</span> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#008dde</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">cursor</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">pointer</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-family</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">'Open Sans',</span> <span style="color: blue;">Arial,</span> <span style="color: blue;">Helvetica,</span> <span style="color: blue;">sans-serif</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-transform</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">uppercase</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">300px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-appearance</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">:<span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: #a31515;">fieldset</span> <span style="color: #a31515;">a</span> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#5a5656</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-size</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">10px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: #a31515;">fieldset</span> <span style="color: #a31515;">a:hover</span> { <span style="color: red;">text-decoration</span>: <span style="color: blue;">underline</span>; }</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.btn-round</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#5a5656</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50%</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50%</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50%</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">display</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">block</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-size</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">12px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">line-height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">margin</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">30px</span> <span style="color: blue;">125px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-align</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">center</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-transform</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">uppercase</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.facebook-before</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#0064ab</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">display</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">block</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">float</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">left</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">line-height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-align</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">center</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.facebook</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#0079ce</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">cursor</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">pointer</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-transform</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">uppercase</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">250px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.twitter-before</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#189bcb</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">display</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">block</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">float</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">left</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">line-height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-align</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">center</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.twitter</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#1bb2e9</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">cursor</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">pointer</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-transform</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">uppercase</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">250px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">style</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">head</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">div</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">id</span><span style="color: blue;">="login"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">h1</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">strong</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">Welcome.<span style="color: blue;"></</span><span style="color: #a31515;">strong</span><span style="color: blue;">></span> Please login.<span style="color: blue;"></</span><span style="color: #a31515;">h1</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">action</span><span style="color: blue;">="javascript:void(0);"</span> <span style="color: red;">method</span><span style="color: blue;">="get"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">fieldset</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">input</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="text"</span> <span style="color: red;">required</span> <span style="color: red;">value</span><span style="color: blue;">="Username"</span> <span style="color: red;">onBlur</span><span style="color: blue;">="if(this.value=='')this.value='Username'"</span> <span style="color: red;">onFocus</span><span style="color: blue;">="if(this.value=='Username')this.value='' "></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">input</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="password"</span> <span style="color: red;">required</span> <span style="color: red;">value</span><span style="color: blue;">="Password"</span> <span style="color: red;">onBlur</span><span style="color: blue;">="if(this.value=='')this.value='Password'"</span> <span style="color: red;">onFocus</span><span style="color: blue;">="if(this.value=='Password')this.value='' "></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">a</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">href</span><span style="color: blue;">="#"></span>Forgot Password?<span style="color: blue;"></</span><span style="color: #a31515;">a</span><span style="color: blue;">></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">input</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="submit"</span> <span style="color: red;">value</span><span style="color: blue;">="Login"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">fieldset</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">span</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">class</span><span style="color: blue;">="btn-round"></span>or<span style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">a</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">class</span><span style="color: blue;">="facebook-before"></</span><span style="color: #a31515;">a</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">button</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">class</span><span style="color: blue;">="facebook"></span>Login Using Facbook<span style="color: blue;"></</span><span style="color: #a31515;">button</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">a</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">class</span><span style="color: blue;">="twitter-before"></</span><span style="color: #a31515;">a</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">button</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">class</span><span style="color: blue;">="twitter"></span>Login Using Twitter<span style="color: blue;"></</span><span style="color: #a31515;">button</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">div</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: green;"><!-- end login --></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></span></div> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">html</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div>

Best Login Page Design in HTML, CSS with Source Code

Introduction : Here I will explain how to create best login page design in html and css with source code or login page design in html...

Read more »