portablejim/template.xhtml

## template.xhtml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Infoscreen Template</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/template.css" />
  <style type="text/css">
@font-face{
	font-family: 'Heading Font 1';
	src: url('fonts/vtks_animal_2.ttf');
}

@font-face{
	font-family: 'Heading font 2';
	src: url('fonts/miso-webfont.ttf');
}

 body{
	margin: 0px;
	padding: 0px;
	background-color: #7ad3d0;
 }

h1{
	font-family: 'Heading Font 1';
	color: #FFFFFF;
	font-size: 2.5em;
	padding:  0.5em 0em 0.0em 1.7em;
	margin-top: 0em;
	margin-bottom: 0em;
	line-height: 1em;
}

h1 .subheading{
	font-family: 'Heading font 2';
	color: #EFD0FF;
	font-size: 0.7em;
	margin-left: 1em;
}

  #heading{
	width: 100%;
	overflow-x: hidden;
	position: absolute;
	top: -400px;
	padding-bottom: 25px;
 }

  #heading div.rotate{
	width: 100%;
	padding: 400px 200px 0px 200px;
	background-color: #013353;
	height: 120px;
	position: relative;
	left: -200px;
 }
 div.rotate{
	-webkit-transform: rotateZ(-1.0deg);
	-moz-transform: rotate(-1.0deg);
	overflow-x: hidden;
}
 div.rotate div{
	-webkit-transform: rotateZ(1.0deg);
	-moz-transform: rotate(1.0deg);
}

#header-image{
	position: absolute;
	right: 50px;
	top: 0px;
}

@media screen and (max-width: 900px) {
	#header-image{
		display: none;
	}
}

@media screen and (max-width: 600px) {
	h1{
		font-size: 2em;
		padding:  0.5em 0em 0.0em 0.5em;
	}
 div.rotate{
	-webkit-transform: rotateZ(-4.0deg);
	-moz-transform: rotate(-4.0deg);
	height: 100px;
}
 div.rotate div{
	-webkit-transform: rotateZ(4.0deg);
	-moz-transform: rotate(4.0deg);
}
}

@media screen and (max-width: 450px) {
	h1{
		font-size: 1.5em;
	}

	h1 .subheading {
		font-size: 1em;
	}
	div.rotate{
		height: 70px;
	}
}
  </style>
</head>
<body>
<div id="heading"><div class="rotate"><div><img src="images/backimage1.jpg" width="320" height="120" id="header-image" /><h1>International house<br /><span class="subheading">Info screen manager</span></h1></div></div>

</div>
</body>
</html>
	<?xml version="1.0" encoding="utf-8"?>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
	<title>Infoscreen Template</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="css/template.css" />
	<style type="text/css">
	@font-face{
	font-family: 'Heading Font 1';
	src: url('fonts/vtks_animal_2.ttf');
	}

	@font-face{
	font-family: 'Heading font 2';
	src: url('fonts/miso-webfont.ttf');
	}

	body{
	margin: 0px;
	padding: 0px;
	background-color: #7ad3d0;
	}

	h1{
	font-family: 'Heading Font 1';
	color: #FFFFFF;
	font-size: 2.5em;
	padding: 0.5em 0em 0.0em 1.7em;
	margin-top: 0em;
	margin-bottom: 0em;
	line-height: 1em;
	}

	h1 .subheading{
	font-family: 'Heading font 2';
	color: #EFD0FF;
	font-size: 0.7em;
	margin-left: 1em;
	}

	#heading{
	width: 100%;
	overflow-x: hidden;
	position: absolute;
	top: -400px;
	padding-bottom: 25px;
	}

	#heading div.rotate{
	width: 100%;
	padding: 400px 200px 0px 200px;
	background-color: #013353;
	height: 120px;
	position: relative;
	left: -200px;
	}
	div.rotate{
	-webkit-transform: rotateZ(-1.0deg);
	-moz-transform: rotate(-1.0deg);
	overflow-x: hidden;
	}
	div.rotate div{
	-webkit-transform: rotateZ(1.0deg);
	-moz-transform: rotate(1.0deg);
	}

	#header-image{
	position: absolute;
	right: 50px;
	top: 0px;
	}

	@media screen and (max-width: 900px) {
	#header-image{
	display: none;
	}
	}

	@media screen and (max-width: 600px) {
	h1{
	font-size: 2em;
	padding: 0.5em 0em 0.0em 0.5em;
	}
	div.rotate{
	-webkit-transform: rotateZ(-4.0deg);
	-moz-transform: rotate(-4.0deg);
	height: 100px;
	}
	div.rotate div{
	-webkit-transform: rotateZ(4.0deg);
	-moz-transform: rotate(4.0deg);
	}
	}

	@media screen and (max-width: 450px) {
	h1{
	font-size: 1.5em;
	}

	h1 .subheading {
	font-size: 1em;
	}
	div.rotate{
	height: 70px;
	}
	}
	</style>
	</head>
	<body>
	<div id="heading"><div class="rotate"><div><img src="images/backimage1.jpg" width="320" height="120" id="header-image" /><h1>International house<br /><span class="subheading">Info screen manager</span></h1></div></div>

	</div>
	</body>
	</html>