theme i / astrid

<!DOCTYPE html>

<!--


               theme by @sapphothemes / do not remove credit


-->


<head>

    <title>TITLE</title> <!-- shortcut title -->


<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css?family=Cabin:500|Karla:400,400i|Raleway:700" rel="stylesheet">


    <style type="text/css">

    *, body, a, a:hover { cursor: url(http://www.totallylayouts.com/cursors/random/tiny_cursor.png), auto; } /* cursor */

    /* tooltips */

        ::-webkit-scrollbar {
            width: 5px;
            border-radius:15%;
        }

        ::-webkit-scrollbar-track {
            background: {background};
        }

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

        ::selection {
            color: #fff;
            background: #b6b6b6;
        }


        body {
            z-index:1;
            background:#fff; /* background */
            padding-left:5%;
        }

        h1 {
            text-align:center;
            font-family: 'Raleway', sans-serif;
            font-size:35px;
            color:#444;
            text-transform:lowercase;
        }

        h2 {
            text-align:center;
            font-family: 'Cabin', sans-serif;
            letter-spacing:-0.5px;
            color:#666;
            margin:17px -10px 10px;
            text-transform:lowercase;
            transition:0.5s ease;
        }

        h2:hover {
            color:#9a9a9a;
        }

        a {
            text-decoration:none;
            color:#777;
        }

        #grid {
            width:auto;
            display:inline;
            height:auto;
        }

        .header {
            z-index:5;
            padding:30px 0 0;
            height:200px;
            width:95%;
            text-align:center;
        }

        .tdesc {
            font-family: 'Karla', sans-serif;
            font-size:14px;
            letter-spacing:-0.5;
            line-height:-1em;
            margin:-25px auto -10px auto;
            height:auto;
            width:180px;
            max-height:52px;
            text-transform:lowercase;
            overflow:hidden;
            text-align:center;
            top:0;
        }

         .d {
            font-family: 'Karla', sans-serif;
            font-size:14px;
            letter-spacing:-0.5;
            text-align:center;
            margin:20px auto;
            text-decoration:none;
            height:auto;
            width:auto;
            text-transform:lowercase;
            word-spacing:9px;
        }

        .d a {
            text-decoration:none;
            color:#333;
            font-style:italic;
            transition:0.5s ease;
        }

        .d a:hover {
            color:#999;
        }

        .item {
            float:left;
            margin:20px 32px;
            margin-left:30px;
            box-sizing:border-box;
            width:180px;
            height:auto;
            position:relative;
        }

        .mdesc {
            margin:-10px;
            text-align:center;
            height:75px;
            font-size:13px;
            text-transform:lowercase;
            font-family: 'Karla', sans-serif;
            line-height:-1em;
            overflow:hidden;

        }

        .mdesc a { text-decoration:none; font-style:italic; }

        .mdesc a:before { content:'@' }

        .mdesc a:after { content:' ; '; }

        .item img {
            height:auto;
            width:180px;
            border:0px;
            border-radius:50%;
            position:relative;
            display:block;
        }

        .uwu {
            z-index:10;
            bottom:25px;
            right:30px;
            position:fixed;
            color:#777;
            font-size:17px;
        }

        .tmblr-iframe {display:none;}

        .tmblr-iframe--app-cta-button {
    display: none!important;
}

    </style>
</head>
    <body>

    <div class="header">

    <h1>members</h1> <!-- title -->

    <div class="tdesc">

    here is your description, don't make it too long.


    </div>

    <div class="d">

    <a href="/">home</a> <!-- home link -->
    <a href="/ask">ask</a> <!-- ask link -->
    <a href="LINK URL">link</a> <!-- extra link -->

    </div>

        </div>

    <div id="grid"> <!-- members start-->

<!-- example -->
<div class="item">

    <img src="IMAGE URL"/> <!-- image -->
    <a href="/"><h2><!-- member name start --> NAME <!-- name end --></h2></a>
    <div class="mdesc">

    <a href="URL">username</a> <!-- member url -->

    quote <!-- member description -->

    </div>
</div>

<!-- end example -->

<!-- add as many members as you like below -->


<!-- members end -->

</div>


    <!-- do not edit past this point -->

        <div class="uwu"><a href="https://sapphothemes.tumblr.com"><i class="fas fa-venus-double"></i></a></div>

    </body>
</html>