Pasted

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Simple HTML/CSS/JS Refactoring</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style type="text/css" media="all">
  .italic { font-style: italic }
  a:visited { color: blue; }
  strong { color: blue; }
  footer {color: aqua; background: blue; padding: 10px;}
  #list1 {
    position: absolute;
    display: block;
    visibility: hidden;
  }
</style>
</head>
<body>
<div class="container">
<h1>Refactor Me!</h1>
<p class="italic">
This page is full of lots of violations of the DRY principle (Don't Repeat Yourself) along with a number of other violations of HTML markup best practices.
</p>
<p class="italic">
Your goal is to refactor the HTML, CSS and JavaScript on this page so that you have:
</p>
<ol>
  <li class="italic"> a clear separation of concerns between HTML, CSS and JavaScript </li>
</ol>
</div>
<a href="#" onclick="cambiar()">Click Here to See Suggested Refactoring Path!</a>
<ol id="list1">
  <li>Refactor <strong>inline styles</strong> (into the head tag or an external stylesheet).</li>
  <li>Refactor <strong>duplication</strong> that exists in the inline style tags.</li>
  <li>Refactor <strong>markup</strong> to use appropriate html elements.</li>
  <li>Refactor <strong>styles</strong> to eliminate the property duplication.</li>
  <li>Refactor <strong>javascript</strong> to eliminate inline click handler.</li>
</ol>
<footer id="note" >
  While there a number of tools available that can assist in making this refactoring easier I want to challenge you to do this refactor with nothing but your brain and a text editor.
  </footer>
</div>
</body>
<script type="text/javascript" charset="utf-8">
  function cambiar(){
    if(document.getElementById('list1').style.visibility === 'hidden') {
      document.getElementById('list1').style.visibility = 'visible';
      // the following line will help hide the whitespace when hidden;
      document.getElementById('list1').style.position = 'relative';
    } else {
      document.getElementById('list1').style.visibility = 'hidden';
      // the following line will help move the blue box when shown
      document.getElementById('list1').style.position = 'absolute';
    }
  }
</script>
</html>