wip page 05

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



                        wip page 05
                        by @bebewrites
                        pls do not remove credit,
                        thanks!<3



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

<!DOCTYPE html>
<head>
<link rel="shortcut icon" href="{Favicon}">

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


<!-- icon font -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">


<!-- google fonts go here -->

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

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">

<!-- scripts -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>


<style type="text/css">

/* ---------------------- change colors & font here --------------------- */

:root {
    --body:#666666; /* text color */
    --link-color:#aaaaaa; /* link color */
    --accent:#e5d7c5; /* accent/hover color */
    --light-accent:#f3ece5; /* title + character underline */
    --bg-color:#f2f2f2; /* background */
    --container-color:#fafafa; /* container background */
    --section-bg:#ffffff; /* section background */
    --border-color:#f4f4f4;
    --headings:#333333;
    --icons:#cccccc;

    --body-font:'Open Sans';
    --text-size:11px;

    /* featured image url */

    --featured-image:url(https://images.unsplash.com/photo-1548630826-2ec01a41f48f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1334&q=80);
}

/* ---------------------------------------------------------------------- */


@-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 var(--bg-color);background-color:#ccc;}
::-webkit-scrollbar-thumb {border:5px solid var(--bg-color);background-color:#999;min-height:50px;min-width:50px;}


body {
    font-family:var(--body-font);
    font-size:var(--text-size);
    text-align:left;
    line-height:1.7em;
    color:var(--body);
    background-color:var(--bg-color);
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    -webkit-animation: fadein 1.3s;
    -moz-animation:fadein 1.3s;
    animation:fadein 1.3s;
}

#s-m-t-tooltip {
    max-width:300px;
    margin-top:25px;
    margin-left:15px;
    font-size:9px;
    letter-spacing:1px;
    text-align:center;
    text-transform:uppercase;
    color:#fff;
    background-color:#222;
    padding:2px 6px;
    border-radius:2px;
    z-index:999999;
}

a {color:var(--link-color);text-decoration: none;-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:var(--accent);-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;}

h1 {
    display:block;
    font-size:var(--text-size);
    line-height:12px;
    color:var(--headings);
    letter-spacing:0.75px;
    font-weight:700;
    text-transform:uppercase;
    border-bottom:2px solid var(--light-accent);
    padding:0 0 5px 0;
    margin:0 0 10px 0;
}

h1 i {
    font-size:calc( var(--text-size) - 1px);
}

h1 span {float:right;color:var(--icons);}

header {
    display:block;
    position:relative;
    margin: -8px auto 0px auto;
    padding:5px 10px;
    width:1180px;
    height:45px;
    background-color:var(--section-bg);
    line-height:45px;
    z-index:1;
}

header span {
    display:inline-block;
    float:right;
    padding-right:15px;
}

header span a {
    color:var(--body);
    margin-left:15px;
    text-transform:uppercase;
    font-size:9.5px;
    letter-spacing:1.25px;
}

header span a:hover {
    color:var(--accent);
}

#wiptitle {
    display:inline-block;
    font-size:calc( var(--text-size) + 2px);
    line-height:45px;
    color:var(--headings);
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:1px;
    padding-left:10px;
}

#featuredimage {
    display:block;
    position:relative;
    width:1200px;
    height:300px;
    margin:auto;
    background-image:var(--featured-image);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.container {
    display:block;
    position:relative;
    padding-left:40px;
    padding:20px;
    background-color:var(--container-color);
    width:1160px;
    height:auto;
    margin:auto;
}

.column-one {
    display:inline-block;
    width:300px;
    vertical-align:top;
    margin-right:40px;
}

.column-two {
    display:inline-block;
    width:473px;
    height:auto;
    vertical-align:top;
    margin-right:40px;
}

.column-three {
    display:inline-block;
    width:300px;
    vertical-align:top;
}

section {
    display:block;
    background-color:var(--section-bg);
    padding:15px;
    height:auto;
    margin-bottom:30px;
    border-bottom:1px solid var(--border-color);
}

.stats {
    display:block;
}

.stats span {
    display:block;
    text-align:left;
}

.stats span b {
    display:inline-block;
    font-size:calc( var(--text-size) - 0.5px);
    width:42%;
    font-weight:700;
    letter-spacing:0.75px;
    text-transform:uppercase;
}

.stats span:last-of-type {
    padding-bottom:0px;
}

.themes {text-align:left;}

.themes span {
    padding:3px 4px 4px 4px;
    margin-right:8px;
    background-color:#f6f6f6;
    color:var(--headings);
    line-height:3em;
    border-radius:2px;
    font-family:'Playfair Display';
    font-style:italic;
}

.info {display:block;}
.info span {display:block;margin-bottom:10px;}
.info span:last-of-type {margin-bottom:0px;}

.info span b {
    text-transform:uppercase;
    line-height:inherit;
    letter-spacing:0.5px;
    font-weight:700;
}

.links {
    display:grid;
    grid-template-columns:33% 33% 33%;
}

.links a {
    display:block;
    margin-right:10px;
    color:var(--text);
}

.links a:hover {color:var(--accent);}

.meter {
	height: 8px;  /* Can be anything */
	position: relative;
	background: #f2f2f2;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding:0px;
	margin-top:10px;
}

.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color:var(--accent);
  position: relative;
  overflow: hidden;
}

.meter > span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

#quote {
    font-style:italic;
    font-family:'Playfair Display';
    font-size:calc( var(--body-size) + 2px);
    letter-spacing:0.2px;
    color:var(--headings);
}

.ch-content {
    display:block;
    margin-bottom:15px;
}

.ch-content:last-of-type {
    margin-bottom:0px;
}

.ch-img {
    margin-right:10px;
    float:left;
    width:50px;
    height:50px;
    position:relative;
}

.ch-img img {
    width:50px;
    height:50px;
    border-radius:2px;
}

.ch-bio {
   position:block;
   min-height:50px;
}

.ch-content span {
    background-image:linear-gradient(0deg, var(--light-accent) 40%,transparent 40%);
    font-size:calc( var(--text-size) - 0.5px);
    font-weight:700;
    letter-spacing:0.75px;
    text-transform:uppercase;
}

iframe.tmblr-iframe {display:none;}

</style>
</head>
<body>

<!------------------------------------------------------------------------->
<!--                                                                     -->
<!--                      customization starts here                      -->
<!--                                                                     -->
<!------------------------------------------------------------------------->

<header>

<div id="wiptitle">TITLE HERE</div>

    <span>
    <a href="/">link</a>
    <a href="/">link</a>
    <a href="/">link</a>
    <a href="/">link</a>
    <a href="/">link</a>
    <!-- pls don't remove credit! -->
    <a href="http://www.bebewrites.tumblr.com" title ="code by @ bebewrites">theme</a>
    </span>

</header>

<!-- featured image : if you don't want to use an image, delete the line below -->

<div id="featuredimage"></div>


<div class="container">

<!--
for more icon options, go to https://fontawesome.com/icons?d=gallery&m=free -->


<!-- left column ------------------------------>

<div class="column-one">

<!-- stats -->

<section>
<h1>stats <span><i class="far fa-chart-bar"></i></span></h1>

<div class="stats">
    <span><b>status:</b> main wip</span>
    <span><b>genre:</b> adult fantasy</span>
    <span><b>started:</b> january 2020</span>
    <span><b>label:</b> content</span>
    <span><b>label:</b> content</span>
</div>
</section>


<!-- progress -->

<section>
<h1>progress <span><i class="fas fa-chart-pie"></i></span></h1>

<div class="stats">
    <span><b>draft:</b> first draft</span>
    <span><b>word goal:</b> 75k words</span>
    <span><b>wordcount:</b> 20k words</span>
</div>

<!-- progress bar : change percentage -->

<div class="meter">
<span style="width: 60%"></span>
</div>
</section>


<!-- themes -->

<section>
<h1>themes <span><i class="fas fa-star"></i></span></h1>

<!--
if a trope breaks at the end of the line and goes onto the next, you can put <br/> either before or after the trope so the whole thing will move down onto the next line
-->

<div class="themes">
<span>light vs dark</span>
<span>enemies to lovers</span>
<span>angst</span><br/>
<span>mutual pining</span>
<span>misunderstandings</span>

</div>
</section>

</div><!-- end left column -->


<!-- middle column ------------------------------>

<div class="column-two">


<!-- synopsis -->

<section>
<h1>synopsis <span><i class="far fa-edit"></i></span></h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
</section>


<!-- links -->

<section>
<h1>explore <span><i class="fas fa-link"></i></span></h1>

<div class="links">
        <a href="/">intro post</a>
        <a href="/">wip tag</a>
        <a href="/">character intros</a>
        <a href="/">inspiration</a>
        <a href="/">playlist</a>
        <a href="/">pinterest</a>
        <a href="/">link</a>
        <a href="/">link</a>
        <a href="/">link</a>
</div>
</section>


<!-- worldbuilding / additional info -->

<section>
<h1>worldbuilding <span><i class="fas fa-globe-americas"></i></span></h1>

<div class="info">
<span><b>HEADING:</b> lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta.</span>

<span><b>HEADING:</b> lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta.</span>

</div>
</section>

</div><!-- end column two -->


<!-- right column ------------------------------>

<div class="column-three">


<!-- quote -->

<section>
<h1>quote <span><i class="fas fa-quote-right"></i></span></h1>

<div id="quote">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Dis sagittis ipsum."
</div>
</section>


<!-- characters -->

<section>
<h1>characters <span><i class="fas fa-user"></i></span></h1>

<!-- you can link character names to character tags if you'd like! -->

<div class="ch-content">
<div class="ch-img"><img src="http://i.imgur.com/lcIfd7b.png"/></div>
<div class="ch-bio"><span>Character Name</span>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</div>
</div>

<div class="ch-content">
<div class="ch-img"><img src="https://i.imgur.com/yixxXnW.png"/></div>
<div class="ch-bio"><span>Character Name</span>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</div>
</div>

<div class="ch-content">
<div class="ch-img"><img src="https://i.imgur.com/c0r6H7h.png"/></div>
<div class="ch-bio"><span>Character Name</span>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</div>
</div>

<div class="ch-content">
<div class="ch-img"><img src="http://i.imgur.com/u61pSFj.png"/></div>
<div class="ch-bio"><span>Character Name</span>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</div>
</div>
</section>

</div><!-- end third column -->
</div><!-- end container -->
</body>
</html>