

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  
}
body{
display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  background-color:#f7efef ;
  
}
.containre{
  position:relative;
  width: 100%;
  max-width:1100px;
margin:30px;
height:600px;
display: flex;
justify-content:space-between;
align-items:center;
background-color:#22282a;
}
.form88{
  width:50%;
  display: flex;
justify-content:center;
align-items:center;
  
}
.form88 form{
  position:relative;
  width:100%;
  padding:0 0 0 75px;
}
form h2{
  color:white;
  font-weight:500;
  font-size:2em;
  text-transform:uppercase;
  letter-spacing:2px;
  margin-bottom:40px;
  
  
}
.inputbox{
  position:relative;
  margin-bottom:40px;
  
}
.inputbox:last-child{
  margin-bottom:0;
  
}
.inputbox input, textarea{
  position:relative;
  background:transparent;
  outline:none;
  border:none;
  width:100%;
  color:white;
  padding-bottom:10px;
  font-size:16px;
  letter-spacing:1px;
  font-weight:300;
  border-bottom:2px solid rgba(255, 255, 255,0.5);
  resize:none;
}
textarea{
  height:100px ;
  
  
}
input[type="submit"]{
background:white;
padding:8px 20px;
  margin-top:-10px;
  width:100px;
  cursor: pointer;
  background-color:red;
  color:white;
  font-size:18px;
  border:none;
  text-transform:uppercase;
  letter-spacing:4px;
}
input[type="submit"]:focus{
  background-color:blue;
  color: #fff;
  
}
span{
 position:Absolute;
 left: 0;
  font-size:16px;
  font-weight:300;
  color:white;
  display:inline-block;
  pointer-events:none;
  letter-spacing:1px;
  transition:all 0.2s;
}
input:focus ~span, 
textarea:focus ~span, 
input:valid ~span, 
textarea:valid ~span{
transform: translateY(-24px);
  color:#1bfaad;
  font-size:14px;
}
input:focus, 
textarea:focus, 
input:valid, 
textarea:valid{
  border-bottom-color:white;
  
}
.img88{
  position:relative;
  width:50%;
  height:100%;
  overflow:hidden;
}
.img88:before{
  content:'';
  position: Absolute;
  top: 0;
  left:0;
  width:100%;
  height:100% ;
  background-color:red;
  transform-origin:bottom;
  transform: skewX(-25deg)
}
.img88 img{
  position:Absolute ;
  bottom:0;
  max-width:95%;
}
