Vincent - WIP Page 1

<!DOCTYPE html>
<html>
<head>

<!--
Vincent / WIP page 1 by ARESANGLANT.TUMBLR.COM
( completed 4/24/21 )

. DON'T REMOVE CREDIT
. DON'T USE AS A BASE CODE
. DON'T CLAIM AS YOUR OWN
. DON'T HEAVILY EDIT UNTIL IT IS UNRECOGNIZABLE FROM THE ORIGINAL DESIGN

. for a list of the credits please see original post
. please send messages or concerns to aresanglant.tumblr.com
. thank you for showing interest in my codes and following my rules of use! i love you \o/
-->

 <title> WIP Page </title>

<link rel="shortcut icon" href="{favicon}">

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- fonts  -->

<link href="https://fonts.googleapis.com/css?family=Barlow:400,500,500i,700|Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700&display=swap" rel="stylesheet">

<!-- icons by Suiomi -->

<script src="//pull.cappuccicons.com/cpf.js"></script>

<style type="text/css">


::-webkit-scrollbar {
    background-color:#f4f1de;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border:none;
    height:5px;
    width:5px;}

::-webkit-scrollbar-thumb:vertical {
    -moz-border-radius:11px;
    -webkit-border-radius:11px;
    background-color: #c7c7bb;
   height:5px;
    width:5px;}

::-webkit-scrollbar-thumb:horizontal {
    -moz-border-radius:11px;
    -webkit-border-radius:11px;
    background-color: #c7c7bb;
    height:5px;
    width:5px; }

body {
background:#efede3;
color:#444444;
font-family:'Barlow', sans-serif;
font-size:15px;
letter-spacing:1px;
line-height:1.7;
word-wrap:break-word;
text-align:justify;}

a {
color:#444444;
border-bottom:1px solid #eba966;
text-decoration:none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }

a:hover {
color:#eba966;
text-decoration:none; }

    #topbar {
        width:100%;
        height:23%;
        padding:20px;
        background-color:#c7c7bb;
        position:fixed;
        z-index:9999999;
        top:0px;
        left:-10px;
        border-bottom:none; }

    #maintitle {
        text-align:left;
        padding:20px;
        background-color:transparent;
        width:auto;
        font-family: 'Playfair Display', serif;
        font-size:34px;
        font-weight:900;
        position:fixed;
        top:80px;
        left:41px;
        line-height:1.3;
        color:#444444;
        letter-spacing:-0.5px; }

        #nametitle {
        font-size:11px;
        text-transform:uppercase;
        font-style:bold;
            top:45px;
            left:55px;
            position:fixed;}

            #nametitle a {
                margin-left:4px;
                margin-right:4px;
                color:#444444; }

            #nametitle a:hover {
                border-bottom:1px solid #444444; }

/* don't touch credit */

 .credit {
        opacity:0.8;
        bottom:10px;
        text-align:center;
        font-size:11px;
        text-transform:uppercase;
        font-style:bold;
        position:relative;  }

.credit a {
    border-bottom:none;
        color:#444444; }

 .credit a:hover {
      color:#eba966; }

.first {
    width:90%;
    height:auto;
    position:relative;
    margin-top:220px;
    margin-left:50px;
    padding-left:25px;
    padding:40px;
    background-color:#efede3;
    padding-bottom:50px;}


    .tags {
        border-left:2px solid #c7c7bb;
        width:85%;
        margin-top:20px;
        padding:13px;
        background-color:transparent;
        text-transform:uppercase;
        font-size:11px; }

 h1 {
letter-spacing:-0.2px;
font-size:19px;
font-weight:900;
font-family:'Playfair Display', serif;
 margin-bottom:0px;
 margin-top:30px;
 margin-left:25px; }

h2 {
font-size:14px;
font-weight:900;
font-family:'Playfair Display', serif;
margin-left:25px;
margin-top:20px;}

h3 {
    font-size:11px;
    font-style:italic;
    text-transform:uppercase;
    margin-top:20px;
    margin-bottom:-5px;
    margin-left:25px;}

 .content {
     text-align:justify;
     margin-top:5px;
     margin-left:5px;
     width:90%;
     padding:20px;
     font-size:12px;
     font-style:italic; }

.tmblr-iframe  {
    z-index:9999999999999!important;
    top:0px;
    right:-20px!important;
    opacity:0.5;
    transform:scale(0.7,0.7); }

.workpic {
    display:none; /* remove "display:none;" if you want to show pic */
    margin-top:45px;
    margin-left:22px;
    border-radius:100%;
    width:55px;
    height:55px;
-webkit-box-shadow: 2px 3px 6px 0px rgba(50, 50, 50, 0.85);
-moz-box-shadow:    2px 3px 6px 0px rgba(50, 50, 50, 0.85);
box-shadow:         2px 3px 6px 0px rgba(50, 50, 50, 0.85);}

.workpic img {
    border-radius:100%;
    width:55px;
    height:55px; }

    @media only screen and (min-height: 1050px) {
        #topbar {
        height:15%;} }

    @media only screen and (max-width: 800px) {

    .first {
    width:85%;
    height:auto;
    position:relative;
    margin-top:220px;
    margin-left:40px; } }

 @media only screen and (max-width: 500px) {

  .first {
    margin-left:0px; } }

b { font-size:14px; }

hl {background-color:#f6c094;
    padding:2px; }

</style>
</head>
<body>

<div id="topbar">
<div id="nametitle"> &bullet; Links:

<a href="/">Home</a>
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
<a href="">Link 4</a>

</div>

<div id="maintitle"> Works In Progress </div>
</div>

<div class="first">
<!-- start of first wip section -->

    <div class="workpic"> <img src=""> <!-- place your image url between the empty quotation marks if you're displaying an image --> </div>

    <!-- first work's title -->
    <h1> <!-- icon begins--> <i class="cp cp-book-o"></i> <!-- icon ends -->
    &nbsp; WIP Title </h1>

    <!-- first subtitle -->
    <h2> <!-- icon begins--> <i class="cp cp-paper-clip-o"></i> <!-- icon ends --> Work began: 1/2/3  &mdash; Word count goal: 50k </h2>

<!-- second subtitle -->
<h3> &bullet; genre: a genre here &mdash; setting: a setting here </h3>

 <div class="content">

 <!-- below is where you share your synopsis -->

<b>Bold text,</b> <u>underlined,</u> <s>strikethrough,</s> <hl> highlight,</hl> <a href="">and a link.</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.

Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.

 <!-- end of synopsis -->

 <!-- tags below -->

 <div class="tags"> Tags:

 <a href="">#these can be links;</a> #or not; #they can just be normal; <u>#or have some style;</u>

</div>

<!-- end of tags -->


<!-- beginning of chapters section--> <h2>

<!-- icon begin --> <i class="cp cp-bookmark-o"></i> &nbsp; <!-- icon end -->

<a href="">chapter 1</a> , <a href="">chapter 2</a> , <a href="">chapter 3</a>

</h2>
<!-- end of chapters section-->
</div>
<!-- end of first wip section -->


<!-- start of second wip section -->

     <div class="workpic"> <img src=""> <!-- place your image url between the empty quotation marks--> </div>


    <!-- second work's title -->
    <h1> <!-- icon begins--> <i class="cp cp-book-o"></i> <!-- icon ends--> &nbsp; WIP Title </h1>

    <!-- first subtitle -->
    <h2> <!-- icon begins--> <i class="cp cp-paper-clip-o"></i> <!-- icon ends--> setting: 1927-1934, New York, NY </h2>

    <!-- second subtitle -->
    <h3>&bullet; word count goal: 80k </h3>

  <div class="content">

<!-- below is where you share your synopsis -->

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.

<!-- end of synopsis -->

<!-- tags below -->

  <div class="tags">

      #tag here; <a href="">#another</a>; #and yet again

     </div> </div>

<!-- end of tags -->
<!-- end of second wip section -->


 <!-- start of third wip section -->

     <div class="workpic"> <img src=""> <!-- place your image url between the empty quotation marks--> </div>

  <h1> <!-- icon begin --> <i class="cp cp-notes-o"></i> <!-- icon end -->
  &nbsp; WIP Title </h1>

  <h3>&bullet; genre: short-story </h3>

  <div class="content">

  <!-- synopsis below -->

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.


</div> <!-- end of third WIP section -->


  <!-- you can add more works here - just follow the basic design I have above. ex: add a header tag (h1, h2, h3) then a 'div class' for 'content', etc.  - send me an ask if you need help! -->


</div>
</div>


<!-- don't touch -->
<div class="credit"><a href="https://aresanglant.tumblr.com/" target="_blank">aresanglant themes</a></div>



</body>
</html>