Developers Portal

Free Themes

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy6A8Gd8A1M6O75FHV4jVUWs2f5nu4CZQ5JuTZVWTwSHEx5pJuziJiJ_57_1D21LqR7nP5EQ5WQ3Or3H8WQyHvf4a6t5Tkt-X-1Dyq5WBxGMUCQMV836QK-MhL0urmu5hDhwuU0Eo6rKM_/s1600/responsive+website.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy6A8Gd8A1M6O75FHV4jVUWs2f5nu4CZQ5JuTZVWTwSHEx5pJuziJiJ_57_1D21LqR7nP5EQ5WQ3Or3H8WQyHvf4a6t5Tkt-X-1Dyq5WBxGMUCQMV836QK-MhL0urmu5hDhwuU0Eo6rKM_/s320/responsive+website.png" width="320" /></a></div>
<div>
<br /></div>
<div>
</div>
<br />
<ol>
<li><a href="http://www.freecsstemplates.org/" style="background-color: white; border: 0px; color: #0c65a5; cursor: pointer; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 21.6667px; margin: 0px; padding: 0px; text-decoration: none;">http://www.freecsstemplates.org/</a></li>
<li><a href="http://www.oswd.org/" style="background-color: white; border: 0px; color: #0c65a5; cursor: pointer; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 21.6667px; margin: 0px; padding: 0px; text-decoration: none;">http://www.oswd.org/</a></li>
<li><a href="http://www.openwebdesign.org/" style="background-color: white; border: 0px; color: #0c65a5; cursor: pointer; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 21.6667px; margin: 0px; padding: 0px; text-decoration: none;">http://www.openwebdesign.org/</a></li>
<li><a href="http://www.styleshout.com/" style="background-color: white; border: 0px; color: #0c65a5; cursor: pointer; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 21.6667px; margin: 0px; padding: 0px; text-decoration: none;">http://www.styleshout.com/</a></li>
<li><a href="http://www.freelayouts.com/" style="background-color: white; border: 0px; color: #0c65a5; cursor: pointer; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 21.6667px; margin: 0px; padding: 0px; text-decoration: none;">http://www.freelayouts.com/</a></li>
<li><a href="http://www.csszengarden.com/">http://www.csszengarden.com/</a></li>
<li><a href="https://bootswatch.com/">https://bootswatch.com</a></li>
</ol>
</div>

Free Themes

http://www.freecsstemplates.org/ http://www.oswd.org/ http://www.openwebdesign.org/ http://www.styleshout.com/ http://www.free...

+ Read more »

Popup Contact Form with Disabled background Code/Snippet

<div dir="ltr" style="text-align: left;" trbidi="on">
<pre class="line-pre" style="background-color: white; box-sizing: border-box; width: 100%;"><div class="line" id="file-popupdiv-html-LC1" style="box-sizing: border-box;">
<span style="color: #333333; font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;"><span style="font-size: 12px; line-height: 16.7999992370605px;"><HTML>
 <HEAD>
  <TITLE>Popup with Disabled background</TITLE>
  <style>
   .ontop {
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    position: absolute;    
    background-color: black;
    color: #aaaaaa;
    opacity: .4;
    filter: alpha(opacity = 50);
   }
   #popup {
    width: 300px;
    height: 200px;
    position: absolute;
    color: #000000;
    background-color: #ffffff;
    /* To align popup window at the center of screen*/
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
   }
  </style>
  <script type="text/javascript">
   function pop(div) {
    document.getElementById(div).style.display = 'block';
   }
   function hide(div) {
    document.getElementById(div).style.display = 'none';
   }
   //To detect escape button
   document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
     hide('popDiv');
    }
   };
  </script>
 </HEAD>
 <BODY>
  <div id="popDiv" class="ontop">
   <table border="1" id="popup">
    <tr>
     <td>
      Insert the Popup contact form code
     </td>
    </tr>
    <tr>
     <td>
      Click Close OR escape button to close it
      <a href="#" onClick="hide('popDiv')">Close</a>
     </td>
    </tr>
   </table>
  </div>
  <CENTER>
   <h3>
    Popup  div with disabled background
   </h3>
   <br/>
   <a href="#" onClick="pop('popDiv')"> open a popup div</a>
  </CENTER>
 </BODY>
</HTML></span></span></div>
</pre>
</div>

Popup Contact Form with Disabled background Code/Snippet

Click Close OR escape button to close it Close Placed your form code here popup...

+ Read more »

Media Queries CSS for All Devices

<div dir="ltr" style="text-align: left;" trbidi="on">
<div align="center" class="MsoNormal" style="background: white; margin-top: 7.5pt; text-align: center;">
<span style="background-color: transparent; font-size: 21.3333339691162px; text-align: left;"><span style="font-family: Helvetica, sans-serif;"><b><br></b></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Helvetica, sans-serif;"><b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMAFYwETUekYxv3i-jshN7AHtFWi334l-iFsycqru8NU9ZYnH9W5Fn-iXCMgqqFi7BeaerY_quLYvUoN8nHhHH18wchKnaQ4Yj3ud9i0WbLZPcr6TK9DnxOVg5RpwpFdlydYhpqinPT5I/s1600/MediaQuery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMAFYwETUekYxv3i-jshN7AHtFWi334l-iFsycqru8NU9ZYnH9W5Fn-iXCMgqqFi7BeaerY_quLYvUoN8nHhHH18wchKnaQ4Yj3ud9i0WbLZPcr6TK9DnxOVg5RpwpFdlydYhpqinPT5I/s1600/MediaQuery.jpg" width="320"></a></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Helvetica, sans-serif;"><b><br></b></span></div>
<b><span style="font-family: Helvetica, sans-serif; font-size: 16pt;"> </span></b><b style="font-family: Helvetica, sans-serif; font-size: 21.3333339691162px; text-align: left;">Media Queries </b><b><span style="font-family: Helvetica, sans-serif; font-size: 16pt;">CSS for All Devices</span></b><br>
<div align="center" class="MsoNormal" style="background: white; margin-top: 7.5pt; text-align: center;">
<br></div>
<div class="MsoNormal" style="background: #DDDDDD; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0cm; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="border: none windowtext 1.0pt; color: #999999; font-family: Consolas; font-size: 10.0pt; mso-border-alt: none windowtext 0cm; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; padding: 0cm;"><</span><span style="border: none windowtext 1.0pt; color: #990099; font-family: Consolas; font-size: 10.0pt; mso-border-alt: none windowtext 0cm; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; padding: 0cm;">meta </span><span style="border: none windowtext 1.0pt; color: #009900; font-family: Consolas; font-size: 10.0pt; mso-border-alt: none windowtext 0cm; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; padding: 0cm;">name</span><span style="border: 1pt none windowtext; font-family: Consolas; font-size: 10pt; padding: 0cm;">=</span><span style="border: none windowtext 1.0pt; color: #000099; font-family: Consolas; font-size: 10.0pt; mso-border-alt: none windowtext 0cm; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; padding: 0cm;">"viewport"</span><span style="border: 1pt none windowtext; font-family: Consolas; font-size: 10pt; padding: 0cm;"> </span><span style="border: none windowtext 1.0pt; color: #009900; font-family: Consolas; font-size: 10.0pt; mso-border-alt: none windowtext 0cm; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; padding: 0cm;">content</span><span style="border: 1pt none windowtext; font-family: Consolas; font-size: 10pt; padding: 0cm;">=</span><span style="border: none windowtext 1.0pt; color: #000099; font-family: Consolas; font-size: 10.0pt; mso-border-alt: none windowtext 0cm; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; padding: 0cm;">"width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no"</span><span style="border: none windowtext 1.0pt; color: #999999; font-family: Consolas; font-size: 10.0pt; mso-border-alt: none windowtext 0cm; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; padding: 0cm;">></span><span style="color: #cc0000; font-family: Consolas; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;"><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; margin-bottom: 0.0001pt;">
<br></div>
<div align="center" class="MsoNormal" style="background: white; margin-top: 7.5pt; text-align: center;">
<b><span style="font-family: Helvetica, sans-serif; font-size: 12pt;">iPad and Smartphone Orientation
Code<o:p></o:p></span></b></div>
<div align="center" class="MsoNormal" style="background: white; margin-top: 7.5pt; text-align: center;">
<b><span style="font-family: Helvetica, sans-serif; font-size: 12pt;"><br></span></b></div>
<div class="MsoNormal" style="background: white; margin-bottom: 0.0001pt;">
<span style="font-family: Helvetica, sans-serif; font-size: 9pt;">For Android, if you use elements with display set to box, you can order
the child nodes for either vertical or horizontal. If no orientation is
provided, the box defaults to vertical. <br>
<br>
#androidorientation {<br>
    display: -webkit-box;<br>
-webkit-box-orient: horizontal;<br>
    display: -moz-box;<br>
    -moz-box-orient: horizontal;<br>
}<br>
<br>
The iPad  orientation property. <br>
<br>
@media screen and (orientation: landscape) {<br>
     .apple-landscape {<br>
          width: 30%;<br>
          float: right;<br>
     }<br>
}<br>
<br>
@media screen and (orientation: portrait) {<br>
     .apple-portrait {<br>
          clear: both;<br>
     }<br>
}<br>
<br>
 <o:p></o:p></span></div>
<div align="center" class="MsoNormal" style="background: white; margin-bottom: 0.0001pt; text-align: center;">
<b><span style="font-family: Helvetica, sans-serif; font-size: 12pt;">For All Device ( Just Copy and Paste Code )<o:p></o:p></span></b></div>
<div align="center" class="MsoNormal" style="background: white; margin-bottom: 0.0001pt; text-align: center;">
<br></div>
</div>

Media Queries CSS for All Devices

Media Queries CSS for All Devices < meta name = "viewport" content = "width=device-width, initial-scale=1, ...

+ Read more »

Developer Portal

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="font-size: x-large;">Important References for Developer</span></div>
<div style="text-align: center;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: center;">
<br /></div>
#1: <a href="http://daneden.github.io/animate.css/">http://daneden.github.io/animate.css/</a><br />
#2: <a href="http://buildinternet.com/project/supersized/download.html">http://buildinternet.com/project/supersized/download.html</a><br />
#3: <a href="http://dimsemenov.com/plugins/magnific-popup/">http://dimsemenov.com/plugins/magnific-popup/</a><br />
#4: <a href="https://github.com/codrops/Elastislide">https://github.com/codrops/Elastislide</a> (A Responsive Image Carousel)<br />
#5: <a href="https://github.com/thesabbir/simple-line-icons">https://github.com/thesabbir/simple-line-icons</a> ( Icon like Font- awesome )<br />
#6: <a href="http://colorzilla.com/">http://colorzilla.com</a><br />
#7: Bug tracking - <a href="https://www.mantisbt.org/" target="_blank">Mentis,</a> <a href="https://www.atlassian.com/software/jira/download" target="_blank">JIRA </a> ( <a href="https://jira.atlassian.com/projects/DEMO" target="_blank">Demo </a>)<br />
#8: Framework: <a href="http://www.codeigniter.com/" target="_blank">Codeigniter,</a> <a href="http://www.getsymphony.com/" target="_blank">Symfony,</a> <a href="http://www.yiiframework.com/" target="_blank">Yii ,</a> <a href="http://cakephp.org/" target="_blank">CakePHP</a>, <a href="http://magento.com/" target="_blank">Magento </a>,<br />
     <a href="http://framework.zend.com/" target="_blank"> Zend,</a> <a href="https://www.drupal.org/" target="_blank">Drupal,</a> <a href="https://download.moodle.org/" target="_blank">moodle,</a> <a href="http://www.joomla.org/" target="_blank">joomla,</a> <a href="https://wordpress.org/" target="_blank">wordpress,</a> <a href="http://www.sugarcrm.com/" target="_blank">SugarCRM</a><br />
#9: Social Networking site : <a href="http://www.oxwall.org/" target="_blank">Oxwall</a><br />
#10: Html 5 Validator Check: <a href="http://validator.nu/">Validator.nu</a><br />
<h3 class="r" style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 18px; font-weight: normal; margin: 0px; overflow: hidden; padding: 0px; text-overflow: ellipsis; white-space: nowrap;">
</h3>
<br /></div>

Developer Portal

Important References for Developer #1: http://daneden.github.io/animate.css/ #2: http://buildinternet.com/project/supersized/dow...

+ Read more »

How to ( send/submit form data) email by using javascript or php

How to ( send/submit form data) email by using javascript or php

In web development it is very normal that we create 'Contact-Us' Form. And we want to send complete form submitted data in a mail...

+ Read more »