Skip to content

Instantly share code, notes, and snippets.

@tonY1883

tonY1883/a4.html

Created November 12, 2023 10:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tonY1883/8c63de2b0516f4a4a980a1c51d3d0a7e to your computer and use it in GitHub Desktop.
Save tonY1883/8c63de2b0516f4a4a980a1c51d3d0a7e to your computer and use it in GitHub Desktop.
Download ZIP
A4 HTML
Raw
a4.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
/* A4 document generic template, do not modify */
html {
height: 100%;
width: 100%;
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #F5F5F6;
}
body {
position: relative;
box-sizing: border-box;
width: 21cm;
height: 29.7cm;
margin: auto;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
background-color: white;
}
@media print {
html {
padding: 0;
}
body {
box-shadow: none;
}
}
/* Add document specific CSS below*/
body {
padding: 15mm;
/* padding of body means margin of content*/
}
header {
position: absolute;
top: 0;
left: 0;
padding-left: 15mm;
padding-top: 5mm;
}
footer {
position: absolute;
left: 0;
bottom: 0;
padding-left: 15mm;
padding-bottom: 5mm;
}
</style>
<title>
Lorem Ipsum
</title>
</head>
<body>
<header>
I am a header
</header>
<main>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris est odio, aliquam id imperdiet vitae,
pretium quis est. In fermentum, nisi quis hendrerit semper, nulla ligula malesuada tellus, vel pretium dolor
ex vel mi. Vestibulum magna augue, vehicula vel aliquam tempus, hendrerit non ipsum. Sed sollicitudin dictum
dictum. Aenean auctor sit amet tellus vitae vestibulum. Ut consectetur ornare pulvinar. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent tristique
tristique libero vel pharetra. Nam ut ex tincidunt, iaculis velit sed, lobortis erat. Donec in gravida
velit.
</p>
<p>
Maecenas tempus leo turpis, eget ultricies orci molestie eu. Nunc magna nisl, tincidunt ut nibh at, vehicula
cursus nibh. Donec vitae mauris felis. In rhoncus mi suscipit nunc tristique consequat. Donec venenatis
pharetra tortor vel convallis. Praesent sagittis risus velit, et dictum velit eleifend nec. Donec
consectetur consequat pellentesque. Quisque euismod nibh nec felis ultrices mollis. Mauris auctor, libero
non euismod vestibulum, est urna placerat nibh, id gravida dolor sapien ac est.
</p>
<h2>Nullam nunc augue</h2>
<p>
Nullam nunc augue, iaculis vel nunc vel, lacinia porta magna. Vivamus nisl tellus, ultrices ac posuere nec,
mattis a nisi. Vestibulum in enim pulvinar, rutrum sapien non, faucibus risus. Proin in massa sed mauris
lacinia aliquet ornare sit amet urna. Morbi vulputate neque dui, ut ultrices sapien varius et. Maecenas
facilisis nulla mi, id convallis nisl posuere tempor. Nulla eget quam molestie, feugiat lectus a, pulvinar
purus. Praesent enim mi, commodo sed purus interdum, placerat bibendum orci. Ut eu volutpat leo. Fusce
sodales mauris sed est malesuada fringilla. Donec eros quam, aliquet nec metus non, venenatis malesuada
justo. Fusce sed augue malesuada arcu mattis laoreet. Aliquam molestie, elit sit amet tristique tristique,
nisi mi tincidunt augue, vel eleifend nulla arcu vel nisl. Proin ullamcorper neque scelerisque, dignissim
nunc quis, vestibulum turpis.
</p>
</main>
<footer>
I am a footer
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment