<!doctype html>
<html lang=“en”> <head>
<meta charset="utf-8"> <title>UI Index</title> <meta name="UI Static Asset Controller" content="UICON"> <meta name="Jason Cummings & Jason Kellum" content="UICON"> <link href='http://fonts.googleapis.com/css?family=Ek+Mukta' rel='stylesheet' type='text/css'> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style type="text/css"> body { background-color: #e8e8e8; } h1 { font-family: "Ek Mukta", helvetica, sans-serif; font-size: 2em; color: white; margin: 0; padding: 0; } h1#logo { width: 200px; height: 72px; background-image: url(https://s3.amazonaws.com/jasoncummings-images/uicon-logo.png); transition: background-image 0.5s ease; background-repeat: no-repeat; text-indent: -9999px; } h1#logo:hover { background-image: url(https://s3.amazonaws.com/jasoncummings-images/uicon-logo-hover.png); } h2 { font-family: "Ek Mukta", helvetica, sans-serif; font-size: 1em; color: #999999; margin: 0; } a { text-decoration: none; color: white; } section { margin: 50px auto; max-width: 600px; } ul { padding: 0; margin: 40px 0; } li { background-color: white; transition: background-color 0.5s ease; list-style-type: none; padding: 35px; margin: 0 0 2px 0; font-family: "Ek Mukta", helvetica, sans-serif; font-size: 24px; color: #999999; border-radius: 10px; } li:hover { background-color: #FF530D; color: white; cursor: pointer; } span { float: right; } </style>
</head>
<body>
<section> <a href="https://rubygems.org/gems/uicon/versions/0.0.3" target="_blank"><h1 id="logo">UICON</h1></a> <ul> <a href="#"><li>Page One<span>»</span></li></a> <a href="#"><li>Page Two<span>»</span></li></a> <a href="#"><li>Page Three<span>»</span></li></a> <a href="#"><li>Page Four<span>»</span></li></a> <a href="#"><li>Page Five<span>»</span></li></a> </ul> </section>
</body> </html>