Dear all forum24 user



Now i gonna share you our login syatem code



first of all login you wapka site





than create a page Name User_Login




than past this code in first box

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}

.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}

.input-field {
width: 100%;
padding: 10px;
outline: none;
border: 2px solid dodgerblue;
}

.input-field:focus {
border: 2px solid dodgergreen;
}

/* Set a style for the submit button */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

.btn:hover {
opacity: 1;
}


</style>


<style>


body{
padding:0;
margin:0;
font-family: 'Poppins', sans-serif;
}

svg{height:200px;
width:100%;
position:relative;
}
.holder{
position:absolute;
top: 100px;
width:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.heading{
font-size:40px;
font-weight:500;
margin:5px;
z-index:1;
width:100%;
color:#f5f6fa;
text-align:center;
}
.tagline{
font-size: 15px;
font-weight: 200;
width: 100%;
color:#f5f6fa;
text-align:center;
}
.holder img {
position: absolute;
margin:0 auto;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
width: 100px; height: 100px;
transform: translateY(50%); /* additional 50% of own height */
box-shadow: 0 0 0 10px #fff;
}

</style>




<center>

<div class="card">
<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="500" viewBox="0 0 1500 500" preserveAspectRatio="none">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(45)">
<stop offset="5%" stop-color="#36d1dc" />
<stop offset="95%" stop-color="#5b86e5" />
</linearGradient>
</defs>
<path d="M 0,0
L 0,250
Q 750,500 1500,250
L 1500, 0
Z" fill="url('#myGradient')" />
</svg>
<div class="holder">
<img src="https://cdn-icons-png.flaticon.com/512/5087/5087607.png" style="opacity: 0.6;">

</div>


<div class="rmenu">%notify%</div>

<form action="" method="post">
<div class="input-container">
<i class="fa fa-user icon" style="font-size:30px;"></i>
<input class="input-field" id="login-nick" placeholder="Enter user name" type="text" name="username" value="" maxlength="50" /></div>
<div class="input-container">
<i class="fa fa-key icon" style="font-size:30px;"></i>
<input class="input-field" id="login-password" placeholder="Enter password" type="password" name="password" maxlength="32" /></div>
<div class="input-container"><table><tr><td>
<input name="remember" type="checkbox" value="true" checked></td><td> Remember me?</td></tr></table></div>
<br>
<center>
<button type="submit" class="btn"><h4>Log in</h4></button>


</div></center>

than past this code in second box

<USERNAME>#@%POST(username)%@#</USERNAME><PASSWORD>#@%POST(password)%@#</PASSWORD><AUTOLOGIN>#@%POST(remember)%@#</AUTOLOGIN>

Remove @ symble from code