Register log

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="headerlogin">
        <div class="headerbox1">
            <div class="searchwrapper">
                <div class="search1">
                    <div class="searchlabel">QUOI:</div>
                    <div class="searchinput">
                        <input type="text" />
                        <div class="subsearchbox" id="cherchetitre">
						 <p>  Chercher dans le titre uniquement.</p>
                           <p><input type="checkbox" name="titreunique" id="titreunique"/></p>
						</div>	
                    </div>
                </div>
                <div class="search1">
                    <div class="searchlabel">OU:</div>
                    <div class="searchinput">
                        <input type="text" />
                    </div>
                </div>
                <div class="search2">
                    <div class="searchbtn"><span id="btntitle" data-state="1">Brocantes!</span>

                        <div class="searchtoggle">+</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="headerlogin">
        <div class="headerbox2"> <span>  Junkst.com</span>
 <span class="sub">  Réseau social de l'économie circulaire</span> 
        </div>
    </div>
<div class="mainwrapper">
            <div class="bglogin">

	Vends à tes connaissances - Vends à tes amis - Vends à tes voisins - Donne à ton frère - Achète à ton boss, même si ça te sers à rien - Vends en réseau - Revends à ton grand-père, il aime les vieux machins - Vends en réseau - Achète en commun - Propose tes services -  Vends à tes employés même si ça ne marche plus - Vends à ton cousin un peu bizarre que tu vois jamais - 
Donne aux potes de tes potes - Vends à ton beau-frère - Donne à Enrico - Offre à ta...

CSS

html {
    font-size: 100%;
}
a {
    font-size:1.1rem;
    font-family:calibri;
    color:#990000;
}
.loginmain {
    width:100%;
}
.subsearchbox{
width: 100%;
vertical-align: middle;
position: absolute;
margin-bottom: 0;
background: none repeat scroll 0% 0% #DCDCDC;
border: 1px solid #DCDCDC;
left: 0;
font-size: 0.8rem;
height: 40%;
line-height: 40%;
color: #808080;
font-family: calibri;
margin: 0!important;
padding: 0!important;

}

.subsearchbox input{
width:8%!important;
display:inline-block;
vertical-align: middle;
height:40%;
line-height:40%;
}

.subsearchbox p{
display: inline;
width: 80%!important;
vertical-align: middle;
height: 100%;
padding: 0;
margin: 0;
line-height: 100%;

}
.subsearchbox p+p{
 width:15%!important;   
}

.mainwrapper{
    position:relative;
    font-size:1.2rem;
}
.bglogin {
position: absolute;
top: 10%;
width: 80%;
color: whitesmoke;
z-index: -1;
padding-left: 10%;
padding-right: 10%;
text-align: justify;
    max-height:80%;
    overflow:hidden;
}
.headerlogin {
    width:100%;
    margin:auto;
    vertical-align:middle;
    background:whitesmoke;
    min-width:900px;
}
.headerbox1 {
    background:whitesmoke;
    width:100%;
    height:100%;
    line-height:130px;
    box-sizing:border-box;
    font-family:'calibri';
    font-size:1.2rem;
    vertical-align:middle;
    margin:auto;
    padding-top:1.5%;
    padding-bottom:1.5%;
    text-align:center;
}
.searchwrapper {
    width:900px;
    box-sizing:border-box;
    margin-left:auto;
    margin-right:auto;
    line-height:50px;
    padding-right:1%;

    box-sizing: border-box;
}
.search1 {
    width:35%;
    box-sizing:border-box;
    padding-top:1%;
    padding-bottom:1%;
    display:inline-block;
    text-align:center;
}
.search2 {
    width:15%;
    box-sizing:border-box;
    display:inline-block;
}
.searchlabel {
    width:20%;
    background:grey;
    padding-left:2%;
    padding-right:2%;
    display:inline-block;
    margin-right:0;
    float:left;
   ...

JavaScript

$(document.body).on('click', '#toggleregister', function (e) {
    var state = $(this).attr("date-state");
    $('#loginbox').slideToggle();
    $('#register').slideToggle();
    if (state == 0 || state == '0') {
        $('.loginbottom').removeClass('bottomborder');
        $('#toggleregister').html('Log in');
        $(this).attr("date-state", '1');
    } else {
        $('.loginbottom').addClass('bottomborder');
        $('#toggleregister').html('Sign in');
        $(this).attr("date-state", '0');
    }
});

$(document.body).on('click', '.searchtoggle', function (e) {

    var cur = $('#btntitle').attr("data-state");

    var titresc;
    switch (parseInt(cur)) {
        case 1:
            titresc = 'Débarras!';
            $('#btntitle').html(titresc);
            $('#btntitle').css('color', '#A34775');
            $('#btntitle').attr("data-state", 2);
            break;
        case 2:
            titresc = 'Services!';
            $('#btntitle').html(titresc);
            $('#btntitle').css('color', '#990000');
            $('#btntitle').attr("data-state", 3);
            break;
        case 3:
            titresc = 'Brocantes!';
            $('#btntitle').html(titresc);
            $('#btntitle').css('color', '#FF7000');
            $('#btntitle').attr("data-state", 1);
            break;
    }
});