IAOJIOOIJOI45090S9

In this example below you will see how to do a IAOJIOOIJOI45090S9 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Arguro, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Arguro ©
  • HTML
  • CSS
  • JavaScript
        %form.form{action: ''}
  %p.field.required
    %label.label.required{for: 'name'} Nome completo
    %input.text-input#name{type: 'text', name: 'name', required: true, tabindex: 1}
  %p.field.required.half
    %label.label{for: 'email'} E-mail
    %input.text-input#email{type: 'email', name: 'email', required: true, tabindex: 2}
  %p.field.half
    %label.label{for: 'phone'} Telefone
    %input.text-input#phone{type: 'phone', name: 'phone', tabindex: 3}
  %p.field.half.required.error
    %label.label{for: 'login'} Usuario
    %input.text-input#login{type: 'text', name: 'login', required: true, tabindex: 4, value: ''}
    %span.message 
  %p.field.half.required
    %label.label{for: 'password'} Senha
    %input.text-input#password{type: 'password', name: 'password', required: true, tabindex: 5}
  %ul.field.checkboxes.half
    %li.checkbox
      %input.checkbox-input#choice-1{name: 'choice', tabindex: 6, type: 'checkbox', value: '1'}/
      %label.checkbox-label{:for => "choice-1"} opção um
    %li.checkbox
      %input.checkbox-input#choice-2{name: 'choice', tabindex: 7, type: 'checkbox', value: '2'}/
      %label.checkbox-label{:for => "choice-2"} opção dois
    %li.checkbox
      %input.checkbox-input#choice-3{name: 'choice', tabindex: 8, type: 'checkbox', value: '3'}/
      %label.checkbox-label{:for => "choice-3"} opção tres
  %ul.field.options.half
    %li.option
      %input.option-input#option-1{name: 'option', tabindex: 9, type: 'radio', value: '1'}/
      %label.option-label{:for => "option-1"} opção um
    %li.option
      %input.option-input#option-2{name: 'option', tabindex: 10, type: 'radio', value: '2'}/
      %label.option-label{:for => "option-2"} opão dois
    %li.option
      %input.option-input#option-3{name: 'option', tabindex: 11, type: 'radio', value: '3'}/
      %label.option-label{:for => "option-3"} opção tres
  %p.field
    %label.label{for: "about"} Pergunte
    %textarea.textarea#about{cols: 50, name: "about", rows: 4, tabindex: 12}
  %p.field.half
    %label.label{for: "select"} Area atual
    %select#select.select{tabindex: 13}
      %option{value: '', selected: true}
      %option{value: "ceo"} CEO
      %option{value: "front-end"} Front-end developer
      %option{value: "back-end"} Back-end developer
  %p.field.half
    %input.button{ tabindex: 14, type: "submit", value: "Send"}
    
    
%p.info
  Versão 2017 @ 
  %a{ target: 'blank', href:"alexyasistem.com.br" } Alexya
    

/*Downloaded from https://www.codeseek.co/Arguro/iaojiooijoi45090s9-RKyzZV */
        // colors

$bg: #14103B
$vibrant: #F02A71

$text: white
$label: #6789BA  
$border: #7EC0E4
$active: white
$focus: #7EC0E4
$error: #f02a2a

html
  -webkit-font-smoothing: antialiased

body
  background-color: $bg
  font-family: "Lato", sans-serif
  
  @media screen and (min-width: 40em)
    font-size: 1.25em

%block
  padding: 1em
  appearance: none
  outline: none
  line-height: normal
  border: 1px solid transparent
  border-radius: 0

%input
  @extend %block
  font: inherit
  line-height: normal
  width: 100%
  box-sizing: border-box
  display: block

  padding-left: 0

  border-bottom-color: $border
  background: transparent
  outline: none

  color: white

  &:placeholder
    color: $label

  &:-webkit-autofill
    box-shadow: 0 0 0px 1000px $bg inset
    -webkit-text-fill-color: white
    border-top-color: $bg
    border-left-color: $bg
    border-right-color: $bg

  &.required, &[required]
    border-bottom-color: $vibrant  
  
  &.error, .error &
    border-color: transparent transparent $error transparent

  &:active, &:focus
    border-color: transparent transparent $active transparent

%floated
  @extend %block
  
  position: absolute
  z-index: 10
  pointer-events: none
  padding-left: 0
  
%floated-label
  @extend %floated
  
  top: 0
  left: 0
  color: $label
  
  .active &
    font-size: .75em
    padding: 0

  .focus &
    color: $focus

  .focus:not(.active) &
    transition: font .2s ease

%floated-error
  @extend %floated
  
  bottom: 0
  right: 0
  color: $error
  font-size: .75em
  padding: 0
  
  display: none
  .error &
    display: block

%checkbox
  border: 0
  clip: rect(0 0 0 0)
  height: 1px
  margin: -1px
  overflow: hidden
  padding: 0
  position: absolute
  width: 1px

  + label
    display: inline-block
    cursor: pointer
    color: $label
    user-select: none
    padding-left: 2em
    line-height: 1
    &:before
      content: ''
      position: absolute
      left: 0
      top: 0
      border: 1px solid
      width: 1em
      height: 1em
      transition: box-shadow .2s ease-in
    &:after
      content: ''
      position: absolute
      top: .25em
      left: .25em
      border-left: 3px solid $bg
      border-bottom: 3px solid $bg
      width: .5em
      height: .25em
      transform: rotate(-45deg)
      
  &:focus, &:active
    + label
      color: $focus
          
  &:checked 
    + label
      color: white
      &:before 
        box-shadow: inset 0px 0px 0px .5em $label
        color: $label
      &:after
        color: $label
    
    &:focus, &:active
      + label:before
        box-shadow: inset 0px 0px 0px .5em $focus
        color: $focus
    


%option
  + label
    &:before
      border-radius: 50%
    &:after
      top: 1px
      left: 1px
      width: 1em
      height: 1em
      box-sizing: border-box
      border: 3px solid $bg
      border-radius: 50%
      transform: none
    

%button
  @extend %block
  
  font: inherit
  font-size: 1em
  line-height: normal
  cursor: pointer

  background-color: transparent
  color: $vibrant
  border: 1px solid $vibrant
  text-align: center

  &:hover, &:focus, &:active
    color: white
    border-color: white

  &:active
    position: relative
    top: 1px
    left: 1px

.form
  max-width: 40em
  margin: 0 auto
  padding: 1em 2em
  
  display: flex
  flex-flow: row wrap
  justify-content: space-between
  
  .field
    position: relative
    width: 100%
    margin-bottom: 1.5em
    &.half
      @media screen and (min-width: 40em)
        width: calc(50% - 2em)
    &.last
      margin-left: auto

  .text-input
    @extend %input

  .textarea
    @extend %input
    max-width: 100%
    border-right-color: $border

    &:active, &:focus
      border-color: transparent $active $active transparent
    
  .button
    @extend %button
    width: 100%
    
  .label
    @extend %floated-label
    
  .message
    @extend %floated-error
    
  .select
    @extend %input
    text-indent: 0.01px
    text-overflow: ""!important
    &::-ms-expand
      display: none
    
  .checkboxes, .options
    padding: 0
    list-style-type: none
    
  .checkbox, .option
    position: relative
    + *
      margin-top: .5em
    
  .checkbox-input
    @extend %checkbox
    
  .option-input
    @extend %checkbox
    @extend %option
    

.customSelect
  @extend %input
  &:after
    content: ''
    pointer-events: none
    width: 1em
    height: 1em
    border-style: solid
    border-color: $label
    border-width: 0 1px 1px 0
    position: absolute
    top: 50%
    margin-top: -1em
    right: 0
    transform-origin: 0 0
    transform: rotate(45deg)

  &.customSelectHover
    
  &.customSelectOpen

  &.customSelectFocus
    @extend %input:active
    &:after
      border-color: $focus
    
    
.customSelectInner
    
.info
  text-align: center
  color: white
  a
    color: $vibrant
    text-decoration: none
    
    

/*Downloaded from https://www.codeseek.co/Arguro/iaojiooijoi45090s9-RKyzZV */
        (($) ->

  $.fn.floatedLabel = (options) ->
    defaults =
      focusClass: 'focus'
      activeClass: 'active'
      errorClass: 'error'
    settings = $.extend({}, defaults, options)
    @each ->
      label = $(@)
      return unless label.prop('for')
          
      element = label.parents('.field').first()
      input = $("##{label.prop('for')}").filter('textarea, input, select').first()

      input.bind 'checkval', ->
        element.toggleClass settings.activeClass, !!input.val()
      .on 'keyup input change', ->
        element.removeClass settings.errorClass
        input.trigger 'checkval'
      .on 'blur', ->
        element.removeClass settings.focusClass
      .on 'focus', ->
        element.addClass settings.focusClass
      .trigger 'checkval'

) jQuery

$ ->
  $('.label').floatedLabel()
  $('.select').customSelect()

    

Comments