<!doctype html>
<html lang="en">
<head>
<title>book</title>
<style>
@font-face{
font-family:'dancing script';
src:url('DancingScript-Regular.ttf') format(ttf);
}
/*printed style*/
@media print{
body{
counter-reset:pages;
}
/*basic styles for each page*/
@page{
counter-increment:pages;
orphans:0;
widows:0;
size:cover portrait;
margin:3cm 4cm;
position:relative;
}
/*basic styles for body,h2,h3,article,aside,p*/
body{
font-size:16px;
counter-reset:one;
}
h2{
text-transform:uppercase;
font-size:30px;
}
h3{
text-transform:capitalize;
}
article,aside,p{
page-break-inside:avoid;
hyphens:auto;
}
aside{
margin-left:1em;
}
/*counters for main title headings h2,sub-headings h3*/
article h2:before{
counter-reset:two;
counter-increment:one;
content:counter(one) ".";
}
aside h3:before{
counter-increment:two;
content:counter(one)"." counters(two,".")".";
}
/*styles for basic 2d plane pictures figure,3D transformed pictures with class="threed"*/
figure{
page-break-inside:avoid;
width:100%;
}
figure.threed{
height:10cm;
page-break-inside:avoid;
position:relative;
perspective:200px;
}
.tunnel{
position:absolute;
transform-origin:center center;
transform:translate(2cm,3cm) rotatey(20deg);
}
.foot-note{/*.to have things appear at each page.@page rule should be used.however this is no supported yet*/
position:absolute;
bottom:0;
width:100%;
padding:0.5cm;
border-top:0.2cm solid blue;
text-align:center;
}
/*styling table*/
th,td,tr{
border:1px solid;
}
td{
padding: .125em;
margin: 0;
}
table{
page-break-before:always;
page-break-after:always;
width:100%;
border:1px solid;
border-collapse:collapse;
}
th{
padding:0.125em;
margin: 0;
text-transform:capitalize;
}
th.head{
background:gray;
font-weight:bold;
text-align:center;
}
th.sub-h{
width:10%;
text-align:right;
background:initial;
}
th.mod{
background:initial;
text-align:center;
}
/*styling background*/
.background-rpt{
height:15cm;
background-image:url('o1920.jpg');
background-color:red;
background-origin:border-box;
background-repeat:no-repeat;
background-size:cover;
}
}
/*styling print ends here*/
</style>
</head>
<body>
<div class="foot-note"></div>
<div class="book">
<article><h2>In the name of the tsar</h2>
<figure>
<img src="int.jpg">
<figcaption>communist force at the volga river..Russia 1918</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique, nulla et dictum elementum, dolor leo consectetur turpis, eu semper nibh massa in tellus. Sed sit amet erat sit amet eros varius venenatis a sed velit. In est neque, ullamcorper vel pellentesque eu, condimentum ac erat. Pellentesque pellentesque, tellus vel aliquet scelerisque, urna dui pellentesque lorem, et ultrices sapien lacus sit amet massa. Quisque purus purus, feugiat et ornare eu, sagittis quis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin gravida sapien et est hendrerit, eget mattis augue sodales. Nullam maximus accumsan feugiat. Fusce posuere est non bibendum finibus. Vestibulum imperdiet faucibus purus, quis malesuada neque mattis at. </p>
</article>
<article>
<h2>the base</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique, nulla et dictum elementum, dolor leo consectetur turpis, eu semper nibh massa in tellus. Sed sit amet erat sit amet eros varius venenatis a sed velit. In est neque, ullamcorper vel pellentesque eu, condimentum ac erat. Pellentesque pellentesque, tellus vel aliquet scelerisque, urna dui pellentesque lorem, et ultrices sapien lacus sit amet massa. Quisque purus purus, feugiat et ornare eu, sagittis quis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin gravida sapien et est hendrerit, eget mattis augue sodales. Nullam maximus accumsan feugiat. Fusce posuere est non bibendum finibus. Vestibulum imperdiet faucibus purus, quis malesuada neque mattis at. </p>
</article>
<article>
<h2>They shall not pass</h2>
<aside>
<h3>War grounds</h3>
<ol>
<li>map_1:The tunnels
<p>description hereerisque, urna dui pellentesque lorem, et ultrices sapien lacus sit amet massa. Quisque purus purus, feugiat et ornare eu, sagittis quis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin gravida sapien et est hendrerit, eget mattis augue sodales. Nullam maximus accumsan feugiat. Fusce posuere est non bibendum fin</p>
<figure class="threed"><img alt="tunnel" src="tunnels.jpg" class="tunnel"></figure>
<p>desciption here esque lorem, et ultrices sapien lacus sit amet massa. Quisque purus purus, feugiat et ornare eu, sagittis quis justo. Pellentesque habitant morbi tristique senectus et netus et ma</p>
</li>
<li>map_2</li>
</ol>
</aside>
</article>
<article><h2>hunters reuturn</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique, nulla et dictum elementum, dolor leo consectetur turpis, eu semper nibh massa in tellus. Sed sit amet erat sit amet eros varius venenatis a sed velit. In est neque, ullamcorper vel pellentesque eu, condimentum ac erat. Pellentesque pellentesque, tellus vel aliquet scelerisque, urna dui pellentesque lorem, et ultrices sapien lacus sit amet massa. Quisque purus purus, feugiat et ornare eu, sagittis quis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin gravida sapien et est hendrerit, eget mattis augue sodales. Nullam maximus accumsan feugiat. Fusce posuere est non bibendum finibus. Vestibulum imperdiet faucibus purus, quis malesuada neque mattis at. </p>
</article>
<article>
<h2>lg spining logo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique, nulla et dictum elementum, dolor leo consectetur turpis, eu semper nibh massa in tellus. Sed sit amet erat sit amet eros varius venenatis a sed velit. In est neque, ullamcorper vel pellentesque eu, condimentum ac erat. Pellentesque pellentesque, tellus vel aliquet scelerisque, urna dui pellentesque lorem, et ultrices sapien lacus sit amet massa. Quisque purus purus, feugiat et ornare eu, sagittis quis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin gravida sapien et est hendrerit, eget mattis augue sodales. Nullam maximus accumsan feugiat. Fusce posuere est non bibendum finibus. Vestibulum imperdiet faucibus purus, quis malesuada neque mattis at. </p>
</article>
<article>
<h2>online friendlies</h2>
<aside>
<h3>maps</h3>
<ol><li>map_1</li> <li>map_2</li></ol>
</aside>
</article>
<table>
<tr>
<th class="head" colspan="7">requester information</th>
</tr>
<tr>
<th class="sub-h">name</th>
<td colspan="4">ASSAULT TROOP</td>
<th class="sub-h">date</th>
<td>645477</td>
</tr>
<tr>
<th class="sub-h">department</th>
<td colspan="6">customer service</td>
</tr>
<tr>
<th class="sub-h">e-mail</th>
<td colspan="3">some@domain.com</td>
<th class="sub-h" colspan="1">phone</th>
<td colspan="3">6145421215</td>
</tr>
<tr>
<th class="head" colspan="7">supplier information</th>
</tr>
<tr>
<th class="sub-h">name</th>
<td colspan="6">acme computer supplies</td>
</tr>
<tr>
<th class="sub-h">address 1</th>
<td colspan="6">1234 bussienes way</td>
</tr>
<tr>
<th class="sub-h">address 1</th>
<td colspan="6"></td>
</tr>
<tr>
<th class="sub-h">city</th>
<td>somewhere</td>
<th class="sub-h">state</th>
<td>iL</td>
<th class="sub-h" colspan="2">zip code</th>
<td>8787</td>
</tr>
<tr>
<th class="sub-h">e-mail</th>
<td colspan="2">ksfgsksghs@gmail.com</td>
<th class="sub-h" colspan="1">fax</th>
<td colspan="4">48425-955-888</td>
</tr>
<tr>
<th class="sub-h">e-mail</th>
<td colspan="2">ksfgsksghs@gmail.com</td>
<th class="sub-h" colspan="1">web</th>
<td colspan="4">48425-955-888</td>
</tr>
<tr>
<th class="head" colspan="7">items</th>
</tr>
<tr>
<th class="mod">item#</th>
<th class="mod">part number</th>
<th class="mod" colspan="2">description</th>
<th class="mod">quantity</th>
<th class="mod">unit cost</th>
<th class="mod">total cost</th>
</tr>
<tr>
<td>1</td>
<td>197-540501</td>
<td colspan="2">torner cartyridge for laserjet 4100 series 6000 page duty cycle</td>
<td>2</td>
<td>$29.95</td>
<td>$59.61</td>
</tr>
<tr>
<td>2</td>
<td>197-540501</td>
<td colspan="2">torner cartyridge for laserjet 4100 series 6000 page duty cycle </td>
<td>2</td>
<td>$29.95</td>
<td>$59.61</td>
</tr>
</table>
</div>
<article class="repeated-image">
<div class="background-rpt">
</div>
</article>
</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.