MUSE PAGE N° 1: A CHANGE OF HEART

<!------------------------------------------------------------------------
<!------------------------------------------------------------------------

♡ made by http://cassiopeis.tumblr.com/ ♡

— Hey ! Thanks for using this page theme. You may edit it, change it, eat it, do whatever you want with it as long as you DON'T DELETE THE CREDITS.

— If you have a question or something goes wrong, please message me privately (or shoot me an ask, your pick).


-------------------------------------------------------------------------->


<!DOCTYPE html>

<head>


<title>{Title}</title>
<link rel="shortcut icon" href={Favicon}>


<link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />

 <link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>

 <link href="https://fonts.googleapis.com/css?family=Yellowtail" rel="stylesheet">

 <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">

 <link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">

 <link href="https://fonts.googleapis.com/css?family=Pinyon+Script" rel="stylesheet">


<style>


body {
    font-size:12px;
    background-color:#D8D8D8; /* change the background color here! */
    }


a {
    font-size: 17px;
    font-family: 'Yellowtail'; /* change the links font here! */
    color: #444444; /* change the links color here! */
    text-decoration: none;
    -o-transition-duration: 3s;
    -webkit-transition-duration: 3s;
    -moz-transition-duration: 3s;
    }


a:hover {
    color: #BBBBBB; /* change the links color on hover here! */
    text-decoration:none;
    cursor:pointer;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    text-decoration:none;
    text-shadow:1px 1px 10px white;
    }


#containertitle {
text-align: center;
position: absolute;
background-color: none;
height: 200px;
top: 0px;
left: 28%;
width: 630px;
}


#containertitle img{
position: absolute;
left: 7%;
width: 540px; /* if you ever want to change the divider image, you can set it's width and height here */
height: 140px;
top: 90px;
}


 #title {
     font-family: 'Great Vibes'; /* change the title's font here! you have the choice between 'Quicksand', 'Yellowtail', 'Great Vibes', 'Homemade Apple' and 'Pinyon Script'*/
     position: absolute;
     top: 30px;
     font-size: 50px;
     text-shadow: 2px 2px 3px #5C5C5C;
     color: black;
     width: 630px;
     text-align: center;
     }


#nav {
    width: 630px;
     font-family: Times;
     position: absolute;
     top: 100px;
     text-align: center;
     font-size: 12px;
     color: black;
     word-spacing: 17px;
     }


#nav a{
    font-family: Times;
    font-style: italic;
    font-size: 13px;
}


.grid {
    position: absolute;
    margin-left:238px;
    margin-right:auto;
    width:70%;
    text-align:left;
    top:230px; }


.grid-item {
    width:210px;
    padding:10px;
    height:250px;
    display:inline-block;
    margin:5px;
    }


.grid-item img {
    width:200px;
    height:200px;
    float:left;
    display:inline-block;
    margin-right:5px;
    margin-left:0px;
    margin-top:10px;
    padding:5px;
    border:1px solid #B5B5B5;
    }


h1 {
    font-size:12px;
    font-family:'Quicksand';
    text-transform:uppercase;
    text-align:center;
    background:#eee;
    padding:5px;
    }


#name {
    float:right;
    width:210px;
    margin-left:10px;
    color:black;
    padding:0px;
    font-size:15px;
    text-align:center;
    }


#name:hover {
    color:black;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    }


#ho:hover { opacity: 0.9;
    margin-top: -206px;
    margin-left:6px;
   }


#ho { opacity: 0;
    width:200px;
    height:200px;
    font-size:10px;
    letter-spacing:2px;
    background:#F2F2F2;
    float:left;
    margin-top: -206px;
    margin-left: 6px;
    font-size: 10px;
    -webkit-transition: all 1.3s ease;
    -moz-transition: all 1.3s ease;
    -o-transition: all 1.3s ease;}


#quo {float:left;
    position:static;
    font-family: Times;
    font-size: 11px;
    color: black;
    width:170px;
    height:170px;
    margin-top: 15px;
    margin-left: 15px;
    overflow: auto;
    text-align:justify;
    font-style:italic;
    }


#credit a {
position: fixed;
text-align: center;
padding:2px;
right:20px;
font-size: 13px;
bottom:20px;
color: #b7b7b7;
font-family: Helvetica;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    }


#credit a:hover{
position: fixed;
text-align: center;
right:20px;
bottom:20px;
font-style: italic;
color: #b6b6b6;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    }


</style></head>

<div id="containertitle">
<img  src=" http://midnightsocietytales.com/wp-content/uploads/2014/02/Divider-1.png" /></p><!-- this is the divider image, you can change it if you want to but don't forget to set the size too!-->


<div id="title">Muses</div> <!-- page title -->


<div id="nav">
<!-- change your links here :) -->
<a href="/">home</a>
•
<a href="/ask">message</a>
•
<a href="/link">link</a>
•
<a href="/link">link</a>

</div>
</div>


<!------------------------------!! MUSES !!-------------------------------->


<div class="grid">


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div><!-- Muse name -->
<img src="http://placehold.it/200x200"><!-- Image, any size as long as it's square will do -->
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div><!-- Description -->
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- Muse starts here -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here! you can make it as long as you like.</div>
</div></div>
<!-- Muse ends here -->


<!-- To add more muses, copy from HERE ..... -->
<div class="grid-item">
<div id="name"><a href="/">Name</a></div>
<img src="http://placehold.it/200x200">
<div id="ho">
<div id="quo">
Write your description here, you can make it as long as you like.</div>
</div></div>
<!-- .... TO HERE -->


</div>

<!--- The is the credit. Don't. Touch. This. Part. If you delete or edit it so that it isn't visible anymore, I swear I will find you and destroy you. Enjoy the theme otherwise ♡ --->
<div id="credit">
<p><a href="http://cassiopeis.tumblr.com" title="made by @cassiopeis">C.</a></p>
</a></div>

</body>