How to design form sign in and sign up 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="icon" href="assets/image/favicon.ico" type="image/x-icon">
<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://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- --------------style css --------------->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="login-form">
<form class="js-validate form-signin p-5" action="/examples/actions/confirmation.php" method="post">
<div class="text-center">
<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="text-center mb-4">
<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="js-focus-state input-group form">
<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>
<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>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
</div>
<div class="row mb-3">
<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">
<label class="custom-control-label" for="rememberMeCheckbox">
Remember Me
</label>
</div>
<!-- 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">
<button type="submit" class="btn btn-primary login-btn btn-block">Signin</button>
</div>
<div class="text-center mb-3">
<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">
<i class="fa fa-facebook mr-2"></i>
Signin with Facebook
</button>
</div>
<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>
</html>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://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- --------------style css --------------->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="login-form">
<form class="js-validate form-signin p-5" action="/examples/actions/confirmation.php" method="post">
<div class="text-center">
<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="text-center mb-4">
<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="js-focus-state input-group form">
<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>
<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>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-key"></i>
</span>
</div>
<input type="password" class="form-control" name="password" placeholder="Confirm Password" required="required">
</div>
</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>
<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">
<i class="fa fa-facebook mr-2"></i>
Signin with Facebook
</button>
</div>
<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>
</html>
Step 3: assets/css/styles.css
/* =============== */
/* Version : css 3 */
/* Creat by : Soeng Souy */
/* =============== */
body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
display: flex;
-ms-flex-align: center;
align-items: center;
background-color: #f5f8fb;
}
.form-signin {
width: 100%;
max-width: 480px;
margin: auto;
}
.p-5 {
padding: 2rem !important;
}
/* image */
.mb-3, .my-3 {
margin-bottom: 1rem !important;
}
img {
vertical-align: middle;
border-style: none;
}
/* btn */
.btn-primary {
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;
padding: 1em;
}
.btn-group-sm>.btn, .btn-sm {
padding: 1.25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
}
a {
color: #21c87a;
text-decoration: none;
background-color: transparent;
}
p {
color: #646f79;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
a:hover {
color: #168652;
text-decoration: none;
}
.text-muted {
color: #8c98a4 !important;
}
.btn-facebook {
color: #fff;
background-color: #3b5998;
border-color: #3b5998;
}
.btn-facebook:hover {
color: #fff;
background-color: #30497c;
border-color: #2d4373;
}
.btn-twitter {
color: #fff;
background-color: #0c85d0;
border-color: #0b7ec4;
}
.btn-twitter:hover {
color: #fff;
background-color: #0d8ddc;
border-color: #0c85d0;
}
.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%;
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%;
height: calc(1.7em + 1.5rem + 2px);
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;
}
.input-group-text {
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;
border: 1px solid #e3e6f0;
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;
}
.input-group-prepend .fa {
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 {
background: #507cc0 !important;
}
.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 {
padding: 0 10px;
color: #8c98a4;
background: #f7f7f7;
position: relative;
font-size: 0.75rem;
top: -11px;
z-index: 1;
}
0 Comments
CAN FEEDBACK
Emoji