LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Dear Erlen,

My is and

my is

I have a for you,

Vist erlen.co.uk to see my work
CSS
body {
  font-family: 'Lato', georgia;
  font-size: 25px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(236, 181, 62, 0.95);
  text-align: center;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

#contact-form {
  max-width: 90%;
  margin: 0 auto;
}

label {
  font-weight: 400;
  cursor: pointer;
}

textarea,
input {
  border: none;
  outline: none;
  border-radius: 0;
  text-align: center;
  background: none;
  font-weight: 700;
  font-family: 'Lato', georgia;
  font-size: 25px;
  color: rgba(255, 255, 255, 1);
  max-width: 90%;
  padding: 1rem;
  border: 2px dashed rgba(255, 255, 255, 0);
  box-sizing: border-box;
  cursor: text;
}

textarea {
  text-align: left;
  /* overflow:hidden; */
  
  resize: none;
  width: 90%;
  border-color: rgba(255, 255, 255, 0)
}

textarea:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px dashed rgba(255, 255, 255, 1);
}

textarea:focus:required:valid {
  border: 2px solid rgba(255, 255, 255, 0);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

textarea:required:valid {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

input {
  border-bottom: 2px dashed rgba(255, 255, 255, 0.5);
}

input:required,
textarea:required {
  border-bottom: 2px dashed rgba(255, 255, 255, 0.5);
}

input:focus {
  border-bottom: 2px dashed rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.2);
}

input:required:valid {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

input:required:invalid {
  color: rgba(255, 255, 255, 0.5);
}

::-webkit-input-placeholder {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 400;
}

:-moz-placeholder {
  /* Firefox 18- */
  
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 400;
}

::-moz-placeholder {
  /* Firefox 19+ */
  
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 400;
}

:-ms-input-placeholder {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 400;
}

.expanding {
  vertical-align: top;
}

.send-icn {
  fill: rgba(255, 255, 255, 1)
}

.send-icn:hover {
  fill: rgba(0, 0, 0, 1);
  cursor: pointer;
}

button {
  background: none;
  border: none;
  outline: none;
  margin: 2vmax;
}

button:hover small {
  opacity: 1;
}

small {
  display: block;
  opacity: 0;
}

.website {
  opacity: 1;
  font-size: 16px;
  color: white;
  position: relative;
  text-align: center;
  display: block;
  margin-top: 7%;
  
}

.website a {
  color: white;
}
JS
// Auto resize input
function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"], input[type="email"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);


console.clear();
// Adapted from georgepapadakis.me/demo/expanding-textarea.html
(function(){
  
  var textareas = document.querySelectorAll('.expanding'),
      
      resize = function(t) {
        t.style.height = 'auto';
        t.style.overflow = 'hidden'; // Ensure scrollbar doesn't interfere with the true height of the text.
        t.style.height = (t.scrollHeight + t.offset ) + 'px';
        t.style.overflow = '';
      },
      
      attachResize = function(t) {
        if ( t ) {
          console.log('t.className',t.className);
          t.offset = !window.opera ? (t.offsetHeight - t.clientHeight) : (t.offsetHeight + parseInt(window.getComputedStyle(t, null).getPropertyValue('border-top-width')));

          resize(t);

          if ( t.addEventListener ) {
            t.addEventListener('input', function() { resize(t); });
            t.addEventListener('mouseup', function() { resize(t); }); // set height after user resize
          }

          t['attachEvent'] && t.attachEvent('onkeyup', function() { resize(t); });
        }
      };
  
  // IE7 support
  if ( !document.querySelectorAll ) {
  
    function getElementsByClass(searchClass,node,tag) {
      var classElements = new Array();
      node = node || document;
      tag = tag || '*';
      var els = node.getElementsByTagName(tag);
      var elsLen = els.length;
      var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
      for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
        }
      }
      return classElements;
    }
    
    textareas = getElementsByClass('expanding');
  }
  
  for (var i = 0; i < textareas.length; i++ ) {
    attachResize(textareas[i]);
  }
  
})();
Host Instantly Drag and Drop Website Builder

 

Description

A styling experiment for a minimal contact form starting from a PSD to a codepen, using the CSS colon-separated states :focus :required :valid :invalid
Term
Mon, 11/27/2017 - 21:39

Related Codes

Pen ID
Pen ID
Pen ID