Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

First commit

  • Loading branch information...
commit 40da789dc0239c6266b83b504b0f60defc1b0827 0 parents
Harry Roberts authored
1  .htaccess
... ...
@@ -0,0 +1 @@
  1
+AddType text/cache-manifest .manifest
8  cache.manifest
... ...
@@ -0,0 +1,8 @@
  1
+CACHE MANIFEST
  2
+
  3
+#version 1.0
  4
+
  5
+icon.png
  6
+css/style.css
  7
+img/content/logo.png
  8
+img/content/projects/inuit.css.gif
465  css/style.css
... ...
@@ -0,0 +1,465 @@
  1
+@charset "UTF-8";
  2
+/*------------------------------------*\
  3
+	hry.rbrts.me
  4
+\*------------------------------------*/
  5
+/*
  6
+Author:             Harry Roberts
  7
+Twitter:            @csswizardry
  8
+Author URL:         csswizardry.com
  9
+Version:            1.0
  10
+Date:               25 July 2011
  11
+
  12
+Copyright 2011 Harry Roberts
  13
+*/
  14
+
  15
+
  16
+
  17
+
  18
+
  19
+/*------------------------------------*\
  20
+	RESET
  21
+\*------------------------------------*/
  22
+html,body,div,span,applet,object,iframe,
  23
+h1,h2,h3,h4,h5,h6,p,blockquote,pre,
  24
+a,abbr,acronym,address,big,cite,code,
  25
+del,dfn,em,img,ins,kbd,q,s,samp,
  26
+small,strike,strong,sub,sup,tt,var,
  27
+b,u,i,center,
  28
+dl,dt,dd,ol,ul,li,
  29
+fieldset,form,label,legend,
  30
+table,caption,tbody,tfoot,thead,tr,th,td,
  31
+article,aside,canvas,details,figcaption,figure,
  32
+footer,header,hgroup,menu,nav,section,summary,
  33
+time,mark,audio,video{
  34
+	margin:0;
  35
+	padding:0;
  36
+}
  37
+article,aside,details,figcaption,figure,footer,
  38
+header,hgroup,menu,nav,section{
  39
+	display: block;
  40
+}
  41
+table{
  42
+	border-collapse:collapse;
  43
+	border-spacing:0;
  44
+}
  45
+fieldset,img{
  46
+	border:0;
  47
+}
  48
+address,caption,cite,dfn,th,var{
  49
+	font-style:normal;
  50
+	font-weight:normal;
  51
+}
  52
+caption,th{
  53
+	text-align:left;
  54
+}
  55
+h1,h2,h3,h4,h5,h6{
  56
+	font-size:100%;
  57
+	font-weight:normal;
  58
+}
  59
+q:before,q:after{
  60
+	content:'';
  61
+}
  62
+abbr,acronym{
  63
+	border:0;
  64
+}
  65
+
  66
+/*--- CLEARFIX ---*/
  67
+/* http://nicolasgallagher.com/micro-clearfix-hack/ */
  68
+/* For modern browsers */
  69
+.cf:before,
  70
+.cf:after{
  71
+    content:"";
  72
+    display:table;
  73
+}
  74
+
  75
+.cf:after{
  76
+    clear:both;
  77
+}
  78
+
  79
+/* For IE 6/7 (trigger hasLayout) */
  80
+.cf{
  81
+    zoom:1;
  82
+}
  83
+
  84
+
  85
+
  86
+
  87
+
  88
+/*------------------------------------*\
  89
+	MAIN
  90
+\*------------------------------------*/
  91
+html{
  92
+	font:400 1em/1.5 skolar, Cambria, Georgia, "Times New Roman", serif; /* 16px with 24px line-height. 24px is therefore my magic number and will define paddings, margins and other spacing. Look out for it later on! */
  93
+	color:#333;
  94
+	height:100%; /* Ensure it's always full-height so as to not crop the background images. */
  95
+	overflow-y:scroll; /* Force scrollbars all the time to avoid page jumps. */
  96
+	background-color:#fff;
  97
+	background-position:left center;
  98
+	background-repeat:repeat;
  99
+	background-attachment:fixed;
  100
+	
  101
+	-moz-background-size:cover;
  102
+	-webkit-background-size:cover;
  103
+	background-size:cover;
  104
+}
  105
+
  106
+/* Grab some nice big background images from Flickr */
  107
+#bg-1	{ background-image:url(http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg); }
  108
+#bg-2	{ background-image:url(http://farm3.static.flickr.com/2741/4281699291_777192cd9f_b.jpg); }
  109
+#bg-3	{ background-image:url(http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg); }
  110
+#bg-4	{ background-image:url(http://farm5.static.flickr.com/4116/4877345244_6cf40b2d42_b.jpg); }
  111
+
  112
+body{
  113
+	padding:5%;
  114
+	background:url(../img/css/dot.gif) fixed; /* Lay a one pixel dot over every other pixel so as to lessen the visible effects of stretched and pixelated background images. */
  115
+}
  116
+
  117
+/* Fluid width, three-col wrapper. */
  118
+#page{
  119
+	max-width:1200px;
  120
+	-moz-column-count:3;
  121
+	-moz-column-gap:1.5em; /* 24px */
  122
+	-webkit-column-count:3;
  123
+	-webkit-column-gap:1.5em; /* 24px */
  124
+	column-count:3;
  125
+	column-gap:1.5em; /* 24px */
  126
+}
  127
+
  128
+
  129
+
  130
+
  131
+
  132
+/*------------------------------------*\
  133
+	ARTICLES
  134
+\*------------------------------------*/
  135
+/*
  136
+Contain each section of the page in an article.
  137
+*/
  138
+article{
  139
+	display:inline-block;
  140
+	background:#fff;
  141
+	width:87.5%;
  142
+	padding:6.25%; /* 24px (at 100%) */
  143
+	margin-bottom:1.5em; /* 24px */
  144
+	
  145
+	-moz-box-shadow:5px 5px 0 rgba(0,0,0,0.2);
  146
+	-webkit-box-shadow:5px 5px 0 rgba(0,0,0,0.2);
  147
+	box-shadow:5px 5px 0 rgba(0,0,0,0.2);
  148
+	-moz-border-radius:2px;
  149
+	-webkit-border-radius:2px;
  150
+	border-radius:2px;
  151
+}
  152
+
  153
+/* Remove the margin-bottom from the last child in an article to remove the compounding effect of child-margins plus parent-paddings. */
  154
+article > :last-child{
  155
+	margin-bottom:0;
  156
+}
  157
+
  158
+/* The intro (first) article has no background and thus requires no paddings etc. */
  159
+.intro{
  160
+	width:100%;
  161
+	background:none;
  162
+	padding:0;
  163
+	
  164
+	-moz-box-shadow:none;
  165
+	-webkit-box-shadow:none;
  166
+	box-shadow:none;
  167
+}
  168
+
  169
+
  170
+
  171
+
  172
+
  173
+/*------------------------------------*\
  174
+	LOGO
  175
+\*------------------------------------*/
  176
+#logo{
  177
+	display:block;
  178
+	width:100px;
  179
+	height:100px;
  180
+	border:none;
  181
+	float:left;
  182
+	margin-right:1.5em; /* 24px */
  183
+}
  184
+
  185
+/* If we know the background is dark let's move the background image to give us a lighter logo. */
  186
+#bg-3 #logo,
  187
+#bg-4 #logo	{ background-position:left bottom; }
  188
+
  189
+/*
  190
+Our logo should be an <img /> as per http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
  191
+However, as we're using the power of sprites we need to hide the <img /> from view. We could hide it off-screen but if we remove its opacity entirely a user can still interact with it when right-clicking.
  192
+*/
  193
+#logo img{
  194
+	display:block;
  195
+	opacity:0;
  196
+	filter:alpha(opacity = 1);
  197
+}
  198
+
  199
+
  200
+
  201
+
  202
+
  203
+/*------------------------------------*\
  204
+	TYPE
  205
+\*------------------------------------*/
  206
+/*--- HEADINGS ---*/
  207
+h2{
  208
+	font-size:1.25em; /* 20px */
  209
+	line-height:1.2; /* 24px */
  210
+	margin-bottom:1.2em; /* 24px */
  211
+}
  212
+h3{
  213
+	font-size:1.125em; /* 18px */
  214
+	line-height:1.333; /* 24px */
  215
+	margin-bottom:1.333em; /* 24px */
  216
+}
  217
+
  218
+/*--- LINKS ---*/
  219
+/*
  220
+.go is a spoofed link as per http://csswizardry.com/2011/01/maximising-hit-area-for-usability/
  221
+*/
  222
+a,
  223
+.go{
  224
+	outline:none;
  225
+	text-decoration:none;
  226
+	border-bottom:1px solid #ccc;
  227
+	
  228
+	-moz-transition:0.2s all linear;
  229
+	-webkit-transition:0.2s all linear;
  230
+	transition:0.2s all linear;
  231
+}
  232
+a:visited,
  233
+a:visited .go{
  234
+	color:#999;
  235
+	border-color:#eee;
  236
+}
  237
+a:hover,
  238
+a:active,
  239
+a:focus,
  240
+a:hover .go,
  241
+a:active .go,
  242
+a:focus .go{
  243
+	border-color:#597a8f;
  244
+}
  245
+a:active,
  246
+a:focus{
  247
+	position:relative;
  248
+	top:1px;
  249
+}
  250
+.go{
  251
+	font-weight:normal;
  252
+}
  253
+.go:after{
  254
+	content:"\00A0»";
  255
+	border-bottom:1px solid #fff;
  256
+}
  257
+
  258
+/*--- PARAGRAPHS ---*/
  259
+.tagline{
  260
+	font:0.625em/2.4 "Helvetica Neue", Arial, sans-serif; /* 10px with a 24px line-height. */
  261
+	text-transform:uppercase;
  262
+	color:#fff;
  263
+	line-height:100px;
  264
+	white-space:nowrap;
  265
+}
  266
+
  267
+/*--- LISTS ---*/
  268
+ul,
  269
+ol{
  270
+	margin-left:3em; /* 48px (24px x 2) */
  271
+}
  272
+ul ul,
  273
+ul ol,
  274
+ol ol,
  275
+ol ul{
  276
+	margin-bottom:0;
  277
+}
  278
+dd{
  279
+	margin-left:1.5em; /* 24px */
  280
+}
  281
+
  282
+/* Tags */
  283
+.tag-list li{
  284
+	display:inline;
  285
+}
  286
+.tag-list li:after{
  287
+	content:",";
  288
+}
  289
+.tag-list li:last-child:after{
  290
+	content:".";
  291
+}
  292
+
  293
+/* Social links */
  294
+#social{
  295
+	margin:0 0 0 -0.75em; /* 12px (24px / 2) */
  296
+}
  297
+#social li{
  298
+	float:left;
  299
+}
  300
+#social a{
  301
+	display:block;
  302
+	width:48px; /* 48px (24px x 2) */
  303
+	height:48px; /* 48px (24px x 2) */
  304
+	text-indent:-9999px;
  305
+	border:none;
  306
+	margin:0 0 0.75em 0.75em; /* 12px (24px / 2) */
  307
+	opacity:0.5;
  308
+	filter:alpha(opacity = 0.5);
  309
+}
  310
+#social a:hover{
  311
+	opacity:1;
  312
+	filter:alpha(opacity = 1);
  313
+}
  314
+.twitter a		{ background-position:-100px 0; }
  315
+.github a		{ background-position:-148px 0; }
  316
+.dribbble a		{ background-position:-196px 0; }
  317
+.forrst a		{ background-position:-244px 0; }
  318
+.google-plus a	{ background-position:-100px -96px; }
  319
+.instagram a		{ background-position:-244px -48px; }
  320
+.zootool a		{ background-position:-148px -48px; }
  321
+.vimeo a			{ background-position:-196px -48px; }
  322
+.youtube a		{ background-position:-100px -48px; }
  323
+.rss a			{ background-position:-148px -96px; }
  324
+
  325
+/* Projects */
  326
+#projects h3{
  327
+	margin:0;
  328
+}
  329
+#projects a{
  330
+	display:block;
  331
+	border:none;
  332
+	color:#333;
  333
+}
  334
+
  335
+/* Background image links */
  336
+#images li{
  337
+	display:none;
  338
+}
  339
+#bg-1 #bg-link-1,
  340
+#bg-2 #bg-link-2,
  341
+#bg-3 #bg-link-3,
  342
+#bg-4 #bg-link-4{
  343
+	display:list-item;
  344
+}
  345
+
  346
+/*--- OTHER ---*/
  347
+abbr{
  348
+	cursor:help;
  349
+	border-bottom:1px dotted #333;
  350
+	border-color:inherit;
  351
+}
  352
+
  353
+
  354
+
  355
+
  356
+
  357
+/*------------------------------------*\
  358
+	IMAGES
  359
+\*------------------------------------*/
  360
+img{
  361
+	max-width:100%;
  362
+	height:auto;
  363
+}
  364
+
  365
+
  366
+
  367
+
  368
+
  369
+/*------------------------------------*\
  370
+	SHARED
  371
+\*------------------------------------*/
  372
+/*
  373
+Rather than writing properties over and over and repeating code we can simply tether selectors to one rule. This is pretty much having variables in CSS (update the colour once and everything gets the changes).
  374
+*/
  375
+h1,h2,h3,h4,h5,h6,a,a:hover{
  376
+	color:#597a8f;
  377
+}
  378
+p,
  379
+ul,
  380
+ol,
  381
+dl{
  382
+	margin-bottom:1.5em; /* 24px */
  383
+}
  384
+b,
  385
+strong,
  386
+dt{
  387
+	font-weight:700;
  388
+}
  389
+#logo,
  390
+#social a{
  391
+	background-image:url(../img/css/sprite.png);
  392
+}
  393
+.tag-list,
  394
+#images,
  395
+#social,
  396
+#projects{
  397
+	list-style:none;
  398
+}
  399
+.tag-list,
  400
+#images,
  401
+#projects{
  402
+	margin-left:0;
  403
+}
  404
+
  405
+
  406
+
  407
+
  408
+
  409
+/*------------------------------------*\
  410
+	MISC
  411
+\*------------------------------------*/
  412
+/* Hide things off-screen moce accessibly than display:none; etc. */
  413
+.accessibility{
  414
+	position:absolute;
  415
+	left:-9999px;
  416
+}
  417
+::selection			{ color:#fff; background:#597a8f; }
  418
+::-moz-selection	{ color:#fff; background:#597a8f; }
  419
+
  420
+
  421
+
  422
+
  423
+
  424
+/*------------------------------------*\
  425
+	RESPONSIVE
  426
+\*------------------------------------*/
  427
+/*--- NARROW ---*/
  428
+@media(max-width: 960px){
  429
+#page{
  430
+	-moz-column-count:2;
  431
+	-webkit-column-count:2;
  432
+	column-count:2;
  433
+}
  434
+}
  435
+
  436
+/*--- THIN ---*/
  437
+@media(max-width: 640px){
  438
+
  439
+/* Download a smaller background image when viewing on a smaller screen. */
  440
+#bg-1	{ background-image:url(http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_z.jpg); }
  441
+#bg-2	{ background-image:url(http://farm3.static.flickr.com/2741/4281699291_777192cd9f_z.jpg); }
  442
+#bg-3	{ background-image:url(http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_z.jpg); }
  443
+#bg-4	{ background-image:url(http://farm5.static.flickr.com/4116/4877345244_6cf40b2d42_z.jpg); }
  444
+
  445
+/* Rework the intro and the logo & tagline to be stacked, not side-by-side. */
  446
+.intro{
  447
+	text-align:center;
  448
+}
  449
+#logo{
  450
+	margin:0 auto 1.5em;
  451
+	background-position:left bottom;
  452
+	float:none;
  453
+}
  454
+.tagline{
  455
+	margin:0;
  456
+	line-height:2.4;
  457
+}
  458
+
  459
+/* Remove page columns. */
  460
+#page{
  461
+	-moz-column-count:auto;
  462
+	-webkit-column-count:auto;
  463
+	column-count:auto;
  464
+}
  465
+}
BIN  icon.png
BIN  img/content/logo.png
BIN  img/content/projects/fluid-grids.gif
BIN  img/content/projects/inuit.css.gif
BIN  img/css/dot.gif
BIN  img/css/logo.png
BIN  img/css/sprite.png
182  index.php
... ...
@@ -0,0 +1,182 @@
  1
+<!DOCTYPE html>
  2
+<html lang="en" id="bg-<?= rand(1,4); ?>" manifest="cache.manifest">
  3
+<head>
  4
+	<meta charset="UTF-8" />
  5
+	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
  6
+	<meta name="apple-mobile-web-app-capable" content="yes" />
  7
+
  8
+	<title>Harry Roberts</title>
  9
+
  10
+	<link rel="stylesheet" href="css/style.css" />
  11
+
  12
+	<link rel="shortcut icon" href="icon.png" />
  13
+	<link rel="apple-touch-icon-precomposed" href="icon.png" />
  14
+	
  15
+	<script type="text/javascript" src="http://use.typekit.com/ibv5xmv.js"></script>
  16
+	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  17
+	
  18
+	<!--[if lt IE 9]>
  19
+		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  20
+	<![endif]-->
  21
+	
  22
+	<script type="text/javascript">
  23
+
  24
+		var _gaq = _gaq || [];
  25
+		_gaq.push(['_setAccount', 'UA-1856861-10']);
  26
+		_gaq.push(['_trackPageview']);
  27
+
  28
+		(function() {
  29
+			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  30
+			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  31
+			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  32
+		})();
  33
+
  34
+	</script>
  35
+	
  36
+</head>
  37
+<body>
  38
+
  39
+	<div id="page">
  40
+
  41
+		<h1 class="accessibility">Harry Roberts, web designer and developer</h1>
  42
+
  43
+		<article class="intro">
  44
+			<a href="#" id="logo"><img src="img/content/logo.png" alt="Harry Roberts logo" /></a>
  45
+			<p class="tagline">Web developer and type nerd<span class="accessibility"> from Leeds, UK</span></p>
  46
+		</article>
  47
+
  48
+		<article>
  49
+			<p>Hi, I&rsquo;m <b>Harry Roberts</b>. I am a 21 year old web designer, developer, type nerd and trials rider from Leeds, UK. I am currently <b>Senior <abbr title="User Interface">UI</abbr> Developer</b> at BSkyB.</p>
  50
+			<p>I share, write and tweet about web development, I am passionate about best practices, ethics and building websites properly, I am on <a href="http://smashingmagazine.com/">Smashing Magazine</a>&rsquo;s Experts Panel and I am a <a href="http://www.thenetawards.com/">.net magazine awards nominee</a>.</p>
  51
+		</article>
  52
+
  53
+		<article>
  54
+			<h2>Skills and competencies</h2>
  55
+			<ul class="tag-list">
  56
+				<li>HTML</li>
  57
+				<li>CSS</li>
  58
+				<li>Performance</li>
  59
+				<li>Accessibility</li>
  60
+				<li>Usability</li>
  61
+				<li><abbr title="User eXperience">UX</abbr></li>
  62
+				<li><abbr title="User Interface">UI</abbr></li>
  63
+				<li>Typography</li>
  64
+				<li>Design</li>
  65
+				<li>Development</li>
  66
+			</ul>
  67
+		</article>
  68
+
  69
+		<article>
  70
+			<h2>Sites</h2>
  71
+			<dl>
  72
+				<dt><a href="http://csswizardry.com/">CSS Wizardry</a></dt>
  73
+				<dd>My blog and portfolio, CSS Wizardry is an Alexa top 100,000 ranked website with a host of articles and resources for web designers and developers&hellip;</dd>
  74
+				
  75
+				<dt><a href="http://harryroberts.co.uk/">harryroberts.co.uk</a></dt>
  76
+				<dd>My (much neglected) personal website for hosting my trials videos and the like&hellip;</dd>
  77
+			</dl>
  78
+		</article>
  79
+
  80
+		<article>
  81
+			<h2>Out and about</h2>
  82
+			<p>Follow/stalk me on the following:</p>
  83
+			
  84
+			<ul id="social" class="cf">
  85
+				<li class="twitter"><a href="http://twitter.com/csswizardry" title="My CSS Wizardry Twitter account">Twitter</a></li>
  86
+				<li class="github"><a href="http://github.com/csswizardry" title="My code on GitHub">GitHub</a></li>
  87
+				<li class="dribbble"><a href="http://dribbble.com/csswizardry" title="Works-in-progress on Dribbble">Dribbble</a></li>
  88
+				<li class="forrst"><a href="http://forrst.com/csswizardry" title="Odd bits and pieces on Forrst">Forrst</a></li>
  89
+				<li class="google-plus"><a href="http://gplus.to/csswizardry" title="Add me on Google+">Google+</a></li>
  90
+				<li class="instagram"><a href="http://instagrid.me/csswizardry/" title="My photos on Instagram">Instagram</a></li>
  91
+				<li class="zootool"><a href="http://zootool.com/user/csswizardry/" title="Things I bookmark on ZooTool">ZooTool</a></li>
  92
+				<li class="vimeo"><a href="http://www.vimeo.com/csswizardry" title="My videos on Vimeo">Vimeo</a></li>
  93
+				<li class="youtube"><a href="http://www.youtube.com/csswizardry" title="My videos on YouTube">YouTube</a></li>
  94
+				<li class="rss"><a href="http://feeds.feedburner.com/csswizardry" title="Subscribe to CSS Wizardry&rsquo;s RSS Feed">CSS Wizardry RSS</a></li>
  95
+			</ul>
  96
+			
  97
+		</article>
  98
+
  99
+		<article>
  100
+			<h2>Projects</h2>
  101
+			<ul id="projects">
  102
+				<li>
  103
+					<a href="http://inuitcss.com/">
  104
+						<img src="img/content/projects/inuit.css.gif" alt="inuit.css logo" />
  105
+						<h3>inuit.css</h3>
  106
+						<p>inuit.css is a pragmatic, production ready CSS framework which provides developers with a solid baseline for responsive and extensible web projects. <b class="go">Check it out</b></p>
  107
+					</a>
  108
+				</li>
  109
+				<li>
  110
+					<a href="http://csswizardry.com/fluid-grids/">
  111
+						<h3>Fluid Grids</h3>
  112
+						<p><cite>Fluid Grids</cite> is a tiny app that proved a big hit. I created a PHP script that would give me a fluid grid system if I gave it some fixed values. It proved pretty useful so I skinned it up and gave it away. <b class="go">Give it a go</b></p>
  113
+					</a>
  114
+				</li>
  115
+				<li>
  116
+					<a href="http://csswizardry.com/in-focus/">
  117
+						<h3>in:focus</h3>
  118
+						<p><cite>in:focus</cite> is a small Q&amp;A site on which I interview the web&rsquo;s best. <b class="go">Read the interviews</b></p>
  119
+					</a>
  120
+				</li>
  121
+				<li>
  122
+					<a href="http://csswizardry.com/resources/">
  123
+						<h3>More&hellip;</h3>
  124
+						<p>Find even more projects on <b class="go">my resources page</b></p>
  125
+					</a>
  126
+				</li>
  127
+			</ul>
  128
+		</article>
  129
+
  130
+		<article>
  131
+			
  132
+			<h2>Eardrums</h2>
  133
+			
  134
+			<p>Some of the albums I&rsquo;ve been listening to on Spotify lately.</p>
  135
+			
  136
+			<ol>
  137
+				<li><a href="http://open.spotify.com/album/6Nsc0OBWX2M8ldRIV37P0m" title="Open with Spotify"><b>Bachelors of Science</b>&mdash;Warehouse Days</a></li>
  138
+				<li><a href="http://open.spotify.com/album/7DmNwRBDJRUEFUlk3oa2Aj" title="Open with Spotify"><b>RJD2</b>&mdash;Deadringer: Deluxe</a></li>
  139
+				<li><a href="http://open.spotify.com/album/5F34PzZIEUswKwGQuT7oBL" title="Open with Spotify"><b>Wax Tailor</b>&mdash;Tales of the Forgotten Melodies</a></li>
  140
+				<li><a href="http://open.spotify.com/album/5q4bpOVYtyU7Iwlo7r9G4D" title="Open with Spotify"><b>Steely Dan</b>&mdash;Showbiz Kids</a></li>
  141
+				<li><a href="http://open.spotify.com/album/2bvcW5af25rV2pL9HBujQO" title="Open with Spotify"><b>Nu:Tone</b>&mdash;Brave Nu World</a></li>
  142
+			</ol>
  143
+			
  144
+			<h2>Eyeballs</h2>
  145
+			
  146
+			<p>A (loose) top five favourite films&hellip; kinda.</p>
  147
+			
  148
+			<ol>
  149
+				<li><a href="http://www.imdb.com/title/tt0398883/" title="View on IMDb">The Consequences of Love</a></li>
  150
+				<li><a href="http://www.imdb.com/title/tt0110413/" title="View on IMDb">Leon: The Professional</a></li>
  151
+				<li><a href="http://www.imdb.com/title/tt0407887/" title="View on IMDb">The Departed</a></li>
  152
+				<li><a href="http://www.imdb.com/title/tt0137523/" title="View on IMDb">Fight Club</a></li>
  153
+				<li><a href="http://www.imdb.com/title/tt0093058/" title="View on IMDb">Full Metal Jacket</a></li>
  154
+			</ol>
  155
+			
  156
+			<p><a href="http://twitter.com/intent/tweet?text=Hey%20@csswizardry,%20check%20out%20">Recommend me some more&hellip;</a></p>
  157
+			
  158
+		</article>
  159
+
  160
+		<article>
  161
+			<h2>Hit me up&hellip;</h2>
  162
+			<p>Feel free to get in touch by either <a href="http://twitter.com/intent/tweet?text=Hey%20@csswizardry,%20">Tweeting at me</a> or sending an email to <a href="mailto:hry [at] rbrts [dot] me?subject=Check the email address up there">hry [at] rbrts [dot] me</a>.</p>
  163
+		</article>
  164
+
  165
+		<article class="colophon">
  166
+			<h2>Colophon</h2>
  167
+			<p>This hub-site is built with HTML(5) and CSS(3); the source is available on <a href="https://github.com/csswizardry/hry.rbrts.me">GitHub</a> and the idea for it was born from seeing <a href="http://www.antoniocarusone.com/">Antonio Carusone&rsquo;s beautiful personal page</a>. The logo was designed by <a href="http://twitter.com/WengersToyBus">Bryan James</a> and all photography is by <a href="http://twitter.com/suzehaworth">Suzanna Haworth</a>. Hosting is provided by <a href="http://twitter.com/dan_bentley">Dan Bentley</a>.</p>
  168
+			
  169
+			<h3>Background images</h3>
  170
+			<p>All background images are of me and taken by Suzanna Haworth.</p>
  171
+			<ul id="images">
  172
+				<li id="bg-link-1"><a href="http://www.flickr.com/photos/suzannahaworth/4706825697/in/set-72157624290542632" title="Me at Tarty Days trials festival">View background image<span class="accessibility"> one</span></a></li>
  173
+				<li id="bg-link-2"><a href="http://www.flickr.com/photos/suzannahaworth/4281699291/in/set-72157623228828288" title="Me in Leeds">View background image<span class="accessibility"> two</span></a></li>
  174
+				<li id="bg-link-3"><a href="http://www.flickr.com/photos/suzannahaworth/4717107886/in/set-72157624315456482" title="Me riding trials in Leeds">View background image<span class="accessibility"> three</span></a></li>
  175
+				<li id="bg-link-4"><a href="http://www.flickr.com/photos/suzannahaworth/4877345244/in/set-72157624690791690" title="Me climbing Snowdon">View background image<span class="accessibility"> four</span></a></li>
  176
+			</ul>
  177
+		</article>
  178
+	
  179
+	</div>
  180
+	
  181
+</body>
  182
+</html>

0 notes on commit 40da789

Please sign in to comment.
Something went wrong with that request. Please try again.