Minggu, 16 Juni 2013

  • Html/CSS ~ Simple Login Admin

    Assallamualaikum wr. wb. 

    Kali ini nisan akan sedikit share source Login Admin Page yang sangat sederhana sekali. Tidak ada yang spesial dalam source ini, akan tetapi nisan berharapa source ini berguna.






    HTML Save to index.php

    <div id="wrapper">
    <div id="title">
    <h1> <a href="#" title="Login admin" > </a></h1>
    <h5> 
    <?php date_default_timezone_set("Asia/Jakarta");
    echo date('l, d  F  Y | h:i A')
    ;?> 
    </h5>
    </div>
    <div id="form">
      <form id="login_admin" name="login_admin" method="post" action="">
        <p>
         
          <input type="text" name="user" class="user" placeholder="username" required="required"/>
          <label class="user_key" for="user"></label>
        </p>
        <p>
          <input type="password" name="pass" class="pass" placeholder="password"  required="required"/>
          <label class="pass_key" for="pass"></label>
        </p>

          <input type="submit" name="button" class="button" value="login" />
       
      </form>
    </div>
    </div>


    CSS

    @charset "utf-8";
    /* Nisan Was Here | login admin  */

    *{ margin:0px; padding:0px;}

    body{
    background:url(../images/bg.jpg) fixed;
    }

    #wrapper{
    margin:10% auto;
    width:500px; height:autopx;
    background:#fff;
    }

    #title{
    width:500px;
    height:60px;
    margin-bottom:15px;
    border-bottom:1px solid #c65146;
    }

    #title h1{
    background:url(../admin/images/logo_admin_03.png) 0 0 no-repeat;
    width:200px; height:32px;
    float:left;
    margin-top:20px;
    margin-left:10px;
    }

    #title h5{
    float:right;
    margin-top:37px;
    margin-right:10px;
    font-family:arial;
    color:#c65146;
    font-size:12px;
    }

    #form{
    width:275px;
    height:200px;
    margin:60px auto;
    margin-bottom:50px;
    }

    #form p{
    border:1px solid #c65146;
    height:auto;
    width:260px;
    margin-bottom:10px;
    }
    .user , .pass{
    height:34px;
    width:218px;
    padding-left:10px;
    border:0px;
    font-family:arial;
    }

    .user_key{
    background:#7ab9f8 url(../admin/images/user.png) 0 0 no-repeat;
    width:32px; height:34px;
    position: absolute;
    }

    .pass_key{
    background:#7ab9f8 url(../admin/images/key.png) 0 0 no-repeat;
    width:32px; height:34px;
    position: absolute;
    }

    .button{
    width:85px; height:28px;
    background:#c65146;
    border:0px;
    font-family:arial;
    color:#fff;
    font-size:14px;
    text-align:left;
    padding-left:10px;
    margin-top:15px;
    margin-bottom:15px;
    } 




    Sekian dari Nisan, semoga bermanfaat Mohon Kritik dan saranya :bye

    wassallamualaikum wr. wb.


  • 0 komentar:

    Posting Komentar

    Copyright @ 2013 Nisan BL0G.