[Agregar] estilos al formulario de registro
This commit is contained in:
francisco-solis99
parent
04794658cc
commit
0e7aae16cd
|
|
@ -0,0 +1,116 @@
|
|||
body {
|
||||
background-color: hsla(197, 100%, 50%, 0.4);
|
||||
background-image: url('../../../images/background-form.svg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-blend-mode: saturation;
|
||||
}
|
||||
|
||||
/* Contenedor */
|
||||
|
||||
.wrapper {
|
||||
width: 90%;
|
||||
max-width: 780px;
|
||||
min-width: 300px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
/* Section del header */
|
||||
|
||||
.header__logo-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sign-up {
|
||||
/* max-width: 360px; */
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.sign-up__title {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sign-up__text {
|
||||
max-width: 300px;
|
||||
font-size: 3.2rem;
|
||||
font-weight: 400;
|
||||
line-height: 4.3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sign-up__plane {
|
||||
width: 58px;
|
||||
height: 105px;
|
||||
position: absolute;
|
||||
background-image: url('../../../images/paper-plane.svg');
|
||||
}
|
||||
|
||||
|
||||
/* Section del form */
|
||||
|
||||
/* .form__container {
|
||||
padding-top: 10px;
|
||||
} */
|
||||
|
||||
.form__sign-up label {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sign-up__input {
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.1rem;
|
||||
color: var(--color-black);
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-bottom: 2px solid var(--color-primary-red);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.sign-up__input::placeholder {
|
||||
color: rgba(40, 43, 57,0.6);
|
||||
}
|
||||
|
||||
.sign-up__button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 236px;
|
||||
height: 60px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
line-height: 2.7rem;
|
||||
border: 0;
|
||||
border-radius: 40px;
|
||||
color: #FFF;
|
||||
background-color: var(--color-primary-red);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form__already {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Cambios a los estilos del footer */
|
||||
|
||||
.footer {
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
|
||||
.footer .rights {
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
||||
.footer .media svg path {
|
||||
fill: var(--color-background);
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<?php defined('NABU') || exit ?>
|
||||
<?php $head_title = NABU_DEFAULT['website-name'] ?>
|
||||
<?php $styles = array(
|
||||
'pages/home/home.css',
|
||||
'components/articles/articles.css',
|
||||
'components/footer/footer.css',
|
||||
'pages/home/home.css',
|
||||
) ?>
|
||||
<?php $desktop_styles = array(
|
||||
array('pages/home/home-desktop.css', 'attributes' => 'media="(max-width: 720px)"'),
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<?php defined('NABU') || exit ?>
|
||||
<?php $head_title = 'Crea una cuenta' ?>
|
||||
<?php $styles = array(
|
||||
'components/footer/footer.css',
|
||||
'pages/signup/signup.css',
|
||||
) ?>
|
||||
<?php $desktop_styles = array(
|
||||
|
|
@ -11,47 +12,58 @@
|
|||
|
||||
|
||||
<?php require_once 'views/components/messages.php' ?>
|
||||
|
||||
<header class="header">
|
||||
<picture class="header__logo-container">
|
||||
<img src="<?= NABU_DIRECTORY['images'] ?>/nabu-logo.svg" alt="Logo de nabu" class="header__logo">
|
||||
<div class="wrapper">
|
||||
<div class="content">
|
||||
<header class="header">
|
||||
<picture class="header__logo-container">
|
||||
<img src="<?= NABU_DIRECTORY['images'] ?>/nabu-logo.svg" alt="Logo de nabu" class="header__logo">
|
||||
</picture>
|
||||
</header>
|
||||
|
||||
<main class="sign-up">
|
||||
<section class="sign-up__title">
|
||||
<h1 class="sign-up__text">Registrate en <strong>Nabu</strong></h1>
|
||||
<span class="sign-up__plane"></span>
|
||||
</section>
|
||||
<section class="form__container">
|
||||
<form class="form__sign-up" action="POST" action="<?= NABU_ROUTES['signup'] ?>">
|
||||
<label for="name">
|
||||
<input class="sign-up__input" type="text" placeholder="Nombre Completo" minlength="5" maxlength="255" id="name" name="name" required autofocus aria-label="Ingresa tu nombre completo" autocomplete="name">
|
||||
</label>
|
||||
|
||||
<label for="username">
|
||||
<input class="sign-up__input" type="text" placeholder="Nombre de usuario" id="username" name="username" minlength="1" maxlength="255" required aria-label="Ingresa tu nombre de usuario" autocomplete="username">
|
||||
</label>
|
||||
|
||||
<label for="email">
|
||||
<input class="sign-up__input" type="email" placeholder="Correo(institucional)" id="email" name="email" minlength="5" maxlength="255" required aria-label="Ingresa su correo o email" autocomplete="email">
|
||||
</label>
|
||||
|
||||
|
||||
<label for="password">
|
||||
<input class="sign-up__input" type="password" placeholder="Contraseña" id="password" name="password" minlength="6" maxlength="255" required aria-label="Ingresa tu contraseña">
|
||||
</label>
|
||||
|
||||
<label for="confirm-password">
|
||||
<input class="sign-up__input" type="password" placeholder="Confirmar contraseña" id="confirm-password" name="confirm-password" minlength="6" maxlength="255" required aria-label="Confirma tu contraseña">
|
||||
</label>
|
||||
|
||||
<input class="sign-up__button"type="submit" name="signup-submit" value="Registrarme" aria-label="Registrar">
|
||||
<p class="form__already">¿Ya tienes cuenta?
|
||||
<a href="<?= NABU_ROUTES['login'] ?>">Inicia sesión</a>.
|
||||
</p>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<picture class="form__image-container">
|
||||
<img class="form__image" src="" alt="">
|
||||
</picture>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<main class="sign-up">
|
||||
<div class="sign-up__title">
|
||||
<h1>Registrate en <strong>Nabu</strong></h1>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="form__container">
|
||||
<form class="form__sign-up" action="POST" action="<?= NABU_ROUTES['signup'] ?>">
|
||||
<label for="name">
|
||||
<input class="sign-up__input" type="text" placeholder="Nombre Completo" minlength="5" maxlength="255" id="name" name="name" required autofocus aria-label="Ingresa tu nombre completo">
|
||||
</label>
|
||||
|
||||
<label for="username">
|
||||
<input class="sign-up__input" type="text" placeholder="Nombre de usuario" id="username" name="username" minlength="1" maxlength="255" required aria-label="Ingresa tu nombre de usuario">
|
||||
</label>
|
||||
|
||||
<label for="email">
|
||||
<input class="sign-up__input" type="email" placeholder="Correo(institucional)" id="email" name="email" minlength="5" maxlength="255" required aria-label="Ingresa su correo o email">
|
||||
</label>
|
||||
|
||||
|
||||
<label for="password">
|
||||
<input class="sign-up__input" type="password" placeholder="Contraseña" id="password" name="password" minlength="6" maxlength="255" required aria-label="Ingresa tu contraseña">
|
||||
</label>
|
||||
|
||||
<label for="confirm-password">
|
||||
<input class="sign-up__input" type="password" placeholder="Confirmar contraseña" id="confirm-password" name="confirm-password" minlength="6" maxlength="255" required aria-label="Confirma tu contraseña">
|
||||
</label>
|
||||
|
||||
<input class="sign-up__input sign-up__input-btn"type="submit" name="signup-submit" value="Registrarme" aria-label="Registrar">
|
||||
<p class="">¿Ya tienes cuenta? <a href="<?= NABU_ROUTES['login'] ?>">Inicia sesión</a>.</p>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
<?php require_once 'views/components/footer.php' ?>
|
||||
|
||||
<!--
|
||||
<form method="POST" action="<?= NABU_ROUTES['signup'] ?>">
|
||||
|
|
@ -83,4 +95,4 @@
|
|||
</form>
|
||||
-->
|
||||
|
||||
<?php require_once 'views/components/footer.php' ?>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue