CodePen

HTML

            
              <div class="colophon">
  <span>Aa</span>
  <ul>
    <li>Typeface: <a href="#">Georgia</a></li>
    <li>Designer: <a href="#">Matthew Carter</a></li>
    <li><p>Georgia was designed specifically to address the challenges of on-screen display. Manually optimized by Tom Rickner.</p></li>
  </ul>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .colophon {
  width: 500px;
  height: 162px;
  border-top: 1px dotted rgba(0,0,0,.225);
  border-bottom: 1px dotted rgba(0,0,0,.225);
  margin: 50px auto 0 auto;
  padding: 15px 0;
}

.colophon span {
  float: left;
  width: 250px;
  font: normal 120px/145px Georgia;
  text-align: center;
}

.colophon ul {
  float: right;
  width: 234px;
  border-left: 1px dotted rgba(0,0,0,.225);
  list-style: none;
  padding-left: 15px;
}

.colophon ul li {
  font: normal 15px/22px Georgia;
}

.colophon ul li p {
  border-top: 1px dotted rgba(0,0,0,.225);
  margin-top: 15px;
  padding-top: 15px;
}
    
.colophon ul li a {
  color: #8B1F04;
  text-decoration: none;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function(){
    setTimeout(function(){
        $('.colophon span').fadeOut(300,function(){
            $(this).css('font-style','italic').fadeIn(300); 
        });
    },500);
    setInterval(function(){
        var c = $('.colophon span').text()[0] || "@";
         changeChar(c)   
    },2000);
});

function changeChar(b){
    var a = doNext(b == "Z" ? "@" : b);
    $('.colophon span').fadeOut(300,function(){
        $(this).removeAttr('style');
        $(this).text(a + a.toLowerCase()).fadeIn(300).delay(500).fadeOut(300,function(){
             $(this).css('font-style','italic').fadeIn(300);   
        });   
    })
}

function doNext(a) {
    return String.fromCharCode(a.charCodeAt(0) + 1);
}

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................