<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML CSS 및 JavasScripr이 로그인 및 등록양식</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>index_HTML&CSS5 tag </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><br><!DOCTYPE html> <br><!-- Coding By CodingNepal - codingnepalweb.com --> <br><html lang="en"> <br><head> <br>    <meta charset="UTF-8"> <br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <br>     <br>    <!-- ===== Iconscout CSS ===== --> <br>    <link rel="stylesheet" href="<a href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" target="_blank" class="ke-link">https://unicons.iconscout.com/release/v4.0.0/css/line.css</a>"> <br><br>    <!-- ===== CSS ===== --> <br>    <link rel="stylesheet" href="style.css"> <br>          <br>    <title>Login & Registration Form</title> <br>    <style> <br>    /* ===== Google Font Import - Poformsins ===== */ <br>@import‎ url('<a href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');</a><br><br>*{ <br>    margin: 0; <br>    padding: 0; <br>    box-sizing: border-box; <br>    font-family: 'Poppins', sans-serif; <br>} <br><br>body{ <br>    height: 100vh; <br>    display: flex; <br>    align-items: center; <br>    justify-content: center; <br>    background-color: #4070f4; <br>} <br><br>.container{ <br>    position: relative; <br>    max-width: 430px; <br>    width: 100%; <br>    background: #fff; <br>    border-radius: 10px; <br>    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); <br>    overflow: hidden; <br>    margin: 0 20px; <br>} <br><br>.container .forms{ <br>    display: flex; <br>    align-items: center; <br>    height: 440px; <br>    width: 200%; <br>    transition: height 0.2s ease; <br>} <br><br><br>.container .form{ <br>    width: 50%; <br>    padding: 30px; <br>    background-color: #fff; <br>    transition: margin-left 0.18s ease; <br>} <br><br>.container.active .login{ <br>    margin-left: -50%; <br>    opacity: 0; <br>    transition: margin-left 0.18s ease, opacity 0.15s ease; <br>} <br><br>.container .signup{ <br>    opacity: 0; <br>    transition: opacity 0.09s ease; <br>} <br>.container.active .signup{ <br>    opacity: 1; <br>    transition: opacity 0.2s ease; <br>} <br><br>.container.active .forms{ <br>    height: 600px; <br>} <br>.container .form .title{ <br>    position: relative; <br>    font-size: 27px; <br>    font-weight: 600; <br>} <br><br>.form .title::before{ <br>    content: ''; <br>    position: absolute; <br>    left: 0; <br>    bottom: 0; <br>    height: 3px; <br>    width: 30px; <br>    background-color: #4070f4; <br>    border-radius: 25px; <br>} <br><br>.form .input-field{ <br>    position: relative; <br>    height: 50px; <br>    width: 100%; <br>    margin-top: 30px; <br>} <br><br>.input-field input{ <br>    position: absolute; <br>    height: 100%; <br>    width: 100%; <br>    padding: 0 35px; <br>    border: none; <br>    outline: none; <br>    font-size: 16px; <br>    border-bottom: 2px solid #ccc; <br>    border-top: 2px solid transparent; <br>    transition: all 0.2s ease; <br>} <br><br>.input-field input:is(:focus, :valid){ <br>    border-bottom-color: #4070f4; <br>} <br><br>.input-field i{ <br>    position: absolute; <br>    top: 50%; <br>    transform: translateY(-50%); <br>    color: #999; <br>    font-size: 23px; <br>    transition: all 0.2s ease; <br>} <br><br>.input-field input:is(:focus, :valid) ~ i{ <br>    color: #4070f4; <br>} <br><br>.input-field i.icon{ <br>    left: 0; <br>} <br>.input-field i.showHidePw{ <br>    right: 0; <br>    cursor: pointer; <br>    padding: 10px; <br>} <br><br>.form .checkbox-text{ <br>    display: flex; <br>    align-items: center; <br>    justify-content: space-between; <br>    margin-top: 20px; <br>} <br><br>.checkbox-text .checkbox-content{ <br>    display: flex; <br>    align-items: center; <br>} <br><br>.checkbox-content input{ <br>    margin-right: 10px; <br>    accent-color: #4070f4; <br>} <br><br>.form .text{ <br>    color: #333; <br>    font-size: 14px; <br>} <br><br>.form a.text{ <br>    color: #4070f4; <br>    text-decoration: none; <br>} <br>.form a:hover{ <br>    text-decoration: underline; <br>} <br><br>.form .button{ <br>    margin-top: 35px; <br>} <br><br>.form .button input{ <br>    border: none; <br>    color: #fff; <br>    font-size: 17px; <br>    font-weight: 500; <br>    letter-spacing: 1px; <br>    border-radius: 6px; <br>    background-color: #4070f4; <br>    cursor: pointer; <br>    transition: all 0.3s ease; <br>} <br><br>.button input:hover{ <br>    background-color: #265df2; <br>} <br><br>.form .login-signup{ <br>    margin-top: 30px; <br>    text-align: center; <br>} <br>    </style> <br></head> <br><body> <br>     <br>    <div class="container"> <br>        <div class="forms"> <br>            <div class="form login"> <br>                <span class="title">Login</span> <br><br>                <form action="#"> <br>                    <div class="input-field"> <br>                        <input type="text" placeholder="Enter your email" required> <br>                        <i class="uil uil-envelope icon"></i> <br>                    </div> <br>                    <div class="input-field"> <br>                        <input type="password" class="password" placeholder="Enter your password" required> <br>                        <i class="uil uil-lock icon"></i> <br>                        <i class="uil uil-eye-slash showHidePw"></i> <br>                    </div> <br><br>                    <div class="checkbox-text"> <br>                        <div class="checkbox-content"> <br>                            <input type="checkbox" id="logCheck"> <br>                            <label for="logCheck" class="text">Remember me</label> <br>                        </div> <br>                         <br>                        <a href="#" class="text">Forgot password?</a> <br>                    </div> <br><br>                    <div class="input-field button"> <br>                        <input type="button" value="Login"> <br>                    </div> <br>                </form> <br><br>                <div class="login-signup"> <br>                    <span class="text">Not a member? <br>                        <a href="#" class="text signup-link">Signup Now</a> <br>                    </span> <br>                </div> <br>            </div> <br><br>            <!-- Registration Form --> <br>            <div class="form signup"> <br>                <span class="title">Registration</span> <br><br>                <form action="#"> <br>                    <div class="input-field"> <br>                        <input type="text" placeholder="Enter your name" required> <br>                        <i class="uil uil-user"></i> <br>                    </div> <br>                    <div class="input-field"> <br>                        <input type="text" placeholder="Enter your email" required> <br>                        <i class="uil uil-envelope icon"></i> <br>                    </div> <br>                    <div class="input-field"> <br>                        <input type="password" class="password" placeholder="Create a password" required> <br>                        <i class="uil uil-lock icon"></i> <br>                    </div> <br>                    <div class="input-field"> <br>                        <input type="password" class="password" placeholder="Confirm‎ a password" required> <br>                        <i class="uil uil-lock icon"></i> <br>                        <i class="uil uil-eye-slash showHidePw"></i> <br>                    </div> <br><br>                    <div class="checkbox-text"> <br>                        <div class="checkbox-content"> <br>                            <input type="checkbox" id="termCon"> <br>                            <label for="termCon" class="text">I accepted all terms and conditions</label> <br>                        </div> <br>                    </div> <br><br>                    <div class="input-field button"> <br>                        <input type="button" value="Signup"> <br>                    </div> <br>                </form> <br><br>                <div class="login-signup"> <br>                    <span class="text">Already a member? <br>                        <a href="#" class="text login-link">Login Now</a> <br>                    </span> <br>                </div> <br>            </div> <br>        </div> <br>    </div> <br><br>     <script src="script.js"></script>  <br></body></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><br><span style="color: #ee2323;" data-ke-size="size20"></html>index_JavaScript tag</span></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> <br>const container = document.querySelector(".container"), <br>      pwShowHide = document.querySelectorAll(".showHidePw"), <br>      pwFields = document.querySelectorAll(".password"), <br>      signUp = document.querySelector(".signup-link"), <br>      login = document.querySelector(".login-link"); <br><br>    //   js code to show/hide password and change icon <br>    pwShowHide.forEach(eyeIcon =>{ <br>        eyeIcon.addEventListener("click", ()=>{ <br>            pwFields.forEach(pwField =>{ <br>                if(pwField.type ==="password"){ <br>                    pwField.type = "text"; <br><br>                    pwShowHide.forEach(icon =>{ <br>                        icon.classList.replace("uil-eye-slash", "uil-eye"); <br>                    }) <br>                }else{ <br>                    pwField.type = "password"; <br><br>                    pwShowHide.forEach(icon =>{ <br>                        icon.classList.replace("uil-eye", "uil-eye-slash"); <br>                    }) <br>                } <br>            })  <br>        }) <br>    }) <br><br>    // js code to appear signup and login form <br>    signUp.addEventListener("click", ( )=>{ <br>        container.classList.add("active"); <br>    }); <br>    login.addEventListener("click", ( )=>{ <br>        container.classList.remove("active"); <br>    });</b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML 자바스크립트<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>index_HTML&CSS5 tag</b></span></p>
<!-- -->
]]>
카페 게시글
◈─---… HTML 소스방
HTML CSS 및 JavasScripr이 로그인 및 등록양식
gyun님
추천 0
조회 2
23.12.05 16:04
댓글 2
다음검색
첫댓글 https://www.w3schools.com/css/tryit.asp?filename=trycss_default & https://www.codingnepalweb.com/login-registration-form-html-css-javascript/
https://www.youtube.com/watch?v=VP0DS6iXbXY
PLAY