Johnny - About Page 3

<!DOCTYPE html>
<html>
<head>

<!-- about page III/johnny by ARESANGLANT / BLOODYNOVAK @TUMBLR.COM '19

                DON'T REMOVE CREDIT, CLAIM AS YOUR OWN, OR USE AS A BASE CODE!

                send me a message if you have any questions -->

 <title> About </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">

<style type="text/css">

/* modified tumblr controls by cyantists @ tumblr.com */
iframe.tmblr-iframe {
    z-index:99999999999999!important;
    top:0!important;
    right:0!important;
    opacity:0.4;
    /* delete invert(1) from here */
        filter:invert(1) contrast(150%);
        -webkit-filter:invert(1) contrast(150%);
        -o-filter:invert(1) contrast(150%);
        -moz-filter:invert(1) contrast(150%);
        -ms-filter:invert(1) contrast(150%);
    /* to here if your blog has a dark background */
    transform:scale(0.65);
    transform-origin:100% 0;
    -webkit-transform:scale(0.65);
    -webkit-transform-origin:100% 0;
    -o-transform:scale(0.65);
    -o-transform-origin:100% 0;
    -moz-transform:scale(0.65);
    -moz-transform-origin:100% 0;
    -ms-transform:scale(0.65);
    -ms-transform-origin:100% 0;}

iframe.tmblr-iframe:hover {
    opacity:0.6!important;}


::-webkit-scrollbar {background-color:{color:#ffffff}; width:5px; }

::-webkit-scrollbar-thumb:vertical { background-color:#ffffff;
height:20px;  border-left:1px solid #eeeeee; }

::-webkit-scrollbar-thumb:horizontal { background-color:#ffffff;
height:4px!important border-top:1px solid #cccccc; }

body {
background:#ffffff;
color:#252525;
font-family:'Barlow', sans-serif;
font-size:12px;
letter-spacing:0.5px;
line-height:2;
word-wrap:break-word;
text-align:justify; }

a {
    border-bottom:1px solid #b5ccbd;
    cursor:crosshair;
color:#252525;
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:#b5ccbd;
text-decoration:none; }

h1 {
font-size:12px;
font-style:italic;
margin-left:;
font-weight:500;
font-family:'Barlow', sans-serif;
 margin-bottom:5px;
 padding:5px;
 letter-spacing:0.4;
 text-transform:uppercase; }

/* ----*/

.content1 {
  margin-top:-20em;
margin-left:42em;
width:290px;
text-align:justify;
padding:10px;
padding-right:15px;
padding-left:15px;
height:450px;
overflow:scroll;}

 .more {
        margin-left:75em;
        margin-top:-41em;
        width:350px;
        text-align:left;
        padding:10px;
        height:450px;
     overflow:scroll; }


h2 {
    margin-bottom:10px;
         padding:5px;
         font-family: 'Playfair Display', serif;
    font-weight:700;
    font-size:13px;  }


.sidebar {
    width:350px;
    margin-top:10em;
    margin-left:10em; }

.sidetitle {
    font-family: 'Playfair Display', serif;
    font-weight:700;
    font-size:34px;
    font-style:bold;
    letter-spacing:-0.5;
    padding:10px;
    overflow:hidden;
    text-transform:lowercase;
    margin-top:10px;
}

.sidetitle a {
    border:none;
    cursor:crosshair;
    overflow:hidden;

}

.sidetitle a:hover{
    color:#f6c094;
    text-decoration:none; }

.add {
    margin-top:-10px;
    width:300px;
    padding:10px;
    margin-left:40px;
    font-size:11px;
    letter-spacing:0.9;
    font-style:italic; }


.linkstitle {
    font-family: 'Playfair Display', serif;
    font-weight:700;
    margin-top:20px;
    font-size:13px;
    text-transform:lowercase; }

.links {
    padding:10px;
margin-top:-20px;
width:300px; }

.links a {
    border:none;
    padding-bottom:10px;
    margin-left:5px;
    margin-right:5px;
    cursor:crosshair;}

.links a:hover {
    text-decoration:none;
    color:#f6c094;}

    .fidem {
        bottom:10px;
        right:20px;
        font-size:17px;
        font-style:bold;
        color:#b5ccbd;
        position:fixed;
        cursor:crosshair;
    }

    .fidem a {
        border:none;
        cursor:crosshair;
        color:#b5ccbd;
        text-decoration:none;
    }

  .fidem a:hover {
      font-size:25px;
      color:#f3ded0; }


#sidebarim {
    border:none;
     width:55px;
    height:55px;
    padding:10px;
    margin-top:25px;
    margin-left:0px;}

#sidebarim img {
    padding:5px;
    border:1px solid #eee;
    width:55px;
    height:55px;
border-radius:100%; }



</style>
</head>
<body>

<div class="sidebar">
<div id="sidebarim">

<!-- place the url for your picture between the quotation marks after it says "img src-" -->  <img src="">
</div>

    <div class="sidetitle">
    &mdash; <a href="/">

    <!-- place your title here -->  Title <!-- end -->

    </a></div>
    <div class="add">

    <!-- you can add a little quote below if you want, this will be placed     below the main title -->

    "A quote..."

    <!-- end -->

        </div>

        <div class="links">
        <div class="linkstitle">links...</div>

        <!-- place your links below, you can add as many as you like -->

            01. <a href=""> a link </a>
            02. <a href=""> a link </a>
            03. <a href=""> a link </a>
            04. <a href=""> a link </a>

        </div></div>

<div class="content1">

<!-- this is the text box that you can place your about section, add as much as you like since it will scroll after a certain amount is written -->

This is content...


<h1> this is a title </h1>

<!-- if you want to add more titles, just bracket your title with <h1> in the beginning and </h1> at the end of your title, if you dont want a title simply delete the <h1></h1> -->



More content after the title.



<!-- end of first about section -->

</div>

<div class="more">

<!-- your section titles are between the <h2> brackets, to add more sections, just copy the <h2>&mdash; </h2> heading and place your title after where it says " &mdash; " but before " </h2> "  -->

<h2>&mdash; <!-- this is the first title --> currently... </h2>


<!-- this is the content section -->  Content...


 <h2>&mdash; <!-- this is the second title --> favorite tags...</h2>


    # <a href=""> a link </a>  <br>
    # <a href=""> another link </a> <br>
    # <a href=""> a link </a>  <br>
    # <a href=""> another link </a> <br>

    <!-- if you want to add more links, place a "#" before the link and if you want them to be in a list format place <br> after each link as demonstrated above -->


    <h2>&mdash; <!-- this is the third title --> social media...</h2>

    you can place <a href=""> links </a>, more description, or info here. you can add some <b>style</b> to your <i>text,</i> but only if you <u>really</u> want to.





<!-- end of customizable area -->
</div>
<div class="fidem"><a href="https://aresanglant.tumblr.com/" target="_blank">@</a></div>



</body>
</html>