Login form

<!-- Font Awesome CDN  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
    crossorigin="anonymous" />

<!-- CSS -->
<link rel="stylesheet" href="style.css">

<title>Awesome Login Form using HTML and CSS - Coding Torque</title>

log in via

style.css : @import url("https://fonts.googleapis.com/css?family=Raleway:400,700");

{ box-sizing: border-box; margin: 0; padding: 0; font-family: Raleway, sans-serif; }

body { background: linear-gradient(90deg, #c7c5f4, #776bcc); }

.container { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.screen { background: linear-gradient(90deg, #5d54a4, #7c78b8); position: relative; height: 600px; width: 360px; box-shadow: 0px 0px 24px #5c5696; }

.screen__content { z-index: 1; position: relative; height: 100%; }

.screen__background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }

.screen_background_shape { transform: rotate(45deg); position: absolute; }

.screen_background_shape1 { height: 520px; width: 520px; background: #fff; top: -50px; right: 120px; border-radius: 0 72px 0 0; }

.screen_background_shape2 { height: 220px; width: 220px; background: #6c63ac; top: -172px; right: 0; border-radius: 32px; }

.screen_background_shape3 { height: 540px; width: 190px; background: linear-gradient(270deg, #5d54a4, #6a679e); top: -24px; right: 0; border-radius: 32px; }

.screen_background_shape4 { height: 400px; width: 200px; background: #7e7bb9; top: 420px; right: 50px; border-radius: 60px; }

.login { width: 320px; padding: 30px; padding-top: 156px; }

.login__field { padding: 20px 0px; position: relative; }

.login__icon { position: absolute; top: 30px; color: #7875b5; }

.login__input { border: none; border-bottom: 2px solid #d1d1d4; background: none; padding: 10px; padding-left: 24px; font-weight: 700; width: 75%; transition: 0.2s; }

.login_input:active, .logininput:focus, .login_input:hover { outline: none; border-bottom-color: #6a679e; }

.login__submit { background: #fff; font-size: 14px; margin-top: 30px; padding: 16px 20px; border-radius: 26px; border: 1px solid #d4d3e8; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; width: 100%; color: #4c489d; box-shadow: 0px 2px 2px #5c5696; cursor: pointer; transition: 0.2s; }

.login_submit:active, .loginsubmit:focus, .login_submit:hover { border-color: #6a679e; outline: none; }

.button__icon { font-size: 24px; margin-left: auto; color: #7875b5; }

.social-login { position: absolute; height: 140px; width: 160px; text-align: center; bottom: 0px; right: 0px; color: #fff; }

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

.social-login__icon { padding: 20px 10px; color: #fff; text-decoration: none; text-shadow: 0px 0px 8px #7875b5; }

.social-login__icon:hover { transform: scale(1.5); }