Hey guys in this post, we will create simple HTML and CSS sign up form with full coding example.
Create HTML file
Create index.html
file and add the following content
<!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.0">
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<div class="container">
<div class="box">
<h1>Sign Up</h1>
<div class="user">
<i class="fas fa-user"></i>
<input type="text" name="username" id="username" placeholder="Full name" />
<i class="fas fa-envelope"></i>
<input type="text" name="username" id="username" placeholder="Email Address" />
<i class="fas fa-unlock-alt"></i>
<input type="password" name="password" id="password" placeholder="Password" />
<i class="fas fa-unlock-alt"></i>
<input type="password" name="password" id="password" placeholder="Confirm Password" />
</div>
<div class="login-btn">
<button class="btn">Submit</button>
<p class="signup">Already have an account ? <span>Log in</span></p>
</div>
</div>
</div>
</body>
</html>
Create CSS file
Create style.css
file and add the following content
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
color: #fff;
}
h1 {
font-weight: 900;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
flex-direction: column;
}
.box {
width: 350px;
height: 460px;
font-size: 16px;
padding: 40px 40px;
background: #0F044C;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 30px;
}
.user {
margin-top: 50px;
}
.fas {
position: absolute;
}
input {
width: 90%;
margin-bottom: 25px;
padding: 0px 30px 15px;
font-size: 16px;
border: none;
border-bottom: 1px solid #141E75;
outline: none;
background-color: #0F044C;
color: #fff;
}
input:focus {
border-bottom: 1px solid #EEEEEE;
}
.reset-password {
color: #ff7f50;
text-align: right;
margin-top: 0px;
font-size: 12px;
}
.login-btn {
margin-top: 25px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.btn {
display: block;
width: 80%;
padding: 15px;
background-color: #EEEEEE;
color: #0F044C;
border: none;
border-radius: 20px;
font-size: 20px;
font-weight: 600;
opacity: 0.8;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btn:hover{
opacity: 1;
}
.signup span{
color: #7fb8e6;
}
.signup span:hover{
color: #3793df;
}
Run the file
Open the index.html file in any browser –
That’s it for this post, if you like this post, share this with your friends and colleagues or you can share this within your social media platform. Thanks, I will see you in our next post.