Skip to content

Instantly share code, notes, and snippets.

@stevenroh

stevenroh/printAtoZ.html

Last active November 17, 2021 14:24
Show Gist options
  • Save stevenroh/a8b14c574acee84be3bb00482b75190e to your computer and use it in GitHub Desktop.
Save stevenroh/a8b14c574acee84be3bb00482b75190e to your computer and use it in GitHub Desktop.
Download ZIP
A to Z sheets
Raw
printAtoZ.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Letter print sheet</title>
<style>
* {
padding: 0;
margin: 0;
}
html {
/* A3 page size */
height: 29.7cm;
width: 42cm;
}
.letter {
height: 100vh;
/* Top distance */
margin-top: 1cm;
/* Left distance */
margin-left: 2cm;
/* background-color: rgba(0,0,0,0.1); */
/* Letter size */
font-size: 20cm;
font-family: sans-serif;
}
/* For each letter we specify the color */
.a { color: red; }
.b { color: blue; }
.c { color: blueviolet; }
.d { color: brown; }
.e { color: chartreuse; }
.f { color: darkmagenta; }
.g { color: cyan; }
.h { color: dodgerblue; }
.i { color: mediumvioletred; }
.j { color: turquoise; }
.k { color: teal; }
.l { color: rgb(0, 101, 189); }
.m { color: white; }
.n { color: white; }
.o { color: white; }
.p { color: white; }
.q { color: white; }
.r { color: white; }
.s { color: white; }
.t { color: white; }
.u { color: white; }
.v { color: white; }
.w { color: white; }
.x { color: white; }
.y { color: white; }
.z { color: white; }
</style>
</head>
<body>
<div class="letter a">A</div>
<div class="letter b">B</div>
<div class="letter c">C</div>
<div class="letter d">D</div>
<div class="letter e">E</div>
<div class="letter f">F</div>
<div class="letter g">G</div>
<div class="letter h">H</div>
<div class="letter i">I</div>
<div class="letter j">J</div>
<div class="letter k">K</div>
<div class="letter l">L</div>
<div class="letter m">M</div>
<div class="letter n">N</div>
<div class="letter o">O</div>
<div class="letter o">P</div>
<div class="letter q">Q</div>
<div class="letter r">R</div>
<div class="letter s">S</div>
<div class="letter t">T</div>
<div class="letter u">U</div>
<div class="letter v">V</div>
<div class="letter w">W</div>
<div class="letter x">X</div>
<div class="letter y">Y</div>
<div class="letter z">Z</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment