This is the Title

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type='text/css'>

<!--

==============================================

title: "This is the Title"
coded by: Monica T.
date: January 8, 2017
source - animated sidebar: http://lunecerise.co.vu/post/89897889539/yo-wassup-updates-tab-02-by-lunecerise-static

==============================================

-->
<meta charset="UFT-8">
<title>This is the Title | by monica t. </title>


<style type="text/css">

body {
	background: #f6f5f5;
	font-size: 11px;
	color: #333;
	line-height: 20px;
	font-family: 'Open Sans', sans-serif;
	text-align: left;
	cursor: crosshair;
}

.title{
        position: absolute;
        text-align: center;
        margin-left: 140px;
        margin-top: -80px;
        padding: 1px;
}


.content {
	width: 640px;
	margin: 0 auto;
        background-color: #efefef;
        border: 1px solid #F7F7F7;
        padding: 20px;
        margin-top: 100px;
        text-align: left;
}


.navigation {
        position: absolute;
        top: 0;
        left: 0;
        width: 110px;
}


.part {
	width: 31%;
	margin: 1px 1%;
	float: left;
}

h1 {
	font-family: 'arial';
	color: #393846;
	font-size: 36px;
	letter-spacing: -1px;
	font-weight: normal;
	text-transform: lowercase;
}


h2 {
	font-family: 'arial';
	color: #393846;
	background-color: #ccc;
	letter-spacing: 0px;
	font-size: 14px;
	text-align: left;
	padding: 2px;
	text-transform: uppercase;
}

h3 {
        font-family: 'arial';
	color: #a5717f;
	font-size: 13px;
	text-align: left;
        border-bottom: 2px solid #a5717f;
	border-right: none;
	padding: 2px;
	text-transform: uppercase;
}

h4 {
        font-family: 'arial';
	color: #e6b1b0;
	letter-spacing: 0px;
	font-size: 13px;
	text-align: left;
        border-bottom: 2px solid #e6b1b0;
	border-right: none;
	padding: 2px;
	text-transform: uppercase;
}

a.nav, a.nav:active, a.nav:link, a.nav:visited {
        font-family: arial;
        background-color: #99717c;
        border: 1px solid #f3f3f3;
        display: block;
        width: 110px;
        text-align: center;
        line-height: 10px;
        margin: 6px;
        font-size: 13px;
        padding: 6px;
        color: #333;
        cursor: crosshair;
}

a.nav:hover {
	text-decoration: none;
        background-color: #e7b5b4;
}

a:link, a:visited {
	color: #333;
	text-decoration: none;
}
a:hover {
        color: #6a6e7a;
	text-decoration: none;
}

img {
        border: 8px solid #ccc;
        float: right;
        margin: 2px;
}


body::-webkit-scrollbar {
        width: 7px;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #373737;
}

body::-webkit-scrollbar-thumb {
  background-color: #333;
  outline: 1px solid #373737;
}

 #tabs{
border-bottom-right-radius: 15px;
font-family: arial;
color: #333;
background: #ccc;
height: 15px;
width: 25px;
left: 0px;
top: 0px;
text-align: center;
line-height: 7px;
padding: 10px;
position: fixed;
overflow: hidden;
opacity: 1.0;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
z-index:999999999;
}

#tabs:hover{
border-bottom-right-radius: 0px;
font-family: arial;
color: #333;
background: transparent;
height: 250px;
width: 230px;
text-align: center;
line-height: 12px;
padding: 7px;
overflow: auto;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
z-index:999999999;
}

.ttitle {
font-size: 32px;
}

</style>
</head>

<body>

<div class="wrapper">

<div id="tabs">
<b><div style="font-size: 32px;">+</div></b><br><p>
<a href="#" class="nav">one</a>
<a href="#" class="nav">two</a>
<a href="#" class="nav">three</a>
<a href="#" class="nav">four</a>
<a href="#" class="nav">five</a><br><br>
</div>
</div>


<div class="content">
<div class="title" style="position: absolute;"><h1><b>this is the</b> title of page</h1></div>

<h2>header two</h2>
<div class="part">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="part">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="part">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<br>

<h3>header three</h3>
<img src="https://s3-media1.fl.yelpcdn.com/buphoto/pyxFsW4ZNe2I3y09VSGKgQ/o.jpg" height="120" width="150">

<p><a href="http://monicagalaxy.info/" target="_blank">Css by Monica T.</a>
<b>Lorem ipsum dolor sit amet,</b> <i>ferri singulis molestiae mel te.</i> Vim id periculis definitionem, vim ne equidem interpretaris. At vel malorum consulatu referrentur, hinc maiorum intellegebat eu has, eum purto adolescens vituperata in. Ius cu aeque quando efficiendi, ne est odio liber ridens, pericula explicari duo ei. Appetere theophrastus no vis, an conceptam expetendis has, id mei quem mundi mnesarchum. Ius cu aeque quando efficiendi, ne est odio liber ridens, pericula explicari duo ei. Appetere theophrastus no vis, an conceptam expetendis has, id mei quem mundi mnesarchum. </p>

<h4>header four</h4>
<p>Lorem ipsum dolor sit amet, ferri singulis molestiae mel te. Ne pro semper prompta. Aperiam alterum molestiae pro in, congue nusquam posidonium vis at. Vim id periculis definitionem, vim ne equidem interpretaris. </p>


</div>

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