Halo semuanya terutama yang masih pemula dalam pembelajaran coding. Hari ini mimin Masihpemula.id akan memberikan source code Login dan Sign Up form menggunakan HTML dan CSS nih... Untuk tutorialnya coming soon yaa..

Preview



Oke jadi kali ini hanya desain Login dan Sign Up form saja teman - teman masihpemula.id . Jadi belum ada fungsi untuk menjalankan Login dan mengirim ke databasenya server. Oke berikut adalah contoh source code Login and Sign Up Form. Untuk source codenya kalian bisa download pada tombol di bawah...


login.html

  
  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Login</title>
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="logo">
          <img src="Your Logo.png" alt="Logo" />
        </div>
        <form>
          <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required />
          </div>
          <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required />
          </div>
          <button type="submit" class="login-btn">Log In</button>
        </form>
        <div class="forgot-password">
          <a href="#">Forgot Password?</a>
        </div>
        <div class="signup">
          Don't have an account?
          <a href="Signup.html" class="signup-link">Sign up</a>
        </div>
      </div>
    </div>
  </body>
</html>


SignUp.html

  
  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Sign Up</title>
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="logo">
          <img src="Your Logo.png" alt="logo" />
        </div>
        <form>
          <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required />
          </div>
          <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required />
          </div>
          <div class="form-group">
            <label for="c-password">Confirm Password:</label>
            <input type="c-password" id="c-password" name="c-password" required />
          </div>
          <button type="submit" class="login-btn">Create Account</button>
        </form>

        <div class="signup">
          A have an account? <a href="login.html" class="signup-link">Log In</a>
        </div>
      </div>
    </div>
  </body>
</html>


style.css

  
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #fafafae1;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  animation: fadeIn 1s ease-in-out;
}

.card {
  width: 400px;
  padding: 40px;
  border: 1px solid #dbdbdb;
  background-color: #ffffffde;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.288);
}

.logo {
  font-size: 36px;
  color: #3897f0;
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}

input[type="text"],
input[type="password"], input[type="c-password"] {
  width: 95%;
  padding: 8px;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
}

.login-btn {
  width: 100%;
  padding: 8px;
  background-color: #3897f0;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.2s;
}

.login-btn:hover {
  background-color: #1b88e0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.37);
}

.login-btn:active {
  background-color: #3897f0;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.37);
}

.forgot-password {
  text-align: center;
  margin-top: 12px;
  color: #3897f0;
  transition: all.3s;
  text-decoration: none;
  margin-right: 80px;
  margin-left: 80px;
}

.forgot-password:hover {
  background-color: rgb(241, 241, 241);
  padding: 10px;
  border-radius: 15px;
  margin-right: 80px;
  margin-left: 80px;
}

.signup {
  text-align: center;
  margin-top: 20px;
}

.signup-link {
  color: #3897f0;
  transition: all 0.3s;
  text-decoration: none;
}

.signup-link:hover {
  background-color: rgb(241, 241, 241);
  padding: 10px;
  border-radius: 15px;
}

.logo {
  text-align: center;
  margin-bottom: 20px;
}

.logo img {
  width: 150px; /* Adjust the width as per your preference */
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

Perhatian!

Style login dan sign up dijadikan satu dalam file style.css!