🎬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>

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started