Scribd
Upload
5 views12 pages

Programacion

The document contains HTML code for three web pages: a login page, a password recovery page, and a registration page, all part of a project named 'Bera'. Each page includes a form for user input, navigation links, and a banner image. Additionally, there is a CSS stylesheet that styles the layout, form elements, and navigation bar for a cohesive user experience.

Uploaded by

mrshortxd1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views12 pages

Programacion

The document contains HTML code for three web pages: a login page, a password recovery page, and a registration page, all part of a project named 'Bera'. Each page includes a form for user input, navigation links, and a banner image. Additionally, there is a CSS stylesheet that styles the layout, form elements, and navigation bar for a cohesive user experience.

Uploaded by

mrshortxd1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 12

html (login)

<PROYECT html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="widht=widht, initial-scale=1.0">
<title>Bera</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="formulario">
<center><img src="file:///C:/Users/mc/Desktop/proyecto%20de%20miguel/banner.png"
alt="banner de la pagina" width="400"></center>
<nav class="navbar">
<a href="principal.html">Inicio</a>
</nav>
<h1>Inicio de Sesion</h1>
<form method="post">
<div class="Username">
<input type="text" required>
<label>Nombre de Usuario</label>
</div>
<div class="contraseña">
<input type="password" required>
<label>contraseña</label>
</div>
<div class="Recuperar"><a href="olvido.html">¿Olvido su
contraseña?</div></a>
<input type="submit" value="Inicio">
<div class="Registrar">
Quiero hacer el<a href="registro.html">Registro</a>
</div>
</form>

</div>

</body>
</html>

Html (olvido)
<PROYECT html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="widht=widht, initial-scale=1.0">
<title>Bera</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="formulario">
<center><img src="file:///C:/Users/mc/Desktop/proyecto%20de%20miguel/banner.png"
alt="banner de la pagina" width="400"></center>
<nav class="navbar">
<a href="principal.html">Inicio</a>
</nav>
<h1>Inicio de Sesion</h1>
<form method="post">
<div class="Pregunta1">
<input type="text" required>
<label>Nombre de tu Mama</label>
</div>
<div class="Pregunta2">
<input type="texto" required>
<label>fecha de Nacimiento</label>
</div>
<input type="submit" value="Comprobar">
<div class="Inicio"><a href="#"><a href="index.html">¿Ya posee una cuenta?
vuelve a intentarlo</a>
</div>
</form>

</div>

</body>
</html>

Html (registro)
<PROYECT html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="widht=widht, initial-scale=1.0">
<title>Bera</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="formulario">
<center><img src="file:///C:/Users/mc/Desktop/proyecto%20de%20miguel/banner.png"
alt="banner de la pagina" width="400"></center>
<nav class="navbar">
<a href="principal.html">Inicio</a>
</nav>
<h1>Registrate</h1>
<form method="post">
<div class="Username">
<input type="text" required>
<label>Nombre de Usuario</label>
</div>
<div class="Cedula">
<input type="text" required>
<label>Cédula</label>
</div>
<div class="contraseña">
<input type="password" required>
<label>Contraseña</label>
</div>
<div class="confirme contraseña">
<input type="password" required>
<label>Confirme contraseña</label>
</div>
<div class="Email">
<input type="text" required>
<label>Email</label>
</div>
<p><center>Preguntas de seguridad</center></p>
<div class="Pregunta1">
<input type="text" required>
<label>Nombre de tu Mama</label>
</div>
<div class="Pregunta2">
<input type="text" required>
<label>Fecha de Nacimiento</label>
</div>
<input type="submit" value="Registrar">
<div class="Registrar">
</div>
<div class="Inicio"><a href="#"><a href="index.html">¿Ya posee una cuenta?
</a>
</div>
</form>

</div>

</body>
</html>

Css
body {
margin: 0;
padding: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background: linear-gradient(150deg, #ffef0c, #003cff, #ff0000);
height: 110vh;
}

.formulario{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: white;
border-radius: 10px;
}

.formulario h1{
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}

.formulario form{
padding: 0 40px;
box-sizing: border-box;
}

form .username{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}

.username input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16 px;
border: none;
background: none;
outline: none;
}

.username label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}

form .contraseña{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30%px 0;
}

.contraseña input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16 px;
border: none;
background: none;
outline: none;
}

.contraseña label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}

.username span::before{
content: '';
position: absolute;
top: 40%;
left: 0;
width: 100%;
height: 2px;
background: #61b4ce;
}

.username input:focus~ label,


.username input:valid ~ label{
top: -5px;
color: #6C3483;
transition: top 0.3s ease, color 0.3s ease;
}

.contraseña input:focus~ label,


.contraseña input:valid ~ label{
top: -5px;
color: #6C3483;
transition: top 0.3s ease, color 0.3s ease;
}

.contraseña{
margin: -5px 0 20px 5px;
color: #ff6c6c;
cursor: pointer;
}

.contraseña:hover{
text-decoration: underline;
}

input[type="submit"]{
width: 100%;
height: 50%;
border: 1px solid;
background: aquamarine;
border-radius: 25px;
font-size: 18px;
color: aliceblue;
cursor: pointer;
outline: none;
}

input[type="submit"]:hover{
border-color: #52077a ;
transition: .5s;
}

.Registrar{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: black;
}

.Registrara{
color: blue;
text-decoration: none;
}

.Registrar a:hover{
text-decoration: underline;
}

.Recuperar{
margin: -5px 0 20px 5px;
text-align: center;
color: blue;
cursor: pointer;
}

.Recuperar :hover{
text-decoration: underline;
}

.username input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16 px;
border: none;
background: none;
outline: none;
}

.username label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}

form .contraseña{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30%px 0;
}

.contraseña input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16 px;
border: none;
background: none;
outline: none;
}

.contraseña label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}

form .cedula{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.cedula input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16 px;
border: none;
background: none;
outline: none;
}

.cedula label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}

.cedula span::before{
content: '';
position: absolute;
top: 40%;
left: 0;
width: 100%;
height: 2px;
background: #61b4ce;
}

.cedula input:focus~ label,


.cedula input:valid ~ label{
top: -5px;
color: #6C3483;
transition: top 0.3s ease, color 0.3s ease;
}

form .Email{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}

.Email input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16 px;
border: none;
background: none;
outline: none;
}

.Email label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}

.Email span::before{
content: '';
position: absolute;
top: 40%;
left: 0;
width: 100%;
height: 2px;
background: #61b4ce;
}

.Email input:focus~ label,


.Email input:valid ~ label{
top: -5px;
color: #6C3483;
transition: top 0.3s ease, color 0.3s ease;
}

.Inicio{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: black;
}

.Inicio{
color: blue;
text-decoration: none;
}

.Inicio a:hover{
text-decoration: underline;
}

.Inicio{
margin: -5px 0 20px 5px;
text-align: center;
color: blue;
cursor: pointer;
}

.Inicio :hover{
text-decoration: underline;
}

form .Pregunta1{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}

.Pregunta1 input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16 px;
border: none;
background: none;
outline: none;
}

.Pregunta1 label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}

.Pregunta1 span::before{
content: '';
position: absolute;
top: 40%;
left: 0;
width: 100%;
height: 2px;
background: #61b4ce;
}

.Pregunta1 input:focus~ label,


.Pregunta1 input:valid ~ label{
top: -5px;
color: #6C3483;
transition: top 0.3s ease, color 0.3s ease;
}

form .Pregunta2{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}

.Pregunta2 input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16 px;
border: none;
background: none;
outline: none;
}

.Pregunta2 label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}

.Pregunta2 span::before{
content: '';
position: absolute;
top: 40%;
left: 0;
width: 100%;
height: 2px;
background: #61b4ce;
}

.Pregunta2 input:focus~ label,


.Pregunta2 input:valid ~ label{
top: -5px;
color: #6C3483;
transition: top 0.3s ease, color 0.3s ease;
}

.navbar {
position: fixed;
top: 10px;
right: 10px;
background-color: #333;
padding: 10px 15px;
border-radius: 12px;
display: flex;
gap: 15px;
align-items: center;
z-index: 1000;
}

.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: 14px;
transition: color 0.3s;
}

.navbar a:hover {
color: #00ffff;
}

.navbar button {
padding: 6px 12px;
background-color: #00aaff;
border: none;
border-radius: 6px;
color: white;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}

.navbar button:hover {
background-color: #0088cc;
}

body {
margin: 0;
font-family: Arial, sans-serif;
scroll-behavior: smooth;
padding-top: 60px;
}

section {
height: 100vh;
padding: 40px;
border-bottom: 1px solid #ccc;
}

section h1 {
margin-top: 0;
}

body {
font-family: Arial, sans-serif;
margin: 40px;
background-color: #f5f5f5;
}

.fila {
display: flex;
align-items: center;
justify-content: space-between;
background-color: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.texto {
flex: 1;
font-size: 18px;
margin-right: 20px;
}

.imagen {
width: 300px; /* ajusta según el tamaño deseado */
height: auto;
border-radius: 8px;
}

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 50px;
display: flex;
justify-content: center;
}

.cuadro-autoajustable {
background-color: white;
padding: 10px 15px;
border: 2px solid #ccc;
border-radius: 10px;
display: inline-block;
max-width: 80%;
font-size: 16px;
line-height: 1.5;
box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
white-space: pre-wrap; /* mantiene saltos de línea si los hay */
}

You might also like