“halaman login ui html css” Kode Jawaban

halaman login ui html css

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="./css/Style.css">
	<meta charset="utf-8">
	<link rel="icon" type="images/jpg" href="./imgs/img.jpg">
	<style>
		
		form{
			
			
			padding:15px;
		width:100%;
		
		}
		.login-box{
				width:30%;
				border:1px black solid;
				margin-left:440px;
				margin-top:100px;
		}
		input{
			width:200px;
			padding:10px;
		}
		h1{
			padding:10px;
		}
	</style>
	<title>Login|form</title>
	
</head>
<body>
<div class="login-box">
	

	<h1>Login form </h1>
	<hr>
	<form action="info.php" target="blank" >
		<p>USERNAME: </p>
		<input type="text" placeholder= "Enter your Username">
		<p>PASSWORD</p>
		<input type="text" placeholder="Enter your password">
		<br><br><br>
		<input type="submit" name="" value="login">
		<br><br>
		<a href="#"> forgot your password</a>
		<br>
		<a href="#">Don't have an account</a>
	</form>
</div>
</body>
</html>
Gracetoffy

Desain Halaman Login HTML CSS

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
</style>
</head>
<body>

<h2>Login Form</h2>

<form action="/action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>
        
    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

</body>
</html>
Hamza Dev

Jawaban yang mirip dengan “halaman login ui html css”

Pertanyaan yang mirip dengan “halaman login ui html css”

Lebih banyak jawaban terkait untuk “halaman login ui html css” di CSS

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya

Shell/Bash
C#
C++
C
CSS
HTML
Java
JavaScript
Objective-C
PHP
Python
Sql
Swift
Ruby
TypeScript
Go
Kotlin
Assembly
R
VBA
Scala
Rust
Dart
Elixir
Clojure
Haskell
Matlab
Erlang
Cobol
Fortran
Scheme
Perl
Groovy
Lua
Julia
Delphi
Abap
Lisp
Prolog
Pascal
ActionScript
Basic
Solidity
PowerShell
GDScript
Excel