Nov - Africa

<div id="nav" style="position: fixed;">
<a href="#one" style="border-radius: 0 10px;">1</a>
<a href="#two" style="border-radius: 10px 0;">2</a><br><a href="#top" id="home" style="border-radius: 40px; position: relative;">home</a><br><a href="#three" style="border-radius: 10px 0;">3</a>
<a href="#four" style="border-radius: 0 10px;">4</a></div>

<div class="screen" style="position: relative; z-index: 7;"><div class="mid">
<a href="#one" class="lonk" style="border-radius: 0 50px;"><div class="table" style="border-radius: 0 40px;"><div class="mid">one:<br> something</div></div></a>

<a href="#two" class="lonk" style="border-radius: 50px 0;"><div class="table" style="border-radius: 40px 0;"><div class="mid">two:<br> something</div></div></a>

<div id="title" style="border-radius: 200px; position: relative; z-index: 9;">africa</div>

<a href="#three" class="lonk" style="border-radius: 50px 0;"><div class="table" style="border-radius: 40px 0;"><div class="mid">three:<br> something</div></div></a>

<a href="#four" class="lonk" style="border-radius: 0 50px;"><div class="table" style="border-radius: 0 40px;"><div class="mid">four:<br> something</div></div></a>
</div></div>

<div class="screen" id="one"><div class="mid">
<div class="textborder"><div class="textzone">
<h1>your first header</h1>
<img src="http://images.neopets.com/items/can_fyora_wings.gif" class="left"><p>Welcome to your new layout! It features an intro screen and four anchored pages. I don't recommend adding more pages because of how the navigation is set up. You are however encouraged to change the colors and patterns if you'd like. Editing <i>background: url("http://i.imgur.com/FGHsx05.png") fixed;</i> will change the cloud background anywhere it appears. <b>This</b> is bold, <i>this</i> is italics, <em>this</em> is a highlight, and <a href="#three">this</a> is a link.</p>

<blockquote>To save, replace #one with <i>#save</i> in your address bar so that you end up with <a href="/preview_homepage.phtml#save">http://www.neopets.com/preview_homepage.phtml#save</a>. This will take you to the bottom of the page, where the save button is hiding.</blockquote>

<img src="http://images.neopets.com/items/can_fizzygravel_purple.gif" class="right"><p>Why end might ask civil again spoil. She dinner she our horses depend. Remember at children by reserved to vicinity. In affronting unreserved delightful simplicity ye. Law own advantage furniture continual sweetness bed agreeable perpetual. Oh song well four only head busy it. Afford son she had lively living. Tastes lovers myself too formal season our valley boy. Lived it their their walls might to by young.</p>

</div></div>
</div></div>

<div class="screen" id="two"><div class="mid">
<div class="textborder"><div class="textzone">
2
</div></div>
</div></div>

<div class="screen" id="three"><div class="mid">
<div class="textborder"><div class="textzone">
3
</div></div>
</div></div>

<div class="screen" id="four"><div class="mid">
<div class="textborder"><div class="textzone">
4
</div></div>
</div></div>


<style>
body {
	text-align: center;
	margin-top: -14px;
	overflow: hidden;
	font-family: verdana;
	background: #FADAA6;
}
.screen {
	height: 100%;
	width: 100%;
	display: table;
	background: #FADAA6;
}
a.lonk, .textborder, #nav a, h1 {
	background: url("http://tvg-blog.s3.amazonaws.com/uploads/2019/01/Cover-image.png") fixed;
}
a.lonk, #title, #nav a, h1 {
	font-family: garamond,georgia;
	text-align: center;
}
h1 {
	font-weight: normal;
	letter-spacing: 3px;
	color: #ffffff;
	background: #D09E4C;
	line-height: 150%;
}
blockquote {
	color: #fff;
	padding: 10px;
	background: #D09E4C;
	text-align: justify;
}
blockquote em {
	background: #9B92A7;
}
blockquote i {
	color: #7A696F;
}
img.left {
	float: left;
	margin: 5px 5px 5px 0;
}
img.right {
	float: right;
	margin: 5px 0 5px 5px;
}
#nav a {
	text-decoration: none;
	color: #fff;
	background: #D09E4C;
	display: inline-block;
	font-size: 8px;
	text-transform: uppercase;
	height: 40px;
	line-height: 40px;
	width: 40px;
}
#nav a:hover {
	background: #C0A87B;
}
#nav {
	top: 50%;
	margin-top: -243px;
	left: 50%;
	margin-left: -400px;
	z-index: 4;
	text-align: center;
	width: 84px;
	font-size: 0;
}
a#home {
	margin: -17px auto;
	height: 30px;
	line-height: 30px;
	width: 30px;
	z-index: 10;
}
a.lonk {
	width: 300px;
	height: 250px;
	display: inline-block;
	text-decoration: none;
	font-size: 25px;
	color: transparent;
	font-style: italic;
}
a.lonk:hover {
	color: #D09E4C;
}
a.lonk:hover .table {
	background: #fff;
}
#title {
	height: 200px;
	line-height: 200px;
	width: 200px;
	font-size: 30px;
	background: #fff;
	margin: -100px auto;
	color: #D09E4C;
}
.textzone {
	margin: 25px;
	padding: 0 15px;
	background: #fff;
	color: #555;
	overflow: auto;
	height: 450px;
	line-height: 175%;
	font-size: 12px;
	text-align: left;
}
.textzone a {
	color: #FADAA6;
	border: 1px solid transparent;
	padding: 0 1px;
}
.textzone a:hover {
	border: 1px solid #9B92A7;
	text-decoration: none;
}
b {
	color: #7E7362;
}
i {
	color: #765D36;
}
a, b, i {
	font-family: georgia;
}
em {
	font-style: normal;
	background: #D09E4C;
	color: #fff;
	padding: 0 2px;
}
.sf {
	display: none;
}
.mid {
	height: 100%;
	vertical-align: middle;
	display: table-cell;
}
.table {
	display: table;
	margin: 25px;
	height: 200px;
	width: 250px;
	background: 0;
}
.textborder {
	width: 600px;
	height: 500px;
	margin: auto;
	overflow: hidden;
}
</style><div id="save"></div>