WIP Page 01. - Journal

<html>
<head>

                                                                      <!--
WIP Page 01. by CrimsonxThemes
Journal
ˈjərnl
                                                                       -->

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

    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="altertnate" type="application/rss+xml" href="{RSS}">
    <meta name="description" content="" />
    <meta http-equiv="x-dns-prefetch-control" content="off"/>


<style type="text/css">

::-webkit-scrollbar {display:none;}
::-webkit-scrollbar-thumb {display:none;}

body {
    background: #f3f3f3; /**BACKGROUND COLOR**/
    color:#000; /**TEXT COLOR**/
    font-family:open sans;
    font-size:10px;

}

a {
    color: #555; /**LINK COLOR**/
    text-decoration:none;
    -moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

a:hover {
    color:#FFB6C1; /**LINK HOVER COLOR**/
    -moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}


.box {
    background:#fff; /**TOP BOX BACKGROUND COLOR**/
    width:400px;
    top:50px;
    left:0;
    position:fixed;
    height:100px;
    text-align:center;
    margin-left:calc(50% - 200px);
    z-index:99999999;
}

.title {
    color: #555; /**MAIN TITLE COLOR**/
    font-family: karla;
    font-size:17px;
    margin-top:15px;}
.text {
    margin-top:10px;
    padding:0 10px;
    height:14px;
    overflow:hidden;}
.links {margin-top:10px;}
.links a {margin-right:5px; font-style:italic;}


.contain {
    position:absolute;
    width:600px;
    top:200px;
    left:0;
    margin-left:calc(50% - 300px);
    margin-bottom:50px;}


.cbox {
    border-right:1px solid #f3f3f3; /**FOR BEST RESULT, MATCH THIS TO MAIN BACKGROUND COLOR**/
    background:#fff; /**PROGRESS BOX BACKGROUND COLOR**/
    float:left;
    width:299px;
    height:75px;
    margin-top:1px;}
.ctitle {
    color:#555; /**PROGRESS TITLE COLOR**/
    font-family:karla;
    text-align:center;
    font-size:13px;
    margin-top:10px;}
.cdes {
    margin-top:5px;
    padding:0 10px;
    height:14px;
    overflow:hidden;
    text-align:center;}


.desunderline, .underline {
    background:#f3f3f3; /**BACKGROUND LINE COLOR**/
    width:200px;
    height:1px;
    position:absolute;
    margin-left:49.5px;}
.desunderline {margin-top:15px;}
.underline {margin-top:25px;}
.coloredline {
    margin-top:-1px;
    height:3px;
    border-radius:5px;}

.behind {
    height:160px;
    background-color:#f3f3f3; /**MATCH THIS TO MAIN BACKGROUND COLOR**/
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:5;}

</style>
</head>

<body>


<!--PLEASE NOTE:
        This page uses inline styling to input the color and length of the progress bars. So in the html, look for <div class="coloredline" and customize both the color of the bar (if you'd like to change it) and the width. Also, the lines for the progress bars are 200px in length, which means you will need to input DOUBLE the amount of width as your progress.    ex: you're 50% done with your project, so you'd input width: 100px;
                              Happy coding!!
                                                                       -->


<!--For a new project box without a description

    <div class="cbox">
        <div class="ctitle">Project 3</div>
        <div class="underline">
            <div class="coloredline" style="background:#FFB6C1;width:25px;"></div>
        </div>
    </div>

-->


<!--For a new project box with a description

    <div class="cbox">
        <div class="ctitle">Project 4</div>
        <div class="cdes">project 4 description.</div>
       <div class="desunderline">
            <div class="coloredline" style="background:#FFB6C1;width:50px;"></div>
        </div>
    </div>

-->

<!----------------------------------------------------------------------->
<div class="box">
    <!--TITLE-->
    <div class="title">Works in Progress</div>
    <!--DESCRIPTION-->
    <div class="text">A short description can go here if you'd like</div>
    <!--LINKS-->
    <div class="links">
        <a href="/">home</a> <a href="/ask">message</a> <a href="/archive">past</a> <a href="/">extra</a>
    </div>
</div>
<div class="behind"></div>
<!----------------------------------------------------------------------->

<div class="contain">

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

<!--BOX WITH DESCRIPTION-->
    <div class="cbox">
        <div class="ctitle">Project 1</div>
        <div class="cdes">project 1 description. optional. max 1 line.</div>
        <!--If you're putting a description for your project, be sure the following div says "desunderline" and not just "underline"!!!-->
        <div class="desunderline">
            <div class="coloredline" style="background:#FFB6C1;width:100px;"></div>
        </div>
    </div>
<!---->

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

<!--BOX WITHOUT DESCRIPTION-->
    <div class="cbox">
        <div class="ctitle">Project 2</div>
        <!--Likewise, if you're NOT putting a description for your project be sure the following div says "underline" and not "desunderline"!!!-->
        <div class="underline">
            <div class="coloredline" style="background:#FFB6C1;width:125px;"></div>
        </div>
    </div>
<!---->

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

<!--Don't touch this div!-->
</div>


<a href="http://crimsonxthemes.tumblr.com" style="color:#999;position:fixed;bottom:3px;right:7px;font-size:15px;">◎</a>
</body>
</html>