ログイン画面

6202 ワード
テキストリンク
後でよく触れる機能を選択し、クローンコードを行います.
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;
}
22日目TIL
コンポーネントをどのように作るか