Skip to content

Instantly share code, notes, and snippets.

@Klerith
Last active March 22, 2024 20:25
Show Gist options
  • Save Klerith/74a0c4426599f3bc25b7f4e8d95b6a7f to your computer and use it in GitHub Desktop.
Save Klerith/74a0c4426599f3bc25b7f4e8d95b6a7f to your computer and use it in GitHub Desktop.
Login-Template-MERN-Calendar
.login-container{
margin-top: 15%;
}
.login-form-1{
border-radius: 5px;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
padding: 5%;
}
.login-form-1 h3{
text-align: center;
color: #333;
}
.login-form-2{
border-radius: 5px;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
padding: 5%;
background: #0062cc;
}
.login-form-2 h3{
text-align: center;
color: #fff;
}
.login-container form{
padding: 10%;
}
.btnSubmit
{
width: 50%;
border-radius: 1rem;
padding: 1.5%;
border: none;
cursor: pointer;
}
.login-form-1 .btnSubmit{
color: #fff;
background-color: #0062cc;
}
.login-form-2 .btnSubmit{
background-color: #fff;
color: #0062cc;
}
.login-form-2 .ForgetPwd{
color: #fff;
font-weight: 600;
text-decoration: none;
}
.login-form-1 .ForgetPwd{
color: #0062cc;
font-weight: 600;
text-decoration: none;
}
import React from 'react';
import './login.css';
export const LoginScreen = () => {
return (
<div className="container login-container">
<div className="row">
<div className="col-md-6 login-form-1">
<h3>Ingreso</h3>
<form>
<div className="form-group mb-2">
<input
type="text"
className="form-control"
placeholder="Correo"
/>
</div>
<div className="form-group mb-2">
<input
type="password"
className="form-control"
placeholder="Contraseña"
/>
</div>
<div className="form-group mb-2">
<input
type="submit"
className="btnSubmit"
value="Login"
/>
</div>
</form>
</div>
<div className="col-md-6 login-form-2">
<h3>Registro</h3>
<form>
<div className="form-group mb-2">
<input
type="text"
className="form-control"
placeholder="Nombre"
/>
</div>
<div className="form-group mb-2">
<input
type="email"
className="form-control"
placeholder="Correo"
/>
</div>
<div className="form-group mb-2">
<input
type="password"
className="form-control"
placeholder="Contraseña"
/>
</div>
<div className="form-group mb-2">
<input
type="password"
className="form-control"
placeholder="Repita la contraseña"
/>
</div>
<div className="form-group mb-2">
<input
type="submit"
className="btnSubmit"
value="Crear cuenta" />
</div>
</form>
</div>
</div>
</div>
)
}
@Djdirac
Copy link

Djdirac commented Oct 5, 2022

Estimado, muchas gracias por el curso y por la informacion adicinal.

@breadsk
Copy link

breadsk commented Oct 17, 2022

Super , gracias .

@AnthonyBK9
Copy link

Gracias Profe!!

@vortegar
Copy link

Gracias prof

@monicacalle
Copy link

Gracias profe!!

@albertobautista
Copy link

Gracias

@Shemo01
Copy link

Shemo01 commented Apr 13, 2023

Gracias :)

@Mceballos-git
Copy link

Muchas gracias! Saludos desde Argentina!

@egarciam-dev
Copy link

Gracias profesor, saludos desde República Dominicana.

@vaalelo
Copy link

vaalelo commented Oct 3, 2023

Graciasss!!!

@sebassg7
Copy link

Excelente aporte Fernando, muchas gracias!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment