Login Top

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>
                </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="loginbox" id="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...

CSS

html {
    font-size: 100%;
}
a {
    font-size:1.1rem;
    font-family:calibri;
    color:#990000;
}
.loginmain {
    width:100%;
}
.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%;
    overflow:hidden;
    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;
    font-family:'calibri';
    color:whitesmoke;
}
.searchbtn {
    width:100%;
    background:white;
    padding-left:2%;
    padding-right:2%;
    display:inline-block;
    margin-right:0;
    border:1px solid #990000;
    text-align:center;
    font-family:'calibri';
    color:#990000;
    vertical-align:middle;
    position:relative;
    cursor:pointer;
}
.searchtoggle {
    display:inline-block;
    padding-left:15%;
    padding-right:15%;
    vertical-align:middle;
    box-sizing:border-box;
    position:absolute;
    top:-22%;
    background:white;
    border:2px dashed grey;
    right:-20%;
    border-radius:5px;
    cursor:pointer;
}
.searchtoggle:hover {
    background:whitesmoke;
    font-weight:bold;
}
.searchbtn span:hover {
    background:whitesmoke;
    font-weight:bold;
    display:block;
    width:100%;
    height:100%;
}
.searchinput...

JavaScript

$(document.body).on('click', '#toggleregister', function (e) {
    var state = $(this).attr("date-state");
    $('#loginbox').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;
		}
});