Una página de inicio de sesión sencilla

2,372 0 cleanfunction828 Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

14 January 2025

Ejemplo de página web de portafolio

22 October 2023

Cargando Página

11 October 2026

Juego de simulación física en 3D con HTML, CSS y JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="form-container">
        <div class="header">
          <h1>Welcome back</h1>
          <p>Welcome back! Please enter your details</p>
        </div>

<form action="#">
          <div class="input">
            <label for="email">Email</label>
            <input type="email" required placeholder="Enter yor email " />
          </div>
          <div class="input">
            <label for="password">Password</label>
            <input type="password" required placeholder="*******" />
          </div>

<div class="remfog">
            <div class=""><input type="checkbox" /> Remember me</div>
            <p><a href="#">Forgot Passsword</a></p>
          </div>
          <div class="buttons">
            <button class="log_button">Sign in</button>
            <button class="google">
              
              <img src="/icon.png" alt="icon" />
              
              Sign in with Google
            </button>
          </div>
          <p class="signup">
            Don`t have an account ? <span>sign up for free!</span>
          </p>
        </form>
      </div>
      <div class="img">
        <img src="/img.png" alt="right side image" />
      </div>
    </div>
  </body>
</html>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #f8f8f8;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #181818;
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 15vw;
  margin: 0;
}

.img {
  position: relative;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}
.img > img {
  width: 100%;
  height: 100%;
}

.form-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: 22vw;
  margin-left: auto;
  margin-right: 10vw;

height: 70vh;
  & > .header {
    padding-bottom: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
    & > h1 {
      font-size: 3rem;
      font-weight: 400;
    }
  }
}

form {
  display: inherit;
  flex-direction: inherit;
  width: 100%;

& > .input {
    display: inherit;
    flex-direction: inherit;
    gap: 1;
    width: 100%;
    padding: 10px 0;
    & > label {
      padding-left: 10px;
    }
    & > input {
      height: 45px;
      width: 100%;
      outline: none;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.25);
      border-radius: 16px;
      padding: auto 8px;
      font-size: medium;
      padding: 20px;
      display: flex;
      align-items: center;
      box-shadow: 1px 1px rgba(0, 0, 0, 0.25);
    }
  }
}

.remfog {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  padding: 20px;
}

button {
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  border-radius: 12px;
  width: 100%;
  border: none;
  box-shadow: 1px 1px rgba(0, 0, 0, 0.25);
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
}

.log_button {
  color: #f8f8f8;
  background: #ea454c;
  box-shadow: 1px 1px rgba(234, 69, 76, 0.25);
}
.signup {
  margin-top: 30px;
  text-align: center;
  & > span {
    color: #ea454c;
    cursor: pointer;
  }
}
.google {
  border: 1px solid rgba(0, 0, 0, 0.25);
  margin-top: 20px;
}

Comments 0

…