<div class="img">
      <div class="box-size">
        
        <h1 class="text-center" style="letter-spacing: 2px;">LOGIN PAGE</h1>
        <span class="span-border"></span>
        <form class="mt-4" method="post">
           <input type="hidden" name="_token" value="{{ csrf_token() }}">
          <div class="form-group">
            <label>Email id</label>

            <input type="text" name="email" placeholder="Emaid id" class="inputclass">
          </div>
           <div class="form-group">
            <label>Password</label>

            <input type="password" name="password" placeholder="Password" class="inputclass">
          </div>
          <button class="btn1 my-4">Submit</button>
        </form>
      </div>
    </div>

  
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

*{font-family: 'Muli', sans-serif;
    margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
 .img{
     background-image: linear-gradient(rgba(169, 0, 255, 0.15),rgb(0, 90, 143));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
  position: relative;
 
 }
 .img:before{
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0%;
  opacity:.4;
  bottom: 0%;
  background: linear-gradient(to bottom right,#19E5BC,#54D711);
 }
 .box-size{

  padding:20px 25px;
 width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
 background: white;
 box-sizing: border-box;
 box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
      0 3px 1px -2px rgba(0,0,0,.12),
       0 1px 0px 0 rgba(0,0,0,.2);
 }
 .inputclass{
  border: 1px solid darkcyan;
    padding:5px 5px;
    width: 100%;

}
.btn1{
 background: linear-gradient(to right,#19E5BC,slateblue);
  border: none;
  padding: 5px 20px;
  color: white;
}
.span-border{
 background-image: linear-gradient(45deg, #80bdff, #00fa64f7);
    top: 0;
    position: absolute;
    /* background: red; */
     
    width: 100%;
    height: 7px;
    left: 0;

} 
.inputclass::placeholder{
  padding-left: 10px:
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.