Pull List Page

<!DOCTYPE html>
<!--

TUMBLR BASE CODE (HTML, CSS, AND INFO)
    by ratspotting.tumblr.com
    created 10/24/2017

THEME BY: sh4tterstar.tumblr.com
hit me up if you need any help customizing!
don't remove the credit
if something's wrong, please let me know!

-->
<head>

<!-- links -->
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href="https://fonts.googleapis.com/css?family=Bangers|Permanent+Marker|Sriracha" rel="stylesheet">

<!-- styles -->
<style type="text/css">

/* GENERAL */

html,body{font-family: 'Permanent Marker', cursive;
font-size:12;
background: #3d322f;
background-attachment:fixed;
color:#cb9423;}

p{margin:5px 0 5px 0;}

a{color:#b14c3a;}

a:hover{color:#b14c3a;}

h1, h2, h3{font-family: 'Bangers', cursive; font-size:22px; transform:rotate(2deg);}

h2, h3{font-family: 'Bangers', cursive; font-size:18px; transform:rotate(2deg);}

h4{font-family: 'Bangers', cursive; font-size:50px; transform:rotate(2deg);}

blockquote{border-left:1px solid #000;margin-left:0px;padding-left:15px;}

li{padding-left:5px;}

::-webkit-scrollbar{width:7px;background:#eeeeee;}

::-webkit-scrollbar-thumb{background:#b23d39;}

/* CONTAINERS */
/* The wrapper includes the #posts and #sidebar. */
#wrapper{width:1100px;margin:auto;}

#sidebar{width:350px;float:left 20px;bottom:10px;margin:15px 0 25px 10px;position:fixed;}

#comicbar{width:500px;float:left 0px;position:fixed;z-index:-1;}

/* #posts contains the posts and pagination. */
#posts{width:690px;float:right;margin:50px 0 10px 0;}

/* SIDEBAR */
/* An aside is each element in our sidebar. */
aside{}

aside.title{
    font-family:'Bangers', cursive;
    font-size:40px;
    color: #d7b563;
    transform:rotate(2deg);
    z-index:999;
    bottom: 150px;
    position:fixed;
    text-shadow:4px 4px #000;
    width:350px;
	overflow: hidden;
}

aside.description{
    transform: skewY(-2deg);
  transform-origin: 100%;
   background:#eee;
    overflow:hidden;
    padding:20px;
    border: solid 5px #cb9423;
    background:#eee;
    overflow:hidden;
    box-shadow: 10px 10px #000;
    left:0px;
    z-index:2;
}

aside.navigation{
    transform: skewY(-2deg);
  transform-origin: 100%;
   background: #eee;
    overflow:hidden;
    padding:20px;
    border: solid 5px #cb9423;
    background: #eee;
    overflow:hidden;
    box-shadow: 10px 10px #000;
    left:0px;
    z-index:2;
}


/* POST CONTENT */
/* An article is an individual post. */
article{
    margin:0 0 50px 0;
    padding:20px;
    overflow:scroll;
    border: solid 5px #cb9423;
    background:#eee;
    max-width:680px;
    box-shadow: 10px 10px #000;
    height:210px;
}

article .text{
    text-align:right;
    width:480px;
    right:-150px;
    position:relative;

}

article .title{text-align:right; font-family: 'Bangers', cursive; font-size:30px; transform:rotate(2deg);}

#credit{position:fixed;bottom:0;right:0;font-size:20px;}

panel.image{width:500px;}

panel.image img{width:501px;height:auto; border:solid 8px black;}

panel.panel1{
    top:-40px;
    left:0px;
    position:fixed;
    width:300px;
    transform: skewY(-6deg);
    transform-origin: 100%;
    z-index: 0;
}

panel.panel2{
    top:200px;
    left:0px;
    position:fixed;
    width:300px;
    transform: skewY(-6deg);
    transform-origin: 100%;
    z-index: 0;
}

panel.panel3{
    bottom:-110px;
    left:0px;
    position:fixed;
    width:300px;
    transform: skewY(6deg);
    transform-origin: 100%;
    z-index: 1;
}

cover.image img{
    height:200px;
    width:auto;
    border:solid 5px #000;
    position:absolute;
}

cover.cover{
    height:200px;
    width:auto;
}

</style>
</head>

<body>

<div id="wrapper">

<div id="sidebar">
<aside class="title">pull list</aside>
<aside class="description">
here's my current pull list
</aside><!-- /description -->
<aside class="navigation">
<a href="/">home</a>
<a href="/ask">ask</a>
<a href="/link1">link 1</a>
</aside><!-- navigation -->
</div><!-- /sidebar -->

<div id="comicbar">
    <panel class="image">
    <panel class="panel1">
    <img src="https://66.media.tumblr.com/df4f3d4ea320ff560db52746656b1207/tumblr_ph33asjGkD1rsxxfpo1_1280.png">
    </panel>
    <panel class="panel2">
    <img src="https://66.media.tumblr.com/6681a71c72138ffec53a9d3346cae08d/tumblr_ph33asjGkD1rsxxfpo2_1280.png">
    </panel>
    <panel class="panel3">
    <img src="https://66.media.tumblr.com/da11297449780512abc5466c16f662b8/tumblr_ph33asjGkD1rsxxfpo3_400.png">
    </panel>
    </panel>
</div>

<!-- EXAMPLE
<div id="posts">
<article>
<cover class="image">
<cover class="cover">
        <img src="https://imgc.allpostersimages.com/img/Mounting/posters/marvel-comics-retro-the-x-men-comic-book-cover-no-100-professor-x_a-G-13758639-10577378.jpg?w=632&h=948">
</cover>
</cover>
<div class="title">
<a href="link">COMIC TITLE</a> - YEAR - ★★★★☆
</div>
<div class="text">
<p><h1>description:</h1> description goes here</p>
<p><h1>review:</h1> review goes here </p>
    </div>
</div>
END EXAMPLE-->

<div id="posts">
<article>
<cover class="image">
<cover class="cover">
        <img src="https://imgc.allpostersimages.com/img/Mounting/posters/marvel-comics-retro-the-x-men-comic-book-cover-no-100-professor-x_a-G-13758639-10577378.jpg?w=632&h=948">
</cover>
</cover>
<div class="title">
<a href="link">COMIC TITLE</a> - YEAR - ★★★★☆
</div>
<div class="text">
<p><h1>description:</h1> description goes here</p>
<p><h1>review:</h1> review goes here </p>
    </div>
</div>

</div><!-- /wrapper -->

<div id="credit">
<a href="https://sh4tterstar.tumblr.com/"><i class="fas fa-star"></i></a>
</div>

</body>
</html>