Experimental Fisiogo LP

by joplomacedo

HTML

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900|Droid+Sans:400,700|Lato:100,300,400,700,900|Cabin:400,500,600,700|PT+Sans:400,700|Arimo|Ubuntu:300,400,500,700|Cantarell|Raleway:100,200,300,400,500,600,700,800,900|Open+Sans:400,300,600,700,800|Nobile:400,700" rel="stylesheet" type="text/css">


<p class="ola">Olá <input class="nameInput" type="text" /></p>
<p class="elogio"></p>

<p class="bemVindo">Bem vind<span class="duploGender">o/a</span> <span class="linethrough">à nossa clínica</span> à nossa página. O que <span class="duploGender">o/a</span> traz por aqui?</p>

<ol class="opcoesTratamento">
  <li><span>1.</span> Tenho um problema respiratório</li>
  <li><span>2.</span> Dói-me uma parte do corpo</li>
  <li><span>3.</span> Tenho um problema cardíaco</li>
  <li><span>4.</span> Tenho um problema neurológico</li>
  <li><span>5.</span> Ouvi falar em drenagem linfática e soube que vocês o fazem</li>
</ol>

<ol class="opcoesTratamento">
  <li><span>6.</span> Estou grávida e ouvi dizer que o exercício ajuda imenso</li>
  <li><span>7.</span> Já não estou grávida (Parabéns!). Mas estive. Quero recuperar a minha forma.</li>
</ol>

<ol class="opcoesTratamento">
  <li><span>5.</span> Procuro um serviço de estética avançado (com um "pouco" de nutrição à mistura)</li>
  <li><span>6.</span> Quero relaxar. Só quero relaxar. Adorava uma massagem feita por quem percebe.</li>
</ol>

CSS

body {
  font:  300 16px/1.65 helvetica, arial, sans-serif;
  color: #333;
  margin: 20px 10%;
}

input {
  font: inherit;
  color: inherit;
  outline: none;
}



.linethrough {
  display: inline-block;
  position: relative;
}

.linethrough:after {
  content: "";
  border: 1px solid;
  position: absolute;
  top: 49%;
  left: 0;
  right: 0;
}


.nameInput {
  margin-left: 0.2em;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #555;
  background: none;
}

.nameInput.is-notEmpty {
  border-bottom-color: transparent;
}




.ola,
.bemVindo {
  font-size: 2.25em;
  line-height: 1.1em;
  font-weight: 600;
}

.ola {
  margin-bottom: 1.2em;
}


.bemVindo {
  margin-bottom: 1.5em;
}

.opcoesTratamento > li {
   cursor: pointer;
}


li > span {
  font-variant: small-caps;
  font-size: 0.9em;
  font-weight: 500;
}

JavaScript

var $duplo_gender = $('.duploGender');

$('.nameInput').on('change', function () {
  var $this = $(this),
      val = $this.val(),
      last_letter;
  
  if ( val !== "" ) {
    $this.addClass('is-notEmpty');
    
    last_letter = val[val.length - 1];
    
    if ( last_letter === "a" ) {
      $duplo_gender.text("a");
    } else if (last_letter === "o" ) {
      $duplo_gender.text("o");
    } else {
      $duplo_gender.text("o/a");
    }
    
  } else {
    $this.removeClass('is-notEmpty');
    $duplo_gender.text("o/a");
  }
});