๐ŸŽฌClaymorphism ๋กœ๊ทธ์ธ ์–‘์‹ | HTML ๋ฐ CSS

4633 ๋‹จ์–ด htmlcsstutorialwebdev
HTML ๋ฐ CSS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹จ๊ณ„๋ณ„๋กœ Claymorphism ๋กœ๊ทธ์ธ ์–‘์‹์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.





์†Œ์Šค ์ฝ”๋“œ:



HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Claymorphism Login Form</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

<body>

<div class="container">

  <form action="#">
    <h3>Login In</h3>

    <div class="inputBox">
      <label for="user">Username:</label>
      <div class="box">
        <div class="icon">
          <i class="fa-solid fa-user"></i>
        </div>
        <input type="text" id="user" name="user">
      </div>
    </div>

    <div class="inputBox">
      <label for="password">Password:</label>
      <div class="box">
        <div class="icon">
          <i class="fa-solid fa-lock"></i>
        </div>
        <input type="password" id="password" name="password">
      </div>
    </div>

   <label> <input type="checkbox">Remember me</label>
    <button class="submit">Log in</button><br>
    <a href="#" class="forgot">Forget Password?</a>
  </form>
</div>

</body>
</html>

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ