fancy.css

body{
    height: 60vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    font-family: cursive;
}
.form{
    width: 50%;
    height: 50%;
    position: relative;

}

.form input{
    width: 100%;
    height: 100%;
    color: indigo;
    padding-top: 20px;
border: none;
outline:none;
}

.form lable{
position: absolute;
bottom: 0px;
left: 0%;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 1px solid black;
}

.form label::after {
position: absolute;
bottom: -1px;
left: 0%;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 3px solid blue;
    
}

.form input:focus + .label-name .content-name, .from input:valid + .label-name .content-name{
    transform:translate(-150) ;
    font-size: 14px;
    color: blue;
}
.Home{
    width: 50px;
    height:30px;
    position: relative;
    left: -300px;
}
.About{
    width: 50px;
    height:30px;
    position: relative;
    left: 0px;

}
.Contact{
    width: 60px;
    height:30px;
    position: relative;
    left: 300px;
}

 
@keyframes