Martydevs/index.html

## index.html
<!doctype html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css">
  <title>Vite App</title>
</head>

<body>
  <section class="card">
    <div class="card-content">
      <section class="card-header">
        <img src="/logo.png" alt="pjenl logo">
        <h1>Sistema Integral de <br>Supervisión</h1>
      </section>

      <form class="card-form">
        <div class="form-input-container">
          <label class="form-input-logo-container" for="username">
            <i class="fa-solid fa-user"></i>
          </label>
          <div class="form-input">
            <input type="text" name="form" id="username" placeholder="Usuario">
          </div>
        </div>

        <div class="form-input-container">
          <label class="form-input-logo-container" for="password">
            <i class="fa-solid fa-lock"></i>
          </label>
          <div class="form-input">
            <input type="password" name="form" id="password" placeholder="Contraseña">
          </div>
        </div>
      </form>

      <section class="card-footer">
        <button>Ingresar</button>
        <p>Si tienes problemas de acceso comunicate a la mesa de <br> servicio a la ext. <strong>7751</strong></p>
      </section>
    </div>
  </section>
  <script src="https://kit.fontawesome.com/73843a4163.js" crossorigin="anonymous"></script>
</body>

</html>

## styles.css
body {
  background-color: #01233f;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  font-family: system-ui;
}

.card {
  width: 70%;
  max-width: 47em;
  padding: 3em 6em;
  position: relative;
  background: #dddddd;
  border-radius: 1em;
}

.card-content {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.card-header > img {
  position: absolute;
  max-width: 7em;
  top: -3.5em;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.card-header > h1 {
  font-family: Raleway, sans-serif;
  font-size: 2em;
  font-weight: bolder;
  text-align: center;
  color: #036;
  margin: 0.5em 0 1em;
}

.card-form {
  display: flex;
  flex-flow: column nowrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.form-input-container {
  display: flex;
  width: 33rem;
  height: 4rem;
  border-radius: 0 0.3rem 0.3rem 0;
}

.form-input-logo-container {
  background-color: #666;
  padding-left: 1.25em;
  padding-right: 1.25em;
  border-radius: 0.3rem 0 0 0.3rem;
  padding: 1em;
  display: grid;
  place-content: center;
  width: 15%;
}

.form-input-logo-container i {
  color: #ddd;
}

.form-input {
  background: #fff;
  border: 1px solid #ddd;
  flex: 1;
}

input {
  outline: none;
  width: 85%;
  display: flex;
  align-items: center;
  justify-content: start;
  height: 100%;
  border-radius: 0 0.3rem 0.3rem 0;
}

.card-footer {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.card-footer > button {
  background-color: #339966;
  color: #fff;
  padding: 1.3rem 3rem;
  border-radius: 2em;
  text-transform: uppercase;
  font-weight: bold;
  transition: background-color 1s ease;
}

.card-footer > button:hover {
  background-color: darkgoldenrod;
}

.card-footer > p {
  text-align: center;
  text-wrap: balance;
  white-space: pre-wrap;
  font-size: 2.4ex;
}
	<!doctype html>
	<html lang="es">

	<head>
	<meta charset="UTF-8" />
	<link rel="icon" type="image/svg+xml" href="/vite.svg" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="style.css">
	<title>Vite App</title>
	</head>

	<body>
	<section class="card">
	<div class="card-content">
	<section class="card-header">
	<img src="/logo.png" alt="pjenl logo">
	<h1>Sistema Integral de <br>Supervisión</h1>
	</section>

	<form class="card-form">
	<div class="form-input-container">
	<label class="form-input-logo-container" for="username">
	<i class="fa-solid fa-user"></i>
	</label>
	<div class="form-input">
	<input type="text" name="form" id="username" placeholder="Usuario">
	</div>
	</div>

	<div class="form-input-container">
	<label class="form-input-logo-container" for="password">
	<i class="fa-solid fa-lock"></i>
	</label>
	<div class="form-input">
	<input type="password" name="form" id="password" placeholder="Contraseña">
	</div>
	</div>
	</form>

	<section class="card-footer">
	<button>Ingresar</button>
	<p>Si tienes problemas de acceso comunicate a la mesa de <br> servicio a la ext. <strong>7751</strong></p>
	</section>
	</div>
	</section>
	<script src="https://kit.fontawesome.com/73843a4163.js" crossorigin="anonymous"></script>
	</body>

	</html>
	body {
	background-color: #01233f;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	height: 100dvh;
	font-family: system-ui;
	}

	.card {
	width: 70%;
	max-width: 47em;
	padding: 3em 6em;
	position: relative;
	background: #dddddd;
	border-radius: 1em;
	}

	.card-content {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	}

	.card-header > img {
	position: absolute;
	max-width: 7em;
	top: -3.5em;
	left: 50%;
	transform: translate(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	}

	.card-header > h1 {
	font-family: Raleway, sans-serif;
	font-size: 2em;
	font-weight: bolder;
	text-align: center;
	color: #036;
	margin: 0.5em 0 1em;
	}

	.card-form {
	display: flex;
	flex-flow: column nowrap;
	gap: 1.5rem;
	margin-bottom: 3rem;
	}

	.form-input-container {
	display: flex;
	width: 33rem;
	height: 4rem;
	border-radius: 0 0.3rem 0.3rem 0;
	}

	.form-input-logo-container {
	background-color: #666;
	padding-left: 1.25em;
	padding-right: 1.25em;
	border-radius: 0.3rem 0 0 0.3rem;
	padding: 1em;
	display: grid;
	place-content: center;
	width: 15%;
	}

	.form-input-logo-container i {
	color: #ddd;
	}

	.form-input {
	background: #fff;
	border: 1px solid #ddd;
	flex: 1;
	}

	input {
	outline: none;
	width: 85%;
	display: flex;
	align-items: center;
	justify-content: start;
	height: 100%;
	border-radius: 0 0.3rem 0.3rem 0;
	}

	.card-footer {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	}

	.card-footer > button {
	background-color: #339966;
	color: #fff;
	padding: 1.3rem 3rem;
	border-radius: 2em;
	text-transform: uppercase;
	font-weight: bold;
	transition: background-color 1s ease;
	}

	.card-footer > button:hover {
	background-color: darkgoldenrod;
	}

	.card-footer > p {
	text-align: center;
	text-wrap: balance;
	white-space: pre-wrap;
	font-size: 2.4ex;
	}