Bilgisayarımı temizlerken kod sayfamda buldum bunu zamanında eğitim alırken tasarladığımı hatırladım. İsteyen varsa kullanabilir

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Giriş Yap</title>
    <link rel="stylesheet"  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrapper">
        <div class="title">Kayıt olcuk
        </div>
        <div class="social_media">
            <div class="item">
                <i class="fab fa-facebook-f"></i>
            </div>
            <div class="item">
                <i class="fab fa-instagram"></i>
            </div>
            <div class="item">
                <i class="fab fa-twitter"></i>
            </div>
            
        </div>

        <div class="form">
            <div class="input_field">
                <input type="text" placeholder="Name" class="input">
                <i class="fas fa-user"></i>
            </div>
            <div class="input_field">
                <input type="text" placeholder="Email" class="input">
                <i class="far fa-envelope"></i>
            </div>
            <div class="input_field">
                <input type="Password" placeholder="Password" class="input">
                <i class="fas fa-lock"></i>
                </div>
                <div class="btn">
                    <a href="#">Kayıt Ol</a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

@import url('https;//fonts.googleapis.com/css?family=Josefin+Sans');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    font-family: 'Josefin Sans', sans-serif;
}
body {
    background: #3aaf9f;
}

.wrapper{
    max-width: 350px;
    width: 100%;
    height: auto;
    background: #fff;
    padding: 60px 45px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
}
.wrapper .title{
    margin-bottom: 20px;
    text-align: center;
    font-size: 26px;
    color: #3aaf9f;
}
.wrapper .social_media {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.wrapper .social_media .item{
    width: 35px;
    height: 35px;
    border: 2px solid #eeeeee;
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    cursor: pointer;
    color: #eeeeee;
    transition: all 0.5s ease;
}
.wrapper .social_media .item:hover{
    border-color: #3aaf9f;
    color: #3aaf9f;
}
.wrapper .form .input_field{
    position: relative;
    margin-bottom: 10px;
}
.wrapper .form .input_field .input{
    width: 100%;
    padding: 12px;
    padding-left: 30px;
    border: none;
    background: #eeeeee;
}
.wrapper .form .btn{
    width: 70%;
    margin: 20px auto 0;
    background: #3aaf9f;
    padding: 12px;
    text-align: center;
    border-radius: 25px;
}
.wrapper .form .btn a{
    color: #fff;
}
.wrapper .form .input_field i{
    position: absolute;
    top: 10px;
    left: 10px;
    color: #1d2120;
    font-size: 14px;
}

::-webkit-input-placeholder{
    color: #848484;
}

DEMO