- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>LOGIN</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <div class="login_form"> <div class="login_form_headfer"> <span class="menu">SIGN IN</span> <span class="menu">SIGN UP</span> </div> <form action="#" method="get"> <input type="text" name="user_name" placeholder="UserName" /> <input type="email" name="user_email" placeholder="Email ID" /> <input type="password" name="user_password" placeholder="Password" /> <div class="checkbox"> <input type="checkbox" name="checkbox" /> <label for="checkbox">I agree to terms and conditions</label> </div> <input type="submit" value="REGISTER" /> </form> </div> </body> </html> - style.css
@import url("https://fonts.googleapis.com/css2?family=DynaPuff&display=swap"); body { width: 100vw; height: 100vh; margin: 0; background: url("./minions.jpg") no-repeat center/cover; display: flex; justify-content: center; align-items: center; color: rgb(249, 223, 72); font-family: "DynaPuff", cursive; font-weight: 400; } .login_form { width: 500px; height: 400px; padding: 20px 30px; background: url("./minions.jpg") no-repeat center/cover; background-size: 1800px; box-shadow: rgba(0, 0, 0, 0.6) 0px 19px 38px, rgba(0, 0, 0, 0.52) 0px 15px 12px; } .login_form_header { margin: 10px 0 40px; font-size: 20px; font-weight: 600; } .login_form span:hover { padding-bottom: 5px; border-bottom: 4px solid rgb(255, 204, 0); cursor: pointer; } .login_form_header:first-child { margin-right: 30px; } form { width: 100%; height: 300px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } input { color: rgb(249, 223, 72); margin-top: 10px; } input::placeholder { color: rgb(255, 204, 0); } input:focus { outline: none; } form > input:not(input[type="submit"]) { width: 100%; height: 30px; border: none; border-bottom: 4px solid rgb(255, 204, 0); background-color: transparent; font-size: 20px; } .checkbox { width: 100%; } input[type="checkbox"], label { cursor: pointer; } input[type="submit"] { width: 150px; height: 30px; padding-top: 2px; border: none; background-color: rgb(255, 204, 0); border-radius: 20px; color: white; cursor: pointer; font-family: "DynaPuff", cursive; font-weight: 400; }
가오리의 코딩일기