Page 10. Chara Page {Dessert}

<!-- Page 10. Masterlist

{. Dessert .}

Page #10. (Character Masterlist)
http://noiretblanc-themes.tumblr.com/

Please don't use this theme as a base or claim it as your own.
You are free to edit this page as much as you want, please just don't erase the credits.

-->

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="{Favicon}">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Life+Savers" rel="stylesheet">
<title>{Title}</title>

<style>

    ::-webkit-scrollbar-track
    {
        background-color: #ffffff;
    }

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

    ::-webkit-scrollbar-thumb
    {
        background-color: #f07e96;
        background-image: -webkit-linear-gradient(45deg,
                                                  rgba(255, 255, 255, .5) 25%,
                                                  transparent 25%,
                                                  transparent 50%,
                                                  rgba(255, 255, 255, .5) 50%,
                                                  rgba(255, 255, 255, .5) 75%,
                                                  transparent 75%,
                                                  transparent)
    }

    body{
        margin:0;
        padding:0;
        font-family: 'Abel', sans-serif;
    }

    a{
        -moz-transition:all .4s ease-in-out;
        -webkit-transition:all .4s ease-in-out;
        -o-transition:all .4s ease-in-out;
         transition:all .4s ease-in-out;
    }

    #content{
        position: absolute;
        left:80px;
        right: 80px;
        top:80px;
        bottom: 0;
        background: white; /* Center bg color */
        z-index: 1;
        padding: 10px;
        min-width: 500px;
    }

    .lb, .tb, .rb, .bb{
        background: url("https://i.imgur.com/YfDfP8r.png"); /* Border BG image */
    }

    .lb{
        position: fixed;
        left: 0;
        width: 80px;
        height: 100%;
        z-index: 5;
    }

    .tb{
        position: fixed;
        left: 0;
        right: 0;
        height: 80px;
        z-index: 4;
    }

    .rb{
        position: fixed;
        right: 0;
        width: 80px;
        height: 100%;
        z-index: 3;
    }

     .tt{
        position: fixed;
        z-index: 100;
        font-size: 40px;
        left:100px;
        top:45px;
        font-family: 'Life Savers', cursive;
        text-shadow: 3px 3px 10px rgba(150, 150, 150, 1);
    }

    .topbar{
        position: fixed;
        z-index: 10;
        width: 100%;
        height: 80px;
        text-align: center;
        min-width: 500px;
    }

    .topbar a{
        margin: 30px 10px;
        text-decoration: none;
        display: inline-block;
        background: rgb(255, 255, 255); /* Links bg */
        color: #454153; /* Links font color */
        height: 50px;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 5px 5px 0 0;
        border-bottom: 4px solid transparent;
        font-family: 'Life Savers', cursive;
    }


    .topbar a:hover:nth-child(odd) {
        border-bottom: 4px solid #ff7592; /* Links hover border color */
    }

    .topbar a:hover:nth-child(even) {
        border-bottom: 4px solid #74efff; /* Links hover border color */
    }

    .topbar i{
        padding-top: 3px;
        font-size: 16px
    }

    /*charas*/

    .container {
        position:relative;
        overflow:hidden;
        margin: 10px;
        display: inline-block;
        border-radius:15px;
    }

    .container img{
        max-height: 300px;
    }

    .container .textbox {
        color: white; /* Character descriptions font color */
        width:200px;
        height:300px;
        position:absolute;
        top:0;
        left:0;
        margin-top:-300px;
        border-radius:15px;
        background-color: rgba(22, 26, 44, 0.7);

    }
    .container:hover .textbox {
        margin-top:0;
    }
    .textbox p{
        padding: 0 10px 10px 10px;
        margin: 0;
        text-align: left;
    }

    .textbox {
        -webkit-transition: all 0.7s ease;
        transition: all 0.7s ease;
        text-align: center;
        overflow: auto;

    }

    h1{
        display: inline-block;
        margin-top: 12px;
        border-top: 3px solid #10d3ad; /* Name boder color top */
        border-bottom: 3px solid #10d3ad; /* Name boder color bottom */
        font-size: 24px;
        padding-bottom: 2px;
    }

    b{
        color: #ffb0d1;  /* Character descriptions bold font color */
    }

    .container a{
        display: inline-block;
        color: inherit;
        text-decoration: none;
        padding-left: 20px;
    }


</style>
</head>

<body>

    <div class="lb"></div> <div class="tb"></div> <div class="rb"></div>

        <div class="tt">Masterlist</div>

    <div class="topbar">
        <a href="/">Back</a>
        <a href="/ask">Ask</a>
        <a href="/">Link 1</a>
        <a href="/">Link 2</a>
        <a href="/">Link 3</a>
        <a href="http://noiretblanc-themes.tumblr.com" class="cr"><i class="fa fa-code" aria-hidden="true"></i></a>
    </div>

    <div id="content">
    <!-- All characters must go below this line -->


        <!-- Copy from here to create a new character -->
        <div class="container">
            <img src="https://i.imgur.com/octnI09.png"> <!-- Image size recommended: 200x300 px-->
            <div class="textbox">

                <h1>Character Name</h1>

                <p class="text">
                    <b>Fandom:</b> Info<br>
                    <b>Age:</b> 00 <br>
                    <b>Ships:</b><br> Person1, Person2, Person3<br><br>

                    Here's some data about the character. Insert anything you want.<br><br>

                    <b>Tags:</b><br>
                        <a href="">Tag1</a> <a href="">Tag2</a> <a href="">Tag3</a>
                </p>

            </div>
        </div>
        <!-- End of new character -->


    <!-- All characters must go above this line -->
    </div>


</body>
</html>