Viewport Units Play Excuse

In this example below you will see how to do a Viewport Units Play Excuse with some HTML / CSS and Javascript

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.

Thumbnail
This awesome code was written by thousand, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright thousand ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/thousand/viewport-units-play-excuse-Aavfw */
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/thousand/viewport-units-play-excuse-Aavfw */
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') );

Comments