Login gauche

by matmat

HTML

<div id="Relations" class="logincol" style="">
    <div class="Title h40">
        <div class="wrapper1">
            <div class="helper"></div>
            <div class="imgcontent70 feed">
                <img src="http://www.junkst.com/Images/Icones/logo_junkst.png" alt="Junkst" title="Junkst" />
            </div>
            <div class="imgcontent2">Connectez-vous:</div>
        </div>
    </div>
    <div class="logininput">
        <p>
            <label class="" for="id_forname">email :</label>
            <input id="id_forname" name="id_forname" class="" maxlength="20" value="" type="text" />
        </p>
        <p>
            <label class="" for="id_forname">password :</label>
            <input id="id_forname" name="id_forname" class="" maxlength="20" value="" type="text" />
        </p>
        <p class="loginbtn">Log In !</p>
    </div>
    <div class="Title h40" style="background:whitesmoke;">
        <div class="wrapper1">
            <div class="helper"></div>
            <div class="imgcontent70 feed">
                <img src="http://www.junkst.com/Images/Icones/facebook_ic.png" alt="Junkst" title="Junkst" />
            </div>
            <div class="imgcontent2">Connectez-vous avec facebook !</div>
        </div>
    </div>
    <div class="Title h40" style="border-bottom:none!important;">
        <div class="wrapper1">
            <div class="helper"></div>
            <div class="imgcontent70 feed">
                <img src="http://www.junkst.com/Images/Icones/gplus_ic.png" alt="Junkst" title="Junkst" />
            </div>
            <div class="imgcontent2">Connectez-vous avec Google+ !</div>
        </div>
    </div>
    
     <div class="Title h40" style="border-top:1px solid gainsboro; margin-top:3%;">
        <div class="wrapper1">
            <div class="helper"></div>
            <div class="imgcontent70 feed">
                <img src="http://www.junkst.com/Images/Icones/logo_junkst_sm.png" alt="Junkst" title="Junkst" />
           ...

CSS

.logininput {
    position: relative;
    width: 90%;
    margin:auto auto;
    padding: 5%;
    background: none repeat scroll 0% 0% transparent;
}
.logininput label {
    font-family:"century gothic";
    font-size: 0.9rem;
    width: 30%;
    padding:0.5%;
    display: inline-block;
    vertical-align: middle;
    color: #808080;
    margin-left: 5%;
    box-sizing:border-box;
}
.logininput input {
    width:60%;
    font-family:calibri;
    font-size: 1rem;
    color:grey;
    border: 1px solid gainsboro;
    padding: .5%;
    vertical-align: middle;
    box-sizing:border-box;
}
.logininput input:hover {
    border:solid 1px #AAAAAA;
    color:#FF7000;
}
.logininput input:active {
    color:#FF7000;
}
.loginbtn {
    font-family:"italianno";
    font-size: 2.5rem;
    color:#990000;
    text-align:center;
    margin:0;
    padding:0;
   /* border-bottom:1px solid gainsboro;*/
    cursor:pointer;
}
.logincol .imgcontent2 {
    width:82%;
}
/*******************************************************
BigMoustache.css 
Une production Junkst.com && bigmoustache unlimited
MTX 2014 tous droits réservés big moustaches

Elements généraux
********************************************************/
 html {
    background:whitesmoke;
    font-size:100%;
    padding:0;
    margin:0;
    font-family:Georgia;
}
a {
    text-decoration:none;
    color:#900;
}
textarea {
    resize: none
}
.placeholder {
    color:gainsboro;
    font-size:0.8rem;
    font-style:italic;
}
.cOR {
    color:#FF7000!important;
}
.cVE {
    color:#47A375!important;
}
.cBOR {
    color:#990000!important;
}
.cRE {
    color:red!important;
}
.pDEF {
    cursor:default!important;
}
::-webkit-input-placeholder {
    color:gainsboro;
    font-size:0.8rem;
    font-style:italic;
}
::-moz-placeholder {
    color:gainsboro;
    font-size:0.8rem;
    font-style:italic;
}
/* firefox 19+ */
 :-ms-input-placeholder {
    color:gainsboro;
    font-size:0.8rem;
    font-style:italic;
}
/* ie */
...