<style>

*{
    transition: all 0.6s;
}

html {
    height: 100%;
}

body{
    font-family: 'Lato', sans-serif;
    color: #888;
    margin: 0;
}

#main{
    display: table;
    width: 100%;
    height: 100vh;
    text-align: center;
}

.fof{
	  display: table-cell;
	  vertical-align: middle;
}

.fof h1{
	  font-size: 50px;
	  display: inline-block;
	  padding-right: 12px;
	  animation: type .5s alternate infinite;
}

@keyframes type{
	  from{box-shadow: inset -3px 0px 0px #888;}
	  to{box-shadow: inset -3px 0px 0px transparent;}
}

</style>
<div class="wrapper">
<nav class="navbar navbar-expand-lg bg-white fixed-top " style="padding: 10px; z-index: 10;" on-scroll="400">
    <div class="container" style="margin-left: 100px;">
        <div class="navbar-translate">
            <a class="navbar-brand" rel="tooltip" data-placement="bottom" href=''>
                
            </a>
			<!-- <a href="<?php //echo site_url() . "/Login/show_login"; ?>" style="text-align:center">back to hone page</a> -->
        </div>
    </div>
</nav>
    <div id="main">
        <div class="fof">
                <h1>Login Fail</h1><br>
                <a class="btn" href='<?php echo site_url() . "/Login/show_login"; ?>'>Back to hone page</a>
        </div>
    </div>
</div>