Viewport Units Play Excuse

Mostly an excuse to play with vh, vw, and vmin units. After seeing 2398098 too many badly designed political signs, this is the way they should all look.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Viewport Units Play Excuse</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Playfair+Display+SC:400,700,900,700italic'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<form id="input">
  <fieldset>
    <ul>
      <li>
        <label>Name</label>
        <input id="name" type="text" placeholder="Tony Danza"/>
      </li>
      <li>
        <label>Position</label>
        <input id="position" type="text" placeholder="Taxi Driver"/>
      </li>
      <li> 
        <label>Year</label>
        <input id="year" type="text" placeholder="1978"/>
      </li>
      <li>
        <label>Color</label>
        <select id="color">
          <option value="#333" selected="true">Gray</option>
          <option value="#33c">Blue</option>
          <option value="#c33">Red</option>
          <option value="#4a3">Green</option>
          <option value="#cc0">Gold</option>
          <option value="#83e">Purple</option>
        </select>
      </li>
    </ul>
  </fieldset>
</form>
<div id="result">
  <h1 class="name">Tony Danza</h1>
  <h2 class="position">Taxi Driver</h2>
  <h3 class="year">1978</h3>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background: #fff;
  font-size: 2vh;
}
input,
select {
  padding: 0.33em 0.44em;
  outline: none;
  border: 1px solid #999;
  border-radius: 3px;
}
fieldset {
  border: none;
  background: transparent;
}
fieldset ul {
  list-style: none;
  padding: 0;
}
fieldset ul li {
  margin: 0.5em 0;
}
fieldset ul label {
  display: inline-block;
  width: 6em;
  text-align: right;
  padding-right: 0.3em;
}
#result {
  font-family: 'Playfair Display SC', serif;
  font-size: 3.33vmin;
  width: 100%;
  background: #333;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 25vh;
}
#result > h1,
#result > h2,
#result > h3 {
  margin: 0;
}
#result .name,
#result .position,
#result .year {
  position: absolute;
  width: 100%;
  text-align: center;
}
#result .name {
  font-weight: 900;
  font-size: 3.5em;
  line-height: 4em;
  top: 50%;
  left: 0;
  margin: -2.5em 0 -1.5em;
}
#result .position {
  font-weight: 400;
  font-size: 1.75em;
  top: 50%;
  width: 100%;
  margin-top: 0.2em;
}
#result .position em {
  font-size: 0.6em;
}
#result .year {
  top: 50%;
  margin-top: 2.2em;
  font-style: italic;
}
/* Downloaded from https://www.codeseek.co/ */
function update (sel) {
  var $targ = $(sel);
  return function (e) {
    $targ.text(
      $(e.target).val()
    );
  }
};

function setbg (sel) {
  var $targ = $(sel);
  return function (e) {
    $targ.css('background', $(e.target).val() )
  }
}


$('#name').on('change', update('#result .name') );
$('#position').on('change', update('#result .position') );
$('#year').on('change', update('#result .year') );
$('#color').on('change', setbg('#result') );

This awesome code ( Viewport Units Play Excuse ) is write by Bryan Levay, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Bryan Levay