How to design form sign in and sign up and recover account using CSS3

How to design form sign in and sign up and recover account using CSS3

Soeng Souy

         

How to design form sign in and sign up and recover the account using CSS3






Step 1: sign-in.html

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Signin Simple</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


    <form class="js-validate form-signin p-5" action="/examples/actions/confirmation.php" method="post">
<!-- --------------style css --------------->
<link rel="stylesheet" href="assets/styles.css">

</head>
<body>
<div class="login-form">
        <div class="text-center">

        <div class="text-center mb-4">
            <a href="index.html" aria-label="Space">
                <img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
            </a>
          </div>

            <div class="js-focus-state input-group form">
            <h1 class="h3 mb-0">Please sign in</h1>
            <p>Signin to manage your account.</p>
        </div>
     
        <div class="js-form-message mb-3">
              <div class="input-group-prepend form__prepend">

              <input type="email" class="form-control form__input" name="email" required="" placeholder="Email" aria-label="Email" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success">
                <span class="input-group-text form__text">
                  <i class="fa fa-user form__text-inner"></i>
                </span>
              </div>
            </div>
        </div>
		<div class="form-group">
            <div class="input-group">

                <input type="password" class="form-control" name="password" placeholder="Password" required="required">				
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-lock"></i>
                    </span>                    
                </div>
            </div>
        </div>        
        <div class="row mb-3">

                <label class="custom-control-label" for="rememberMeCheckbox">
            <div class="col-6">
              <!-- Checkbox -->
              <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
                <input type="checkbox" class="custom-control-input" id="rememberMeCheckbox">
                  Remember Me
                </label>
              </div>

            <button type="submit" class="btn btn-primary login-btn btn-block">Signin</button>
              <!-- End Checkbox -->
            </div>
            <div class="col-6 text-right">
              <a class="float-right" href="recover-account.html">Forgot Password?</a>
            </div>
        </div>
        <div class="form-group mb-3">
        </div>
        
        <div class="text-center mb-3">

                <i class="fa fa-facebook mr-2"></i>
            <p class="text-muted">Do not have an account? <a href="sign-up.html">Signup</a></p>
        </div>
		<div class="or-seperator"><i>OR</i></div>
        
        <div class="row mx-gutters-2 mb-4">
            <div class="col-sm-6 mb-2 mb-sm-0">
              <button type="button" class="btn btn-block btn-sm btn-facebook">
                Signin with Facebook
              </button>
            </div>

</html>
            <div class="col-sm-6">
              <button type="button" class="btn btn-block btn-sm btn-twitter">
                <i class="fa fa-twitter mr-2"></i>
                Signin with Twitter
              </button>
            </div>
        </div>
        <p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
    </form>
</div>


</body>

Step 2: sign-up.html

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Signin Simple</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


    <form class="js-validate form-signin p-5" action="/examples/actions/confirmation.php" method="post">
<!-- --------------style css --------------->
<link rel="stylesheet" href="assets/styles.css">

</head>
<body>
<div class="login-form">
        <div class="text-center">

        <div class="text-center mb-4">
            <a href="index.html" aria-label="Space">
                <img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
            </a>
          </div>

            <div class="js-focus-state input-group form">
            <h1 class="h3 mb-0">Please sign up</h1>
            <p>Fill out the form to get started.</p>
        </div>
     
        <div class="js-form-message mb-3">
              <div class="input-group-prepend form__prepend">

              <input type="email" class="form-control form__input" name="email" required="" placeholder="Email" aria-label="Email" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success">
                <span class="input-group-text form__text">
                  <i class="fa fa-user form__text-inner"></i>
                </span>
              </div>
            </div>
        </div>
		<div class="form-group">
            <div class="input-group">

                <input type="password" class="form-control" name="password" placeholder="Password" required="required">				
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-lock"></i>
                    </span>                    
                </div>
            </div>
        </div> 
        <div class="form-group">

                <input type="password" class="form-control" name="password" placeholder="Confirm Password" required="required">				
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-key"></i>
                    </span>                    
                </div>
            </div>
        </div>          
    

		<div class="or-seperator"><i>OR</i></div>
        <div class="form-group mb-3">
            <button type="submit" class="btn btn-primary login-btn btn-block">Signup</button>
        </div>
        
        <div class="text-center mb-3">
            <p class="text-muted">Have an account? <a href="sign-in.html">Signin</a></p>
        </div>
        

              <button type="button" class="btn btn-block btn-sm btn-twitter">
        <div class="row mx-gutters-2 mb-4">
            <div class="col-sm-6 mb-2 mb-sm-0">
              <button type="button" class="btn btn-block btn-sm btn-facebook">
                <i class="fa fa-facebook mr-2"></i>
                Signin with Facebook
              </button>
            </div>
            <div class="col-sm-6">

</html>
                <i class="fa fa-twitter mr-2"></i>
                Signin with Twitter
              </button>
            </div>
        </div>
        <p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
    </form>
</div>


</body>

Step 3: recover-account.html

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Signin Simple</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


    <form class="js-validate form-signin p-5" action="/examples/actions/confirmation.php" method="post">
<!-- --------------style css --------------->
<link rel="stylesheet" href="assets/styles.css">

</head>
<body>
<div class="login-form">
        <div class="text-center">

        <div class="text-center mb-4">
            <a href="index.html" aria-label="Space">
                <img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
            </a>
          </div>

            <div class="js-focus-state input-group form">
            <h1 class="h3 mb-0">Recover account</h1>
            <p>Enter your email address and an email with instructions will be sent to you.</p>
        </div>
     
        <div class="js-form-message mb-3">

              <input type="email" class="form-control form__input" name="email" required="" placeholder="Email" aria-label="Email" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success">
              <div class="input-group-prepend form__prepend">
                <span class="input-group-text form__text">
                  <i class="fa fa-user form__text-inner"></i>
                </span>
              </div>
            </div>
        </div>
	

            <p class="text-muted">Have an account? <a href="sign-in.html">Signin</a></p>
        <div class="form-group mb-3">
            <button type="submit" class="btn btn-primary login-btn btn-block">Recover account</button>
        </div>
        
        <div class="text-center mb-3">
        </div>
		<div class="or-seperator"><i>OR</i></div>
        

            </div>
        <div class="row mx-gutters-2 mb-4">
            <div class="col-sm-6 mb-2 mb-sm-0">
              <button type="button" class="btn btn-block btn-sm btn-facebook">
                <i class="fa fa-facebook mr-2"></i>
                Signin with Facebook
              </button>

        <p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
            <div class="col-sm-6">
              <button type="button" class="btn btn-block btn-sm btn-twitter">
                <i class="fa fa-twitter mr-2"></i>
                Signin with Twitter
              </button>
            </div>
        </div>
    </form>
</div>

</body>

</html>

Step 4: assets/styles.css

/* =============== */
/* Version  : css 3 */
/* Creat by : Soeng Souy */
/* =============== */


    font-family: "Roboto", Helvetica, Arial, sans-serif;
body {
    font-size: 1rem;

    display: flex;
    font-weight: 400;
    -ms-flex-align: center;

    background-color: #f5f8fb;
    align-items: center;
}
.form-signin {
    width: 100%;

    padding: 2rem !important;
    max-width: 480px;
    margin: auto;
}
.p-5 {
}

/* image */
.mb-3, .my-3 {

    border-style: none;
    margin-bottom: 1rem !important;
}
img {
    vertical-align: middle;
}

/* btn */

.btn-primary {

    padding: 1em;
    color: #fff !important;
    background-color: #1BA262 !important;
    border-color: #1BA262 !important;
}

    padding: 1em;
.btn-primary:hover {
    color: #fff !important;
    background-color: #168652 !important;
    border-color: #168652 !important;
}

}
.btn-group-sm>.btn, .btn-sm {
    padding: 1.25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
a {
    color: #21c87a;

    color: #168652;
    text-decoration: none;
    background-color: transparent;
}
p {
    color: #646f79;
}
p {
    margin-top: 0;
    margin-bottom: 1rem;
}

a:hover {
    text-decoration: none;
}

    background-color: #30497c;
.text-muted {
    color: #8c98a4 !important;
}

.btn-facebook {
    color: #fff;
    background-color: #3b5998;
    border-color: #3b5998;
}
.btn-facebook:hover {
    color: #fff;

    border-color: #0c85d0;
    border-color: #2d4373;
}

.btn-twitter {
    color: #fff;
    background-color: #0c85d0;
    border-color: #0b7ec4;
}
.btn-twitter:hover {
    color: #fff;
    background-color: #0d8ddc;
}


}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
    background-color:#21C87A;
    box-shadow: none !important;
}
.custom-control-label:before{
    box-shadow: none !important;

/* login form */
.login-form {
    width: 100%;

    height: calc(1.7em + 1.5rem + 2px);
    max-width: 480px;
    margin: auto;
}
.login-form form {        
    padding: 30px;
}

input:focus {
    box-shadow: none !important;
    border: 1px solid #20C477 !important;
    outline-width: 0;
}

.form-control {
    display: block;
    width: 100%;

.input-group-text {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: #151b26;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e3e6f0;
    border-radius: 0.25rem;
    transition: all 0.2s ease-in-out;
}

    border: 1px solid #e3e6f0;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: #8f95a0;
    text-align: center;
    white-space: nowrap;
    background-color: #fff;

.input-group-prepend .fa {
    border-radius: 0.25rem;
}

.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.login-form h2 {
    margin: 0 0 15px;
}
.form-control, .login-btn {
    border-radius: 2px;
}

    background: #507cc0 !important;
    font-size: 18px;
}
.login-btn {
    font-size: 15px;
    font-weight: bold;
  	min-height: 40px;
}
.social-btn .btn {
    border: none;
    margin: 10px 3px 0;
    opacity: 1;
}
.social-btn .btn:hover {
    opacity: 0.9;
}
.social-btn .btn-secondary, .social-btn .btn-secondary:active {
}

    padding: 0 10px;
.social-btn .btn-info, .social-btn .btn-info:active {
    background: #64ccf1 !important;
}
.social-btn .btn-danger, .social-btn .btn-danger:active {
    background: #df4930 !important;
}
.or-seperator {
    margin-top: 20px;
    text-align: center;
    border-top: 1px solid #ccc;
}
.or-seperator i {
    color: #8c98a4;
    background: #f7f7f7;

}   
    position: relative;
    font-size: 0.75rem;
    top: -11px;

    z-index: 1;


Reactions
Soeng Souy

Posted by Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

0 Comments

CAN FEEDBACK

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)
close