
<?php

require_once("header.php");

?>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body , html , a , p , h1 , h2 , h3 , h4 , li , ul {
  margin: 0;
  padding: 0;
}

* {
  box-sizing:border-box;
}
.form_outer {
    margin: 165px 0px 50px;
}
.fill_form {
    position: relative;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    background: #fff8eb;
    box-shadow: 0px 7px 33px -14px #e93e21;
}
.fill_form .fill_tab-header {
  height:50px;
  line-height:50px;
}
.fill_form .fill_tab-header > div {
  width:50%;
  float:left;
  padding: 7px 0px;
  text-align:center;
  background:#ddd;
  color:#555;
  cursor:pointer;
}
.fill_form .fill_tab-header > div.fill_active {
    background: #e93e21;
    color: #fff8eb;
    font-size: 22px;
}
.fill_form .fill_tab-content {
  padding:20px;
}
.fill_form .fill_tab-content .fill_form-element {
  margin:45px 0px;
}
.fill_form .fill_tab-content .fill_form-element input {
  width:100%;
  padding:10px;
  border:1px solid #aaa;
  font-size:25px;
  background:#f5f5f5;
  border-radius:5px;
  outline:none;
}
.fill_form .fill_tab-content .fill_form-element input[type="checkbox"] {
  width:30px;
  margin:8px 0px;
  margin-left:-5px;
}
.fill_form .fill_tab-content .fill_form-element label {
  color:#111;
}
.fill_form .fill_tab-content .fill_form-element button {
  margin-top:5px;
  width:100%;
  padding:18px;
  border:none;
  outline:none;
  background:#e93e21;
  color:#f5f5f5;
  font-size:18px;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:5px;
}
.fill_form .fill_tab-content > div.fill_active {
  display:block;
}
.fill_form .fill_tab-content > div {
  display:none;
}
.fill_form-out{
  width: 100%;
  float: left;
}


</style>

<div class="container-fluid form_outer">
    <div class="row">
        <div class="col-md-4" ></div>
        <div class="col-md-4" >
            <div class="fill_form">
                <div class="fill_tab-header">
                <div class="fill_active">Sign Up</div>
                <div>Sign In</div>
                </div>
                <div class="fill_tab-content">
                    <div class="fill_tab-body fill_active">
                        <div class="fill_form-element">
                        <input type="text" placeholder="Email">
                        </div>
                        <div class="fill_form-element">
                        <input type="text" placeholder="Username">
                        </div>
                        <div class="fill_form-element">
                        <input type="password" placeholder="Password">
                        </div>
                        <div class="fill_form-element">
                        <button>Sign Up</button>
                        </div>
                    </div>

                    <div class="fill_tab-body">
                        <div class="fill_form-element">
                        <input type="text" placeholder="Email / Username">
                        </div>
                        <div class="fill_form-element">
                        <input type="password" placeholder="Password">
                        </div>
                        <div class="fill_form-element">
                        <input type="checkbox" id="remember_me">
                        <label for="remember_me">Remember me</label>
                        </div>
                        <div class="fill_form-element">
                        <button>Sign In</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4" ></div>
    </div>
</div>


<script type="text/javascript">
let tabPanes = document.getElementsByClassName("fill_tab-header")[0].getElementsByTagName("div");
 
for(let i=0;i<tabPanes.length;i++){
  tabPanes[i].addEventListener("click",function(){
    document.getElementsByClassName("fill_tab-header")[0].getElementsByClassName("fill_active")[0].classList.remove("fill_active");
    tabPanes[i].classList.add("fill_active");
    
    document.getElementsByClassName("fill_tab-content")[0].getElementsByClassName("fill_active")[0].classList.remove("fill_active");
    document.getElementsByClassName("fill_tab-content")[0].getElementsByClassName("fill_tab-body")[i].classList.add("fill_active");
  });
}
</script>
<?php

require_once("footer.php");

?>