Verification Card
In this project, we will build Verification Card Web Design Using HTML & CSS only. You Will Learn Many Things through this project web project:
- a web browser
- a text editor
- a desire to build things
Prerequisite: Basic knowledge of some front-end technologies like HTML, CSS.
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.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins:wght@400;500&display=swap"
rel="stylesheet">
<!-- icon -->
<script src="https://kit.fontawesome.com/04158e9780.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="verification-card">
<div class="header">
<div class="title">Verify</div>
<div class="icon"><i class="fa-solid fa-shield-halved"></i></div>
</div>
<form action="">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
</form>
<div class="buttons">
<button>Submit</button><button>Back</button>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.container{
height:100vh;
width:100%;
background-color:#e8e8e8;
display: flex;
justify-content: center;
align-items: center;
}
.verification-card{
height:400px;
width:350px;
background-color:white;
border-radius:12px;
box-shadow:0px 0px 5px 0.2px rgb(0,0,0,0.1);
padding:2.5%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content:space-between;
}
.verification-card .header{
display: flex;
flex-direction: column;
align-items: center;
}
.verification-card .title{
font-family:poppins;
font-weight:bolder;
font-size:1.5rem;
color:#5146e5;
}
.verification-card .icon{
color:#5146e5;
font-size:4rem;
margin-top:2%;
}
.verification-card form{
display: flex;
justify-content:space-between;
}
.verification-card form input{
height:40px;
width:40px;
border-radius:5px;
border:none;
box-shadow:3px 3px 6px #d1d1d1 inset,-3px -3px 6px #ffff inset;
font-size:1rem;
font-family:dm sans;
text-align: center;
font-weight:bolder;
}
.verification-card .buttons{
display: flex;
flex-direction: column;
justify-content:space-between;
height:105px;
}
.verification-card .buttons button{
height:45px;
border:none;
box-shadow:2px 2px 2px 0.2px rgb(0,0,0,0.2);
border-radius:5px;
cursor: pointer;
}
.verification-card .buttons button:first-child{
background-color:#5146e5;
color:white;
}