Rulers Of Flowers

<!--

Hello!
Thank you for using my code!

Rules to Follow:

◈ Do not EVER delete or remove the credits of the coder or claim this code as your own.
◈ Do not redistribute this code, no matter how much you edited it!
◈ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#6316). Major changes in code is not accepted.
◈ If you like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!

If you like a custom code, check out my blog to see if commissions are open!


xoxo, Kawaii-lau

-->




<!-- CUSTOM FONTS -->
<link href='https://fonts.googleapis.com/css?family=Kaushan Script|Cardo' rel='stylesheet'>


<style>
    /* Scrollbar CSS */
    ::-webkit-scrollbar {
        width: 4px;
        height: 6px;
        background: rgb(230, 230, 230);
    }

    ::-webkit-scrollbar-thumb {
        background: rgb(150, 150, 150)
    }

    /* TEXT CSS */

    .text-css {
        font-family: Cardo;
        font-size: 14px;
        color: rgb(100, 100, 100)
    }

    h1,
    h2,
    h3,
    h4 {
        margin: 0px;
        text-align: center;
        color: rgb(100, 100, 100)
    }

    h1,
    h3 {
        font-family: 'Kaushan Script';
    }

    /* END OF TEXT CSS */

    /* TEXT DIVIDER CSS */

    hr {
        border: none;
        border-top: 3px double rgb(150, 150, 150);
        width: 90%
    }

    /* MAIN CSS */

    .background {
        padding: 50px 30px;
        background: white url(https://i.pinimg.com/originals/f6/14/a6/f614a63cf05c887265e8e761dd279bd0.jpg) fixed center;
        background-size: 100%;
        border-radius: 20px;
        margin: 20px 0px 20px 0px
    }

    .main-box {

        border-radius: 5px;
        background: #F7F3EF
            /* Enable container background image by removing the brackets below and add background */
            /*  url( ) fixed center */
    }

    .sideInfo {
        background: white
    }

    .sheet-boxes>div {
        background: white;
        border-radius: 10px;
    }


    /* Table CSS */

    table {
        margin-left: auto;
        margin-right: auto;
        border-spacing: 10px 0px
    }

    table tr,
    td {
        border-bottom: 1px solid rgb(150, 150, 150);
        color: rgb(100, 100, 100);

    }

    /* First table cell css */

    td:first-child {
        text-align: right;
        font-weight: bold;
        color: #D5B2A4
    }

    #divBlurb {
        text-align: center;
        font-style: italic
    }

    .rel {
        border: 1px solid;
        background: white;
    }

    /* Credits CSS (DO NOT REMOVE CREDITS) */

    .credits {
        text-align: center;
        font-family: serif;
        font-size: 12px;
        margin-top: 5px;
        color: rgb(150, 150, 150)
    }

    .credits a {
        color: #BD99A8;
        text-decoration: none;
        transition: 1s ease
    }

    .credits a:hover {
        color: #AE6B79;
        font-weight: bold
    }



    /* DO NOT TOUCH CSS BELOW (or else it will break) */
    .main-box {
        width: 780px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    .main-cont {
        width: 610px;
        height: 400px;
        overflow: auto;
    }

    .gallery {
        display: flex;
        flex-direction: column;
        width: 250px;
        float: left
    }

    .gallery>img {
        width: 250px;
        height: 400px
    }

    .contFlex {
        display: flex;
        flex-direction: row
    }

    .sideBox {
        width: 170px;
        height: 400px;
    }

    .sideCont {
        padding: 10px
    }

    .sideInfo {
        width: 120px;
        height: 240px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 5px;
        padding: 0px 10px
    }

    .profile-pic-border {
        position: absolute;
        z-index: 5;
        width: 110px;
        height: 100px;
        left: -15px;
        top: -10px
    }

    .profile-pic {
        position: relative;
        margin: 20px auto 20px auto;
        width: 80px;
        height: 80px;
    }

    .profile-pic>img {
        border-radius: 100%;
    }

    .sheet-boxes {
        display: flex;
        flex-direction: column;
        width: auto;
    }

    .sheet-boxes>div {
        margin: 10px 10px 5px 10px;
        height: 375px;
        padding: 5px 10px;
        overflow: auto
    }

    .title {
        position: relative;
        top: -10px;
        left: -35px;
        font-size: 22px;
        z-index: 4;
        white-space: no-wrap;
        width: 180px;
        transform: rotate(355deg)
    }

    table tr,
    td {
        width: 180px;
        padding: 5px 10px 5px 0px;
        margin-right: 10px
    }

    td:first-child {
        width: 80px;
    }

    .rel {
        width: 80px;
        height: 80px;
        border-radius: 5px;
        transition: 1s ease;
        margin: 5px;
        position: relative;
        top: 0px;
        left: 0px;
        overflow: hidden;
        white-space: nowrap
    }

    .rel>img {
        width: 80px;
        height: 80px;
        float: left;
        margin: 0px 5px 5px 0px;
        border-radius: 5px
    }

    .rel:hover {
        width: 300px;
        height: 150px;
        top: 0px;
        white-space: normal
    }

    .relFlex {
        display: flex;
        flex-direction: row;
        margin-left: auto;
        margin-right: auto;
        width: 500px;
        transition: 1s ease
    }

    .relFlex-2:hover {
        margin-top: -100px;
    }

    .rel-2:hover {
        margin-left: -90px;
        z-index: 2;
    }

    .rel-3:hover {
        margin-left: -180px;
        z-index: 2;
    }
</style>



<body>
    <div class="background ">
        <div class="main-box text-css">
            <div class="contFlex">
                <div class="sideBox">
                    <div class="sideCont">

                        <div class="profile-pic">
                            <img src="https://i.imgur.com/EpSfP1s.png" class="profile-pic-border" alt="border" />
                            <img src="https://i.pinimg.com/564x/06/52/2b/06522b08237c37ed6c9b0cc8a4ceca52.jpg" style="width:100%;height:100%" alt="profile-picture" />
                        </div>
                        <div class="sideInfo">
                            <h1 class="title">Title</h1>
                            <p style="font-weight:bold">Name<br>Timezone<br>Discord<br>Faceclaim<br>Misc. Notes
                            </p>
                            <p>Other Users...</p>
                        </div>
                        <!-- (DO NOT REMOVE CREDITS) -->
                        <div class="credits">2020 &copy; <a href="https://kawaii-lau.tumblr.com/" target="_blank">Kawaii-Lau</a></div>
                    </div>
                </div>

                <!--- MAIN BOX -->
                <div class="main-cont">

                    <!---- PLACE YOUR FC IMAGES HERE (You can place as many as you want) ---->
                    <div class="gallery">
                        <img src=" " />
                        <img src=" " />
                        <img src=" " />
                        <img src=" " />
                        <img src=" " />

                    </div>
                    <div class="sheet-boxes">
                        <div id="#profolio">

                            <h1>Name</h1>
                            <div id="divBlurb">
                                <h4>"Quote..."</h4>
                            </div>
                            <hr>

                            <table>


                                <tr>
                                    <td>Nickname:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Age:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Birthdate:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Birthplace:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Alligance:</td>
                                    <td>Write kingdom here</td>
                                </tr>
                                <tr>
                                    <td>Position:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Status:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Civil Status:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Orentation:</td>
                                    <td>Write here</td>
                                </tr>
                            </table>

                        </div>

                        <div id="personality">
                            <h1>Personality</h1>
                            <div id="divBlurb">
                                Write persona here....
                            </div>
                            <hr>
                            <table>


                                <tr>
                                    <td>Strengths:</td>
                                    <td>Write here<br> (Cunning, loving, etc.)</td>
                                </tr>
                                <tr>
                                    <td>Flaws:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Peeves:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Ambitions:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Fears:</td>
                                    <td>Write here</td>
                                </tr>

                            </table>
                        </div>
                        <div id="appearance">
                            <h1>Appearance</h1>
                            <div id="divBlurb">
                                Write impression here....
                            </div>
                            <hr>
                            <table>


                                <tr>
                                    <td>Species:</td>
                                    <td>Write here<br> (elf, faerie, etc.)</td>
                                </tr>
                                <tr>
                                    <td>Skin color:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Hair color:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Eye color:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Tone:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Height:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Weight:</td>
                                    <td>Write here</td>
                                </tr>

                            </table>
                        </div>
                        <div id="skills-interests">
                            <h1>Skills &amp; Interests</h1>
                            <div id="divBlurb">
                                Write misc. here....
                            </div>
                            <hr>
                            <table>


                                <tr>
                                    <td>Learned Skills:</td>
                                    <td>Write here<br> (archery, weaving, etc.)</td>
                                </tr>
                                <tr>
                                    <td>Born Abilities:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Possessions:</td>
                                    <td>Write here</td>
                                </tr>
                            </table>
                            <hr style="margin-top:10px">

                            <table>
                                <tr>
                                    <td>Likes:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Dislikes:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Favorites:</td>
                                    <td>Write here</td>
                                </tr>
                                <tr>
                                    <td>Hobbies:</td>
                                    <td>Write here</td>
                                </tr>

                            </table>
                        </div>
                        <div id="relations" style="overflow:hidden">
                            <h1>Relations</h1>
                            <hr>
                            <div class="relFlex">

                                <div class="rel rel-1">
                                    <img src="http://pm1.narvii.com/6486/0a255c9a1ef79dc034c910d93e001522a89a1b4b_hq.jpg" alt="friendPic" />

                                    <h3>Lucien Vanserra</h3>
                                    Former Emissary of the Spring Court
                                </div>


                                <div class="rel rel-2">
                                    <img src=" " />
                                    <h3>Name</h3>
                                    Description
                                </div>
                                <div class="rel rel-3">
                                    <img src=" " />
                                    <h3>Name</h3>
                                    Description
                                </div>
                            </div>

                            <div class="relFlex relFlex-2">

                                <div class="rel rel-1 rel-text">
                                    <img src=" " alt="friendPic" />

                                    <h3>Name</h3>
                                    Description
                                </div>


                                <div class="rel rel-2">
                                    <img src=" " />
                                    <h3>Name</h3>
                                    Description
                                </div>
                                <div class="rel rel-3">
                                    <img src=" " />
                                    <h3>Name</h3>
                                    Description
                                </div>
                            </div>
                            <div class="relFlex relFlex-2">

                                <div class="rel rel-1 rel-text">
                                    <img src=" " alt="friendPic" />

                                    <h3>Name</h3>
                                    Description
                                </div>


                                <div class="rel rel-2">
                                    <img src=" " />
                                    <h3>Name</h3>
                                    Description
                                </div>
                                <div class="rel rel-3">
                                    <img src=" " />
                                    <h3>Name</h3>
                                    Description
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>