Bootstrap Elegant Create Account Sign Up Form with Icons | CSS

Bootstrap Elegant Create Account Sign Up Form with Icons | CSS

Step 1: index.php

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"> <title>Bootstrap Elegant Sign Up Form with Icons</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="signup-form"> <form action="confirmation.html" method="post"> <h2>Create Account</h2> <p class="lead">It's free and hardly takes more than 30 seconds.</p> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input type="text" class="form-control" name="username" placeholder="Username" required="required"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-paper-plane"></i></span> <input type="email" class="form-control" name="email" placeholder="Email Address" required="required"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-lock"></i></span> <input type="password" class="form-control" name="password" placeholder="Password" required="required"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-lock"></i> <i class="fa fa-check"></i> </span> <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required"> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block btn-lg">Sign Up</button> </div> <p class="small text-center">By clicking the Sign Up button, you agree to our <br><a href="#">Terms & Conditions</a>, and <a href="#">Privacy Policy</a>.</p> </form> <div class="text-center">Already have an account? <a href="#">Login here</a>.</div> </div> </body> </html>

Step 2: styles.css

body { color: #999; background: #f5f5f5; font-family: 'Roboto', sans-serif; } .form-control, .form-control:focus, .input-group-addon { border-color: #e1e1e1; border-radius: 0; } .signup-form { width: 390px; margin: 0 auto; padding: 30px 0; } .signup-form h2 { color: #636363; margin: 0 0 15px; text-align: center; } .signup-form .lead { font-size: 14px; margin-bottom: 30px; text-align: center; } .signup-form form { border-radius: 1px; margin-bottom: 15px; background: #fff; border: 1px solid #f3f3f3; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px; } .signup-form .form-group { margin-bottom: 20px; } .signup-form label { font-weight: normal; font-size: 13px; } .signup-form .form-control { min-height: 38px; box-shadow: none !important; border-width: 0 0 1px 0; } .signup-form .input-group-addon { max-width: 42px; text-align: center; background: none; border-width: 0 0 1px 0; padding-left: 5px; } .signup-form .btn { font-size: 16px; font-weight: bold; background: #19aa8d; border-radius: 1px; border: none; min-width: 140px; outline: none !important; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .signup-form .btn:hover, .signup-form .btn:focus { background: #179b81; } .signup-form a { color: #19aa8d; text-decoration: none; } .signup-form a:hover { text-decoration: underline; } .signup-form .fa { font-size: 21px; } .signup-form .fa-paper-plane { font-size: 17px; } .signup-form .fa-check { color: #fff; left: 9px; top: 18px; font-size: 7px; position: absolute; } input:focus, textarea:focus { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border-bottom: 3px solid #19aa8d !important; outline-width: 0; font-weight: 400 }

Step 3: confirmation.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Bootstrap Sign up Form with Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<style>
h1 {
color: #2FAC66;
font-weight: bold;
padding-bottom: 15px;
}

i {
color: #2FAC66;
width: 60px;
height: 60px;
border-radius: 60px;
background: #dff0d8;
display: inline-block;
line-height: 62px;
font-size: 28px;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<br>
<br>
<br>
<br>
<div class="text-center">
<i class="icon-box"><span class="glyphicon glyphicon-ok"></span></i>
<h1>Confirmation</h1>
<p>Form submitted successfully. It's just for testing purpose, data not saved.</p>
</div>
</body>

</html>

Reactions

Post a Comment

1 Comments

Souy SoengApril 10, 2020 at 12:55 PM
D
ReplyDelete
Replies

CAN FEEDBACK

Emoji

(y)

:)

:(

hihi

:-)

:D

=D

:-d

;(

;-(

@-)

:P

:o

:>)

(o)

:p

(p)

:-s

(m)

8-)

:-t

:-b

b-(

:-#

=p~

x-)

(k)