Skip to content

Instantly share code, notes, and snippets.

@hughbris

hughbris/ul.logos.credits.html

Last active August 29, 2015 14:21
Show Gist options
  • Save hughbris/c7f4b9a2166dd8a34a0e to your computer and use it in GitHub Desktop.
Save hughbris/c7f4b9a2166dd8a34a0e to your computer and use it in GitHub Desktop.
Download ZIP
Design pattern: roll the credits, this is a list of logos
Raw
ul.logos.credits.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ" lang="en-NZ"> <!-- brah! -->
<head>
<title>Drum please</title>
<style type="text/css">
/* <![CDATA[ */
ul.logos {
float: left;
list-style: none;
padding: 0 0.5em;
list-style: none;
}
.logos.credits {
margin-top: 1em;
width: 95%;
margin-left: 5%;
}
.logos.credits li {
display: inline;
padding: 1em;
}
.logos img,
img.logo {
width: 100px; /* optional */
height: 50px; /* optional */
}
.logos.credits li img {
vertical-align: middle;
}
/* next line not needed, similar styles may be defined elsewhere in your stylesheet */
/* ***** */ img { border: 0; } /* ***** */
/* ]]> */
</style>
</head>
<body>
<p>This lovely web resource was brought to you by:</p>
<ul class="logos credits">
<li><img src="https://assets-cdn.github.com/images/modules/dashboard/bootcamp/octocat_setup.png" alt="Octocat not logo finds a diffy octopussy in a box"></li>
<li><img src="https://assets-cdn.github.com/images/modules/dashboard/bootcamp/octocat_repo.png" alt="5 octocats share a box"></li>
<li><img src="https://assets-cdn.github.com/images/modules/dashboard/bootcamp/octocat_fork.png" alt="An octocat and its spotted fork cousin"></li>
<li><img src="https://assets-cdn.github.com/images/modules/dashboard/bootcamp/octocat_collabocats.png" alt="Laptops exchanging octocat gifs"></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment