Pastel Palettes

<!---
BY SIMPLETHEMES.TUMBLR.COM
EDIT BUT DO NOT REMOVE CREDIT
--->

<html>
    <head>

        <title>{title}</title>
        <link rel="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

        <link href="https://fonts.googleapis.com/css?family=Lato|Lora|Open+Sans|Raleway|Roboto" rel="stylesheet">

        <style type="text/css">

            ::-webkit-scrollbar {
                width:17px;
                height:17px;
            }
            ::-webkit-scrollbar {
                background-color:rgb(255,255,255); /* background color */
            }
            ::-webkit-scrollbar-track {
               border:8px solid rgb(255,255,255); /* background color */
               background-color:rgb(230,230,230); /* light border color */
            }
            ::-webkit-scrollbar-thumb {
               border:8px solid rgb(255,255,255); /* background color */
               background-color:rgb(144,144,144); /* dark border color */
               min-height:24px;
               min-width:24px;
            }

            body{
                background:#fff;/*BACKGROUND COLOR*/
                /*SELECT YOUR FONT HERE
                font-family: 'Roboto', sans-serif;
                font-family: 'Open Sans', sans-serif;
                font-family: 'Lato', sans-serif;
                font-family: 'Raleway', sans-serif;
                font-family: 'Lora', serif;*/
                font-family:'Open Sans', sans-serif;
                color:#a4a4a4;/*TEXT COLOR*/
                font-size:11px;/*FONT SIZE i dont recommend anything smaller than this*/
            }

            a{
                text-decoration:none;
                color:#666;/*LINKS COLOR*/
                border-bottom:1px solid #ebebeb;/*LINK BORDERS*/
            }

            a:hover{
                text-decoration:none;
                color:#a4a4a4;/*LINK HOVER*/
                border-bottom:1px solid #ebebeb;/*LINK BORDERS*/
                cursor:help;
            }

            .container{
                margin-left:250px;
                width:700px;
            }

            .sidebar{
                background:#fff;/*SIDEBAR BACKGROUND*/
                width:210px;
                position:fixed;
                top:0;
                left:0;
                height:100%;
                padding:20px;
                border:1px solid #ebebeb;/*BORDER COLOR*/
            }

            .sidebar img{
                margin-bottom:20px;
                border-radius:10px;
                width:50px;
                height:50px;
            }

            .ttl{
                color:#a4a4a4;/*this is the sidebar title color*/
                font-size:15px;
                margin-top:15px;
            }

            .postcont{
                background:#ff0000;
                width:400px;
                padding-top:100px;
            }

            .box{
                background:#fff;
                border:1px solid #ebebeb;
                margin:20px;
                padding:10px;
                width:150px;}
            .box img{
                max-width:150px;}
            .ttldata{
                color:#a4a4a4;
                font-size:20px;}
            .price{
                font-size:25px;
                margin-top:15px;
                float:right;}

            h2{
                font-size:15px;
                font-weight:100;
                text-align:center;
            }

            h2 a:hover{
                font-size:19px;
                text-decoration:none;
            }

            li{
                list-style:none;
                padding:0;
                margin:0;
            }

            li:before{
                content:">";
                padding-right:5px;
            }

            blockquote{
                margin-top:10px;
                margin-left:0px;
                max-width:100%;
                border-left:1px solid #ebebeb;
                padding-left:15px;
                padding-top:2px;
            }

            .posts img {
                max-width:100%;
            }

            pre{
                white-space:pre-wrap;
                white-space:-moz-pre-wrap;
                white-space:-pre-wrap;
                white-space:-o-pre-wrap;
                word-wrap:break-word;
            }

            .cred{
                position:fixed;
                right:15px;
                font-size:.9em;
                bottom:10px;
            }

            .cred a{
                color:{color:text};
            }

        </style>

    </head>

    <body>

        <div class="container">
            <div class="sidebar">
                <!--SIDEBAR IMAGE HERE-->
                <img src="http://static.tumblr.com/szhljla/wtOosfx8y/3ba97d2aee39cfe531080895cc1f3316.jpg"/>
                <div class="ttl">⋯ Comissions Page</div><br>
                <!--DESCRIPTION HERE-->
                <div class="desc">This is a description</div>
                <div class="links">
                    <div class="ttl">⋯ Links</div>
                     <!--SOME LINKS GO HERE-->
                    <a href="/">index</a><br>
                    <a href="/ask">inbox</a><br>
                    <a href="/about">about the artist</a><br>
                    <a href="http://tumblr.com/dashboard">dash</a>
                </div><!--links-->
                <div class="info">
                    <div class="ttl">⋯ Info</div>
                    <!--IMPORTANT ARTIST INFO THINGS-->
                    comissions: open/closed<br>
                    contact @ [email protected]<br><br>
                    I WILL NOT DRAW:<br>
                    example<br>
                    example<br><br>
                    <a href="/">redbubble shop</a><br>
                    <a href="/">tictail shop</a> [closed!]<br>
                    <a href="/">ko-fi</a><br>
                    <a href="/">instagram</a>
                </div>
                <div class="upd">
                    <div class="ttl">⋯ Updates</div>
                    <!--HERE IS A PLACE FOR UPDATES-->
                    Insert update here<br>
                    Another update
                </div>
            </div><!--sidebar-->


        </div><!--container-->

        <a class="cred" href="http://simplethemes.tumblr.com" target="_blank">S</a>

        <!--                  masonry                 -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script>
$('.container').masonry({
  itemSelector: '.box',
});
</script>

<div class="container" data-masonry='{ "itemSelector": ".box"}'>

<!--COPY PASTE THIS TO ADD A BOX
<div class="box">
<img src="YOUR IMAGE GOES HERE"/>
<div class="price">THIS IS THE PRICE</div>
<div class="data">
<div class="ttldata">TITLE FOR EXAMPLE DOODLE ICON ETC</div>
THIS IS THE DESCRIPTION OF THE TYPE OF COMISSION
</div>
</div><!--box-->
                <!--EXAMPLE BOX-->
                <div class="box">
                    <img src="http://static.tumblr.com/szhljla/RXZosftdz/a64aa739f9d4f981d919523364302ed0.jpg"/>
                    <div class="price">$5</div>
                    <div class="data">
                        <div class="ttldata">Doodle</div>
                        This is the description of the art there we go
                    </div>
                </div><!--box-->


                <!--ADD OTHER BOXES BELOW ALWAYS BEFORE THE LAST DIV-->


</div>

    </body>
</html>