Spring break

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

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

Coded by Monica T.
http://monicagalaxy.info/
Theme: "Spring Break"
Updated: February 25, 2017
DO NOT REMOVE CREDITS
Notes: Spring break has started! In honour of that, here's a design - "Spring Break".

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

-->
<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('medium');
});
});
</script>

<meta charset="UFT-8">

<title>Spring Break 2017</title>
<link href="https://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet">

<style type="text/css">

html {
    background-color: #fff;
    cursor: crosshair;
}

body {
    margin: 8em 0 auto;
    text-align: left;
    font-size: 12px;
    line-height: 22px;
    color: #2b2b2b;
    font-family: 'arial';
    cursor: crosshair;
}

.content {
    position: relative;
    background-image: url('http://i.imgur.com/FUm69UM.png');
    margin-left: 360px;
    width: 640px;
    padding: 16px;
    margin-top: 20px;
    border-top: 1px solid #121212;
}

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

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

body::-webkit-scrollbar-thumb {
  background-color: #54badf;
  outline: 1px solid #121212;
}


h1 {
    font-family: 'Vollkorn', serif;
    text-align: left;
    margin-top: -43px;
    font-weight: normal;
    font-size: 41px;
    color: #121212;
}

h2 {
    font-family: 'Archivo Narrow', sans-serif;
    text-align: left;
    margin-top: -43px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 24px;
    color: #2b2b2b;
}

h3 {
    font-family: 'Archivo Narrow', sans-serif;
    text-align: left;
    margin-top: -43px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 21px;
    color: #2b2b2b;
}

h4 {
    font-family: 'Archivo Narrow', sans-serif;
    margin-top: -43px;
    text-transform: none;
    font-weight: bold;
    font-size: 21px;
    color: #2b2b2b;
    text-align: right;
    margin-top: -28px;
    text-transform: uppercase;
}


a:link, a:visited {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #666;
    text-decoration: none;
}


#holder {
    position: fixed;
    width: 175px;
    padding: 5px;
    font-size: 10px;
    top: 145px;
    margin-left: 42px;
    font-family: arial;
    text-align: left;
    background-image: url('http://i.imgur.com/FUm69UM.png');
}

.label{
    font-family: 'Vollkorn', serif;
    background: transparent;
    font-size: 15px;
    font-weight: bold;
    padding: 3px;
    cursor: crosshair;
    line-height: 14px;
    text-align: right;
}

.inside{
    padding: 5px;
    font-size: 12px;
    cursor: crosshair;
}

.inside a{
    display: block;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: underline;
    font-style: italic;
    font: 13px 'Vollkorn', serif;
    color: #121212;
    padding: 1px;
    text-align: right;
    text-transform: none;
    text-decoration: none;
}

.inside a:hover{
    text-decoration: underline;
}

.image {
    position: fixed;
    top: 0px;
    margin-right: 830px;
    height: 100%;
    width: 280px;
    background-image: url('https://s-media-cache-ak0.pinimg.com/originals/b9/ec/af/b9ecaf8c755e1d7858db9758baf7a003.jpg');
}

img {
    border: 8px solid #fdfdfd;
    float: right;
    margin-right: 4px;
}

i {
    color: #54badf;
}

u {

    color: #b17123;
}


blockquote {
    background-color: #fdfdfd;
    padding: 10px;
    margin-left: 0px;

}

</style>
</head>
<body>
<div class="image"></div>

<div id="holder">
<h4>sidebar</h4>
<p class="label">Links</p>
<div class="inside">
<a href="#" class="nav">home</a>
<a href="#" class="nav">one</a>
<a href="#" class="nav">two</a>
<br>
</div>

<p class="label">About</p>
<div class="inside">
 Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne.
</div>

<p class="label">Site</p>
<div class="inside">
 Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne.
</div>
</div>


<div class="content">
<h1>it's <b>spring break</b> </h1>
<blockquote><a href="/">link</a> <b>bold</b> <i>italics</i> <u>underline</u> <s>strike through</s></blockquote>

Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne. Fabulas habemus vivendum vix ei. Ad duo erat primis. Quo vero dicta cetero id, ut pri electram dissentiet.
</div><br>


<div class="content">
<h2>this is header two</h2>
<img src="http://imgur.com/AbYbfaN.jpg" height="210" width="218">
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. 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.
<br>

</div><br>


<div class="content">
<h3>this is header three</h3>
Nullam nonumes ex duo, graeci probatus accommodare cu eos. Ea vis appareat consetetur, brute omnium sadipscing an quo. Atqui augue his id, semper feugait ei ius. Cu eum augue harum omnes, ei nam alia nemore dissentiet. Atqui accusata persequeris ad has, quo at dolorem fierent offendit.
</div><br>
<br>

</body>
</html>