“Página de inicio de sesión UI HTML CSS” Código de respuesta

Página de inicio de sesión 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

Diseño de página de inicio de sesión 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

Respuestas similares a “Página de inicio de sesión UI HTML CSS”

Preguntas similares a “Página de inicio de sesión UI HTML CSS”

Más respuestas relacionadas con “Página de inicio de sesión UI HTML CSS” en CSS

Explore las respuestas de código populares por idioma

Explorar otros lenguajes de código

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