<div class="center">
                <div class="form">
                    <h2>Sign-In</h2>
                    <input type="email" name="email" placeholder="Enter Email Address">
                    <input type="password" name="" placeholder="Enter your Password">
                    <button class="btn"><a href="#">Sign-In</a></button>
                     <br>   <br>  
                    <p class="para">Don't have an account. 
                    <a href="#">Sign up</a></p><br>
                    <p class="par">Log in with</p>

                    <div class="icons">
                        <a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
                        <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
                        <a href="#"><ion-icon name="logo-google"></ion-icon></a>
                        <a href="#"><ion-icon name="logo-github"></ion-icon></a>
                        <a href="#"><ion-icon name="logo-Linkedin"></ion-icon></a>
                    </div>

                </div>
    </div>

    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>

@import url('https://fonts.googleapis.com/css?family=Arial');
html{
    height: 100%;
  }
body{

    font-family: Arial, Verdana, sans-serif;
    position: relative;
    height: 100%;
   
  }
  
body:before{
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: url(https://raw.githubusercontent.com/googitwebdev/intro/master/image/watermark.png) 0 0 repeat;
    background-position: center;  
    opacity:0.2;
  }

*{
    margin: 0;
    padding: 0;
}

::placeholder{
    color: #fff;
    font-family: Arial;
}

.form{
    width: 250px;
    height: 380px;
    background-color: #5e5242;
    background-image: linear-gradient(315deg, #615648 0%, #28313b 74%);
    position: absolute;
    left: 650px;
    transform: translate(50%, -50%);
    border-radius: 8px;
    padding: 25px;
}

.form h2{
    width: 220px;
    font-family: Arial, Verdana, sans-serif;
    text-align: center;
    color: #dd8717;
    font-size: 22px;
    background-color: #fff;
    border-radius: 8px;
    margin: 2px;
    padding: 8px;
}

.form input{
    width: 240px;
    height: 35px;
    background: transparent;
    border-bottom: 1px solid #dd8717;
    border-top: none;
    border-right: none;
    border-left: none;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
    margin-top: 30px;
    font-family: Arial, Verdana, sans-serif;
}

.form input:focus{
    outline: none;
}

.btn{
    width: 240px;
    height: 40px;
    background: #dd8717;
    border: none;
    margin-top: 30px;
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
    transition: 0.4s ease;
}

.form .link{
    font-family: Arial, Verdana, sans-serif;
    font-size: 17px;
    text-align: center;
}
.form .para a{
    padding-top: 15px;
    text-decoration: none;
    color: #fff;
}

.par{
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
}
.btn:hover{
    background: rgb(165, 126, 75);
    color: #dd8717;
}
.btn a{
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
.icon{
    width: 200px;
    float: left;
    height: 70px;
}
.icons a{
    text-decoration: none;
    color: #fff;
}
.icons ion-icon{
    color: #fff;
    font-size: 30px;
    padding-left: 14px;
    padding-top: 5px;
    transition: 0.3s ease;
}
.icons ion-icon:hover{
    color: #dd8717;
}

.center {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }