Skip to content

Instantly share code, notes, and snippets.

@hans

hans/icons.js

Created March 15, 2011 16:06
Show Gist options
  • Save hans/870942 to your computer and use it in GitHub Desktop.
Save hans/870942 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
icons.js
$(document).ready(function() {
$('ul.icons li').hover(
function() {
$('.icon-name', this)
.css({opacity: 0})
.animate({opacity: 100}, 1000)
},
function() {
$('.icon-name', this)
.animate({opacity: 0}, 500)
}
)
})
Raw
index.html
<!-- This is a multi-file Gist test. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="Content-type" content="text/html; charset=UTF-8" />
<meta name="generator" content="GitHub Pages" />
<!-- identity stuff -->
<meta http-equiv="X-XRDS-Location" content="http://hansengel.myopenid.com/xrds?username=hansengel.myopenid.com" />
<meta name="microid" content="mailto+http:sha1:2b2811bc3da814ad4210e829e422c443f4b9d1e0" />
<link rel="openid.server" href="http://www.myopenid.com/server" />
<link rel="openid.delegate" href="http://hansengel.myopenid.com" />
<link rel="openid2.provider" href="http://www.myopenid.com/server" />
<link rel="openid2.local_id" href="http://hansengel.myopenid.com" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="icons.js"></script>
<link href="http://fonts.googleapis.com/css?family=Cabin:regular,bold" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>hans engel</title>
</head>
<body>
<a href="http://github.com/hans"><img id="forkme" src="http://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png" alt="Fork me on GitHub" /></a>
<div id="container">
<h1>Hi, I'm Hans.</h1>
<section>
<h2>I'm a <strong>web developer</strong> obsessed with fun things like <strong>web standards</strong> and <strong>emerging technologies</strong>.</h2>
<!--<ul class="icons">
<li>
<img src="images/ruby.png" width="100" height="100" />
<div class="icon-name">Ruby</div>
</li>
<li>
<img src="images/rails.png" width="100" height="100" />
<div class="icon-name">Rails</div>
</li>
</ul>-->
</section>
<section>
<h2>Some <strong>other copy</strong> goes here.</h2>
</section>
<section>
<script src="https://gist.github.com/868424.js"></script>
</section>
</body>
</html>
Raw
style.css
* { margin: 0; padding: 0; }
body { font-family: 'Lucida Grande', Verdana, sans-serif; background-color: #f1f1f1; overflow: auto; color: #ccc; font-size: 16px; text-shadow: white 0px 1px 0; }
h1, h2 { font-family: Cabin, 'Myriad Pro', 'Lucida Grande', sans-serif; text-align: center; }
h1 { font-family: Cabin, 'Myriad Pro', 'Lucida Grande', sans-serif; font-weight: bold; margin-bottom: 30px; padding-bottom: 20px; color: #222; font-size: 80px; text-shadow: white 0px 1px 0, black 0 -1px 0; letter-spacing: -3px; }
h2 { font-weight: normal; color: #777; font-size: 40px; }
section { margin-bottom: 35px; padding: 30px; background-color: #fefefe; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
a { text-decoration: none; color: #777; }
a:hover { color: #444; }
ul { list-style: none; }
ul.icons { margin: 15px 0; }
ul.icons li { float: left; margin: 0px 15px; width: 100px; text-align: center; }
ul.icons li .icon-name { color: #aaa; opacity: 0; text-align: center; }
img#forkme { position: absolute; top: 0; left: 0; border: 0; }
#container { width: 800px; margin: 100px auto; }
.gist-file { border-radius: 10px; }
.gist-file .gist-data.gist-syntax { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.gist-file .gist-meta { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment