<!Please do not claim as your own.
Feel Free to Edit as you please.>
<head>
<title>Verse Page</title>
<style>
/*--Body--*/
body{
background-color: #eee;
background-image: url('http://imageshack.com/a/img15/2814/hkf0.png');
}
/*--Big Title--*/
#logo h1{
font-family:'Bebas Neue', "Times New Roman", Times, serif;
font-size:50px;
text-align:center;
color: #529ecc;
margin:0;
padding:30px 0 0 0;
}
/*--Subtitle--*/
#logo h2{
font-family: 'Bebas Neue', Georgia, "Times New Roman", Times, serif;
font-size:20px;
font-weight:normal;
text-align:center;
color: #8e8e8e;
margin:0px 0 0 0;
padding:0;
}
/*--Menu--*/
.circlemenu{
width: 100%;
overflow:hidden;
background-color:#97c5e0;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.circlemenu ul{
margin: 0;
padding: 0;
font: bold 12px 'PT Sans Narrow';
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.circlemenu li{
display: inline;
margin: 0;
}
.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#97c5e0;
margin: 0;
margin-right:0px; /*right spacing between each link */
width:100px;
height:40px;
}
.circlemenu a span{
position:relative;
top:30%;
}
.circlemenu li a:visited{
color: white;
}
.circlemenu a:hover{
background: #bad8eb;
}
/*--Accordion--*/
.ac-container{
width: 400px;
margin: 10px auto 30px auto;
background: rgba(255, 255, 255, 0.5);
}
.ac-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(../images/arrow_down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after{
background-image: url(../images/arrow_up.png);
}
.ac-container input{
display: none;
}
.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
transition:
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container article p{
font-style: italic;
color: #777;
line-height: 20px;
font-size: 14px;
padding-left: 20px;
padding-right: 20px;
padding-top:0px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article.ac-small{
height: 250px;
overflow: auto;
}
.ac-container input:checked ~ article.ac-medium{
height: 300px;
overflow: auto;
}
.ac-container input:checked ~ article.ac-large{
height: 350px;
overflow: auto;
}
/*---Text Styles---*/
h1{
color:#000;
font-family:Times New Roman;
font-size:12px;
font-weight:lighter;
letter-spacing:3px;
font-style:italic;
border-bottom: 1px solid #ccc;
}
h2{
color:#000;
font-family:Times New Roman;
font-size:26px;
font-weight:lighter;
letter-spacing:3px;
font-style:italic;
}
a:link, a:active, a:visited {
color: #529ecc;
text-decoration:none;
}
a:hover {
color: #97c5e0;
text-decoration: none;
}
</style>
<body>
<!--Titles-->
<div id="logo"><h1>;; Verses ;;<br>
</div>
<!--Menu-->
<div class="circlemenu">
<ul>
<li><a href="/"><span>Home</span></a></li>
<li><a href="/ask"><span>Ask</span></a></li>
<li><a href="/"><span>Link 1</span></a></li>
<li><a href="/"><span>Link 2</span></a></li>
<li><a href="/"><span>Link 3</span></a></li>
<li><a href="/"><span>Link 4</span></a></li>
<li><a href="http://honhdesigns.tumblr.com"><span>Credit</span></a></li>
</ul>
</div>
<!--Name your Verse - Start here for each verse-->
<p>
<div id="logo"><h2>Verse Title</h2></div>
<!--Star of Accordion-->
<section class="ac-container">
<!--Start of Character-->
<!--Make sure that when added new verses, change the input id from ac-1 to ac-#ofverse. I.e, change from ac-1 to ac-2-->
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">Character</label>
<article class="ac-small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus nisl ac tincidunt dapibus. Nunc nec libero erat. Duis commodo egestas lacus, eu pulvinar tellus gravida et. Nam ut mauris mi. Donec finibus velit egestas nisi porta, ut elementum velit efficitur. Nullam ultricies egestas odio. Curabitur blandit tempus porttitor. Nam sed dui vel metus vulputate suscipit. Duis tellus erat, fringilla ac ex a, facilisis consequat diam. Integer sed tellus non justo consequat accumsan ac sit amet sapien. Phasellus massa eros, convallis vel leo sed, interdum commodo tellus.</p>
</article>
</div>
<!--End of Character-->
<!--Start of Character-->
<!--Make sure that when added new verses, change the input id from ac-1 to ac-#ofverse. I.e, change from ac-1 to ac-2-->
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">Character</label>
<article class="ac-small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus nisl ac tincidunt dapibus. Nunc nec libero erat. Duis commodo egestas lacus, eu pulvinar tellus gravida et. Nam ut mauris mi. Donec finibus velit egestas nisi porta, ut elementum velit efficitur. Nullam ultricies egestas odio. Curabitur blandit tempus porttitor. Nam sed dui vel metus vulputate suscipit. Duis tellus erat, fringilla ac ex a, facilisis consequat diam. Integer sed tellus non justo consequat accumsan ac sit amet sapien. Phasellus massa eros, convallis vel leo sed, interdum commodo tellus.</p>
</article>
</div>
<!--End of Character-->
</div>
</section>
<!--End of Verse-->
<!--Name your Verse - Start here for each verse-->
<p>
<div id="logo"><h2>Verse Title</h2></div>
<!--Star of Accordion-->
<section class="ac-container">
<!--Start of Character-->
<!--Make sure that when added new verses, change the input id from ac-1 to ac-#ofverse. I.e, change from ac-1 to ac-2-->
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">Character</label>
<article class="ac-small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus nisl ac tincidunt dapibus. Nunc nec libero erat. Duis commodo egestas lacus, eu pulvinar tellus gravida et. Nam ut mauris mi. Donec finibus velit egestas nisi porta, ut elementum velit efficitur. Nullam ultricies egestas odio. Curabitur blandit tempus porttitor. Nam sed dui vel metus vulputate suscipit. Duis tellus erat, fringilla ac ex a, facilisis consequat diam. Integer sed tellus non justo consequat accumsan ac sit amet sapien. Phasellus massa eros, convallis vel leo sed, interdum commodo tellus.</p>
</article>
</div>
<!--End of Character-->
<!--Start of Character-->
<!--Make sure that when added new verses, change the input id from ac-1 to ac-#ofverse. I.e, change from ac-1 to ac-2-->
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">Character</label>
<article class="ac-small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus nisl ac tincidunt dapibus. Nunc nec libero erat. Duis commodo egestas lacus, eu pulvinar tellus gravida et. Nam ut mauris mi. Donec finibus velit egestas nisi porta, ut elementum velit efficitur. Nullam ultricies egestas odio. Curabitur blandit tempus porttitor. Nam sed dui vel metus vulputate suscipit. Duis tellus erat, fringilla ac ex a, facilisis consequat diam. Integer sed tellus non justo consequat accumsan ac sit amet sapien. Phasellus massa eros, convallis vel leo sed, interdum commodo tellus.</p>
</article>
</div>
<!--End of Character-->
</div>
</section>
<!--End of Verse-->
</body>
