로그인 화면

앞으로 자주 접하게 될 기능 정해서 클론코딩 해보기.

https://www.youtube.com/watch?v=HzJngc-Se9Q&t=3s

    <input class="user-input" type="text" name="" placeholder="Username" required>

Required?

    <input class="user-input" type="text" name="" placeholder="Username">

Paceholder

    <input class="btn" type="submit" name="" value="SIGNUP">

SIGN UP 버튼

Style
.form .user-input:hover, .form .user-input:focus, .form .user-input:active{
border-left: solid 8px #19E1DF;

왼쪽에 스타일 적용

.form .user-input {
…
text-align: center;
border-radius: 5px;
transition: 0.5s;
transition-property: border-left, border-right, box-shadow;
}

트랜지션 주는법

<label class="remembr-me"> <input type="checkbox" name=""> Remember me</label>
체크박스

<input class="btn" type="submit" name="" value="LOGIN">

.form .btn {
outline: none;
border: none;
width: 320px;
height: 55px;
background: #19E1DF;
color: #fff;
font-size: 18px;
letter-spacing: 1px;
border-radius: 5px;
cursor: pointer;
}