sty.css

*{
    margin:0;
    padding:0;
 }
 .hero{
   width:100%;
   
   background-position:cover;
   background-attachment:fixed;
   position:absolute;

}
.form-box{
   width:380px;
   height:480px;
   position:relative;
   margin:6% auto;
   margin-top:200px;
   background:transparent;
   padding:5px;
   overflow:hidden;
   box-shadow:0px 1px 2px 2px orangered;
   border-radius:40px;
   background-filter:blur(100px);

}
.button-box{
   width:220px;
   margin:35px auto;
   position:relative;
   box-shadow:0px 0px 1px 1px orange;
   border-radius:30px;
}
.toggle-btn{
  padding: 10px 30px;
  color:blue;
  cursor:pointer;
  background:transparent;
  border:0;
  outline:none;
  position:relative;
}
::placeholder{
color:black;
}
#btn{
 top:0;
 left:0;
 position:absolute;
 width:110px;
 height:100%;
 background:linear-gradient(to right,#ff105f,#00bfff);
 border-radius:30px;
 transition: .5s;
}
.input-field placeholder{
  color:black;
}
.input-group{
 color:black;
 top:180px;
 position:absolute;
 width:280px;
 transition: .5s;
}
.input-field{
width:100%;
color:black;
padding:10px 0;
margin:5px 0;
border-left:0;
border-top:0;
border-right:0;
border-bottom:1px solid black;
outline:none;
background:transparent;
}
.submit-btn{
 width:85%;
 padding: 10px 30px;
 color:blue;
 cursor:pointer;
 display:block;
 margin:auto;
 background:linear-gradient(to right,#ff105f,#00bfff);
 border:0;
 outline:none;
 border-radius:30px;
 box-shadow:2px 2px 3px 3px orange;
}
.check-box{
 margin: 30px 10px 30px 0;
 color:blue;
}
span{
color:black;
font-size:12px;
bottom:68px;
position:absolute;
}
#login{
 left:60px;
}
#register{
 left:450px;
}
body{
    background-image: url("hom1.jpg");
height: 1000px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
h1{
text-align:center;
color:orangered;
margin-top:50px;
}
img 
{
width:48px;
hieght:48px;
}