solved How do i add a login box to my index page.

{* /////////// DO NOT REMOVE //////////  *}
{assign var="page_template" value="index"}
{* /////////// DO NOT REMOVE //////////  *}

{jrCore_include template="header2.tpl"} 


   
    <div class="loginbody">
       {jrCore_form_create_session module="jrUser" option="login" assign="token"}
    
    <div class="logincontainer">
    
    <div id="jrUser_login_msg" ></div>
    <form id="jrUser_login" name="jrUser_login" action="{$jamroom_url}/user/login_save" method="post" accept-charset="utf-8" enctype="multipart/form-data">
        <input type="hidden" id="jr_html_form_token" name="jr_html_form_token" value="{$token}">
        <input type="hidden" name="user_remember" value="off">
        user login <input type="text" id="user_email_or_name" class="form_text" name="user_email_or_name" value=""><br>
        password <input type="password" id="user_password" class="form_text" name="user_password" value=""><br>
        <img id="form_submit_indicator" src="{$jamroom_url}/skins/jrNova/img/submit.gif" width="24" height="24" alt="working...">
        <input type="button" id="jrUser_login_submit" class="form_button" value="login" tabindex="3" onclick="jrFormSubmit('#jrUser_login','{$token}','ajax');">
    </form>
    </div>
    </div>

{jrCore_include template="footer.tpl"}

.logincontainer {
	width: 500px;
	height: 100%;
	text-align:center;
	background-color:#131111 ;
	border-radius: 4px;
	margin: 0 auto;
	margin-top: 150px;

	
}


.loginbody{
	height:100%;
	margin: 0 auto;
	background-color: #FFED00;
	background-repeat: no-repeat;
	background-size: 100% 720px;
	

.logincontainer {
    background-color: rgba(29, 30, 12, 0.8);
    border-radius: 4px;
    color: white;
    margin: 50px;
    padding: 37px;
    width: 500px;
}


.loginbody {
    background-color: #FFED00;
    background-size: 100% 720px;
}