<html lang="en" dir="ltr">
<style>
*{
    margin: 0px;
    padding: 0px;;
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

.container
{
    display: grid;
    grid-template-columns: 1fr 2fr;
    background-color: red;
    background: linear-gradient(to bottom, rgb(6, 108, 224),  rgb(14, 48, 122));
    width: 99.5%;
    height: 96%;
    margin: 0.5% auto;;
    border-radius: 5px;
}

.content-holder
{
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: lighter;
    letter-spacing: 2px;
    margin-top: 15%;
    padding: 50px;
}

.content-holder h2
{
    font-size: 34px;
    margin: 20px auto;
}

.content-holder p
{
    margin: 30px auto;
}

.content-holder button
{
    border:none;
    font-size: 15px;
    padding: 10px;
    border-radius: 6px;
    background-color: white;
    width: 150px;
    margin: 20px auto;
}

.box-2{
    background-color: white;

    margin: 5px;
}

.login-form-container
{
    text-align: center;
    margin-top: 10%;

}

.login-form-container h1
{
    color: black;
    font-size: 24px;
    padding: 20px;
}

.input-field
{
    box-sizing: border-box;
    font-size: 14px;
    padding: 10px;
    border-radius: 7px;
    border: 1px solid rgb(168, 168, 168);
    width: 250px;
    outline: none;
}

.login-button{
    box-sizing: border-box;
    color: white;
    font-size: 14px;
    padding: 13px;
    border-radius: 7px;
    border: none;
    width: 250px;
    outline: none;
    background-color: rgb(56, 102, 189);
}

.button-2
{
    display: none;
}

.signup-form-container
{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-60%);
    text-align: center;
    display: none;
}

.signup-form-container h1
{
    color: black;
    font-size: 24px;
    padding: 20px;
}

.signup-button{
    box-sizing: border-box;
    color: white;
    font-size: 14px;
    padding: 13px;
    border-radius: 7px;
    border: none;
    width: 250px;
    outline: none;
    background-color: rgb(56, 189, 149);  
}
</style>
<div class="container">
	<!--Data or Content-->
	<div class="box-1">
		<div class="content-holder">
			<h2>Hello!</h2>
			<h2>Venkat Sales Corporation, Surat. 9377811610</h2>
			<!--p>Venkat Sales Corporation, Surat. 9377811610</p-->
			<!--button class="button-1" onclick="signup()">Sign up</button>
			<button class="button-2" onclick="login()">Login</button-->
		</div>
	</div>	
	<!--Forms-->
	<div class="box-2">
		<div class="login-form-container">
		    <form method="POST" action="login.php">
    			<h1>Login Form</h1>
    			<input type="text" placeholder="Username" class="input-field">
    			<br><br>
    			<input type="password" placeholder="Password" class="input-field">
    			<br><br>
    			<button class="login-button" name="login"><span class="glyphicon glyphicon-log-in"></span> Login</button>
			</form>
		</div>
<!--Create Container for Signup form-->
        <div class="signup-form-container">
            <h1>Sign Up Form</h1>
            <input type="text" placeholder="Username" class="input-field">
            <br><br>
            <input type="email" placeholder="Email" class="input-field">
            <br><br>
            <input type="password" placeholder="Password" class="input-field">
            <br><br>
            <!--button class="signup-button" type="button">Sign Up</button-->
            
        </div>
    </div>
</html>
<script>
	function signup()
	{
	    /*
		document.querySelector(".login-form-container").style.cssText = "display: none;";
		document.querySelector(".signup-form-container").style.cssText = "display: block;";
		document.querySelector(".container").style.cssText = "background: linear-gradient(to bottom, rgb(56, 189, 149),  rgb(28, 139, 106));";
		//document.querySelector(".container").style.cssText = "background: linear-gradient(to bottom, rgb(6, 108, 224),  rgb(14, 48, 122));";
		document.querySelector(".button-1").style.cssText = "display: none";
		document.querySelector(".button-2").style.cssText = "display: block";
		*/
	};
	function login()
	{
	    /*
		document.querySelector(".signup-form-container").style.cssText = "display: none;";
		document.querySelector(".login-form-container").style.cssText = "display: block;";
		document.querySelector(".container").style.cssText = "background: linear-gradient(to bottom, rgb(6, 108, 224),  rgb(14, 48, 122));";
		//document.querySelector(".container").style.cssText = "background: linear-gradient(to bottom, rgb(56, 189, 149),  rgb(28, 139, 106));";
		document.querySelector(".button-2").style.cssText = "display: none";
		document.querySelector(".button-1").style.cssText = "display: block";
		*/
	}
</script>