feat(styles): add signup layout

FromDoppler · Feb 26, 2019 · cbdaadb · cbdaadb
1 parent b01f416
commit cbdaadb
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 0 deletions.
diff --git a/assets/img/logo-doppler.svg b/assets/img/logo-doppler.svg
diff --git a/assets/img/signup-img.png b/assets/img/signup-img.png
diff --git a/assets/img/signup-img2.png b/assets/img/signup-img2.png
diff --git a/assets/scss/core/_typography.scss b/assets/scss/core/_typography.scss
@@ -94,6 +94,10 @@ small {
   line-height: 18px;
 }
 
+.link-green {
+  color: $dp-color-green;
+}
+
 .cursive {
   font-family: 'hand-of-sean';
 }

diff --git a/assets/scss/templates/_signup.scss b/assets/scss/templates/_signup.scss
@@ -0,0 +1,115 @@
+.panel-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+
+  .main-panel {
+    flex: 1.5;
+    height: 100vh;
+    background-color: $dp-color-white;
+    overflow-y: scroll;
+    padding: 40px 50px;
+
+    .logo-doppler {
+      height: 30px;
+    }
+
+    .head-signin {
+      display: inline-block;
+      float: right;
+      margin-top: 6px;
+      font-style: italic;
+
+      a {
+        font-style: normal;
+        font-weight: bold;
+      }
+    }
+
+    &__content {
+      padding: 60px 0 34px;
+
+      h5 {
+        margin: 10px 0;
+        color: $dp-color-brown;
+      }
+
+      p {
+        margin: 10px 0;
+      }
+    }
+
+    &__rgpd {
+      padding-bottom: 10px;
+
+      p {
+        font-family: $dp-font-family-proximanova;
+        font-size: $dp-font-size-small;
+      }
+    }
+
+    &__promotion {
+      p {
+        font-size: 15px;
+      }
+    }
+
+    &__footer {
+      padding-top: 40px;
+    }
+  }
+
+  .line-dashed {
+    border-style: dashed;
+  }
+
+  .feature-panel {
+    flex: 4;
+    height: 100vh;
+    padding: 60px 70px;
+    background-image: url("../img/signup-img.png");
+    background-size: cover;
+  }
+
+  .feature-content {
+    max-width: 500px;
+    color: #FFFFFF;
+
+    h3 {
+      font-family: $dp-font-family-proximanova;
+      font-weight: bold;
+      color: $dp-color-white;
+      margin: 10px 0;
+    }
+
+    p {
+      font-family: $dp-font-family-proximanova;
+    }
+  }
+  /* width */
+  ::-webkit-scrollbar {
+    width: 8px;
+    border-radius: 5px;
+  }
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background-color: #D8D8D8;
+    height: 600px;
+  }
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #999999;
+    border-radius: 5px;
+  }
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #999999;
+  }
+}
+@include media-breakpoint('desktop') {
+  .feature-panel {
+    display: none;
+  }
+}
diff --git a/assets/templates/signup.html b/assets/templates/signup.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Doppler UI Team</title>
+  <meta name="keywords" content="">
+  <meta name="description" content="Signup layout">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="canonical" href="" />
+  <!-- Open Graph metatags -->
+  <meta property="og:title" content="Signup layout" />
+  <meta property="og:type" content="article" />
+  <meta property="og:image" content="Signup layout" />
+  <meta property="og:url" content="Signup layout" />
+  <meta property="og:description" content="Signup layout" />
+  <meta property="og:site_name" content="Signup layout" />
+  <!-- Stylesheets and polyfills -->
+  <link rel="stylesheet" type="text/css" href="./css/styles.css">
+  <!-- Favicons -->
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://www.fromdoppler.com/apple-touch-icon-144x144-precomposed.png" />
+  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.fromdoppler.com/apple-touch-icon-114x114-precomposed.png" />
+  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.fromdoppler.com/apple-touch-icon-72x72-precomposed.png" />
+  <link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://www.fromdoppler.com/apple-touch-icon-57x57-precomposed.png" />
+  <link rel="apple-touch-icon-precomposed" href="https://www.fromdoppler.com/apple-touch-icon-precomposed.png" />
+  <link rel="apple-touch-icon" href="https://www.fromdoppler.com/apple-touch-icon.png" />
+  <link rel="icon" type="image/x-icon" href="https://www.fromdoppler.com/favicon.ico" />
+  <link rel="shortcut icon" type="image/x-icon" href="https://www.fromdoppler.com/favicon.ico" />
+</head>
+
+<body>
+  <div class="panel-wrapper">
+    <section class="main-panel">
+
+      <div class="main-panel__head">
+        <img src="../img/logo-doppler.svg" class="logo-doppler" alt="Doppler">
+        <p class="head-signin">¿Ya tienes una cuenta? <a href="#" class="link-green" target="_blank">INGRESA</a></p>
+      </div>
+
+      <div class="main-panel__content">
+        <h5><strong>REGÍSTRATE</strong></h5>
+        <p>Crea una cuenta GRATIS hasta 500 Suscriptores.</p>
+      </div>
+
+      <div class="main-panel__rgpd">
+        <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>
+      <hr class="line-dashed">
+      <div class="main-panel__promotion">
+        <p>Pst! si tienes un código promocional podrás ingresarlo al confirmar tu cuenta. <a href="#" class="link-green" target="_blank">HELP</a></p>
+      </div>
+      <div class="main-panel__footer">
+        <p>© 2019 Doppler LLC. Todos los derechos reservados.</p>
+        </footer>
+    </section>
+
+    <section class="feature-panel">
+      <div class="feature-content">
+        <p><strong>EDITOR DE EMAILS</strong></p>
+        <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>
+      </div>
+    </section>
+
+  </div>
+  <!-- build:js:dist js/app.js -->
+  <script src="./js/main.js"></script>
+  <!-- /build -->
+</body>
+
+</html>