Silhouette | New URL Tumblr Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- theme by Mimì @ siderumvis.tumblr.com / fireworkprodz.deviantart.com
    preview background and left half circle pic by Subham Dash @ pexels.com
    https://www.pexels.com/photo/silhouette-of-person-walking-1046896/
-->

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


<!-- Customize Options -->

<meta name="color:Left Background" content="#000000"/>
<meta name="color:Right Background" content="#ffffff"/>
<meta name="color:Left Circle" content="#ffffff"/>
<meta name="color:Right Circle" content="#000000"/>
<meta name="color:Border" content="#054F5A"/>
<meta name="color:Text" content="#ffffff" />
<meta name="color:Link" content="#C48A62"/>

<meta name="font:Title" content="Goergia"/>

<meta name="image:Right Background" content="https://static.tumblr.com/xwu3ezh/UMepgnw4g/pexels-photo-1046896.jpeg"/>
<meta name="image:Left Background" content=""/>
<meta name="image:Right Circle" content=""/>
<meta name="image:Left Circle" content="https://static.tumblr.com/xwu3ezh/UMepgnw4g/pexels-photo-1046896.jpeg"/>

<meta name="text:Right Circle Image Size" content="cover" />
<meta name="text:Left Circle Image Size" content="cover" />
<meta name="text:Right Circle Image Position" content="center center"/>
<meta name="text:Left Circle Image Position" content="center center"/>
<meta name="text:Left Background Image Position" content="left center"/>
<meta name="text:Right Background Image Position" content="right center"/>
<meta name="text:Invert Colors Credits" content="100%"/>

<meta name="text:Infos on the Left" content="write here more infos" />
<meta name="text:Old URL" content="write here your old url" />
<meta name="text:New URL" content="write here your new url" />

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

         <style type="text/css">

         body {
            text-align:center;
            overflow:hidden;
         }

#left_background {
    width:50%;
    height:105%;
    background-color:{color:Left Background};
    background-image:url("{image:Left Background}");
    background-size:cover;
    background-position:{text:Left Background Image Position};
    left:0px;
    position:absolute;
    top:-10px;
    overflow:hidden;
}

#right_background {
    top:-10px;
    position:absolute;
    width:50%;
    height:105%;
    background-size:cover;
    background-position:{text:Right Background Image Position};
    background-color:{color:Right Background};
    background-image:url("{image:Right Background}");
    right:0px;
    overflow:hidden;
}


#left_circle_box {
    width:50%;
    height:105%;
    background-color:none;
    background-image:none;
    left:0px;
    position:absolute;
}

#right_circle_box {
    position:absolute;
    width:50%;
    height:100%;
    background-color:none;
    background-image:none;
    right:0px;
}

.half-circle {
    margin-top:15%;
    float:right;
    width: 200px;
    height: 400px;
    border-top-left-radius: 200px;
    border-bottom-left-radius: 200px;
    background-image: url("{image:Left Circle}");
    background-color:{color:Left Circle};
    background-size:{text:Left Circle Image Size};
    background-position:{text:Left Circle Image Position};
}

.half-circles {
    margin-top:15%;
    left:0px;
    width: 199px;
    height: 399px;
    border-top-right-radius: 200px;
    border-bottom-right-radius: 200px;
    background-image: url("{image:Right Circle}");
    background-color:{color:Right Circle};
    background-size:{text:Right Circle Image Size};
    background-position:{text:Right Circle Image Position};
    border:1px solid {color:Border};
    border-left:none;
}

.description {
    color:{color:Text};
    text-align:left;
    text-decoration:none;
    font-family: 'Alice', serif;
    line-height:120%;
    z-index:100;
    font-size:20px;
    margin-top:70%;
    margin-left:3%;
}

a {
    color:{color:Link};
    text-decoration:underline;
}


.infos {
    color:{color:Text};
    text-align:justify;
    text-decoration:none;
    font-family: 'Open Sans', sans-serif;
    line-height:15px;
    z-index:100;
    font-size:15px;
    margin-top:40%;
    margin-left:8%;
    font-weight:bold;
    width:50%;
    height:auto;
    line-height:140%;
}

.infos:first-letter {
    text-transform:uppercase;
}


         </style>

         <body>

        <div style="opacity:0.5;position:fixed;z-index:100;bottom:1%;right:1%;filter:invert({text:Invert Colors Credits});">
            <a href="http://fireworkprodz.deviantart.com" title="credits">
                <img src="https://static.tumblr.com/xwu3ezh/T3Opglmuj/logo-piccolo-siderum-vis-senza-background.svg" width="39px" height="39px"/>
            </a>
        </div>

         <div id="left_background">
             <div class="infos">
                {text:Infos on the Left}
             </div>

         </div>
         <div id="right_background"></div>


         <div id="left_circle_box">
            <div class="half-circle"></div>
        </div>
        <div id="right_circle_box">
            <div class="half-circles">
                <div class="description">
                    {text:Old URL} <br> moved to <br>
                    <a href="http://{text:New URL}.tumblr.com">{text:New URL}</a>
                </div>
            </div>
        </div>

            </div>

         </body>


</html>