verses page for Jelly


<html>
<head>


<link rel="shortcut icon" href="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/globe.png" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<title>Verse</title>


 </head>

<!-- from here on, you creat class and id DIV's; class looks like: .something id's being #something, you use here to stylize how your theme looks, what color, backgrounds, borders, fonts, texts, padding, margins all of that cool stuff -->

 </style>

<link href='https://fonts.googleapis.com/css?family=Anton|Pacifico|Vollkorn' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Jura:600|Poiret+One' rel='stylesheet' type='text/css'>

<style type="text/css">


::-webkit-scrollbar {width: 4px; height: 1px; background: #; }
::-webkit-scrollbar-thumb { background-color: #0F1C38; -webkit-border-radius: 1ex; }

#verse {
   width: 100%;
   height:200px;  /* i restricted the height of each section just so it would match up with the icons, it will scroll automatically if your text is longer - but you don’t have to include this bit if you don’t want to */
   background-color: transparent;
   border-bottom:solid 1px #0F1C38;  /* an optional bit of styling which you can alter or remove as preferred */
   padding-bottom:5px;
   margin-bottom:10px;
   overflow:auto;}

#rel img {
   float:left;  /* you can change this to right if you prefer your image on the other side */
   margin:8px;
   border:5px solid #0F1C38; /* icon border color */
   width:80px;
   height:80px;
   padding:5px;
   -webkit-transition:all 0.3s ease-out;
   -moz-transition:all 0.3s ease-out;
   transition:all 0.3s ease-out;}

/* the section below is completely optional, but it’s just an additional style option for an effect when you hover over an image */

#rel:hover img {
   border:5px solid #6880CA; /* icon border hover color */
   -webkit-transition:all 0.3s ease-out;
   -moz-transition:all 0.3s ease-out;
   transition:all 0.3s ease-out;}

body {
    background:#1B3F8B;
    margin:0px;
    color:#1a1b2d;
    font-family: 'Vollkorn', serif;
    font-size:15px;
    line-height:120%;
    background-image:url("");
    background-attachment: fixed;
    background-image:stretch;
    background-repeat: no-repeat;
    background-image:cover;
    background-position:left top;
}


a {
    text-decoration:none;
    -moz-outline-style:none;
    font-family: 'Vollkorn', serif;
    color:#27408B;
    font-weight:bold;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease
}

a:hover {
    opacity:1;
    color:#6880CA;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease
}

b, strong {
  font-size:20px;
  font-weight:bold;
  color:#0F1C38;
  font-family: 'Jura', sans-serif;
}

i, em {
color:#6880CA;
text-shadow:2px 2px 2px #0D1B45;
font-family: 'Poiret One', cursive;
font-size:20px;
}

h2 {
    font-size:25px;
    color:#27408B;
    text-shadow:2px 2px 2px #000;
    font-family: 'Anton', sans-serif;
}

/*BLOCKQUOTE*/
blockquote {
border-radius:25px;
width: 400px;
font-size:11px;
text-transform: normal;
line-height:10px;
margin-left:0px;
padding: 4px;
padding-left:12px;
border-left: 1px solid #0F1C38;
color: {color:text};
}


/* links */

#links {
margin-top:70px;
margin-left:700px;
font-family: 'IM Fell English SC', cursive;
text-transform: uppercase;
text-align:left;
font-weight:lighter;
color:#0F1C38;
}

#links a {
padding:3px;
font-size:9px;
letter-spacing:2px;
margin-right:8px;
color:#0F1C38;
}

#links a:hover {
color:#fff;
}


div.button a{
text-align: center;
margin:2px;
padding:3px 0px;
color:#0F1C38;
background-color:{color:button};
margin-top:2px;
position:relative;
width: 196px;
display: inline-block;

}
div.button a:hover{
padding:3px 0;
color:transparent ;
background-color: #fff;


}


#entries {
width:500px;
height:500px;
padding:10px;
margin-left:400px;
margin-top:50px;
position:fixed;
overflow:auto;
background-color:#2A4D98;
border: 20px double #0F1C38;

}

#posts {
    width:500px;
}


#maker{
float:right;
position:fixed;
bottom:5px;
right:10px;
padding:7px;
font-size:8px;
text-align:center;
line-height:210%;
border: 2px dotted #0F1C38;
text-transform:uppercase;
}

#maker a{
padding:7px;
color:#0F1C38;
}

#maker a:hover{
color:#fff;
padding:7px;
background-color:{color:hover};
}

#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}

.c,.r{position:fixed;text-transform:lowercase;color:#5072af;letter-spacing:1px;font-size:22px;}
.r {top:30px;left:30px;}
.r i {margin-right:3px;font-size:10px;}


</style>


<!-- here is the credit -->
<div id="maker"><a href="http://oforigami.co.vu/">c.</a></div></center>


<div id="entries"><div id="posts">
<br>
<div style="background: transparent;padding: 5px; font-family: 'Vollkorn', serif; font-size: 50px; font-weight:bold; text-align:center; color:#27408b;} letter-spacing: 2px;text-shadow:2px 2px 2px #000;">
Verse</div><br><center><i>please be advised there may be triggers in this information</i></center><br>

<div id="verse">
<div id="rel">
<h2>title</h2>
<a href="/"><!– add the link here if you would like the icon to be a link –>

<!– add the url to the icon here –>
<img src="/" /></a></div>

<b>Age:</b> - <br>
<b>FC:</b> - <br>
info
<b>bold</b>
<i>italic</i>
<a href="/ask">link</a>
</div>

<!– finish copying and paste new section here –>

<div id="verse">
<div id="rel">
<h2>title</h2>
<a href="/"><!– add the link here if you would like the icon to be a link –>
<br>
<!– add the url to the icon here –>
<img src="/" /></a></div>

<b>Age:</b> - <br>
<b>FC:</b> - <br>
info
</div>

<!– finish copying and paste new section here –>

<div id="verse">
<div id="rel">
<h2>title</h2>
<a href="/"><!– add the link here if you would like the icon to be a link –>

<!– add the url to the icon here –>
<img src="/" /></a></div>

<b>Age:</b> - <br>
<b>FC:</b> - <br>
info
</div>

<!– finish copying and paste new section here –>

<div id="verse">
<div id="rel">
<h2>title</h2>
<a href="/"><!– add the link here if you would like the icon to be a link –>

<!– add the url to the icon here –>
<img src="/" /></a></div>

<b>Age:</b> - <br>
<b>FC:</b> - <br>
info
</div>

<!– finish copying and paste new section here –>

<div id="verse">
<div id="rel">
<h2>title</h2>
<a href="/"><!– add the link here if you would like the icon to be a link –>

<!– add the url to the icon here –>
<img src="/" /></a></div>

<b>Age:</b> - <br>
<b>FC:</b> - <br>
info
</div>

<!– finish copying and paste new section here –>


</div>
</div>
 <div style="background: transparent;padding: 5px; font-family: 'IM Fell English SC', cursive;; font-size: 50px; font-weight:bold; text-align:center; color:#0F1C38;} letter-spacing: 2px;">
<a class ="r" href="/"><i class="fa fa-angle-left"></i> return to blog</a></div>

</div>
</div>

</body>
</html>