Login box

by matmat

HTML

<script src="http://fonts.googleapis.com/css?family=Josefin+Slab"></script>
<script src="http://fonts.googleapis.com/css?family=Italianno"></script>
<div style="loginmain">
    <div class="loginheader"></div>
    <div class="loginbox">
        <div class="loginbox1-1 wi1">
            <div class='box'>
                <div class='content'>
                    <img src="http://www.junkst.com/Images/Icones/logo_junkst.png" alt="Junkst" title="Junkst" />
                </div>
            </div>
        </div>
        <div class="loginbox1-2 wi2">
            <div class="inputwrapper">
                <div class="inputwrapper-1">
                    <img src="http://www.junkst.com/Images/Icones/user.png" alt="Junkst" title="Junkst" />
                </div>
                <div class="inputwrapper-2">
                    <input type="text" />
                </div>
            </div>
            <div class="inputwrapper topborder">
                <div class="inputwrapper-1">
                    <img src="http://www.junkst.com/Images/Icones/lock.png" alt="Junkst" title="Junkst" />
                </div>
                <div class="inputwrapper-2">
                    <input type="text" />
                </div>
            </div>
            <div class="LOGIN topborder">
                <div class="loginbox1-1 wi3 bs">
                    <div class='box '>
                        <div class='content'>
                            <img src="http://www.junkst.com/Images/Icones/check.png" alt="Junkst" title="Junkst" />
                        </div>
                    </div>
                </div>
                <div class="logtitle">Log In !</div>
            </div>
        </div>
        <div class="applogin">
            <img src="http://www.junkst.com/Images/Icones/gplus_ic.png" height="20" alt="Fb Connect" title="Login with facebook" id="myfbconnect" />
        </div>
        <div class="applogin pos2">
            <img...

CSS

html {
    font-size:100%;
}
.loginmain {
    width:100%;
    text-align:center;
}
.loginheader {
    box-sizing:border-box;
    width:100%;
    text-align:center;
    height:80px;
    background:gainsboro;
    margin-bottom:80px;
}
.loginbox {
    border:1px solid gainsboro;
    vertical-align:middle;
    width:600px;
    height:250px;
    padding:2%;
    margin:auto;
    position:relative;
}

.wi1 {
    width:35%;
    padding:10%;
}
.wi2 {
    width:65%;
    padding:10%;
}
.wi3 {
    width:20%;
    padding:5%;
}
.loginbox1-1 {
    background:whitesmoke;
    border:1px solid gainsboro;
    display:inline-block;
    box-sizing:border-box;
    box-shadow:1px 1px 3px gainsboro;
}
.content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.content img {
    width:100%;
    height:100%;
}
.box {
    position: relative;
    width: 100%;
    /* desired width */
}
.box:before {
    content:"";
    display: block;
    padding-top: 100%;
    /* initial ratio of 1:1*/
}
.loginbox1-2 {
    width:50%;
    display:inline-block;
    clear:both;
    vertical-align:top;
    padding:3%;
    margin-left:4%;
    height:100%;
}
.inputwrapper-1 {
    height:100%;
    padding:1.5%;
    box-sizing:border-box;
    margin-top:0;
    display:inline-block;
    vertical-align:middle;
    width:16%;
}
.inputwrapper-2 {
    height:100%;
    padding:1.5%;
    box-sizing:border-box;
    margin-top:0;
    display:inline-block;
    vertical-align:middle;
    width:80%;
}
.inputwrapper-1 img {
    height:94%;
    vertical-align:middle;
    box-sizing:border-box;
    margin-top:0;
}
.inputwrapper-2 input {
    margin-left:0;
    height:100%;
    width:100%;
    box-sizing:border-box;
    padding:5%;
    font-family:calibri;
    font-size:1.1rem;
}
.topborder {
    padding-top:5%;
    margin-top:5%;
    border-top:1px solid gainsboro;
}
.inputwrapper {
    height:20%;
    width:100%;
    vertical-align:middle;
}
.logtitle {
    display:inline-block;
   ...