lucasmelin/blankwebpage.html

## blankwebpage.html
<!DOCTYPE html>
<html>
<head>
<title>
Page Template
</title>
</head>
<body marginwidth=0 marginheight=0 topmargin=0 leftmargin=0>
<style>
.sf {
    display: none;
}
table, td, th {
    border: 1px solid white;
}
td {
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
}
body {
    background: #E9E9E9;
    font: 12pt arial;
    color: #474747;
    line-height: 20px;
}
b {
    font-weight: bold;
}
i {
    font-style: italic;
}
h1 {
    font: 24pt georgia;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    word-spacing: 3px;
    color: #570C31;
    height: 18pt;
    margin: 3% 5% 5% 0;
    padding: 0;
}
p.textbox {
    text-align: justify;
}
#topbar {
    top: 0;
    left: 0;
    width: 100%;
    height: 85px;
    z-index: 100;
    background: #2B1036;
    white-space: nowrap;
    font: 52pt Algerian;
    color: #BDBAC2;
}
div.footerpic {
    left: 0px;
    bottom: 0px;
    height: auto;
    width: 20%;
    z-index: 2000;
}
#main {
    float: right;
    height: 1650px;
    overflow: hidden;
    background: white;
    margin-left: 15%;
    margin-right: 20%;
    top: 5%;
    z-index: 1000;
}
.page {
    height: 8000px;
    overflow: auto;
    margin: 40px;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 95px;
}
#nav {
    left: 80%;
    right: 20%;
    float: right;
    top: 100px;
    width: 180px;
    height: 40px;
    text-align: center;
}
a.navigation:link, a.navigation:visited {
    display: block;
    font: 12pt georgia;
    padding: 9px;
    margin: 9px 0;
    text-decoration: none;
    background: #2B1036;
    color: white;
}
a.navigation:hover {
    background: #570C31;
    color: white;
}
a.regular:link, a.regular:visited {
    color: #570C31;
}
a.regular:hover {
    color: #5D211E;
}
ul {
    list-style-type: disc;
}
li {
    margin-bottom: 10px;
}
.resizeh {
    height: 230px;
    width: auto;
}
.resizew {
    width: 360px;
    height: auto;
}
#faketable {
    padding: 3% 0% 0% 5%;
    margin: auto;
    text-align: center;
}
.tableentry {
    display: inline-block;
    text-align: center;
    margin: 0% 3% 5% 0;
}
.tabletopentry {
    vertical-align: text-top;
    display: inline-block;
    text-align: center;
    margin: 0% 3% 5% 0;
}
</style><div id="topbar" style="position: absolute; text-align: center;">Brand Info</div>
<div class="footerpic" style="position: fixed;">
<img src="http://examplelowerimage.png" width="100%"></div>
<div id="nav" style="position: fixed;">
<a href="#nav1" class="navigation">Page 1</a>
<a href="#nav2" class="navigation">Page 2</a>
<a href="#nav3" class="navigation">Page 3</a>
<a href="#nav4" class="navigation">Page 4</a>
</div>
<div id="main">


<a name="nav1"></a>
<div class="page" style="margin: 40px;">
<h1>Page 1</h1>
<p class="textbox">
Curabitur ac porttitor ipsum. Suspendisse eu finibus dui. Proin id diam non ipsum convallis vestibulum eu eget urna. Nunc suscipit ligula id mauris facilisis, vel porta lectus bibendum. Suspendisse auctor lacinia odio sed suscipit. In porttitor laoreet diam in viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac convallis ex, sed luctus odio.
</p>
<h1>Heading One</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed efficitur nisi. Vestibulum efficitur posuere nunc, eu faucibus massa gravida eu. Nam consequat ligula felis, nec venenatis tortor ornare non. Aenean laoreet urna purus, a ultrices ex molestie ac. In feugiat turpis ac leo lobortis, sed blandit neque finibus. Quisque efficitur convallis orci, a elementum leo egestas at. Pellentesque id elit lorem. Duis interdum augue ac enim accumsan, sed bibendum diam malesuada. Mauris quam velit, volutpat quis metus ut, luctus auctor eros. Pellentesque ut sagittis metus. Fusce interdum tellus sapien, ut molestie mi porttitor non. Morbi egestas aliquet quam, eget consectetur augue pulvinar ac.
</p>
<h1>Heading Two</h1>
<p>
Maecenas mollis enim ac dui vestibulum, eget auctor libero vehicula. Ut quis dictum justo. Nullam nec erat tempus enim scelerisque auctor. Phasellus dolor leo, porta eget elementum ac, tincidunt ac dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean vulputate id mauris eu porttitor. Praesent quis velit mollis ligula aliquam luctus. Ut dignissim pellentesque nunc non scelerisque.
</p>
<h1>Heading Three</h1>
<p>
Aliquam faucibus nibh non fermentum sagittis. Quisque auctor ac leo nec laoreet. Mauris at orci a lectus ultricies semper. Proin quis ipsum quam. Morbi rutrum suscipit nisl, rutrum cursus quam sagittis eu. Aenean luctus eget arcu viverra dignissim. Suspendisse id pellentesque metus. Etiam fermentum purus ex, ac laoreet lectus ultricies feugiat. Aliquam ultrices tellus vel urna venenatis, vitae tristique felis congue. Mauris ex nisi, tincidunt nec mattis id, iaculis nec justo.
</p>
<p>
Vestibulum sapien leo, tincidunt id lectus et, venenatis viverra massa. Fusce quis lacinia nunc. Sed mauris nisl, posuere at ornare vel, euismod eget augue. Integer quis ligula a tortor tincidunt aliquet ac in arcu. Nulla id felis eget nibh feugiat vehicula. Phasellus condimentum purus tortor, in luctus lorem dictum eget. Sed sodales ultricies odio in gravida.
</p>
<p>
Phasellus efficitur nibh ut libero accumsan mattis in varius dui. Sed efficitur ex lorem, ac convallis mi varius non. Sed feugiat varius ligula non tempus. Duis elementum gravida elit ac congue. Curabitur vitae pulvinar dolor, accumsan luctus ipsum. Cras velit odio, convallis vitae lacinia congue, cursus vulputate elit. Fusce vitae nulla eget odio tincidunt blandit. Proin sit amet urna lectus. Cras mi mauris, porta quis tortor ac, aliquet egestas mi. Proin sit amet mauris ac urna vulputate consectetur facilisis quis purus.
</p>
<p>
Suspendisse potenti. Donec eu orci vehicula, elementum elit eu, pharetra augue. Praesent vel eros eget nibh eleifend malesuada vel in turpis. Fusce ante ipsum, faucibus id facilisis vitae, accumsan in neque. Proin consectetur est id nisl porta, non molestie quam tempor. Cras posuere ipsum vel orci accumsan, eget ornare mi laoreet. Pellentesque in sem finibus, vestibulum eros pulvinar, facilisis nibh.
</p>
<p>
Aliquam blandit, libero non suscipit faucibus, magna ipsum dictum risus, eu aliquet justo metus ut turpis. Praesent eu blandit elit. Nunc placerat magna eros, a sodales turpis eleifend a. Sed id interdum nulla. Donec non ante a diam consequat tristique eget a mauris. Cras a elit in leo placerat dictum nec at neque. Fusce hendrerit lorem turpis. Maecenas tincidunt sollicitudin tortor, et scelerisque odio luctus eget. Donec congue erat lectus, eu elementum nulla fermentum a. Nam maximus tempor fringilla. Nullam massa massa, pellentesque id enim et, semper commodo turpis. Curabitur neque justo, auctor eget lacus pharetra, efficitur viverra libero. Praesent vulputate ac mauris quis ullamcorper.
</p>
</div>

<a name="nav2"></a>
<div class="page">
<h1>Page 2</h1>
<p>
Phasellus eleifend, purus nec gravida porta, augue dolor porta felis, non aliquet orci felis eget sapien. Donec non diam sed neque feugiat auctor sit amet non leo. Nunc gravida facilisis turpis, nec vulputate nibh maximus in. Phasellus quis dolor odio. Etiam sodales at neque vitae pellentesque. Donec tempus ante at erat lobortis scelerisque. Nullam cursus ipsum sed felis ornare volutpat eu quis mauris.
</p></div>

<a name="nav3"></a>
<div class="page">
<h1>Page 4</h1>
<h2>Heading</h2>
<div id="faketable">
<div class="tableentry">
<img src="http://example.jpg"><br>
Image 1 Caption
<br><textarea>
Fusce malesuada arcu non suscipit dignissim. In in magna sit amet odio fermentum scelerisque quis et odio. Proin dui sapien, interdum vitae erat a, venenatis aliquet dolor.
</textarea></div>
<div class="tableentry">
<img src="http://example.jpg"><br>
Image 2 Caption
<br><textarea>
Curabitur non vehicula est, ut placerat orci. Aenean a dapibus turpis. Duis eleifend a lorem at viverra. Maecenas at arcu eget risus dignissim dictum nec vel dui.
</textarea></div>
<div class="tableentry">
<img src="http://example.jpg"><br>
Image 3 Caption
<br><textarea>
Suspendisse accumsan orci ante, nec lobortis orci iaculis sed. Nulla fringilla id metus quis semper. In rutrum gravida leo quis finibus.
</textarea></div>
</div>
</div>

<a name="nav4"></a>
<div class="page">
<h1>Page 4</h1>
<h2>Heading 2
</h2>
<h3>Heading 3
</h3>
<h4>Heading 4
</h4>
<h5>Heading 5
</h5>
<h6>Heading 6
</h6>
</div>


<a name="nav5"></a>
<div class="page">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<div id="faketable">
<div class="tableentry">
<a style="font-size: 20px;" href="http://www.example.com/" class="regular">Link Text 1</a> Lorem ipsum <a style="font-size: 20px;" href="http://www.example.com/" class="regular">Link Text 2</a>.
</div>
<br><div class="tableentry">
<a style="font-size: 20px;" href="http://www.example.com/" class="regular">Link Text 3</a> Lorem ipsum <a style="font-size: 20px;" href="http://www.example.com/" class="regular">Link Text 4</a>.
</div>
</div>
</div>
</style>
</body></html>

## blankwebpage.md

      
    Raw
  

              blankwebpage.md
            
          
    Template based off of a webpage built for a website that hosted all content inside an iframe. The website also only allowed pure CSS and HTML, and blocked certain tags, such as hidden.
The template incorporates resizeable images and a single page navigation system that aligns to the right of the content, and remains in place despite any scrolling that takes place.
All content was required to be contained within a single page, so multiple navigable pages are instead simulated.
	<!DOCTYPE html>
	<html>
	<head>
	<title>
	Page Template
	</title>
	</head>
	<body marginwidth=0 marginheight=0 topmargin=0 leftmargin=0>
	<style>
	.sf {
	display: none;
	}
	table, td, th {
	border: 1px solid white;
	}
	td {
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;
	}
	body {
	background: #E9E9E9;
	font: 12pt arial;
	color: #474747;
	line-height: 20px;
	}
	b {
	font-weight: bold;
	}
	i {
	font-style: italic;
	}
	h1 {
	font: 24pt georgia;
	text-align: left;
	font-weight: bold;
	white-space: nowrap;
	word-spacing: 3px;
	color: #570C31;
	height: 18pt;
	margin: 3% 5% 5% 0;
	padding: 0;
	}
	p.textbox {
	text-align: justify;
	}
	#topbar {
	top: 0;
	left: 0;
	width: 100%;
	height: 85px;
	z-index: 100;
	background: #2B1036;
	white-space: nowrap;
	font: 52pt Algerian;
	color: #BDBAC2;
	}
	div.footerpic {
	left: 0px;
	bottom: 0px;
	height: auto;
	width: 20%;
	z-index: 2000;
	}
	#main {
	float: right;
	height: 1650px;
	overflow: hidden;
	background: white;
	margin-left: 15%;
	margin-right: 20%;
	top: 5%;
	z-index: 1000;
	}
	.page {
	height: 8000px;
	overflow: auto;
	margin: 40px;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 95px;
	}
	#nav {
	left: 80%;
	right: 20%;
	float: right;
	top: 100px;
	width: 180px;
	height: 40px;
	text-align: center;
	}
	a.navigation:link, a.navigation:visited {
	display: block;
	font: 12pt georgia;
	padding: 9px;
	margin: 9px 0;
	text-decoration: none;
	background: #2B1036;
	color: white;
	}
	a.navigation:hover {
	background: #570C31;
	color: white;
	}
	a.regular:link, a.regular:visited {
	color: #570C31;
	}
	a.regular:hover {
	color: #5D211E;
	}
	ul {
	list-style-type: disc;
	}
	li {
	margin-bottom: 10px;
	}
	.resizeh {
	height: 230px;
	width: auto;
	}
	.resizew {
	width: 360px;
	height: auto;
	}
	#faketable {
	padding: 3% 0% 0% 5%;
	margin: auto;
	text-align: center;
	}
	.tableentry {
	display: inline-block;
	text-align: center;
	margin: 0% 3% 5% 0;
	}
	.tabletopentry {
	vertical-align: text-top;
	display: inline-block;
	text-align: center;
	margin: 0% 3% 5% 0;
	}
	</style><div id="topbar" style="position: absolute; text-align: center;">Brand Info</div>
	<div class="footerpic" style="position: fixed;">
	<img src="http://examplelowerimage.png" width="100%"></div>
	<div id="nav" style="position: fixed;">
	<a href="#nav1" class="navigation">Page 1</a>
	<a href="#nav2" class="navigation">Page 2</a>
	<a href="#nav3" class="navigation">Page 3</a>
	<a href="#nav4" class="navigation">Page 4</a>
	</div>
	<div id="main">


	<a name="nav1"></a>
	<div class="page" style="margin: 40px;">
	<h1>Page 1</h1>
	<p class="textbox">
	Curabitur ac porttitor ipsum. Suspendisse eu finibus dui. Proin id diam non ipsum convallis vestibulum eu eget urna. Nunc suscipit ligula id mauris facilisis, vel porta lectus bibendum. Suspendisse auctor lacinia odio sed suscipit. In porttitor laoreet diam in viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac convallis ex, sed luctus odio.
	</p>
	<h1>Heading One</h1>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed efficitur nisi. Vestibulum efficitur posuere nunc, eu faucibus massa gravida eu. Nam consequat ligula felis, nec venenatis tortor ornare non. Aenean laoreet urna purus, a ultrices ex molestie ac. In feugiat turpis ac leo lobortis, sed blandit neque finibus. Quisque efficitur convallis orci, a elementum leo egestas at. Pellentesque id elit lorem. Duis interdum augue ac enim accumsan, sed bibendum diam malesuada. Mauris quam velit, volutpat quis metus ut, luctus auctor eros. Pellentesque ut sagittis metus. Fusce interdum tellus sapien, ut molestie mi porttitor non. Morbi egestas aliquet quam, eget consectetur augue pulvinar ac.
	</p>
	<h1>Heading Two</h1>
	<p>
	Maecenas mollis enim ac dui vestibulum, eget auctor libero vehicula. Ut quis dictum justo. Nullam nec erat tempus enim scelerisque auctor. Phasellus dolor leo, porta eget elementum ac, tincidunt ac dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean vulputate id mauris eu porttitor. Praesent quis velit mollis ligula aliquam luctus. Ut dignissim pellentesque nunc non scelerisque.
	</p>
	<h1>Heading Three</h1>
	<p>
	Aliquam faucibus nibh non fermentum sagittis. Quisque auctor ac leo nec laoreet. Mauris at orci a lectus ultricies semper. Proin quis ipsum quam. Morbi rutrum suscipit nisl, rutrum cursus quam sagittis eu. Aenean luctus eget arcu viverra dignissim. Suspendisse id pellentesque metus. Etiam fermentum purus ex, ac laoreet lectus ultricies feugiat. Aliquam ultrices tellus vel urna venenatis, vitae tristique felis congue. Mauris ex nisi, tincidunt nec mattis id, iaculis nec justo.
	</p>
	<p>
	Vestibulum sapien leo, tincidunt id lectus et, venenatis viverra massa. Fusce quis lacinia nunc. Sed mauris nisl, posuere at ornare vel, euismod eget augue. Integer quis ligula a tortor tincidunt aliquet ac in arcu. Nulla id felis eget nibh feugiat vehicula. Phasellus condimentum purus tortor, in luctus lorem dictum eget. Sed sodales ultricies odio in gravida.
	</p>
	<p>
	Phasellus efficitur nibh ut libero accumsan mattis in varius dui. Sed efficitur ex lorem, ac convallis mi varius non. Sed feugiat varius ligula non tempus. Duis elementum gravida elit ac congue. Curabitur vitae pulvinar dolor, accumsan luctus ipsum. Cras velit odio, convallis vitae lacinia congue, cursus vulputate elit. Fusce vitae nulla eget odio tincidunt blandit. Proin sit amet urna lectus. Cras mi mauris, porta quis tortor ac, aliquet egestas mi. Proin sit amet mauris ac urna vulputate consectetur facilisis quis purus.
	</p>
	<p>
	Suspendisse potenti. Donec eu orci vehicula, elementum elit eu, pharetra augue. Praesent vel eros eget nibh eleifend malesuada vel in turpis. Fusce ante ipsum, faucibus id facilisis vitae, accumsan in neque. Proin consectetur est id nisl porta, non molestie quam tempor. Cras posuere ipsum vel orci accumsan, eget ornare mi laoreet. Pellentesque in sem finibus, vestibulum eros pulvinar, facilisis nibh.
	</p>
	<p>
	Aliquam blandit, libero non suscipit faucibus, magna ipsum dictum risus, eu aliquet justo metus ut turpis. Praesent eu blandit elit. Nunc placerat magna eros, a sodales turpis eleifend a. Sed id interdum nulla. Donec non ante a diam consequat tristique eget a mauris. Cras a elit in leo placerat dictum nec at neque. Fusce hendrerit lorem turpis. Maecenas tincidunt sollicitudin tortor, et scelerisque odio luctus eget. Donec congue erat lectus, eu elementum nulla fermentum a. Nam maximus tempor fringilla. Nullam massa massa, pellentesque id enim et, semper commodo turpis. Curabitur neque justo, auctor eget lacus pharetra, efficitur viverra libero. Praesent vulputate ac mauris quis ullamcorper.
	</p>
	</div>

	<a name="nav2"></a>
	<div class="page">
	<h1>Page 2</h1>
	<p>
	Phasellus eleifend, purus nec gravida porta, augue dolor porta felis, non aliquet orci felis eget sapien. Donec non diam sed neque feugiat auctor sit amet non leo. Nunc gravida facilisis turpis, nec vulputate nibh maximus in. Phasellus quis dolor odio. Etiam sodales at neque vitae pellentesque. Donec tempus ante at erat lobortis scelerisque. Nullam cursus ipsum sed felis ornare volutpat eu quis mauris.
	</p></div>

	<a name="nav3"></a>
	<div class="page">
	<h1>Page 4</h1>
	<h2>Heading</h2>
	<div id="faketable">
	<div class="tableentry">
	<img src="http://example.jpg"><br>
	Image 1 Caption
	<br><textarea>
	Fusce malesuada arcu non suscipit dignissim. In in magna sit amet odio fermentum scelerisque quis et odio. Proin dui sapien, interdum vitae erat a, venenatis aliquet dolor.
	</textarea></div>
	<div class="tableentry">
	<img src="http://example.jpg"><br>
	Image 2 Caption
	<br><textarea>
	Curabitur non vehicula est, ut placerat orci. Aenean a dapibus turpis. Duis eleifend a lorem at viverra. Maecenas at arcu eget risus dignissim dictum nec vel dui.
	</textarea></div>
	<div class="tableentry">
	<img src="http://example.jpg"><br>
	Image 3 Caption
	<br><textarea>
	Suspendisse accumsan orci ante, nec lobortis orci iaculis sed. Nulla fringilla id metus quis semper. In rutrum gravida leo quis finibus.
	</textarea></div>
	</div>
	</div>

	<a name="nav4"></a>
	<div class="page">
	<h1>Page 4</h1>
	<h2>Heading 2
	</h2>
	<h3>Heading 3
	</h3>
	<h4>Heading 4
	</h4>
	<h5>Heading 5
	</h5>
	<h6>Heading 6
	</h6>
	</div>


	<a name="nav5"></a>
	<div class="page">
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<div id="faketable">
	<div class="tableentry">
	<a style="font-size: 20px;" href="http://www.example.com/" class="regular">Link Text 1</a> Lorem ipsum <a style="font-size: 20px;" href="http://www.example.com/" class="regular">Link Text 2</a>.
	</div>
	<br><div class="tableentry">
	<a style="font-size: 20px;" href="http://www.example.com/" class="regular">Link Text 3</a> Lorem ipsum <a style="font-size: 20px;" href="http://www.example.com/" class="regular">Link Text 4</a>.
	</div>
	</div>
	</div>
	</style>
	</body></html>