don't be like the sun

<!--

hi hot people ive been on a roll coding lately so here. for the september coders quarters challenge
also yes the name of the code is a lemon demon reference. i do not care about your opinion on lemon demons old music for i love it

background/buttons: #452a45
links: #b00b69 #69b00b
other bg color: #fff
text: #2a452a

-->

<div class="container col-12">
    <div class="mx-auto my-3 p-4">

    <div class="p-3" style="max-width: 400px; background-color: #452a45; margin-left: auto; margin-right: auto">
        <div class="row">

    <div class="col-4">

      <!-- pfp -->
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/5772932?1578688377">
    </div>

    <div class="col-4 align-items-center" style="color: #fff">

      <!-- full name -->
        <h1>lily xyra</h1>
    </div>

    <div class="col-3 p-2" style="color: #fff">

        <div class="justify-content-between">

        <i class="fas fa-user-friends"></i>

        <!-- nicknames -->
        <p>lily</p>

        </div>

        <div class="justify-content-between">

        <i class="fas fa-venus-mars"></i>

        <!-- gender-->
        <p>female</p>

        </div>

        <div class="justify-content-between">

        <i class="fas fa-calendar-alt"></i>

        <!-- age -->
        <p>23</p>

        </div>

        <div class="justify-content-between">

        <i class="fas fa-cat"></i>

        <!-- species -->
        <p>cat</p>

        </div>

    </div>

    <div class="col-7 p-3 mx-auto my-3" style="background-color: #fff">

        <ul class="nav nav-pills nav-justified">

          <!-- uuuuuuuu buttons. wouldnt recommend touching them unless ur changing the background color -->

    <li class="nav-item">
    <a class="nav-link active" data-toggle="pill" style="border-radius: 0px; background-color: #452a45;" href="#personality">
           <i class="fas fa-user" style="color: #fff"></i>
           </a>
           </li>

    <li class="nav-item">
    <a class="nav-link" data-toggle="pill" style="border-radius: 0px; background-color: #452a45; margin-left: 10px; width: auto" href="#backstory">
           <i class="fas fa-book" style="color: #fff"></i>
           </a>
           </li>

           <li class="nav-item">
           <a class="nav-link" data-toggle="pill" style="border-radius: 0px; background-color: #452a45; margin-left: 10px; width: auto" href="#trivia">
           <i class="fas fa-question" style="color: #fff"></i>
           </a>
           </li>

           </ul>

           <!-- actual uhhhjhhhhhh stuff -->

           <div class="tab-content">

               <div class="tab-pane fade active show m-3" style="max-height: 100px; overflow: scroll; color: #2a452a; text-align: center" id="personality">


                       <h2>PERSONALITY</h2>

                   <!-- traits of ur oc -->
                   <small>trait • trait • trait </small>

                   <!-- describe them -->
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>


               </div>

               <!-- smoke burning smparks and red fire  -->

               <div class="tab-pane fade m-3" style="max-height: 100px; overflow: scroll; color: #2a452a; text-align: center" id="backstory">


                       <h2>BACKSTORY</h2>

                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>

                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>

                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>


               </div>

               <!-- if u want more paragraphs add another <p></p> -->

               <!-- spontanius combustion of the soul (edit from future hara: this is the trivia section) -->

               <div class="tab-pane fade m-3" style="max-height: 100px; overflow: scroll; color: #2a452a; text-align: center" id="trivia">

                   <h2>TRIVIA</h2>
                   <hr style="background-color: #2c2c2c">

                   <div class="justify-content-between">

                       <!-- palette yay -->


                       <!-- change both the title and the color to your color btw -->
                       <span data-toggle="tooltip" title="#fff" style="color: #b00b69">
                           <i class="fas fa-circle"></i>
                           </span>

                   <!-- same as b4-->
                        <span data-toggle="tooltip" title="#fff" style="color: #69b00b">
                            <i class="fas fa-circle"></i>
                            </span>

                            <!-- annotating this from the bottom up is really tiring lmao -->
                            <span data-toggle="tooltip" title="#fff" style="color: #452a45">
                   <i class="fas fa-circle"></i>
                   </span>


                   <!-- i woke up at 6am today. thats fun -->
                   <span data-toggle="tooltip" title="#fff" style="color: #2a452a">
                   <i class="fas fa-circle"></i>
                   </span>


                   <!-- if u wanna get rid of the border get rid of the text shadow and all after it including the color. but after the colon leave it alone that'll break the code -->
                   <span data-toggle="tooltip" title="#fff" style="color: #fff; text-shadow: -1px 0 #452a45, 0 1px #452a45, 1px 0 #452a45, 0 -1px #452a45;">
                   <i class="fas fa-circle"></i>
                   </span>

                   </div>

                   <br>

                   <ul class="fa-ul">

                     <!-- trivia. u can change the heart by switching the 'fal fa-heart' to ur icon. heres font awesome btw https://fontawesome.com/ -->
                      <li><span class="fa-li"><i class="fal fa-heart"></i></span>my eyes</li>
                       <li><span class="fa-li"><i class="fal fa-heart"></i></span>are on</li>
                       <li><span class="fa-li"><i class="fal fa-heart"></i></span>fire</li>
                       <li><span class="fa-li"><i class="fal fa-heart"></i></span>please</li>
                       <li><span class="fa-li"><i class="fal fa-heart"></i></span>help</li>
                   </ul>

                   <!-- if u wanna add more copy + paste
                   <li><span class="fa-li"><i class="fal fa-heart"></i></span>this</li>
                   and put it above the </ul>-->

                   <!-- change link to their ref sheet file -->
                   <a href="#" style="color: #b00b69">reference sheet</a>
                   <br>

                   <!-- change # to link to playlist. can also be removed -->
                   <a href="#" style="color: #b00b69">playlist</a>

                   </div>

           </div>

    </div>

     <div class="col-4 mx-auto p-1 my-3" style="max-width: 150px">

       <!-- pagedoll. change https://f2.toyhou.se/file/f2-toyhou-se/images/23222237_DNjs21cwW6QYQvU.png to ur pfp. art by squiichai btw -->
         <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23222237_DNjs21cwW6QYQvU.png">
     </div>

    <div class="col-11 p-3 mx-auto" style="background: #fff">
        <div class="row no-gutters">

            <div class="col-4" style="text-align: center; color: #2a452a">

              <!-- change the "" with the f2.toyhou.se inside of it to ur characters pfp image -->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/5773052?1578689570" style="max-width: 100px; max-height: 100px">

            <!-- replace da # with the url or just /(firstpartofurl) and Tanimoe with ur characters name -->

            <a href="#" style="color: #2a452a">Tanimoe</a>

            <br>

            <!-- opinions meme (EDGY 2017) -->

            <small>friends</small>

            <!-- to change the hearts to not full, change it to far instead of fas. if you wanna do the opposite, then change far to fas. -->

            <div class="justify">

                <i class="fas fa-heart"></i>
                <i class="fas fa-heart"></i>
                <i class="far fa-heart"></i>

            </div>

            </div>

            <div class="col-4" style="text-align: center; color: #2a452a">

              <!-- change the "" with the f2.toyhou.se inside of it to ur characters pfp image -->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/5778178?1616870478" style="max-width: 100px; max-height: 100px">

            <!-- same as b4 -->

            <a href="" style="color: #2a452a">Eve</a>

            <br>

            <!-- opinions -->

            <small>friends</small>

            <div class="justify">

              <!-- to change the hearts to not full, change it to far instead of fas. if you wanna do the opposite, then change far to fas. -->

                <i class="fas fa-heart"></i>
                <i class="fas fa-heart"></i>
                <i class="far fa-heart"></i>

            </div>

            </div>

            <div class="col-4" style="text-align: center; color: #2a452a">

              <!-- change the "" with the f2.toyhou.se inside of it to ur characters pfp image -->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/7860596?1618260338" style="max-width: 100px; max-height: 100px">

            <!-- same as b4 -->
            <a href="" style="color: #2a452a">Hari</a>

            <br>

            <!-- opinions -->

            <small>besties</small>

            <div class="justify">

                <!-- to change the hearts to not full, change it to far instead of fas. if you wanna do the opposite, then change far to fas. -->

                <i class="fas fa-heart"></i>
                <i class="fas fa-heart"></i>
                <i class="fas fa-heart"></i>

            </div>

            </div>


          </div>



        </div>
    </div>

    </div>

    <!-- credits-->
    <div class="col-4 mx-auto my-1 justify-content-between">


      <!-- for some reason toyhouse refuses to let me use fas fa-microwave so i guess i'll use fas fa-user-cowboy instead for now lol. think i might try to get user-cat added that'd be funny
      (update from hara an hour later: https://github.com/FortAwesome/Font-Awesome/issues/18234. upvote it it'd be funny)

(another hara update from december 25: I CAN USE THE MICROWAVE ICON) -->

        <a href="/micro-wave" style="color: 69b00b">
        <i class="fas fa-microwave"></i>
        </a>


        <!-- credit the person who made the icon next to the name-->

        <a href="/artist" style="color: 69b00b">
        <i class="fas fa-image"></i>
        </a>

        <!-- credit the person who made the pagedoll 2 the right of the tabs-->

        <a href="/artist" style="color: 69b00b">
        <i class="fas fa-male"></i>
        </a>

    </div>
    </div>



    </div>