Login like here

body, .mainbody {
 background: #F5F5F5;
}
h4, h5 {
 color: #fff;
}
.mainbody {
 background: url(../../../../../images/page/beach.jpeg) no-repeat center center;
 -webkit-background-size: cover;
 background-size: cover;
 height: 100vh;
 overflow: hidden;
}
.mainbody:before {
 content: ' ';
 background: rgba(0,0,0,0.4);
 display: block;
 height: 100vh;
 width: 100vw;
 position: absolute;
}
.login {
 display: inline-block;
 width:400px;
}
.login .logo {
 transform: translateX(-50%);
 background: #273142;
 border-radius: 50%;
 position: absolute;
 height: 90px;
 width: 90px;
 z-index: 2;
 top: -4px;
 left: 50%;
}
.login .logo img {
 max-width: 70px;
 padding: -29px;
 margin-left: 9px;
 margin-top: 12px;
}
.login .tip {
 color: rgba(255,255,255,.3);
 margin-left: 28px;
 font-weight: 300;
 font-size:13px;
}
.login .login-body {
 background-color: #28313F;
 padding:46px;
 color: #fff;
}
.login .control-label {
 color: #fff;
 font-weight: 400;
 text-transform: uppercase;
 margin-bottom: 6px;
 font-size: 11px;
 display: block;
 color: #848c98;
}
.login #remember_me-field label {
 margin-bottom: 0;
}
.login #remember_me-field br {
 display: none;
}
.login #remember_me-field input {
 vertical-align: middle;
 margin-right: 10px !important;
 background: #2D3747;
 border: 1px solid rgb(49, 61, 79);
}
.login .form-control {
 background: rgb(41, 52, 70);
 padding: 8px 15px;
 font-size: 16px;
 color: #fff;
 width: 100%;
 border: 1px solid rgb(49, 61, 79);
 box-shadow: none;
 outline: none;
 border-radius: 4px;
 height: 40px;
}
.login .col-xs-12 {
 padding: 0px 35px;
}
.btn-login {
 background: #007aff;
 box-shadow: none;
 border: 1px solid transparent;
 display: inline-block;
 text-align: center;
 border-radius: 3px;
 transition: .2s;
 font-size: 15px;
 padding: 7px;
 width: 100%;
 color: #fff;
 height:inherit;
 font-weight:400;
 transform: none;
}
.btn-login:hover {
 padding: 7px;
 height:inherit;
 box-shadow: none;
 margin:0;
 background:rgba(0, 122, 255, 0.8);
 transform: none;
}
.login .social-btn {
 padding: 15px 0;
}
.login .login-body .btn-facebook,
.login .login-body .btn-google {
 background: transparent;
 color: #fff;
 border: 1px solid #313d4f;
 border-radius: 5px;
 text-decoration: none !important;
 min-width:49%;
}
.login .login-body .btn-facebook:hover,
.login .login-body .btn-facebook:focus {
 background: #007aff;
 border-color: #007aff;
}
.login .login-body .btn-google {
 float:right;
}
.login .login-body .btn-google:hover,
.login .login-body .btn-google:focus {
 background: #f7352a !important;
 border-color: #f7352a;
}
.login .login-register {
 padding: 10px 0;
 text-align: center;
 color: #fff;
}
.login .login-body a,
.login .login-register a {
 color: #fff;
 text-decoration: underline;
}
.login .login-register a:hover,
.login .login-register a:hover,
.login .login-body a:hover,
.login .login-body a:focus {
 text-decoration: none;
}
.login .login-footer {
 border-top: 1px solid #2c384b;
 background: #1f2938;
 text-align: center;
 padding: 15px 30px;
 font-size: 14px;
 color: #7f8ea3;
}
.login .login-footer a {
 color: #7f8ea3;
}
.panel-head {
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAH0lEQVQIW2OQu/KcQXzzJQbRdRcYRNafh2NREL3kIADMiQzLxUzZVQAAAABJRU5ErkJggg==) repeat-x;
}
.copyright {
 background: transparent;
 position: fixed;
 width: 100%;
 color: #99a9b5;
 padding: 5px 10px;
 bottom: 20px;
 left: 0;
 right: 0;
 width: 100%;
 z-index: 1;
}
.input-group-btn:last-child >.btn,
.input-group-btn:last-child >.btn-group {
 border: 1px solid #28313F;
 margin-left: 10px;
 border-radius: 0;
}

echo "<style>body > .body-wrapper { max-width: 100%; }</style>";
 echo renderNotices(getNotices(array('all', FUSION_SELF)));
 Panels::getInstance(TRUE)->hide_panel('RIGHT');
 Panels::getInstance(TRUE)->hide_panel('AU_CENTER');
 Panels::getInstance(TRUE)->hide_panel('U_CENTER');
 Core::setParam('header', FALSE);
 Core::setParam('footer', FALSE);
 Core::setParam('body_container', FALSE);
 Core::setParam('copyright', FALSE);
 Core::setParam('body_container', FALSE);
 if (iMEMBER) {
 redirect(BASEDIR.'index.php');
 } else {
 add_to_jquery('$(".nebulaBody").addClass("p-0");');
 add_to_head("<link rel='stylesheet' href='".THEME_PACK."css/login.css' type='text/css'>");
 // do not use rel
 $tpl = Template::getInstance('login');
 $tpl->set_template(__DIR__.'/../templates/login/login.html');
 $tpl->set_tag('openform', openform('loginform', 'post', $info['form_action'], ['remote_url' => $info['form_action']]));
 $tpl->set_tag('closeform', closeform());
 $tpl->set_tag('logo_image_path', IMAGES.'php-fusion-icon.png');
 $tpl->set_tag('id_field', $info['user_name']);
 $tpl->set_tag('pass_field', $info['user_pass']);
 $tpl->set_tag('remember_me_field', $info['remember_me']);
 $tpl->set_tag('registration_link', $info['registration_link']);
 $tpl->set_tag('forgot_password_link', $info['forgot_password_link']);
 $tpl->set_tag('login_button', $info['login_button']);
 if (!empty($info['social_connectors'])) {
 $tpl->set_block('connect_title', ['text' => "or sign in with"]);
 foreach($info['social_connectors'] as $connectors) {
 $tpl->set_block('connect_buttons', ['buttons' => $connectors['connector']]);
 }
 }
 echo $tpl->get_output();
 }

<div class='infinite-background' style='top:0; background: rgba(0,0,0,0.1);'>
 <div class='cloud-overlay'></div>
</div>
<div style='height:100vh; position: relative;'>
 <div class='login center-xy'>
 <div class="logo"><img src="{%logo_image_path%}"/></div>
 <div class="spacer-md">
 {%openform%}
 <div class="login-body">
 <div class="spacer-sm">
 {%id_field%}
 {%pass_field%}
 <div class="remember">
 {%remember_me_field%}
 </div>
 {%login_button%}

 {connect_title.{
 <div class="text-center spacer-xs">{%text%}</div>
 }}
 <div class="social-divs" style="margin-bottom:15px; text-align:center;">
 {connect_buttons.{
 {%buttons%}
 }}
 </div>
 <div class="terms text-center">
 By clicking "Login" you agree to the <a href="legal/tos.php" target="_blank">Terms of Service</a>
 </div>

 </div>
 </div>
 {%closeform%}
 <div class="login-footer">
 {%forgot_password_link%}
 </div>
 <div class="login-register">
 {%registration_link%}
 </div>
 </div>
 </div>
</div>