MUSE PAGE N° 4: DUST AND GOLD

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

♡ 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 {
background: url('https://nsa39.casimages.com/img/2018/07/04/180704074430779008.png')  no-repeat center center fixed; /* change the background image here! */
background-color:#D8D8D8; /* change the background color here! */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-size:12px;
}


a {
font-size: 24px;
font-family: 'Great Vibes'; /* change the links font here! you have the choice between 'Quicksand', 'Yellowtail', 'Great Vibes', 'Homemade Apple' and 'Pinyon Script'*/
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: 'Pinyon Script'; /* 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:214px;
margin-right:auto;
width:70%;
text-align:center;
top:230px; }


.grid-item {
width:260px;
height: 365px;
padding:10px;
display:inline-block;
margin:5px;
background-image: url('https://i.pinimg.com/originals/a8/99/15/a89915d8f4357d68d258a9668b27a566.png');/* this is the portrait picture, you can change it if you want to but it might be complicated because you have to change all the dimensions afterwards, so unless you're familiar with coding, i don't recommend */
background-size: 260px;
background-repeat: no-repeat;
}


.grid-item img {
width:192px;
height:238px;
float:left;
display:inline-block;
margin-left:19px;
margin-top:63px;
padding:5px;
border-radius: 100%;
}


#ho:hover {
opacity: 0.9;
margin-top: 68px;
margin-left:24px;
border-radius: 100%;
}


#ho {
opacity: 0;
width:192px;
height:238px;
font-size:10px;
letter-spacing:2px;
background:#F2F2F2;
float:left;
border-radius: 100%;
margin-top: 68px;
margin-left: 24px;
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: #777777;
width:175px;
height:231px;
margin-top: 3px;
margin-left: 9px;
border-radius: 100%;
overflow: auto;
text-align:justify;
font-style:italic;
}


#quo p{
padding-top: 64px;
line-height: 20px;
text-align: center;
}


#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">The Portraits</div> <!-- page title -->


<div id="nav">
<!-- change your links here :) -->
<a href="/">Home</a>
•
<a href="/ask">Message</a>
•
<a href="http://scottpilgvrim.tumblr.com/">Credits</a>
•
<a href="/link">Link</a>

</div>
</div>


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


<div class="grid">


<!-- Muse box starts here -->
<div class="grid-item">
<img src="http://placehold.it/192x238"><!-- Yes, this image size is horrible BUT you don't need it to be exactly 192x238, just try to find larger pictures that seem to fit more or less -->
<div id="ho">
<div id="quo">
<!-- If the text isn't well centered, add some <br> here -->
<p><a href="/">Name</a><br>
“Beauty is terror. Whatever we call beautiful, we quiver before it.”</p></div><!-- Insert a quote or a small description here, you can actually make it as long as you wish but it won't be very pretty? -->
</div></div>
<!-- Muse box ends here -->


<!-- Muse box starts here -->
<div class="grid-item">
<img src="http://placehold.it/192x238">
<div id="ho">
<div id="quo">
<!-- If the text isn't well centered, add some <br> here -->
<p><a href="/">Name</a><br>
“Beauty is terror. Whatever we call beautiful, we quiver before it.”</p></div>
</div></div>
<!-- Muse box ends here -->


<!-- Muse box starts here -->
<div class="grid-item">
<img src="http://placehold.it/192x238">
<div id="ho">
<div id="quo">
<!-- If the text isn't well centered, add some <br> here -->
<p><a href="/">Name</a><br>
“Beauty is terror. Whatever we call beautiful, we quiver before it.”</p></div>
</div></div>
<!-- Muse box ends here -->

<br>

<!-- Muse box starts here -->
<div class="grid-item">
<img src="http://placehold.it/192x238">
<div id="ho">
<div id="quo">
<!-- If the text isn't well centered, add some <br> here -->
<p><a href="/">Name</a><br>
“Beauty is terror. Whatever we call beautiful, we quiver before it.”</p></div>
</div></div>
<!-- Muse box ends here -->


<!-- Muse box starts here -->
<div class="grid-item">
<img src="http://placehold.it/192x238">
<div id="ho">
<div id="quo">
<!-- If the text isn't well centered, add some <br> here -->
<p><a href="/">Name</a><br>
“Beauty is terror. Whatever we call beautiful, we quiver before it.”</p></div>
</div></div>
<!-- Muse box ends here -->

<br>

<!-- Muse box starts here -->
<div class="grid-item">
<img src="http://placehold.it/192x238">
<div id="ho">
<div id="quo">
<!-- If the text isn't well centered, add some <br> here -->
<p><a href="/">Name</a><br>
“Beauty is terror. Whatever we call beautiful, we quiver before it.”</p></div>
</div></div>
<!-- Muse box ends here -->


<!-- Muse box starts here -->
<div class="grid-item">
<img src="http://placehold.it/192x238">
<div id="ho">
<div id="quo">
<!-- If the text isn't well centered, add some <br> here -->
<p><a href="/">Name</a><br>
“Beauty is terror. Whatever we call beautiful, we quiver before it.”</p></div>
</div></div>
<!-- Muse box ends here -->


<!-- Muse box starts here -->
<div class="grid-item">
<img src="http://placehold.it/192x238">
<div id="ho">
<div id="quo">
<!-- If the text isn't well centered, add some <br> here -->
<p><a href="/">Name</a><br>
“Beauty is terror. Whatever we call beautiful, we quiver before it.”</p></div>
</div></div>
<!-- Muse box ends here -->


<br>


</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">S.</a></p>
</a></div>

</body>