cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              // .h3 Comienza tu prueba gratuita de 30 días ya mismo
// p o puedes comprar tu plan en Softlife ahora mismo

.container
  form
    .row
      h4 Tu cuenta
      .input-group.input-group-icon
        input(type="text", placeholder="Nombre completo")
        .input-icon
          i.fa.fa-user
      .input-group.input-group-icon
        input(type="email", placeholder="Correo electrónico")
        .input-icon
          i.fa.fa-envelope
      .input-group.input-group-icon
        input(type="password", placeholder="Contraseña")
        .input-icon
          i.fa.fa-key
    .row
      .col-half
        h4 Fecha de nacimiento
        .input-group
          .col-third
            input(type="text", placeholder="DD")
          .col-third
            input(type="text", placeholder="MM")
          .col-third
            input(type="text", placeholder="AAAA")
      .col-half
        h4 Género
        .input-group
          input(type="radio", name="gender", value="male", id="gender-male")
          label(for="gender-male") Hombre
          input(type="radio", name="gender", value="female", id="gender-female")
          label(for="gender-female") Mujer
    .row
      .col-half
        h4 Identificación
        .input-group.input-group-icon
          input(type="text", placeholder="ID")
          .input-icon
            i.fa.fa-credit-card
      .col-half
        h4 País
        .input-group
          select
            option(selected='') Seleccione su País
            option(value='Afganistán') Afganistán
            option(value='Akrotiri') Akrotiri
            option(value='Albania') Albania
            option(value='Alemania') Alemania
            option(value='Andorra') Andorra
            option(value='Angola') Angola
            option(value='Angola') Angola
            option(value='Angola') Angola
            option(value='Antigua y Barbuda') Antigua y Barbuda
            option(value='Antillas Neerlandesas') Antillas Neerlandesas
            option(value='Arabia Saudí') Arabia Saudí
            option(value='Arctic Ocean') Arctic Ocean
            option(value='Argelia') Argelia
            option(value='Argentina') Argentina
            option(value='Armenia') Armenia
            option(value='Aruba') Aruba
            option(value='Australia') Australia
            option(value='Austria') Austria
            option(value='Azerbaiyán') Azerbaiyán
            option(value='Bahamas') Bahamas
            option(value='Bahráin') Bahráin
            option(value='Bangladesh') Bangladesh
            option(value='Barbados') Barbados
            option(value='Bélgica') Bélgica
            option(value='Belice') Belice
            option(value='Benín') Benín
            option(value='Bermudas') Bermudas
            option(value='Bielorrusia') Bielorrusia
            option(value='Bolivia') Bolivia
            option(value='Botsuana') Botsuana
            option(value='Brasil') Brasil
            option(value='Brunéi') Brunéi
            option(value='Bulgaria') Bulgaria
            option(value='Burkina Faso') Burkina Faso
            option(value='Burundi') Burundi
            option(value='Bután') Bután
            option(value='Cabo Verde') Cabo Verde
            option(value='Camboya') Camboya
            option(value='Camerún') Camerún
            option(value='Canadá') Canadá
            option(value='Chad') Chad
            option(value='Chile') Chile
            option(value='China') China
            option(value='Chipre') Chipre
            option(value='Clipperton Island') Clipperton Island
            option(value='Colombia') Colombia
            option(value='Comoras') Comoras
            option(value='Congo') Congo
            option(value='Coral Sea Islands') Coral Sea Islands
            option(value='Corea del Norte') Corea del Norte
            option(value='Corea del Sur') Corea del Sur
            option(value='Costa de Marfil') Costa de Marfil
            option(value='Costa Rica') Costa Rica
            option(value='Croacia') Croacia
            option(value='Cuba') Cuba
            option(value='Dhekelia') Dhekelia
            option(value='Dinamarca') Dinamarca
            option(value='Dominica') Dominica
            option(value='Ecuador') Ecuador
            option(value='Egipto') Egipto
            option(value='El Salvador') El Salvador
            option(value='El Vaticano') El Vaticano
            option(value='Emiratos Árabes Unidos') Emiratos Árabes Unidos
            option(value='Eritrea') Eritrea
            option(value='Eslovaquia') Eslovaquia
            option(value='España') España
            option(value='Estados Unidos') Estados Unidos
            option(value='Estonia') Estonia
            option(value='Etiopía') Etiopía
            option(value='Filipinas') Filipinas
            option(value='Finlandia') Finlandia
            option(value='Francia') Francia
            option(value='Gabón') Gabón
            option(value='Gambia') Gambia
            option(value='Gaza Strip') Gaza Strip
            option(value='Georgia') Georgia
            option(value='Ghana') Ghana
            option(value='Gibraltar') Gibraltar
            option(value='Granada') Granada
            option(value='Grecia') Grecia
            option(value='Groenlandia') Groenlandia
            option(value='Guatemala') Guatemala
            option(value='Guinea') Guinea
            option(value='Guyana') Guyana
            option(value='Haití') Haití
            option(value='Honduras') Honduras
            option(value='Hong Kong') Hong Kong
            option(value='Hungría') Hungría
            option(value='India') India
            option(value='Indian Ocean') Indian Ocean
            option(value='Indonesia') Indonesia
            option(value='Irán') Irán
            option(value='Iraq') Iraq
            option(value='Irlanda') Irlanda
            option(value='Isla Bouvet') Isla Bouvet
            option(value='Isla Christmas') Isla Christmas
            option(value='Israel') Israel
            option(value='Italia') Italia
            option(value='Jamaica') Jamaica
            option(value='Japón') Japón
            option(value='Jersey') Jersey
            option(value='Jordania') Jordania
            option(value='Kazajistán') Kazajistán
            option(value='Kenia') Kenia
            option(value='Kirguizistán') Kirguizistán
            option(value='Libia') Libia
            option(value='Lituania') Lituania
            option(value='Luxemburgo') Luxemburgo
            option(value='Macao') Macao
            option(value='Macedonia') Macedonia
            option(value='Madagascar') Madagascar
            option(value='Malasia') Malasia
            option(value='Malaui') Malaui
            option(value='Maldivas') Maldivas
            option(value='Malí') Malí
            option(value='Marruecos') Marruecos
            option(value='México') México
            option(value='Moldavia') Moldavia
            option(value='Mónaco') Mónaco
            option(value='Mongolia') Mongolia
            option(value='Montserrat') Montserrat
            option(value='Mozambique') Mozambique
            option(value='Nepalv') Nepalv
            option(value='Nicaragua') Nicaragua
            option(value='Níger') Níger
            option(value='Nigeria') Nigeria
            option(value='Noruega') Noruega
            option(value='Nueva Caledonia') Nueva Caledonia
            option(value='Nueva Zelanda') Nueva Zelanda
            option(value='Paraguay') Paraguay
            option(value='Perú') Perú
            option(value='Polonia') Polonia
            option(value='Portugal') Portugal
            option(value='Puerto Rico') Puerto Rico
            option(value='Reino Unido') Reino Unido
            option(value='República Checa') República Checa
            option(value='República Dominicana') República Dominicana
            option(value='Ruanda') Ruanda
            option(value='Rumania') Rumania
            option(value='Rusia') Rusia
            option(value='Senegal') Senegal
            option(value='Singapur') Singapur
            option(value='Siria') Siria
            option(value='Somalia') Somalia
            option(value='Sudán') Sudán
            option(value='Suecia') Suecia
            option(value='Suiza') Suiza
            option(value='Tailandia') Tailandia
            option(value='Taiwán') Taiwán
            option(value='Tanzania') Tanzania
            option(value='Tayikistán') Tayikistán
            option(value='Trinidad y Tobago') Trinidad y Tobago
            option(value='Túnez') Túnez
            option(value='Turquía') Turquía
            option(value='Ucrania') Ucrania
            option(value='Uganda') Uganda
            option(value='Uruguay') Uruguay
            option(value='Venezuela') Venezuela
            option(value='Vietnam') Vietnam
            option(value='Yemen') Yemen
    .row
      .col-half
        h4 Verificación (obligatorio)
        .input-group.input-group-icon
          input(type="text", placeholder="Teléfono móvil")
          .input-icon
            i.fa.fa-phone
      .col-half
        h4 Tamaño de la iglesia
        .input-group
          select
            option 50 a 99 personas
            option 100 a 499 personas
            option 500 a 999 personas
            option 1.000 a 4.999 personas
            option más de 5.000 personas
    .row
      h4 Términos y condiciones
      .input-group
        input(type="checkbox", id="terms")
        label(for="terms" style="font-size: 80%;") Acepto los términos y condiciones de Softlife, y confirmo que he leído las políticas de privacidad. 
        </br>        
        input(type="submit", value="INICIAR PRUEBA GRATUITA")
            
          
!
            
              @import "lesshat";

// MIXINS

.clearfix() {
  zoom: 1;
  &:before, &:after{
    content: "";
    display: table;
  }
  &:after{
    clear: both;
  }
}

.col() {
  padding-right: 10px;
  float: left;
  &:last-of-type {
    padding-right: 0;
  }
}

.transition(@speed, @easing) {
  transition: all @speed @easing;  
}

// VARIABLES

@white: #fff;
@grey-lightest: #f9f9f9;
@grey-light: #e3e3e3;
@grey: #e5e5e5;
@grey-dark: #b9b9b9;
@turquesa: #55d9cb;
@azuloscuro: #34495e;

@purple: #c68eaa;
@green: #55d9cb;
@emerald: #04BDBD;
@blue: #04AEC5;
@blue-dark: #0F6CC9;
@color-primary: @turquesa;
@color-primary-strong: darken(saturate(@color-primary, 5%), 10%);

@br: 3px;

@fast: 0.35s;

@ease: ease-in-out;

// GENERAL

* {
  &, &:before, &:after {
    box-sizing: border-box;
  }
}

body {
  padding: 1em;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  // font-size: 1vw;
  color: @grey-dark;
  background-color: @grey-light;
}

// TYPOGRAPHY

h4 {
  color: @color-primary;
}

// FORM

input {
  width: 100%;
  padding: 1em;
  line-height: 1.4;
  background-color: @grey-lightest;
  border: 1px solid @grey;
  border-radius: 3px;
  .transition(@fast, @ease);
  &:focus {
    outline: 0;
    border-color: @color-primary-strong;
    & + .input-icon {
      i {
        color: @color-primary;
      }
      &:after {
        border-right-color: @color-primary;
      }
    }
  }
  &[type="radio"] {
    display: none;
    & + label {
      &:extend(input);
      display: inline-block;
      width: 50%;
      text-align: center;
      float: left;
      border-radius: 0;
      &:first-of-type {
        border-top-left-radius: @br;
        border-bottom-left-radius: @br;
      }
      &:last-of-type {
        border-top-right-radius: @br;
        border-bottom-right-radius: @br;
      }
      i {
        padding-right: 0.4em;
      }
    }
    &:checked + label {
      background-color: @color-primary;
      color: @white;
      border-color: @color-primary-strong;
    }
  }
  &[type="checkbox"] {
    display: none;
    & + label {
      position: relative;
      display: block;
      padding-left: 1.6em;
      &:before {
        &:extend(input);
        position: absolute;
        top: 0.2em;
        left: 0;
        display: block;
        width: 1em;
        height: 1em;
        padding: 0;
        content: "";
      }
      &:after {
        position: absolute;
        top: 0.45em;
        left: 0.2em;
        font-size: 0.8em;
        color: @white;
        opacity: 0;
        font-family: FontAwesome;
        content: "\f00c";
      }
    }
  }
  &:checked + label {
    &:before {
      &:extend(input[type="radio"]:checked + label);
    }
    &:after {
      opacity: 1;
    }
  }
}

select {
  &:extend(input[type="radio"] + label);
  height: 3.4em;
  line-height: 2;
  width:100%;
  &:first-of-type {
    border-top-left-radius: @br;
    border-bottom-left-radius: @br;
  }
  &:last-of-type {
    border-top-right-radius: @br;
    border-bottom-right-radius: @br;
  }
  &:focus, &:active {
    outline: 0;
    &:extend(input[type="radio"]:checked + label);
  }
  option {
    &:extend(input);
    background-color: @color-primary;
    color: @white;
  }
}

.input-group {
  margin-bottom: 1em;
  .clearfix();
}

.input-group-icon {
  position: relative;
  input {
    padding-left: 4.4em;
  }
  .input-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.4em;
    height: 3.4em;
    line-height: 3.4em;
    text-align: center;
    pointer-events: none;
    &:after {
      position: absolute;
      top: 0.6em;
      bottom: 0.6em;
      left: 3.4em;
      display: block;
      border-right: 1px solid @grey;
      content: "";
      .transition(@fast, @ease);
    }
    i {
      .transition(@fast, @ease);
    }
  }
  
}

// STRUCTURE

.container {
  max-width: 38em;
  padding: 1em 3em 2em 3em;
  margin: 0em auto;
  background-color: @white;
  border-radius: @br * 1.4;
  box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.2);
}

.row {
  .clearfix();
}

.col-half {
  .col();
  width: 100% / 2;
  display:inline-block;
}

.col-third {
  .col();
  width: 100% / 3;
}

@media only screen and (max-width: 540px) {
  .col-half {
    width: 100%;
    padding-right: 0;
  }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console