midnight - page

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

                        midnight
                        by @atlasthemes
                        pls do not remove credit
                        thanks!<3

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

<!DOCTYPE html>
<head>
<link rel="shortcut icon" href="{Favicon}">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

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


<title>a work in progress</title><!-- title for browser tab -->

<style>

@-webkit-keyframes fadein {
        0%   {opacity: 0;}
        100% { opacity: 1; }}

@-moz-keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }}

@keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }}

::-webkit-scrollbar {width:11px;height:11px;}
::-webkit-scrollbar {background-color:transparent;}
::-webkit-scrollbar-track {border:5px solid #fafafa;background-color:#ddd;}
::-webkit-scrollbar-thumb {border:5px solid #fafafa;background-color:#aaa;min-height:24px;min-width:24px;}

body {
    font-family: 'Open Sans', sans-serif; /* main font */
    font-size: 10px;
    letter-spacing:0.3px;
    color: #444; /* text color */
    background-color: #fafafa; /* background color */
    cursor: default;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    -webkit-animation: fadein 1s;
    -moz-animation:fadein 1s;
    animation:fadein 1s;
}

b {
    font-weight: 700;
    color: #aaa; /* bold color */
}

i {
    font-style: italic;
    color: #bbb; /* italic color */
    letter-spacing: 0.5px;
}

a {
    color: #aaa; /* link color */
    text-decoration: none;
    font-style: italic;
    cursor: default;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a:hover {
    color: #000; /* link hover color */
}

.header, .header img {width: 500px; height: auto;}
h1 {font-size: 10px;letter-spacing: 1px;font-weight: 700;margin:25px 0px 10px 0px;text-transform: uppercase;}
h2 {font-size: 12px;font-weight: 700;letter-spacing: 1px;word-spacing: 3px;margin-top: 5px;}
h3 {font-size: 14px;font-weight: 700;font-style: italic;letter-spacing: 1px;word-spacing: 3px;padding-top: 10px;text-align: center;}
.lnr {font-size: 12px;margin-right: 5px;}
.details-columns {display: grid;grid-template-columns: auto auto;margin-left: 5px;}
.wip-container {margin: auto;margin-top: 25px;width: 500px;height: auto;padding: 15px;background-color: #fff;margin-bottom:50px;border-radius:5px;box-shadow:2px 2px 7px #ddd;}
.title-area {width: 500px;height: 40px;margin: auto;color: #444;text-align: center;border-bottom: 1px solid #eee;padding-bottom: 15px;}
.title-area a {padding-right: 3px;padding-left: 3px;cursor: default;}
.character {width: 50px;height: 50px;margin-right: 5px;margin-bottom: 5px;float: left;}
.character img {width: 50px;height: 50px;margin-right: 5px;margin-bottom: 5px;float: left;}
.link-columns {display: grid;grid-template-columns: auto auto auto;padding-left: 15px;}
</style></head>
<body>

<div class="wip-container">

<!--HEADING---------------------------------------------------------------->

<div class="title-area">
<a href="/">home</a> &sdot;
<a href="/ask">ask</a> &sdot;
<!-- PLEASE DON'T REMOVE THIS ONE THANKS ILY <3 -->
<a href="http://www.atlasthemes.tumblr.com" target="_blank">theme</a>

<h2>a work in progress</h2> <!-- title -->
</div>

<!--END HEADING------------------------------------------------------------>


<!-- header img is 575px wide - delete the following line if you don't want a header image -->
<div class="header"><img src="http://i67.tinypic.com/28upb94.jpg" /></div>


<h3>title one goes here</h3> <!-- this is your wip title -->

<!-- details - you can change these to fit your project just not anything too long or the spacing gets wonky -->

<h1><span class="lnr lnr-menu"></span> details</h1>
  <div class="details-columns">
    <div class="column"><b>GENRE &rsaquo;</b> ADULT</div>
    <div class="column"><b>STATUS &rsaquo;</b> FIRST DRAFT</div>
    <div class="column"><b>STARTED &rsaquo;</b> JAN 2019</div>
    <div class="column"><b>POV &rsaquo;</b> SINGLE POV</div>
    <div class="column"><b>WORDS &rsaquo;</b> 20K</div>
    <div class="column"><b>NARRATORS &rsaquo;</b> NAME</div>
</div>


<h1><span class="lnr lnr-pencil"></span> synopsis</h1> <!-- synopsis -->

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.


<!-- links - again, keep 'em short -->

<h1><span class="lnr lnr-link"></span> links/tags</h1>
  <div class="link-columns">

    <div class="column"><a href="/">link 1</a></div>
    <div class="column"><a href="/">link 2</a></div>
    <div class="column"><a href="/">link 3</a></div>
    <div class="column"><a href="/">link 4</a></div>
    <div class="column"><a href="/">link 5</a></div>
    <div class="column"><a href="/">link 6</a></div>
</div>


<h1><span class="lnr lnr-user"></span>characters</h1>

<!-- if you don't want a character image, delete the following line -->
<img class="character" src="https://farm2.staticflickr.com/1729/28890902238_2deb5fa63a_o.png"/>

<b>Character One:</b> 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. <br/><br/>

<!-- if you don't want a character image, delete the following line -->
<img class="character" src="https://farm2.staticflickr.com/1732/41778327795_a80376cdd9_o.png"/>

<b>Character Two:</b> 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.

<!-- worldbuilding -->

<h1><span class="lnr lnr-earth"></span> worldbuilding</h1>

<b>Interesting Thing #1:</b> 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. <br/><br/>

<b>Interesting Thing #2:</b> 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.

</div>

</div></body></html>