Bootstrap

by Tushar Gupta

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://ios-checkboxes.awardwinningfjords.com/iphone-style-checkboxes/iphone-style-checkboxes.js"></script>
<div class="container">
    <div class="row-fluid">
        <div class="span5">
            <div class="side_login text-center">
                <div class="left-container">	<i class="left-icon"></i>

                    	<h1 class="left-panel-text">DEDOR</h1>

                </div>
            </div>
        </div>
        <div class="span7">
            <div class="login-form right-container">
                <div class="text-center">
                    	<h2 class="text-color gap">Sign in</h2>

                    <form action="">
                        <fieldset>
                            <div class="clearfix">
                                <div class="left-inner-addon gap">	<i class="icon-user"></i>

                                    <input class="text-background input-xlarge" type="text" class="form-control" placeholder="[email protected]">
                                </div>
                            </div>
                            <div class="clearfix">
                                <div class="left-inner-addon gap">	<i class="icon-lock"></i>

                                    <input class="text-background input-xlarge" type="password" placeholder="*******">
                                </div>
                            </div>
                            <div class="clearfix">
                                <div class="on_off gap">
                                    <label for="on_off">Remember username ?</label>
                                    <input type="checkbox" id="on_off" />
                                </div>
                            </div>
                            <button...

CSS

.left-inner-addon {
    position: relative;
}
.left-inner-addon input {
    padding-left: 30px;
}
.left-inner-addon i {
    position: absolute;
    //padding: 10px 12px;
    padding: 1px 2px;
    pointer-events: none;
    margin-top: 8px;
    margin-left: 10px;
}
.text-background {
    background-color:#F6F6F6 !important;
    ;
}
.text-color {
    color:#451666;
}
.left-panel-text {
    color:#fff;
}
.left-container {
    padding-top:175px;
}
.right-container {
    padding-top:60px
}
.left-icon {
    background-image:url('http://s21.postimg.org/su697x99f/logo.png');
    display: inline-block;
    width: 70px;
    height: 65px;
    margin-top: 1px;
    line-height: 14px;
    vertical-align: text-top;
    margin-bottom: 30px;
}
.gap {
    margin-bottom: 30px;
}
.btn-custom {
    background-color: hsl(275, 65%, 15%) !important;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#621f93", endColorstr="#2a0d3f");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#621f93), to(#2a0d3f));
    background-image: -moz-linear-gradient(top, #621f93, #2a0d3f);
    background-image: -ms-linear-gradient(top, #621f93, #2a0d3f);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #621f93), color-stop(100%, #2a0d3f));
    background-image: -webkit-linear-gradient(top, #621f93, #2a0d3f);
    background-image: -o-linear-gradient(top, #621f93, #2a0d3f);
    background-image: linear-gradient(#621f93, #2a0d3f);
    border-color: #2a0d3f #2a0d3f hsl(275, 65%, 10%);
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
    -webkit-font-smoothing: antialiased;
    width:310px;
}
label[for="on_off"] {
    display:inline-block;
    font-size:21px;
}
.side_login {
    background-color:#451666;
    width:100%;
    height:500px;
    box-shadow: 10px 0px 15px #BBBBBB;
}
.iPhoneCheckContainer {
    -webkit-transform:translate3d(0, 0, 0);
    position: relative;
   ...

JavaScript

$(window).load(function () {
    $('#on_off').iphoneStyle();
});