🎬Claymorphism Login Form | HTML & CSS

#webdev #tutorial #css #html

Create a Claymorphism Login Form using HTML & CSS, step-by-step from scratch.

Source Code:

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>