eunoia

<!--
____________________________________________________________________________

                        eunoia
                        a wip masterpage
                        by wyvernlynch
                        https://writingsbywyvern.tumblr.com
                        please don't remove the credit
                        thank you

____________________________________________________________________________
-->

<!DOCTYPE html>
<html>
<head>

<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,600,700" rel="stylesheet">

<!-- tab title -->
<title>eunoia</title>

<style>

/* S C R O L L B A R */
::-webkit-scrollbar {
    width: 3px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    border:1px solid white;
    background-color: #ddd; /* scrollbar color */
}

/* B O D Y */
body {
    font:10px/1.7 'work sans', sans-serif; /* main font */
    color: #9c9c9c; /*font color*/
    background-color: #fff; /* background color */
    line-height:14px;
    cursor:url('https://66.media.tumblr.com/51aa4b0cb73356472f4336df13b2fc6b/tumblr_inline_p7nrx1388N1r1shc4_540.png'), progress !important; /* tiny cursor - delete this part if you don't want a tiny cursor */
}

b {
    font-weight: 400;
    color:#000; /* bold font color */
    padding:1px;
    background-color: #d79983; /* hightlight color */
}
strong {
    font-weight:600;
    color:#000; /* font color */
    background-color:none;
}

i {
    font-style: italic;
}

a {
    text-decoration: none;
    transition:.8s;
	cursor:url('https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_p7nrx1hoRW1r1shc4_540.png'), progress !important; /* tiny cursor - delete this part if you don't want a tiny cursor */
}

h1 {
    font-size:20px; /* title font size */
    letter-spacing:2px;
    font-weight:300;
    /* to change the font color, copy:
    color:(color);
    */
}
h2 {
    font-size:15px; /* box title font size */
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:300;
    z-index:1;
}

/* H E A D E R */
#header {
    width:100%;
    text-align:center;
    margin-top:-20px;
    height:170px;
}
.head {
    padding-top:70px;
    text-transform:uppercase;
    font-weight:300;
}
.head a {
    color:#000; /* navigation links color */
    margin:3px 5px;
}

.head a:hover {
    color:#d79983; /* navigation links color hover */
}


/* B O X    C O L U M N */
#cont {
    display: grid;
    grid-gap:50px; /* space between column */
    grid-template-columns:auto auto auto; /*number of column*/
    margin:100px auto;
    width:70%;
}

/* B O X */
.box {
  background-color: #fff; /* box background color */
  height:310px; /* box height */
  width:270px; /* box width */
  text-align:center;
  border:1px #eee solid; /* box border, to change color delete '#eee' and change it to the color you want */
}

/* B O X    I M A G E */
.boximg  {
    width:250px; /* box image width */
    height:250px; /* box image height */
    padding:10px 10px 0 10px;
    position:relative;
    z-index:1;
    transition:.8s;
}

/* B O X    D E S C R I P T I O N */
.cover {
    background-color: rgba(255,255,255,0.8); /* box description background */
    height:0;
    width:270px; /* box description width, make sure this is the same as the box width */
    z-index:100;
    transition:.8s;
    position:relative;
    overflow-y:auto;
}
.cover-text {
    color:#7e7e7e; /* box description text */
    max-width:250px; /* box description max width */
    text-align:justify; /* text alignment */
    opacity:0;
    padding:5px;
    transition:.8s;
}
.cover-text a {box-shadow:inset 0 -5px 0 #e5c0b3;color:#000;} /* box desc kink - to change color delete '#e5c0b3' and change it with the color you want */
.cover-text a:hover {background-color:#e5c0b3 /* make sure this is the same as cover-text a color */;color:#000;}

.box:hover .boximg {opacity:.6;}
.box:hover .cover-text {opacity:1;transition-delay:.5s;}
.box:hover h2 {opacity:0;transition:.8s;}
.box:hover .cover {margin-top:-303px;height:303px;} /* adjust this to how ever you want. this is how high the description will slide. to adjust, copy:
margin-top:-(number)px;height:(number)px
make sure the (number) are the same
*/

/* C R E D I T */
/* please don't remove this */
.credit {
    bottom:10px;
    right:10px;
    float:right;
    position:fixed;
    text-align:right;
    transition:.8s;
}
.credit a {font-size:7px; color:#000;}
.credit a:hover {color:#888;}


</style>

<body>

<!-- header -->
    <div id="header">
        <div class="head">
            <h1>works in progress masterpage</h1> <!-- title -->
            <!-- navigation -->
            <a href="link one">link one</a> •
            <a href="link two">link two</a> •
            <a href="link three">link three</a>
        </div>
    </div>
        <div id="cont">


<!-- TO AD MORE BOXES, COPY THIS:

<div class="box">
<img src="image url" class="boximg">

<h2>Title</h2>

<div class="cover">
<div class="cover-text">
<b>genre:</b> fantasy <br>
<b>status:</b> on progress <br>
<p><b>bold</b> <i>italic</i> <strong>strong</strong> <a href="link">link</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="link url">read more</a>
</div></div></div>

END -->

<!-- box one -->
<div class="box">
<!-- box one image -->
<img src="image url" class="boximg">

<h2>Title</h2> <!-- box one title -->

<div class="cover">
<div class="cover-text">
<!-- description -->
<b>genre:</b> fantasy <br>
<b>status:</b> on progress <br>
<p><b>bold</b> <i>italic</i> <strong>strong</strong> <a href="link">link</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- links -->
<a href="link url">read more</a>
</div></div></div>
<!-- end box one -->


<!-- boxtwoe -->
<div class="box">
<!-- box two image -->
<img src="image url" class="boximg">

<h2>Title</h2> <!-- box two title -->

<div class="cover">
<div class="cover-text">
<!-- description -->
<b>genre:</b> fantasy <br>
<b>status:</b> on progress <br>
<p><b>bold</b> <i>italic</i> <strong>strong</strong> <a href="link">link</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- links -->
<a href="link url">read more</a>
</div></div></div>
<!-- end box two -->

<!-- box three -->
<div class="box">
<!-- box three image -->
<img src="image url" class="boximg">

<h2>Title</h2> <!-- box three title -->

<div class="cover">
<div class="cover-text">
<!-- description -->
<b>genre:</b> fantasy <br>
<b>status:</b> on progress <br>
<p><b>bold</b> <i>italic</i> <strong>strong</strong> <a href="link">link</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- links -->
<a href="link url">read more</a>
</div></div></div>
<!-- end box three -->


<!-- box four -->
<div class="box">
<!-- box four image -->
<img src="image url" class="boximg">

<h2>Title</h2> <!-- box four title -->

<div class="cover">
<div class="cover-text">
<!-- description -->
<b>genre:</b> fantasy <br>
<b>status:</b> on progress <br>
<p><b>bold</b> <i>italic</i> <strong>strong</strong> <a href="link">link</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- links -->
<a href="link url">read more</a>
</div></div></div>
<!-- end box four -->


</div>


<!-- credit. please do not remove -->

<div class="credit"><a href="https://themesbywyvern.tumblr.com">@wyvernlynch</a></div>
</body>

</head>
</html>