<!doctype html>
<html lang="en">
<head>
<title>printed media paged media</title>
<meta charset="utf-8">
<style>
@media print{
@page{
margin:14cm landscape;
size:cover;
*{page-break-inside:avoid;}
}
/*header*/
.header{
position:relative;
padding:1px;margin:0;width:100%;
border-bottom:0.1cm solid black;
}
/*header date and time*/
.header .datetime{
position:absolute;
margin:0 0 0 0.5cm;
}
/*header date/time specific*/
.header .datetime #date,.header .datetime #time{
text-decoration:none;
font-weight:bold;
display:block;
}
/*header logo*/
.header .logo{
width:3cm;
height:3cm;
margin:1.5cm auto 0.5cm auto;
border-radius:1cm;
background-image:url('../fish.png');
background-color:black;
}
/*main styling*/
a{
text-decoration:none;
color:black;
}
a:hover,a:visited,a:link,a:active{text-decoration:none;color:black;}
a:after{
content:"see" " " attr(href)".";
}
table.log{
width:100%;
border-collapse:collapse;
empty-cell:span;
border:1px solid;
table-layout:fixed;
}
table.log td{
overflow-wrap:word-break;
}
td,th,tr{
border:1px solid;
}
}
.footer{
position:absolute;
bottom:0;
right:0;
left:0;
border-bottom:0.1cm solid black;
}
.footer .techservice{
width:1cm;
float:left;
}
.footer .signature{
float:right;
}
.signature:after{
content:" ";
width:3cm;
display:inline-block;
border-bottom:0.1cm solid black;}
.footer .goodbeyy{
display:table;
margin:auto;
margin-bottom:3cm;
}
</style>
</head>
<body>
<div>
</div>
<div class="header">
<div class="datetime">
<span id="time">20:10:10</span>
<span id="date">16-10-2107</span>
</div>
<div class="logo"></div>
</div>
<div class="main">
<div class="user-warning"><sup>##</sup> <a href="www.github.com">privacy and policy </a></div>
<table class="log">
<thead><tr>
<th>Pack Name</th><th>Price</th>
</tr></thead>
<tfoot><tr>
<th>total amount:</th>
</tr></tfoot>
<tbody><tr><td>in the naame of tsar</td><td>$16.7</td></tr></tbody>
</table>
</div>
<div class="footer">
<div class="signature">signature:</div>
<div class="techservice"><i>contact us at 00022-33-1123 for technical support</i></div>
<div class="goodbeyy">it is in the game</div>
</div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.