Login and Signup

Minimalist Sign Up Form

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 
<div class="main-container d-flex justify-content-center align-items-center vh-100">
  <form action="#">
    <div class="log-div bg-white rounded p-5 ">
      <h2 class="h1 text-center mb-4">SignUp Form</h2>
      <div class="d-flex justify-content-between align-items-center mb-3">
        <i class="fa-solid fa-user text-secondary"></i>
        <input type="text" name="name" placeholder="Enter Username" class="custom-input rounded p-1 border border-2 ps-2">
      </div>
  
      <div class="d-flex justify-content-between align-items-center mb-3">
        <i class="fa-solid fa-envelope text-secondary"></i>
        <input type="text" name="email" placeholder="Enter Email" class="custom-input rounded p-1 border border-2 ps-2">
      </div>
  
      <div class="d-flex justify-content-between align-items-center mb-3">
        <i class="fa-solid fa-key text-secondary"></i>
        <input type="password" name="password" placeholder="Create Password"
          class="custom-input rounded p-1 border border-2 ps-2">
      </div>
  
      <div class="d-flex justify-content-between align-items-center">
        <i class="fa-solid fa-lock text-secondary"></i>
        <input type="password" name="confirm_password" placeholder="Retype Password"
          class="custom-input border border-2 rounded p-1 ps-2">
      </div>
      <input type="submit" class="btn mt-4 px-3 w-100 text-white" value="Sign up">
    </div>
  </form>
 
  <script
      src="https://kit.fontawesome.com/d91ebf4c9d.js"
      crossorigin="anonymous"
    ></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

.main-container {
      background-color: rgb(221, 24, 155);
    }

    .log-div {
      width: 400px;
      box-shadow: 10px 10px 5px;
    }
    .custom-input {
      width: 93%;
    }
    .btn {
      background-color: #7200a7 !important;
    }
    .btn:hover {
      background-color: #9352b0 !important;
    }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://kit.fontawesome.com/d91ebf4c9d.js

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

AdBlock Detected!

Our website is providing free tools to our users there is nothing
that you pay for. We only display advertisement ads. So Please
don’t use adBlocker, Keep visiting us thanks.