Skip to content

Instantly share code, notes, and snippets.

@georgestephanis

georgestephanis/WordCamp-Lancaster-Badges.html

Last active February 14, 2016 18:45
Show Gist options
  • Save georgestephanis/1057841cff4ebdc0eba5 to your computer and use it in GitHub Desktop.
Save georgestephanis/1057841cff4ebdc0eba5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
WordCamp-Lancaster-Badges.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>WordCamp Lancaster Badge Demo</title>
<style>
html,
body {
float: none;
}
.attendee {
font-family: sans-serif;
width: 50%;
height: 100%;
float: left;
text-align: center;
page-break-before: avoid;
box-sizing: border-box;
border: 1px solid #f00;
}
.attendee:nth-child(odd) {
page-break-before: always;
clear: left;
}
.attendee:nth-child(even) {
}
.attendee section {
padding: 5em 1em 1em;
box-sizing: border-box;
height: 50%;
}
.attendee section.back {
transform: rotate(180deg);
border-top: 1px dashed #000;
}
.attendee section header {
}
.attendee section header img {
max-width: 50%;
}
.attendee section header h1 {
display: none;
}
.attendee section figure {
}
.attendee section figure img {
max-width: 25%;
border-radius: 50%;
}
.attendee section figure figcaption {
}
.attendee section figure figcaption h3.name {
margin: 0;
}
.attendee section figure figcaption h4.twitter {
margin: 0;
}
.attendee section footer {
}
.attendee section footer small {
}
</style>
</head>
<body>
Make sure to use Firefox to print these badges. Some other browsers (like
Chrome) don't respect some CSS properties that we use to specify where page
breaks should be.
<article class="attendee">
<section class="back">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=1000" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
<section class="front">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=500" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
</article>
<article class="attendee">
<section class="back">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=1000" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
<section class="front">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=500" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
</article>
<article class="attendee">
<section class="back">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=1000" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
<section class="front">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=500" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
</article>
<article class="attendee">
<section class="back">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=1000" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
<section class="front">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=500" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
</article>
<article class="attendee">
<section class="back">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=1000" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
<section class="front">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=500" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
</article>
<article class="attendee">
<section class="back">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=1000" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
<section class="front">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=500" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
</article>
<article class="attendee">
<section class="back">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=1000" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
<section class="front">
<header>
<img src="https://lancasterpa.wordcamp.org/2016/files/2016/02/back-WordCamp-Lancaster-Logo-2016-with-text.png" />
<h1>WordCamp Lancaster</h1>
</header>
<figure>
<img src="http://2.gravatar.com/avatar/67789ca3d8466c323f9af571b4d69b87?s=500" />
<figcaption>
<h3 class="name">George Stephanis</h3>
<h4 class="twitter">@daljo628</h4>
</figcaption>
</figure>
<footer>
<small>Attendee</small>
</footer>
</section>
</article>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment