login form #2

 

a*3 - 폰트어썸 유니코드 사용

버튼 백그라운드 linear-gradient()

그라디언트 참고 사이트 : https://webgradients.com/

Free Gradients Collection by itmeo.com

 

<div class="container">
    <section>
            <div class="login">
                <div class="login-header">
                    <h1>Log in</h1>
                    <span></span>
                </div>
                <div class="login-type-sns">
                    <a class="sns" href="#none"></a>
                    <a class="sns" href="#none"></a>
                    <a class="sns" href="#none"></a>
                    <span class="or-text">or use your email</span>
                </div>
                <div class="login-email">
                    <label for="email-chk">Email</label>
                    <input type="email" id="email-chk" placeholder="Email"> 
                    <label for="pw-chk">Password</label>
                    <input type="password" id="pw-chk" placeholder="Password">
                </div>
                <div class="login-footer">
                    <div class="forgot-pw">
                      <input class="left" type="checkbox" id="keep-login"> 
                       <label for="keep-login">Remember Me</label>
                      <a class="right" href="#none">Forgot Password?</a>
                    </div>
 
                    <div class="btn">Submit</div>
                    <div class="terms">
                        <a class="left" href="#none">Privacy Policy</a>
                        <a class="right" href="#none">Terms & Conditions</a>
                    </div>
                    
                </div>
            </div>
    </section>        
</div>
 

/* Google Web Font */
@import 
url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;500&display=swap');
/* 폰트어썸 4.7 */
@import 
url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/* default css */
/* 폰트 기본값 : 16px = 1em = 100% = 12pt */
body {
    font-family: 'Raleway', 'sans-serif';
    margin: 0;
    line-height: 1.5em;
    background-color: #eee;
    color: #222;
}
a {
    text-decoration: none;
    color: #000;
}
h1 {
    margin: 0;
}
section {
    position: relative;
    height: 100vh;
    border: 1px solid #000;
}
.login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    height: 670px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.363);
}
.login-header {
    margin-top: 80px;
    text-align: center;
    /* border: 1px solid #000; */
}
.login-header:hover span {
    width: 120px;
}
.login-header h1 {
    margin: 15px 0;
    font-size: 35px;
}
.login-header span {
    display: inline-block;
    width: 45px;
    height: 6px;
    background: linear-gradient(to left, #7028e4 0%, #e5b2ca 100%);
    transition: 0.3s;
}
.login-type-sns {
    margin-top: 5px;
    /* border: 1px solid blue; */
    text-align: center;
}
.sns {
    margin: 5px 0;
    margin-right: 5px;
    display: inline-block;
    width: 45px;
    height: 45px;
    border: 1px solid lightgray;
    border-radius: 50%;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.226);
}
.sns:before {
    content: '\f09a';
    font-family: fontawesome;
    line-height: 45px;
    font-size: 20px;
}
.sns:nth-child(1):before {
    content: '\f09a';
}
.sns:nth-child(2):before {
    content: '\f0e1';
}
.sns:nth-child(3):before {
    content: '\f099';
}
.or-text {
    display: block;
    margin: 10px 0;
    font-size: 14px;
}
.login-email {
    padding: 0 60px;
}
.login-email input {
    display: block;
    padding: 20px;
    margin: 10px;
    width: 85%;
    border: 1px solid rgba(211, 211, 211, 0.712);
    border-radius: 15px;
    outline: none;
}
.login-email input:focus {
    border: 1px solid #7028e4;
}
.login-email input::placeholder {
    color: lightgray;
}
.login-email label {
    font-size: 14px;
    font-weight: bold;
}
.login-footer {
    padding: 0 60px;
}
.forgot-pw {
    overflow: hidden;
    font-weight: bold;
    padding: 10px;
    font-size: 14px;
}
.forgot-pw input {
    margin-top: 5px;
}
.forgot-pw label[for=keep-login] {
    margin-left: 5px;
    letter-spacing: .5px;
}
.forgot-pw a:hover {
    text-decoration: underline;
}
.left {
    float: left;
}
.right {
    float: right;
}
.btn {
    padding: 15px;
    margin: 10px;
    width: 85%;
    background: linear-gradient(to left, #7028e4 0%, #e5b2ca 100%);
    color: #fff;
    font-size: 20px;
    /* border: 1px solid transparent; */
    border-radius: 50px;
    box-shadow: 0 5px 20px #7028e449;
    text-align: center;
    cursor: pointer;
}
.terms {
    overflow: hidden;
}
.terms a {
    margin-top: 20px;
    font-weight: bold;
    font-size: 14px;
}