Untitled

<!DOCTYPE html>
<html>
    <!-- Page theme by velvetcrowe.tumblr.com
    Please do not steal / edit / remove credits

    How to use:
    - Each row is in a div
    - to add more people copy and paste each row
    - you can add more then the basic 3 rows, there will be a scrollbar


    this code is kinda ugly because I intended it for myself

    this is intended for page theme so glglgl-->
    <head>
        <title>{title}</title>
        <link rel="shortcut icon" href="{Favicon}">
        <!-- fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway|Roboto|Source+Sans+Pro" rel="stylesheet">


        <style>
            body{
                /*if browser does not support gradient*/
                background:#602749;
                /*gradient background*/
                background: -webkit-gradient(linear, left top, left bottom, from(#130912), to(#602749)) fixed;
                overflow-y: auto;
                overflow-x:hidden;
                font-family: 'Raleway', sans-serif;
            }
            body::-webkit-scrollbar {
                width: 5px;
            }

            body::-webkit-scrollbar-track {
                border-radius: 10px;
            }

            body::-webkit-scrollbar-thumb {
                background-color:black;
            }
            ::-webkit-scrollbar {
                width: 5px;
            }

            ::-webkit-scrollbar-track {
                border-radius: 10px;
            }

            ::-webkit-scrollbar-thumb {
                background-color:black;
            }
            .container{
                /*transparent background*/
                background: rgba(19, 9, 18, 0.7);
                height:600px;
                width:450px;
                /*page centering*/
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                overflow-y: auto;
                overflow-x:hidden;
            }
            .icon{
                height:100px;
                width:100px;
            }
            .row{
                width:450px;
                height:200px;
            }
            .name{
                background-color:#3E1C33;
                /*font size is responsive*/
                font-size:12px;
                font-size: 1.2vmin;
                color:#130912;
                height:30px;
                width:100px;
                max-width:100px;
                max-height:30px;
                padding:1px;
                text-align:center;
                font-weight:bold;
                display: table-cell;
                vertical-align: middle;
                transition: background-color 1s linear;
                overflow-y:auto;
                overflow-x:hidden;
            }
            .name:hover{
                color:#602749;
                background:white;
                transition: background-color 0.6s linear;
            }
            .unit{
                height:125px;
                width:100px;
                /*float:left;*/
                margin:auto;
                padding:25px;
                display: table-cell;
            }
            .bottomnotescontainer{
                height:10px;
                width:440px;
                background-color:#602749;
                margin: auto;
                position: absolute;
                top: 620px;
                left: 0;
                bottom: 0;
                right: 0;
                padding:5px;
            }
            .note{
                color:#130912;
                font-size:11px;
                text-align:Center;
                font-weight:bold;
                height:13px;
                overflow-y:auto;
                overflow-x:hidden;
            }
            .buttoncontainer{
                width:450px;
                height:100px;
                margin: auto;
                position: absolute;
                top: 120px;
                left: 0;
                bottom: 0;
                right: 0;
                display: table-cell;
                vertical-align: middle;
            }
            .tumblrbutton{
                margin:25px;
                float:left;
                text-align:center;
                background-color:#3E1C33;
                color:#130912;
                height:30px;
                width:100px;
                font-size:25px;
                transition: background-color 1s linear;
            }
            .tumblrbutton:hover{
                background-color:#130912;
                color:#3E1C33;
                transition: background-color 0.6s linear;
            }
            a, a:visited{
                text-decoration:none;
                color:white;
                transition: background-color 1s linear;

            }
            img{
                height:100px;
            }

        </style>

    </head>

    <body>
        <div class="container">
            <!--a single row, use this to make more rows-->
            <div class="row">
                <div class="unit">
                    <div class="icon"><img src="https://68.media.tumblr.com/b001e5d9fcaf0b2b7f27a5a62537221c/tumblr_osv0h05inJ1w02k91o1_100.png" /></div>
                    <div class="name">Name 1<br/>[Subtext]</div>
                </div>
                <div class="unit">
                    <div class="icon"><img src="https://68.media.tumblr.com/b001e5d9fcaf0b2b7f27a5a62537221c/tumblr_osv0h05inJ1w02k91o1_100.png"/></div>
                    <div class="name">Name 2<br/>[Subtext]</div>
                </div>
                <div class="unit">
                    <div class="icon"><img src="https://68.media.tumblr.com/b001e5d9fcaf0b2b7f27a5a62537221c/tumblr_osv0h05inJ1w02k91o1_100.png"/></div>
                    <div class="name">Name 3<br/>[Subtext]</div>
                </div>
            </div>
            <!-- end of the first row make sure to copy and paste each row -->
            <!--second row start-->
            <div class="row">
                <div class="unit">
                    <div class="icon"><img src="https://68.media.tumblr.com/b001e5d9fcaf0b2b7f27a5a62537221c/tumblr_osv0h05inJ1w02k91o1_100.png"/></div>
                    <div class="name">Name 4<br/>[Subtext]</div>
                </div>
                <div class="unit">
                    <div class="icon"><img src="https://68.media.tumblr.com/b001e5d9fcaf0b2b7f27a5a62537221c/tumblr_osv0h05inJ1w02k91o1_100.png"/></div>
                    <div class="name">Name 5<br/>[Subtext]</div>
                </div>
                <div class="unit">
                    <div class="icon"><img src="https://68.media.tumblr.com/b001e5d9fcaf0b2b7f27a5a62537221c/tumblr_osv0h05inJ1w02k91o1_100.png"/></div>
                    <div class="name">Name 6<br/>[Subtext]</div>
                </div>
            </div>
            <!--end of second row-->
            <!--third row start-->
            <div class="row">
                <div class="unit">
                    <div class="icon"><img src="https://68.media.tumblr.com/b001e5d9fcaf0b2b7f27a5a62537221c/tumblr_osv0h05inJ1w02k91o1_100.png"/></div>
                    <div class="name">Name 7<br/>[Subtext]</div>
                </div>
                <div class="unit">
                    <div class="icon"><img src="https://68.media.tumblr.com/b001e5d9fcaf0b2b7f27a5a62537221c/tumblr_osv0h05inJ1w02k91o1_100.png"/></div>
                    <div class="name">Name 8<br/>[Subtext]</div>
                </div>
                <div class="unit">
                    <div class="icon"><img src="https://68.media.tumblr.com/b001e5d9fcaf0b2b7f27a5a62537221c/tumblr_osv0h05inJ1w02k91o1_100.png"/></div>
                    <div class="name">Name 9<br/>[Subtext]</div>
                </div>
            </div>
            <!--end of third row-->
            <!-- end of rows -->
        </div>
        <!-- end of container-->

        <div class="bottomnotescontainer">
            <!-- notes at the bottom of the page-->
            <div class="note"> Tiny space for notes!</class>
        </div>

        <!--bottom buttons -->
        <div class="buttoncontainer">
            <a href="/"><div class="tumblrbutton">Link 1</div></a>
            <a href=""><div class="tumblrbutton">Link 2</div></a>
            <a href="https://velvetcrowe.tumblr.com/" title="guess who :^)"><div class="tumblrbutton">Credits</div></a>
        </div>


    </body>
</html>