<body>
    <div class="login-div">
        <div class="logo"><img src="/Users/sakamotonami/Downloads/messageImage_1618455073494.jpg"></div>
        <div class="title">ぺんぺん</div>
        <div class="sub-title">プログラミング作品毎日投稿✏️</div>
        <div class="fields">
            <div class="username"><i class="fas fa-user"></i><input type="username" class="user-input" placeholder="username" /></div>
            <div class="password"><i class="fas fa-lock"></i><input type="password" class="pass-input" placeholder="password" /></div>
        </div>
        <button class="signin-button">Login</button>
        <div class="link">
            <a href="#">Forgot password?</a> or <a href="#">Sign up</a>
        </div>
    </div>
</body>
*{
    box-sizing: border-box;
}

body{
    height:100vh;
    width:100vw;
    overflow: hidden;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#555;
    background:#ecf0f3;
    font-family: sans-serif;
}

.login-div{
    width:430px;
    height:680px;
    padding:60px 35px 35px 35px;
    border-radius: 40px;
    background: #ecf0f3;
    box-shadow: 13px 13px 20px #cbced1,
                -13px -13px 20px #ffffff;
}

.logo{
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img{
    width:100px;
    height:100px;
    border-radius: 50%;
    border-color:#ffffff;
    box-shadow:0px 0px 2px #5f5f5f,
                0px 0px 0px 5px #ecf0f3,
                8px 8px 15px #a7aaaf,
                -8px -8px 15px #ffffff;
}

.title{
    text-align: center;
    font-size: 28px;
    padding-top:24px;
    letter-spacing: 0.5px;
}

.sub-title{
    text-align: center;
    font-size: 15px;
    padding-top: 7px;
    letter-spacing: 3px;
}

.fields{
    width:100%;
    padding:45px 5px 5px 5px;
}

.fields input{
    border:none;
    outline:none;
    background:none;
    font-size:18px;
    color:rgb(85, 85, 85);
    padding:20px 10px 20px 5px;
}

.username,.password{
    margin-bottom:30px;
    border-radius:25px;
    box-shadow: inset 8px 8px 8px #cbced1,
                inset -8px -8px 8px #ffffff;
}

.fields i{
    height:22px;
    margin:0 10px -3px 25px;
}

.signin-button{
    outline:none;
    border:none;
    cursor:pointer;
    width:100%;
    height:60px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 700;
    font-family: sans-serif;
    color:#ffffff;
    text-align: center;
    background:#24cfaa;
    box-shadow: 3px 3px 8px #b1b1b1,
                -3px -3px 8px #ffffff;
    transition: 0.5s;
}

.signin-button:hover{
    background:#2fdbd6;
}

.signin-button:active{
    background:#1da88a;
}

.link{
    padding-top:20px;
    text-align: center;
}

.link a{
    text-decoration: none;
    color:#aaa;
    font-size:15px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.