hompage demo

by Ahmad Najiullah

HTML

<div class="body">
<div class="separator" style="clear: both; text-align: center;">
    <a href="http://demo.najiullah.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Live Demo On Najiullah.com" border="0" src="http://3.bp.blogspot.com/-Vdjj8yeEMw8/UHnR8M-u9fI/AAAAAAAAGpo/_tDVOodOT6M/s640/live+demo.gif" title="Live Demo On Najiullah.com" /></a></div><div id="Content">
    <form class="form-wrapper">
    <input type="text" id="search" placeholder="Search Demo For HTML, CSS, PHP & MySQL Torials" required>
    <input type="submit" value="go" id="submit">
</form>
    <div id="leftcolumn" class="ava">
        <img alt="melotot" src="http://static.najiullah.com/images/adjie1258-melotot.gif" border="0" height="50" width="50">
    </div>
    <div id="contentcolumn" class="bubble" align="justify">Use the search field above to find all the tutorials on the site ahmad.najiullah.com. <br/> You can choose tutorials each category by the following picture:  <br/> <a href="http://2.bp.blogspot.com/-31Ctl3x5d48/UHncLxDhlLI/AAAAAAAAGrU/R50hstdmy-g/s1600/HTML.gif"><img alt="HTML" border="0" src="http://2.bp.blogspot.com/-31Ctl3x5d48/UHncLxDhlLI/AAAAAAAAGrU/R50hstdmy-g/s1600/HTML.gif" title="HTML Tutorial" /> </a> <a href="http://2.bp.blogspot.com/-MjSGcIPQIGk/UHnanN9UPVI/AAAAAAAAGq8/k9iac-EzVbU/s1600/css_valid.png"><img alt="CSS" border="0" src="http://2.bp.blogspot.com/-MjSGcIPQIGk/UHnanN9UPVI/AAAAAAAAGq8/k9iac-EzVbU/s1600/css_valid.png" title="CSS Tutorial" /> </a> <a href="http://3.bp.blogspot.com/-oe5ffZ05FoU/UHnapbhxi4I/AAAAAAAAGrI/dp27rAGgNtc/s1600/php+icon.png"><img alt="PHP" border="0" src="http://3.bp.blogspot.com/-oe5ffZ05FoU/UHnapbhxi4I/AAAAAAAAGrI/dp27rAGgNtc/s1600/php+icon.png" title="PHP Tutorial" /> </a> <a href="http://3.bp.blogspot.com/-yJaZE-B9HlA/UHnaoVAMYlI/AAAAAAAAGrA/ts-seUgQSvU/s1600/mysql+icon.png"><img alt="MySQL" border="0" src="http://3.bp.blogspot.com/-yJaZE-B9HlA/UHnaoVAMYlI/AAAAAAAAGrA/ts-seUgQSvU/s1600/mysql+icon.png"...

CSS

body {
    margin:5px 0px; padding:0px;
    text-align:center;
    
    }
    
#Content {
    width:600px;
    margin:0px auto;
    text-align:left;
    padding:auto;


    }
    /*mulai*/
    .form-wrapper {
        width: 550px;
        padding: 8px;
        margin: 30px auto;
    
        overflow: hidden;
        border-width: 1px;
        border-style: solid;
        border-color: #dedede #bababa #aaa #bababa;
        -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
        -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
        box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;    
        background-color: #f6f6f6;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
        background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
        background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
        background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
        background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
        background-image: linear-gradient(top, #f6f6f6, #eae8e8);
    }
    
    .form-wrapper #search {
        width: 430px;
        height: 20px;
        padding: 10px 5px;
        float: left;    
        font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
        border: 1px solid #ccc;
        -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
        -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
        box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;      
    }
    
    .form-wrapper #search:focus {
        outline: 0;
        border-color: #aaa;
        -moz-box-shadow: 0 1px 1px #bbb inset;
        -webkit-box-shadow: 0...