diff --git a/layout/index.html b/layout/index.html
new file mode 100644
index 0000000..af6356f
--- /dev/null
+++ b/layout/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Menu - Content</title>
+		<style>
+			html,body,ul,li{
+				margin: 0;
+				padding: 0;
+				font-size: 0.8rem;
+			}
+			.leftFrame{
+				position: fixed;
+				left:0;
+				top:0;
+				bottom:0;
+				right:0;
+				width: 22rem;
+				background-color: #F1F1F1;
+				overflow: auto;
+				padding: 0.2rem;
+			}
+			.rightFrame{
+				background:#009688;
+				position: fixed;
+				left: 22.4rem;
+				top:0;
+				bottom:0;
+				right:0;
+				padding: 0.8rem;
+				color: #fff;
+				overflow: auto;
+			}
+			ul>li{
+				height: 2rem;
+				line-height: 2rem;
+				padding: 0.5rem;
+				transition: background-color 0.25s linear;
+				margin-bottom: 1px;
+			}
+			.active{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			a{
+				text-decoration: none;
+				color: #000;
+				display: block;
+			}
+			li:hover{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			li:hover a{
+				color: #fff;
+			}
+		</style>
+	</head>
+	<body>
+			<div class="leftFrame">
+				<ul>
+					<li class="active">Menu - Content</li>
+					<li><a href="index2.html">[Menu - Content] - Footer</a></li>
+					<li><a href="index3.html">Menu - [Content - Footer]</a></li>
+					<li><a href="index4.html">Menu - [TopNav - Content]</a></li>
+					<li><a href="index5.html">Menu - [TopNav - Content - Footer]</a></li>
+					<li><a href="index6.html">TopNav - [Menu - Content]</a></li>
+					<li><a href="index7.html">TopNav - [Menu - Content - Footer]</a></li>
+					<li><a href="index8.html">TopNav - [Menu - Content] - Footer</a></li>
+				</ul>
+			</div>
+			<div class="rightFrame"><p>Content</p><p>Have a nice day!</p></div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/layout/index2.html b/layout/index2.html
new file mode 100644
index 0000000..0712b7b
--- /dev/null
+++ b/layout/index2.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>[Menu - Content] - Footer</title>
+		<style>
+			html,body,ul,li{
+				margin: 0;
+				padding: 0;
+				font-size: 0.8rem;
+			}
+			.leftFrame{
+				position: fixed;
+				left:0;
+				top:0;
+				bottom:3.6rem;
+				right:0;
+				width: 22rem;
+				background-color: #F1F1F1;
+				overflow: auto;
+				padding: 0.2rem;
+			}
+			.rightFrame{
+				background:#009688;
+				position: fixed;
+				left: 22.4rem;
+				top:0;
+				bottom:3.6rem;
+				right:0;
+				padding: 0.8rem;
+				color: #fff;
+				overflow: auto;
+			}
+			.footer{
+				position: fixed;
+				bottom:0;
+				left: 0;
+				right:0;
+				height: 2rem;
+				background-color: #2F4056;
+				padding: 0.8rem
+			}
+			ul>li{
+				height: 2rem;
+				line-height: 2rem;
+				padding: 0.5rem;
+				transition: background-color 0.25s linear;
+				margin-bottom: 1px;
+			}
+			.active{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			a{
+				text-decoration: none;
+				color: #000;
+				display: block;
+			}
+			li:hover{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			li:hover a{
+				color: #fff;
+			}
+		</style>
+	</head>
+	<body>
+			<div class="leftFrame">
+				<ul>
+					<li><a href="index.html">Menu - Content</a></li>
+					<li class="active">[Menu - Content] - Footer</li>
+					<li><a href="index3.html">Menu - [Content - Footer]</a></li>
+					<li><a href="index4.html">Menu - [TopNav - Content]</a></li>
+					<li><a href="index5.html">Menu - [TopNav - Content - Footer]</a></li>
+					<li><a href="index6.html">TopNav - [Menu - Content]</a></li>
+					<li><a href="index7.html">TopNav - [Menu - Content - Footer]</a></li>
+					<li><a href="index8.html">TopNav - [Menu - Content] - Footer</a></li>
+				</ul>
+			</div>
+			<div class="rightFrame">
+				<p>Content</p>
+				<p>Have a nice day!</p>
+			</div>
+			<div class="footer">Footer</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/layout/index3.html b/layout/index3.html
new file mode 100644
index 0000000..46cbea8
--- /dev/null
+++ b/layout/index3.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Menu - [Content - Footer]</title>
+		<style>
+			html,body,ul,li{
+				margin: 0;
+				padding: 0;
+				font-size: 0.8rem;
+			}
+			.leftFrame{
+				position: fixed;
+				left:0;
+				top:0;
+				bottom:0;
+				right:0;
+				width: 22rem;
+				background-color: #F1F1F1;
+				overflow: auto;
+				padding: 0.2rem;
+			}
+			.rightFrame{
+				background:#009688;
+				position: fixed;
+				left: 22.4rem;
+				top:0;
+				bottom:3.6rem;
+				right:0;
+				padding: 0.8rem;
+				color: #fff;
+				overflow: auto;
+			}
+			.footer{
+				position: fixed;
+				bottom:0;
+				left: 22.4rem;
+				right:0;
+				height: 2rem;
+				background-color: #2F4056;
+				padding: 0.8rem
+			}
+			ul>li{
+				height: 2rem;
+				line-height: 2rem;
+				padding: 0.5rem;
+				transition: background-color 0.25s linear;
+				margin-bottom: 1px;
+			}
+			.active{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			a{
+				text-decoration: none;
+				color: #000;
+				display: block;
+			}
+			li:hover{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			li:hover a{
+				color: #fff;
+			}
+		</style>
+	</head>
+	<body>
+			<div class="leftFrame">
+				<ul>
+					<li><a href="index.html">Menu - Content</a></li>
+					<li><a href="index2.html">[Menu - Content] - Footer</a></li>
+					<li class="active">Menu - [Content - Footer]</li>
+					<li><a href="index4.html">Menu - [TopNav - Content]</a></li>
+					<li><a href="index5.html">Menu - [TopNav - Content - Footer]</a></li>
+					<li><a href="index6.html">TopNav - [Menu - Content]</a></li>
+					<li><a href="index7.html">TopNav - [Menu - Content - Footer]</a></li>
+					<li><a href="index8.html">TopNav - [Menu - Content] - Footer</a></li>
+				</ul>
+			</div>
+			<div class="rightFrame">
+				<p>Content</p>
+				<p>Have a nice day!</p>
+			</div>
+			<div class="footer">Footer</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/layout/index4.html b/layout/index4.html
new file mode 100644
index 0000000..2199fea
--- /dev/null
+++ b/layout/index4.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Menu - [TopNav - Content]</title>
+		<style>
+			html,body,ul,li{
+				margin: 0;
+				padding: 0;
+				font-size: 0.8rem;
+			}
+			.leftFrame{
+				position: fixed;
+				left:0;
+				top:0;
+				bottom:0;
+				right:0;
+				width: 22rem;
+				background-color: #F1F1F1;
+				overflow: auto;
+				padding: 0.2rem;
+			}
+			.rightFrame{
+				background:#009688;
+				position: fixed;
+				left: 22.4rem;
+				top:3.6rem;
+				bottom:0;
+				right:0;
+				padding: 0.8rem;
+				color: #fff;
+				overflow: auto;
+			}
+			.topNav{
+				position: fixed;
+				top:0;
+				left: 22.4rem;
+				right:0;
+				height: 2rem;
+				background-color: #5FB878;
+				padding: 0.8rem
+			}
+			ul>li{
+				height: 2rem;
+				line-height: 2rem;
+				padding: 0.5rem;
+				transition: background-color 0.25s linear;
+				margin-bottom: 1px;
+			}
+			.active{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			a{
+				text-decoration: none;
+				color: #000;
+				display: block;
+			}
+			li:hover{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			li:hover a{
+				color: #fff;
+			}
+		</style>
+	</head>
+	<body>
+			<div class="leftFrame">
+				<ul>
+					<li><a href="index.html">Menu - Content</a></li>
+					<li><a href="index2.html">[Menu - Content] - Footer</a></li>
+					<li><a href="index3.html">Menu - [Content - Footer]</a></li>
+					<li class="active">Menu - [TopNav - Content]</a></li>
+					<li><a href="index5.html">Menu - [TopNav - Content - Footer]</a></li>
+					<li><a href="index6.html">TopNav - [Menu - Content]</a></li>
+					<li><a href="index7.html">TopNav - [Menu - Content - Footer]</a></li>
+					<li><a href="index8.html">TopNav - [Menu - Content] - Footer</a></li>
+				</ul>
+			</div>
+			<div class="topNav">TopNav</div>
+			<div class="rightFrame">
+				<p>Content</p>
+				<p>Have a nice day!</p>
+			</div>
+			
+	</body>
+</html>
\ No newline at end of file
diff --git a/layout/index5.html b/layout/index5.html
new file mode 100644
index 0000000..f63fc16
--- /dev/null
+++ b/layout/index5.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Menu - [TopNav - Content - Footer]</title>
+		<style>
+			html,body,ul,li{
+				margin: 0;
+				padding: 0;
+				font-size: 0.8rem;
+			}
+			.leftFrame{
+				position: fixed;
+				left:0;
+				top:0;
+				bottom:0;
+				right:0;
+				width: 22rem;
+				background-color: #F1F1F1;
+				overflow: auto;
+				padding: 0.2rem;
+			}
+			.rightFrame{
+				background:#009688;
+				position: fixed;
+				left: 22.4rem;
+				top:3.6rem;
+				bottom:0;
+				right:0;
+				padding: 0.8rem;
+				color: #fff;
+				overflow: auto;
+			}
+			.topNav{
+				position: fixed;
+				top:0;
+				left: 22.4rem;
+				right:0;
+				height: 2rem;
+				background-color: #5FB878;
+				padding: 0.8rem
+			}
+			.footer{
+				position: fixed;
+				bottom:0;
+				left: 22.4rem;
+				right:0;
+				height: 2rem;
+				background-color: #2F4056;
+				padding: 0.8rem
+			}
+			ul>li{
+				height: 2rem;
+				line-height: 2rem;
+				padding: 0.5rem;
+				transition: background-color 0.25s linear;
+				margin-bottom: 1px;
+			}
+			.active{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			a{
+				text-decoration: none;
+				color: #000;
+				display: block;
+			}
+			li:hover{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			li:hover a{
+				color: #fff;
+			}
+		</style>
+	</head>
+	<body>
+			<div class="leftFrame">
+				<ul>
+					<li><a href="index.html">Menu - Content</a></li>
+					<li><a href="index2.html">[Menu - Content] - Footer</a></li>
+					<li><a href="index3.html">Menu - [Content - Footer]</a></li>
+					<li><a href="index4.html">Menu - [TopNav - Content]</a></li>
+					<li class="active">Menu - [TopNav - Content - Footer]</a></li>
+					<li><a href="index6.html">TopNav - [Menu - Content]</a></li>
+					<li><a href="index7.html">TopNav - [Menu - Content - Footer]</a></li>
+					<li><a href="index8.html">TopNav - [Menu - Content] - Footer</a></li>
+				</ul>
+			</div>
+			<div class="topNav">TopNav</div>
+			<div class="rightFrame">
+				<p>Content</p>
+				<p>Have a nice day!</p>
+			</div>
+			<div class="footer">Footer</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/layout/index6.html b/layout/index6.html
new file mode 100644
index 0000000..6682d1e
--- /dev/null
+++ b/layout/index6.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>TopNav - [Menu - Content]</title>
+		<style>
+			html,body,ul,li{
+				margin: 0;
+				padding: 0;
+				font-size: 0.8rem;
+			}
+			.leftFrame{
+				position: fixed;
+				left:0;
+				top:3.6rem;
+				bottom:0;
+				right:0;
+				width: 22rem;
+				background-color: #F1F1F1;
+				overflow: auto;
+				padding: 0.2rem;
+			}
+			.rightFrame{
+				background:#009688;
+				position: fixed;
+				left: 22.4rem;
+				top:3.6rem;
+				bottom:0;
+				right:0;
+				padding: 0.8rem;
+				color: #fff;
+				overflow: auto;
+			}
+			.topNav{
+				position: fixed;
+				top:0;
+				left: 0;
+				right:0;
+				height: 2rem;
+				background-color: #5FB878;
+				padding: 0.8rem
+			}
+			ul>li{
+				height: 2rem;
+				line-height: 2rem;
+				padding: 0.5rem;
+				transition: background-color 0.25s linear;
+				margin-bottom: 1px;
+			}
+			.active{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			a{
+				text-decoration: none;
+				color: #000;
+				display: block;
+			}
+			li:hover{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			li:hover a{
+				color: #fff;
+			}
+		</style>
+	</head>
+	<body>
+			<div class="topNav">TopNav</div>
+			<div class="leftFrame">
+				<ul>
+					<li><a href="index.html">Menu - Content</a></li>
+					<li><a href="index2.html">[Menu - Content] - Footer</a></li>
+					<li><a href="index3.html">Menu - [Content - Footer]</a></li>
+					<li><a href="index4.html">Menu - [TopNav - Content]</a></li>
+					<li><a href="index5.html">Menu - [TopNav - Content - Footer]</a></li>
+					<li class="active">TopNav - [Menu - Content]</a></li>
+					<li><a href="index7.html">TopNav - [Menu - Content - Footer]</a></li>
+					<li><a href="index8.html">TopNav - [Menu - Content] - Footer</a></li>
+				</ul>
+			</div>
+			<div class="rightFrame">
+				<p>Content</p>
+				<p>Have a nice day!</p>
+			</div>
+			
+	</body>
+</html>
\ No newline at end of file
diff --git a/layout/index7.html b/layout/index7.html
new file mode 100644
index 0000000..4449156
--- /dev/null
+++ b/layout/index7.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>TopNav - [Menu - Content - Footer]</title>
+		<style>
+			html,body,ul,li{
+				margin: 0;
+				padding: 0;
+				font-size: 0.8rem;
+			}
+			.leftFrame{
+				position: fixed;
+				left:0;
+				top:3.6rem;
+				bottom:0;
+				right:0;
+				width: 22rem;
+				background-color: #F1F1F1;
+				overflow: auto;
+				padding: 0.2rem;
+			}
+			.rightFrame{
+				background:#009688;
+				position: fixed;
+				left: 22.4rem;
+				top:3.6rem;
+				bottom:3.6rem;
+				right:0;
+				padding: 0.8rem;
+				color: #fff;
+				overflow: auto;
+			}
+			.topNav{
+				position: fixed;
+				top:0;
+				left: 0;
+				right:0;
+				height: 2rem;
+				background-color: #5FB878;
+				padding: 0.8rem
+			}
+			.footer{
+				position: fixed;
+				bottom:0;
+				left: 22.4rem;
+				right:0;
+				height: 2rem;
+				background-color: #2F4056;
+				padding: 0.8rem;
+				color: #fff;
+			}
+			ul>li{
+				height: 2rem;
+				line-height: 2rem;
+				padding: 0.5rem;
+				transition: background-color 0.25s linear;
+				margin-bottom: 1px;
+			}
+			.active{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			a{
+				text-decoration: none;
+				color: #000;
+				display: block;
+			}
+			li:hover{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			li:hover a{
+				color: #fff;
+			}
+		</style>
+	</head>
+	<body>
+			<div class="topNav">TopNav</div>
+			<div class="leftFrame">
+				<ul>
+					<li><a href="index.html">Menu - Content</a></li>
+					<li><a href="index2.html">[Menu - Content] - Footer</a></li>
+					<li><a href="index3.html">Menu - [Content - Footer]</a></li>
+					<li><a href="index4.html">Menu - [TopNav - Content]</a></li>
+					<li><a href="index5.html">Menu - [TopNav - Content - Footer]</a></li>
+					<li><a href="index6.html">TopNav - [Menu - Content]</a></li>
+					<li class="active">TopNav - [Menu - Content - Footer]</a></li>
+					<li><a href="index8.html">TopNav - [Menu - Content] - Footer</a></li>
+				</ul>
+			</div>
+			<div class="rightFrame">
+				<p>Content</p>
+				<p>Have a nice day!</p>
+			</div>
+			<div class="footer">Footer</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/layout/index8.html b/layout/index8.html
new file mode 100644
index 0000000..3e1320c
--- /dev/null
+++ b/layout/index8.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>TopNav - [Menu - Content] - Footer</title>
+		<style>
+			html,body,ul,li{
+				margin: 0;
+				padding: 0;
+				font-size: 0.8rem;
+			}
+			.leftFrame{
+				position: fixed;
+				left:0;
+				top:3.6rem;
+				bottom:3.6rem;
+				right:0;
+				width: 22rem;
+				background-color: #F1F1F1;
+				overflow: auto;
+				padding: 0.2rem;
+			}
+			.rightFrame{
+				background:#009688;
+				position: fixed;
+				left: 22.4rem;
+				top:3.6rem;
+				bottom:3.6rem;
+				right:0;
+				padding: 0.8rem;
+				color: #fff;
+				overflow: auto;
+			}
+			.topNav{
+				position: fixed;
+				top:0;
+				left: 0;
+				right:0;
+				height: 2rem;
+				background-color: #5FB878;
+				padding: 0.8rem
+			}
+			.footer{
+				position: fixed;
+				bottom:0;
+				left: 0;
+				right:0;
+				height: 2rem;
+				background-color: #2F4056;
+				padding: 0.8rem;
+				color: #fff;
+			}
+			ul>li{
+				height: 2rem;
+				line-height: 2rem;
+				padding: 0.5rem;
+				transition: background-color 0.25s linear;
+				margin-bottom: 1px;
+			}
+			.active{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			a{
+				text-decoration: none;
+				color: #000;
+				display: block;
+			}
+			li:hover{
+				background-color: #009688;
+				color: #fff;
+				font-weight: bold;
+			}
+			li:hover a{
+				color: #fff;
+			}
+		</style>
+	</head>
+	<body>
+			<div class="topNav">TopNav</div>
+			<div class="leftFrame">
+				<ul>
+					<li><a href="index.html">Menu - Content</a></li>
+					<li><a href="index2.html">[Menu - Content] - Footer</a></li>
+					<li><a href="index3.html">Menu - [Content - Footer]</a></li>
+					<li><a href="index4.html">Menu - [TopNav - Content]</a></li>
+					<li><a href="index5.html">Menu - [TopNav - Content - Footer]</a></li>
+					<li><a href="index6.html">TopNav - [Menu - Content]</a></li>
+					<li><a href="index7.html">TopNav - [Menu - Content - Footer]</a></li>
+					<li class="active">TopNav - [Menu - Content] - Footer</li>
+				</ul>
+			</div>
+			<div class="rightFrame">
+				<p>Content</p>
+				<p>Have a nice day!</p>
+			</div>
+			<div class="footer">Footer</div>
+	</body>
+</html>
\ No newline at end of file
