Untitled

<!DOCTYPE html>
<html>
    <head>

    </head>
    <style>
        *{
            font: "Helvetica Neue",Helvetica;
        }
        .borda{
            padding: 30px;
            background-color: #DDDDDD;
            width: 700px;
            height: 500px;
            margin: auto;
        }
        .login-box
        {
            background-color:  white;
            width: 700px;
            height: 500px;
            margin: auto;
            border-radius: 4px;
        }
        .img-logo{
            margin-top: 40px;
             margin-left: 15px;
             margin-bottom: 40px;
            width: 335px;
        }
        .logo{

            background-color: #f5f5f5;
             width: 100%;
             margin-bottom: 1px solid #ddd;
             border-radius: 4px;
        }
        .form
        {
            margin: 15px;
        }
        .inputs{
            width: 100%;
            border-radius: 4px;
            height: 20px;
            border: 1px solid #ccc;
        }
        button{
            border: 1px solid #2e6da4;
            background: #337ab7;
            color: white;
            width: 100%;
            height: 30px;
            font-display: 14px;
            border-radius: 4px;
        }
        button:hover{
            cursor: pointer;

        }
        .espacados
        {
            margin-top:15px;
            margin-bottom:15px;
        }
        .lable
        {
            margin: 5px;
        }
        a
        {
            all: unset;
            color: #337ab7;
        }
        a:hover
        {
            cursor: pointer;
            color: #23527c;
            text-decoration: underline
        }
        footer{
            text-align: right;
        }
        .help{
            float: left;
            display: block;
        }
    </style>
    <body>
        <div class="borda">
        <div class="login-box">
            <div class="logo">
                <img  class="img-logo" src="media\ipca.png" alt="logo-ipca">
                <div class="separador"></div>
            </div>
            <div class="form">
                <hr size="1" style="border:1px dashed #f5f5f5;">
                <div class="espacados">
                       <p class="lable"> E-mail</p> <input class="inputs"  name="mail" type="text" placeholder="E-mail">
                </div>
                <div class="espacados">
                       <p class="lable">Password</p>  <input class="inputs" name="pass" type="password" placeholder="Password"><br>
                </div>
                <div class="espacados">
                        <a href="">Forgot your password</a>
                </div>
                <div class="espacados">
                <input type="checkbox"> Don`t Remember Login  <br>
                <input type="checkbox"> Clear prior granting of permission for release of your information to this  <br>
                </div>
                <div class="espacados">
                    <button>Login</button>
                </div>
                <hr size="1" style="border:1px dashed #f5f5f5;">
                <footer>
                    <a class="help" href="">Help Security</a>
                    <img class="footer-img"src="media\rctsaai.png" alt="">
                </footer>
            </div>
        </div>
    </div>
    </body>
</html>