프런트엔드 로그인 인터페이스

23389 단어

프런트엔드 로그인 인터페이스

  • 효과 미리보기
  • HTML
  • CSS

  • 효과 미리 보기


    HTML

    
    <html>
        <head>
            <meta charset="utf-8">
            <title>title>
            <link rel="stylesheet" href="style.css">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8">script>
        head>
        <body>
    
            <form action="index.html" class="login-form">
                <h1>Log Inh1>
    
                <div class="txtb">
                    <input type="text">
                    <span data-placeholder="Username">span>
                div>
    
                <div class="txtb">
                    <input type="password">
                    <span data-placeholder="Password">span>
                div>
    
                <input type="submit" class="logbtn" value="Log In">
    
                <div class="bottom-text">
                    Don't have account? <a href="#">Sign upa>
                div>
                
            form>
    
            <script type="text/javascript">
                $(".txtb input").on("focus", function(){
                    $(this).addClass("focus");
                });
    
                $(".txtb input").on("blur", function(){
                    if($(this).val() == "")
                    $(this).removeClass("focus");
                });
            script>
    
        body>
    html>
    

    CSS

    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        font-family: montserrat;
        box-sizing: border-box;
    }
    
    body{
        min-height: 100vh;
        background-image: linear-gradient(120deg, #3498db, #8e44ad);
    }
    
    .login-form{
        width: 360px;
        background: #f1f1f1;
        height: 580px;
        padding: 80px 40px;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    
    .login-form h1{
        text-align: center;
        margin-bottom: 60px;
    }
    
    .txtb{
        border-bottom: 2px solid #adadad;
        position: relative;
        margin: 30px 0;
    }
    
    .txtb input{
        font-size: 15px;
        color: #333;
        border: none;
        width: 100%;
        outline: none;
        background: none;
        padding: 0 5px;
        height: 40px;
    }
    
    .txtb span::before{
        content: attr(data-placeholder);
        position: absolute;
        top: 50%;
        left: 5px;
        color: #adadad;
        transform: translateY(-50%);
        z-index: -1;
        transition: .5s;
    }
    
    .txtb span::after{
        content: '';
        position: absolute;
        left: 0%;
        top: 100%;
        width: 0%;
        height: 2px;
        background: linear-gradient(120deg, #3498db, #8e44ad);
        transition: .5s;
    }
    
    .focus + span::before{
        top: -5px;
    }
    
    .focus + span::after{
        width: 100%;
    }
    
    .logbtn{
        display: block;
        width: 100%;
        height: 50px;
        border: none;
        background: linear-gradient(120deg, #3498db, #8e44ad, #3498db);
        background-size: 200%;
        color: #fff;
        outline: none;
        cursor: pointer;
        transition: .5s;
    }
    
    .logbtn:hover{
        background-position: right;
    }
    
    .bottom-text{
        margin-top: 60px;
        text-align: center;
        font-size: 13px;
    }
    

    좋은 웹페이지 즐겨찾기