op1ekun/README.md

## README.md

      
    Raw
  

              README.md
            
          
Clone this Gist.
For card sizes other than A5, edit the size value in @page, and the height and width properties of body.
Add contents to each face. The simplest approach is to add an image called front.png of the same dimensions as the card.
Generate a PDF from the HTML + CSS. If using Prince, it's as simple as prince index.html card.pdf.
Take the PDF to a printer, and ask them to print as many copies as you need.


## card.css
@page {
    /* dimensions for the whole page */
    size: A5;

    margin: 0;
}

html {
    /* off-white, so body edge is visible in browser */
    background: #eee;
}

body {
    /* A5 dimensions */
    height: 210mm;
    width: 148.5mm;

    margin: 0;
}

/* fill half the height with each face */
.face {
    height: 50%;
    width: 100%;
    position: relative;
}

/* the back face */
.face-back {
    background: #f6f6f6;
}

/* the front face */
.face-front {
    background: #fff;
}

/* an image that fills the whole of the front face */
.face-front img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

## index.html
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="card.css">

<body>
    <div class="face face-back"></div>
    <div class="face face-front"><img src="front.png"></div>
</body>
	@page {
	/* dimensions for the whole page */
	size: A5;

	margin: 0;
	}

	html {
	/* off-white, so body edge is visible in browser */
	background: #eee;
	}

	body {
	/* A5 dimensions */
	height: 210mm;
	width: 148.5mm;

	margin: 0;
	}

	/* fill half the height with each face */
	.face {
	height: 50%;
	width: 100%;
	position: relative;
	}

	/* the back face */
	.face-back {
	background: #f6f6f6;
	}

	/* the front face */
	.face-front {
	background: #fff;
	}

	/* an image that fills the whole of the front face */
	.face-front img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	}
	<!doctype html>
	<meta charset="utf-8">
	<link rel="stylesheet" href="card.css">

	<body>
	<div class="face face-back"></div>
	<div class="face face-front"><img src="front.png"></div>
	</body>