Serenity

<!DOCTYPE html>
<html>
<head>
<!--

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

Coded by Monica T.
http://monicagalaxy.info/
Theme: "Serenity"
Created: July 22, 2016
Updated: July 22, 2016
Background image from: http://vintagebackgrounds.tumblr.com/

Best viewed on Safari 1440 x 990

PLEASE DO NOT REMOVE CREDITS

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

-->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".inside").hide();
$(".label").click(function(){
$(this).next(".inside").slideToggle('fast');
});
});
</script>


<meta charset="UFT-8">

<title>serenity | premade layout by monica t. (monicagalaxy)</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,200italic,300,300italic' rel='stylesheet' type='text/css'>


<style type="text/css">
html {
    background-color: #fff;
    cursor: crosshair;
}

body {
    margin: 0 auto;
    text-align: left;
}

p {
   font-family: 'Open Sans', sans-serif;
   font-weight: 300;
   font-size: 12px;
   color: #999;
   line-height: 21px;
}


.title {
    top: 0px;
    position: relative;
    background-color: #6bbaa7;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 300;
    font-size: 65px;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: #fff;
}

#background {
    background: url("http://www.hifreevideos.com/images/preview/Explore-Crown-Wallpapers,-Backgrounds-Wallpapers,-142426.jpg") repeat;
    width: 100%;
    left: 0;
    height: 7px;
    z-index: 0;
}

.whole {
    max-width: 1080px;
    margin: 0 auto;
}

.content {
    position: relative;
    max-width: 640px;
    padding: 2px;
    margin: 0 auto;
}


#holder{
    max-width: 147px;
    height: auto;
    padding: 5px;
    margin-left: 15px;
    font-size: 12px;
    top: 150px;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
    position: fixed;
}

.label{
    letter-spacing: 1px;
    padding: 5px;
    margin-left: -0.5px;
    color: #999;
    cursor: crosshair;
    text-align: left;
    font-size: 14px;
}


.inside{
    font-family: 'Open Sans', sans-serif;
    margin-left: 5px;
    font-size: 11px;
    display:none;
    color: #999;
    line-height: 21px;
    text-align: left;

}


.inside a{
    color: #999;
    letter-spacing: 1px;
    text-decoration: underline;
}
.inside a:hover{
    color: #99d3df;
}


h1 {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 300;
    font-size: 65px;
    text-transform: uppercase;
    margin-bottom: 16px;
    width: 540px;
    color: #666;
    border-bottom: 1px solid #888;
}

h2 {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
    text-transform: none;
    font-weight: 300;
    font-size: 28px;
    color: #6c648b;
}

h3 {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
    text-transform: none;
    font-weight: 300;
    font-size: 28px;
    color: #b6a19e;
}

a:link, a:visited {
    color: #99d3df;
    text-decoration: none;
}
a:hover {
    color: #99d3df;
    text-decoration: underline;
}

img {
   border: 3px solid #6bbaa7;
   margin: 5px;
   float: right;
}


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

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

body::-webkit-scrollbar-thumb {
  background-color: #b6a19e;
}

</style>
</head>

<body>

<div class="title">
serenity
<div id="background"></div>
</div>

<div class="whole">

<div id="holder">
<p class="label">links</p>
<div class="inside">
<a href="#">home</a><br>
<a href="#">about</a><br>
<a href="http://monicagalaxy.info/">credit</a><br>
</div>

<p class="label">updates</p>
<div class="inside">
Enim dissentias ad est, laudem omnesque an sed. Ex nec porro appareat, ad has consul suscipit, an eligendi phaedrum eam<br>
</div>

<p class="label">website</p>
<div class="inside">
Enim dissentias ad est, laudem omnesque an sed. Ex nec porro appareat, ad has consul suscipit, an eligendi phaedrum eam<br>
</div>
</div>


<div class="content">
<h2>second header</h2>
<p>
<img src="http://www.hifreevideos.com/images/preview/Explore-Crown-Wallpapers,-Backgrounds-Wallpapers,-142426.jpg" width="170" height="125">
Enim dissentias ad est, laudem omnesque an sed. Ex nec porro appareat, ad has consul suscipit, an eligendi phaedrum eam. Falli vivendum scripserit cu vel. Et quot similique vix, vix cu aeque dolore nostro, dicunt nonumes vis id.

Quod indoctum evertitur quo in. His nibh solet consul cu, ad quando definitiones quo. Quo ne graece oblique. Quot iudico regione no nec, vis eu molestiae voluptatum. Id sit dolor mediocrem interpretaris. At velit facilisi persequeris nam.

Enim dissentias ad est, laudem omnesque an sed. Ex nec porro appareat, ad has consul suscipit, an eligendi phaedrum eam. Falli vivendum scripserit cu vel. Et quot similique vix, vix cu aeque dolore nostro, dicunt nonumes vis id.</p>

<p>Enim dissentias ad est, laudem omnesque an sed. Ex nec porro appareat, ad has consul suscipit, an eligendi phaedrum eam. Falli vivendum scripserit cu vel. Et quot similique vix, vix cu aeque dolore nostro, dicunt nonumes vis id.

Quod indoctum evertitur quo in. His nibh solet consul cu, ad quando definitiones quo. Quo ne graece oblique. Quot iudico regione no nec, vis eu molestiae voluptatum. Id sit dolor mediocrem interpretaris. At velit facilisi persequeris nam.

Enim dissentias ad est, laudem omnesque an sed. Ex nec porro appareat, ad has consul suscipit, an eligendi phaedrum eam. Falli vivendum scripserit cu vel. Et quot similique vix, vix cu aeque dolore nostro, dicunt nonumes vis id.</p>

<h3>third header</h3>
<p>Enim dissentias ad est, laudem omnesque an sed. Ex nec porro appareat, ad has consul suscipit, an eligendi phaedrum eam. Falli vivendum scripserit cu vel. Et quot similique vix, vix cu aeque dolore nostro, dicunt nonumes vis id.

Quod indoctum evertitur quo in. His nibh solet consul cu, ad quando definitiones quo. Quo ne graece oblique. Quot iudico regione no nec, vis eu molestiae voluptatum. Id sit dolor mediocrem interpretaris. At velit facilisi persequeris nam.

Enim dissentias ad est, laudem omnesque an sed. Ex nec porro appareat, ad has consul suscipit, an eligendi phaedrum eam. Falli vivendum scripserit cu vel. Et quot similique vix, vix cu aeque dolore nostro, dicunt nonumes vis id.</p>
</div>

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