Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

Commit

Permalink
Merge pull request #48 from FromDoppler/signup-form
Browse files Browse the repository at this point in the history 
Structure HTML SignUp
  • Loading branch information
@ignaciorodrigues1
ignaciorodrigues1 committed Mar 11, 2019
2 parents 8b15413 + 4218188 commit f92e96e
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 64 deletions.
45 changes: 3 additions & 42 deletions assets/scss/templates/_guidelines.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,10 +133,10 @@
}
}
/* buttons */

.main-buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 20px;
}

Expand All @@ -146,54 +146,15 @@
width: 25%;
flex-direction: column;
display: flex;
align-items: center;
align-items: flex-start;
text-align: left;

&:before {
opacity: 0;
border-radius: $dp-border-radius;
box-shadow: 0 4px 20px rgba(black, 0.1);
transform: scale(1.3, 1.3);
}

&:hover:before {
opacity: 1;
transform: scale(1, 1);
}

&:after {
@include transition;
border: 1px solid rgba(153, 153, 153, 0.9);
}

&:hover:after {
transform: scale(0, 0);
opacity: 0;
}
}

.box-button {
position: relative;
min-height: 260px;
@include transition;
}

.box-button::before,
.btn::after {
content: '';
position: absolute;
@include transition;
top: -15px;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.button-description {
position: relative;
display: flex;
padding-top: 20px;
padding-left: 5px;
flex-direction: column;

p {
Expand Down
106 changes: 102 additions & 4 deletions assets/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,9 +190,9 @@ <h2>Colores</h2>
</div><!-- color-card -->
</main><!-- main-colors -->
<h2>Botones</h2>
<p>3 tamaños de botón:</p>
<p><strong>3 tamaños de botón:</strong></p>
<main class="main-buttons">
<div class="buttons-card box-button">
<div class="buttons-card">
<button type="button" class="dp-button button-big primary-green">Iniciar campaña</button>
<div class="button-description">
<p><strong>Big button</strong></p>
Expand All @@ -205,7 +205,7 @@ <h2>Botones</h2>
</ul>
</div>
</div><!-- button-card -->
<div class="buttons-card box-button">
<div class="buttons-card">
<button type="button" class="dp-button button-medium primary-green">Iniciar campaña</button>
<div class="button-description">
<p><strong>Medium button</strong></p>
Expand All @@ -218,7 +218,7 @@ <h2>Botones</h2>
</ul>
</div>
</div><!-- button-card -->
<div class="buttons-card box-button">
<div class="buttons-card">
<button type="button" class="dp-button button-small primary-green">Iniciar</button>
<div class="button-description">
<p><strong>Small button</strong></p>
Expand All @@ -232,6 +232,104 @@ <h2>Botones</h2>
</div>
</div><!-- button-card -->
</main><!-- main-buttons -->
<p><strong>Botones > Jerarquías y estados</strong></p>
<p class="subtitle-states"><strong>Medium Button</strong></p>
<main class="main-buttons">
<div class="buttons-card">
<button type="button" class="dp-button button-medium">Iniciar campaña</button>
<div class="button-description">
<p><strong>Normal</strong></p>
<ul class="button-list">
<li><strong>color:</strong> #FFF</li>
<li><strong>background-color:</strong> green;</li>
<li><strong>border:</strong> 1px solid green;</li>
</ul>
</div>
</div><!-- button-card -->
<div class="buttons-card">
<button type="button" class="dp-button button-medium">Iniciar campaña</button>
<div class="button-description">
<p><strong>Hover</strong></p>
<ul class="button-list">
<li><strong>background-color:</strong> darkgreen;</li>
<li><strong>border:</strong> 1px solid darkgreen;</li>
</ul>
</div>
</div><!-- button-card -->
<div class="buttons-card">
<button type="button" class="dp-button button-medium">Salir y editar luego</button>
<div class="button-description">
<p><strong>Normal</strong></p>
<ul class="button-list">
<li><strong>color:</strong> green</li>
<li><strong>background-color:</strong> transparent;</li>
<li><strong>border:</strong> 1px solid green;</li>
</ul>
</div>
</div><!-- button-card -->
<div class="buttons-card">
<button type="button" class="dp-button button-medium">Salir y editar luego</button>
<div class="button-description">
<p><strong>Hover</strong></p>
<ul class="button-list">
<li><strong>background:</strong> rgba(51,173,115, .2);</li>
</ul>
</div>
</div><!-- button-card -->
</main><!-- main-buttons -->
<main class="main-buttons">
<div class="buttons-card">
<button type="button" class="dp-button button-medium">Iniciar campaña</button>
<div class="button-description">
<p><strong>Normal</strong></p>
<ul class="button-list">
<li><strong>color:</strong> #FFF</li>
<li><strong>background-color:</strong> grey;</li>
<li><strong>border:</strong> 1px solid grey;</li>
</ul>
</div>
</div><!-- button-card -->
<div class="buttons-card">
<button type="button" class="dp-button button-medium">Iniciar campaña</button>
<div class="button-description">
<p><strong>Hover</strong></p>
<ul class="button-list">
<li><strong>background-color:</strong> lightgrey;</li>
<li><strong>border:</strong> 1px solid lightgrey;</li>
</ul>
</div>
</div><!-- button-card -->
<div class="buttons-card">
<button type="button" class="dp-button button-medium">Previsualizar</button>
<div class="button-description">
<p><strong>Normal</strong></p>
<ul class="button-list">
<li><strong>color:</strong> grey</li>
<li><strong>background-color:</strong> transparent;</li>
<li><strong>border:</strong> 1px solid sylver;</li>
</ul>
</div>
</div><!-- button-card -->
<div class="buttons-card">
<button type="button" class="dp-button button-medium">Previsualizar</button>
<div class="button-description">
<p><strong>Hover</strong></p>
<ul class="button-list">
<li><strong>background:</strong> #EAEAEA;</li>
</ul>
</div>
</div><!-- button-card -->
<div class="buttons-card">
<button type="button" class="dp-button button-medium">Spinner</button>
<div class="button-description">
<p><strong>Spinner</strong></p>
<ul class="button-list">
<li><strong>background-color:</strong> lightgreen;</li>
<li><strong>border:</strong> 1px solid lightgreen;</li>
</ul>
</div>
</div><!-- button-card -->
</main><!-- main-buttons -->
</section><!-- section-module -->
</main>
<!-- build:js:dist js/app.js -->
Expand Down
75 changes: 57 additions & 18 deletions assets/templates/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,35 +34,74 @@
<article class="main-panel">
<header>
<img src="img/logo-doppler.svg" class="logo-doppler" alt="Doppler">
<p class="content-signin">¿Ya tienes una cuenta? <a href="#" class="link-green" target="_blank">INGRESA</a></p>
</header>
<small class="content-signin">¿Ya tienes una cuenta? <a href="#" class="link-green" target="_blank">INGRESA</a></small>
</header><!-- header -->
<h5>Regístrate</h5>
<p class="content-subtitle">Crea una cuenta GRATIS hasta 500 Suscriptores.</p>

<p class="content-subtitle">Crea una cuenta GRATIS hasta 500 Suscriptores.</p><!-- Title -->
<form class="signup-form">
<fieldset>
<legend>Creación de cuenta</legend>
<ul>
<li class="holder-small">
<label for="name">Nombre:</label>
<input type="name" name="lastname" placeholder="Nombre">
</li>
<li class="holder-small">
<label for="lastname">Apellido:</label>
<input type="lastname" name="name" placeholder="Apellido">
</li>
<li>
<label for="phone">Teléfono:</label>
<input type="tel" name="phone" placeholder="9 11 2345-6789">
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="Tu Email será tu nombre de usuario">
</li>
<li>
<label for="password">Contraseña:</label>
<input type="password" name="password" placeholder="Escribe tu clave secreta">
</li>
</ul>
</fieldset>
<fieldset class="holder-policy">
<legend>Politica de privacidad y promociones</legend>
<ul class="content-checkbox">
<li class="checkbox">
<input type="checkbox" name="acepto_politicas">
<span class="checkmark"></span>
<label for="acepto_politicas">Acepto la <a class="link-green" href="#">Política de Privacidad</a> de Doppler.</label>
</li>
<li class="checkbox">
<input type="checkbox" name="acepto_promociones">
<span class="checkmark"></span>
<label for="acepto_promociones">Acepto las promociones de Doppler y sus aliados.</label>
</li>
</ul>
<button type="button" class="dp-button button-medium primary-green">Crear cuenta</button>
</fieldset><!-- privacy policy and promotion -->
</form><!-- form -->
<div class="content-legal">
<p>Doppler te informa que los datos de carácter personal que nos proporciones al rellenar el presente formulario serán tratados por Making Sense LLC (Doppler) como responsable de esta web.</p>
<p><strong>Finalidad:</strong> Darte de alta en nuestra plataforma y brindarte los servicios que nos requieras.</p>
<p><strong>Legitimación:</strong> Consentimiento del interesado.</p>
<p><strong>Destinatarios:</strong> Tus datos serán guardados por Doppler, Zoho como CRM, Digital Ocean, Cogeco Peer1 y Rackspace como empresas de hosting.</p>
<p><strong>Información adicional:</strong> En la <a href="#" class="link-green" target="_blank">Política de Privacidad</a> de Doppler encontrarás información adicional sobre la recopilación y el uso de su información personal por
parte de Doppler, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, transferencias transfronterizas y otros temas.</p>
</div>
<p><small>Doppler te informa que los datos de carácter personal que nos proporciones al rellenar el presente formulario serán tratados por Making Sense LLC (Doppler) como responsable de esta web.</small></p>
<p><small><strong>Finalidad:</strong> Darte de alta en nuestra plataforma y brindarte los servicios que nos requieras.</small></p>
<p><small><strong>Legitimación:</strong> Consentimiento del interesado.</small></p>
<p><small><strong>Destinatarios:</strong> Tus datos serán guardados por Doppler, Zoho como CRM, Digital Ocean, Cogeco Peer1 y Rackspace como empresas de hosting.</small></p>
<p><small><strong>Información adicional:</strong> En la <a href="#" class="link-green" target="_blank">Política de Privacidad</a> de Doppler encontrarás información adicional sobre la recopilación y el uso de su información personal por
parte de Doppler, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, transferencias transfronterizas y otros temas.</small></p>
</div><!-- legal content-->
<p class="content-promotion">Pst! si tienes un código promocional podrás ingresarlo al confirmar tu cuenta. <a href="#" class="link-green" target="_blank">HELP</a></p>
<footer>
<p>© 2019 Doppler LLC. Todos los derechos reservados.</p>
</footer>
<small>© 2019 Doppler LLC. Todos los derechos reservados.</small>
</footer><!-- footer -->
</article>
<section class="feature-panel">
<article class="feature-content">
<h6>Editor de emails</h6>
<h3>Crea Emails en minutos y accede a nuestra Galería de Plantillas</h3>
<p>Nuestras Plantillas para Email son totalmente Responsive y fácilmente editables desde nuestro Editor HTML.</p>
</article>
</section>
</article><!-- article -->
</section><!-- feature panel-->
</main>
<!-- build:js:dist js/app.js -->
<script src="./js/main.js"></script>
<!-- /build -->
</body>

</html>

0 comments on commit f92e96e

Please sign in to comment.