Jellerie Reef World Code

<!-- forest by starstruck coder

RULES
    - do not remove credit please!
    - feel free to use as a reference!
    - feel free to frankenstein if the other creator(s)are also fine with it


COLOR GUIDE

white : #0f196a
brown : #a0c7f0
yellow orange : #0f196a


use [ IMGHERE ] and [ LINKHERE ] to find links!

-->

<!--//////////////////  BACKGROUND IMAGE  //////////////////-->
<div class="container p-2 p-md-4" style="max-width:1100px;
background:url(https://muralsyourway.vtexassets.com/arquivos/ids/238964/Underwater-Ocean-Bottom-Mural-Wallpaper.jpg?v=638164497054230000)
center; background-size:cover">

    <div class="row no-gutters">
        <div class="col-lg-8 p-1">
            <!--//////////////////  MAIN INFO  //////////////////-->
            <div class="row no-gutters">



                <!--//////////////////  MAIN IMAGE  //////////////////-->
                <div class="card col-sm-7 mt-n5 rounded-0 border-0" style="height:228px;

                background:url(https://i.imgur.com/KHC8ffu.png)

                top; background-size:cover"></div>



                <!--//////////////////  INFO  //////////////////-->
                <div class="card col-sm-5 rounded-0 border-0 overflow-auto p-3" style="height:180px; background:#0f196a; color:#a0c7f0; font-family:georgia">

                  <a class="btn btn-secondary btn-block border-0 rounded px-3 py-2 mb-1" style="background:#a0c7f0; color:#0f196a;" href="https://toyhou.se/~world/LINK"><i class="fas fa-users mr-1"></i> Masterlist</a>
                  <a class="btn btn-secondary btn-block border-0 rounded px-3 py-2 mb-1" style="background:#a0c7f0; color:#0f196a;" href="https://toyhou.se/~world/LINK"><i class="fas fa-party-horn mr-1"></i> Current Events</a>
                  <a class="btn btn-secondary btn-block border-0 rounded px-3 py-2 mb-1" style="background:#a0c7f0; color:#0f196a;" href="https://toyhou.se/29218873.jellerie-reef-resources"><i class="fas fa-star mr-1"></i> Riefers Guide</a>
                  <a class="btn btn-secondary btn-block border-0 rounded px-3 py-2 mb-n2" style="background:#a0c7f0; color:#0f196a;" href="https://toyhou.se/~world/191160.jellerie-reef/characters/folder:5998071"><i class="fas fa-users mr-1"></i> Riefers</a>

                </div>
                <!--//////////////////  END INFO  //////////////////-->
            </div>
            <!--////////////////// END MAIN INFO  //////////////////-->




            <!--//////////////////  BUTTONS  //////////////////-->
            <div class="row no-gutters nav">

                <!-- INFO -->
                <a class="btn col p-2 rounded-0 active" style="background:#a0c7f0; color:#0f196a; box-shadow:none" data-toggle="tab" href="#info">
                    <i class="fal fa-info-circle fa-2x"></i>
                </a>

                <!-- STAFF -->
                <a class="btn col p-2 rounded-0" style="background:#a0c7f0; color:#0f196a; box-shadow:none" data-toggle="tab" href="#staff">
                    <i class="fal fa-id-card fa-2x"></i>
                </a>

            </div>



            <!--//////////////////  TAB CONTENT  //////////////////-->
            <div class="card rounded-0 border-0 text-break" style="height:300px; background:#0f196a; color:#a0c7f0; font-family:georgia">
                <div class="tab-content h-100">


                    <!--================ INFO ================-->
                    <div class="tab-pane fade px-3 pb-3 pt-sm-2 overflow-auto h-100 active show" id="info">


                        <a class="btn btn-secondary btn-block border-0 rounded px-3 py-2 mt-2 mb-3" style="background:#a0c7f0; color:#0f196a;"><i class="fas fa-exclamation-circle mr-1"></i> Currently Setting Up!</a>

                        <!-- END BUTTONS -->

                        <hr class="w-100 my-2" style="border-top:dashed 2px #a0c7f0">

                        <!-- SPECIES DESCRIPTION -->

                          <ul  class="list-group ml-4">
                              <li>Jellerie Reef is a ginormous and vast ocean space that hosts multiple habitants different from one another and coexist in peace.</li>
                              <li>That's not to say there aren't some dangerous fellas hiding in the dark and dampy caves in this sea,just be careful to not be bitten.</li>
                              <li>Having large history and rich knowdlege gained through the years,these species have evolved to have their own special traits that differ them from anyone elses. </li>
                          </ul>
                    </div>
                    <!--================ END INFO ================-->




                    <!--================ STAFF ================-->
                    <div class="tab-pane fade overflow-auto px-3 pb-3 h-100" id="staff">



                        <!-- STAFF BLOCK -->
                        <div class="row no-gutters mt-2">

                            <!-- HEADER -->
                            <div class="col-12 row no-gutters justify-content-between mx-auto" style="font-size:17px;font-weight:bold">
                                <p style="color:#a0c7f0;">
                                    @venissis_saram
                                </p>
                                <i>[ founder ]</i>
                            </div>


                            <!-- ICON -->
                            <div class="align-item-stretch mx-auto">
                            <div class="card rounded-0 mt-2 mx-auto" style="height:100px; width:100px; position:sticky; top:15px;

                            background:url(https://f2.toyhou.se/file/f2-toyhou-se/users/venissis_saram?19)

                            center no-repeat; background-size:cover"></div>
                            </div>

                            <div class="col px-2 col-12 col-sm">

                                <!-- DESCRIPTION -->
                                <div class="mt-4" style="font-size:16px;">
                                <p>Owner and Creator of this species. The person to contact with questions and concerns!</p>
                                </div>
                            </div>
                        </div>
                        <!-- END STAFF BLOCK -->

                        <hr clss="pt-n4 pb-n4">

                        <!-- STAFF BLOCK -->
                        <div class="row no-gutters mt-2">

                            <!-- HEADER -->
                            <div class="col-12 row no-gutters justify-content-between mx-auto" style="font-size:17px;font-weight:bold">
                                <p style="color:#a0c7f0;">
                                    @Seleris
                                </p>
                                <i>[ coder ]</i>
                            </div>


                            <!-- ICON -->
                            <div class="align-item-stretch mx-auto">
                            <div class="card rounded-0 mt-2 mx-auto" style="height:100px; width:100px; position:sticky; top:15px;

                            background:url(https://f2.toyhou.se/file/f2-toyhou-se/users/Seleris?4)

                            center no-repeat; background-size:cover"></div>
                            </div>

                            <div class="col px-2 col-12 col-sm">

                                <!-- DESCRIPTION -->
                                <div class="mt-4" style="font-size:16px;">
                                <p>Assists with coding of the toyhouse pages.</p>
                                </div>
                            </div>
                        </div>
                        <!-- END STAFF BLOCK -->






                        <hr clss="pt-n4 pb-n4">

                        <!-- STAFF BLOCK -->
                        <div class="row no-gutters mt-2">

                            <!-- HEADER -->
                            <div class="col-12 row no-gutters justify-content-between mx-auto" style="font-size:17px;font-weight:bold">
                                <p style="color:#a0c7f0;">
                                    @StormHeart413
                                </p>
                                <i>[ coder + artist ]</i>
                            </div>


                            <!-- ICON -->
                            <div class="align-item-stretch mx-auto">
                            <div class="card rounded-0 mt-2 mx-auto" style="height:100px; width:100px; position:sticky; top:15px;

                            background:url(https://f2.toyhou.se/file/f2-toyhou-se/users/StormHeart413?2)

                            center no-repeat; background-size:cover"></div>
                            </div>

                            <div class="col px-2 col-12 col-sm">

                                <!-- DESCRIPTION -->
                                <div class="mt-4" style="font-size:16px;">
                                <p>Assists with coding of the toyhouse pages and creation of art assets.</p>
                                </div>
                            </div>
                        </div>
                        <!-- END STAFF BLOCK --><!-- ADD MORE HERE -->






                        <hr clss="pt-n4 pb-n4">

                        <!-- STAFF BLOCK -->
                        <div class="row no-gutters mt-2">

                            <!-- HEADER -->
                            <div class="col-12 row no-gutters justify-content-between mx-auto" style="font-size:17px;font-weight:bold">
                                <p style="color:#a0c7f0;">
                                    @space_momo__
                                </p>
                                <i>[ artist ]</i>
                            </div>


                            <!-- ICON -->
                            <div class="align-item-stretch mx-auto">
                            <div class="card rounded-0 mt-2 mx-auto" style="height:100px; width:100px; position:sticky; top:15px;

                            background:url(https://f2.toyhou.se/file/f2-toyhou-se/users/space_momo__?2)

                            center no-repeat; background-size:cover"></div>
                            </div>

                            <div class="col px-2 col-12 col-sm">

                                <!-- DESCRIPTION -->
                                <div class="mt-4" style="font-size:16px;">
                                <p>Assists with creation of art assets.</p>
                                </div>
                            </div>
                        </div>
                        <!-- END STAFF BLOCK --><!-- ADD MORE HERE -->






                        <hr clss="pt-n4 pb-n4">

                        <!-- STAFF BLOCK -->
                        <div class="row no-gutters mt-2">

                            <!-- HEADER -->
                            <div class="col-12 row no-gutters justify-content-between mx-auto" style="font-size:17px;font-weight:bold">
                                <p style="color:#a0c7f0;">
                                    @Fauxcupid
                                </p>
                                <i>[ artist ]</i>
                            </div>


                            <!-- ICON -->
                            <div class="align-item-stretch mx-auto">
                            <div class="card rounded-0 mt-2 mx-auto" style="height:100px; width:100px; position:sticky; top:15px;

                            background:url(https://f2.toyhou.se/file/f2-toyhou-se/users/Fauxcupid?11)

                            center no-repeat; background-size:cover"></div>
                            </div>

                            <div class="col px-2 col-12 col-sm">

                                <!-- DESCRIPTION -->
                                <div class="mt-4" style="font-size:16px;">
                                <p>Assists with creation of art assets.</p>
                                </div>
                            </div>
                        </div>
                        <!-- END STAFF BLOCK --><!-- ADD MORE HERE -->



                    </div>
                    <!--================ END STAFF ================-->






                </div>
            </div>
            <!--//////////////////  END TAB CONTENT  //////////////////-->
        </div>



        <!--//////////////////  MOODBOARD  //////////////////-->
        <div class="col-lg-4 p-0 align-item-stretch" style="max-height:795px; min-height:500px;">
            <div class="card rounded-0 border-0 bg-transparent">


                <!--================ MUSIC PLAYER ================-->
                    <div class="p-1">
                        <div class="card rounded-0 overflow-auto p-2" style="height:200px; border: 5px double #0f196a; background:#a0c7f0; color:#0f196a; font-family:georgia">



                            <!-- TITLE -->
                            <div class="pt-2 text-center" style="color:#0f196a">
                                <div style="font-weight:bold">
                                NPCs
                                </div>
                            </div>

                            <!-- DIVIDER -->
                            <div class="w-100">
                                <div class="row no-gutters">
                                    <div class="col"><hr style="border-top: 2px dashed #0f196a"></div>
                                    <div class="col-auto"><i class="far fa-users fa-fw m-1 mt-2" style="color:#0f196a;"></i></div>
                                    <div class="col"><hr style="border-top: 2px dashed #0f196a"></div>
                                </div>
                            </div>


                            <!-- LYRICS



                            -->
                            <div class="text-center font-italic">

                                <a href="https://toyhou.se/29170356.lyzia" target="_BLANK">
                                <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/29170356?1725843850" style="max-height: 100px"></a>

                            </div>







                        </div>
                    </div>
                <!--================ END MUSIC PLAYER ================-->


                <!--================ MUSIC PLAYER ================-->

                    <div class="p-1">
                        <div class="card rounded-0 overflow-auto p-2" style="height:318px; border: 5px double #0f196a; background:#a0c7f0; color:#0f196a; font-family:georgia">



                            <!-- TITLE -->
                            <div class="pt-2 text-center" style="color:#0f196a">
                                <div style="font-weight:bold">
                                Updates
                                </div>
                            </div>

                            <!-- DIVIDER -->
                            <div class="w-100">
                                <div class="row no-gutters">
                                    <div class="col"><hr style="border-top: 2px dashed #0f196a"></div>
                                    <div class="col-auto"><i class="far fa-calendar-days fa-fw m-1 mt-2" style="color:#0f196a;"></i></div>
                                    <div class="col"><hr style="border-top: 2px dashed #0f196a"></div>
                                </div>
                            </div>


                            <!-- LYRICS



                            -->
                            <div class="text-left font-italic">

                              <a class="btn-block border-0 rounded-0 px-3 py-2 mb-1 text-left" style="color:#0f196a" href="https://toyhou.se/~forums/5868.species-discussion/566811.jellerie-reef-interest-check" target="_blank"><i class="fas fa-circle-chevron-right mr-1"></i> September 2024 - Interest Check</a>

                            </div>







                        </div>
                    </div>
                <!--================ END MUSIC PLAYER ================-->
            </div>
        </div>
        <!--//////////////////  END MOODBOARD  //////////////////-->
    </div>

    <!--//////////////////  DECOR  //////////////////-->
    <div class="d-none d-xl-block">
    <!-- WAVES -->
    <div style="position:absolute; top:-90px; right:150px;">
            <i class="fa-solid fa-wave fa-4x" style="position:absolute; right:-10px; top:50px; color:#2b6197"></i>
            <i class="fa-solid fa-wave fa-10x" style="position:absolute;color:#153D65"></i>
            <i class="fa-solid fa-fish fa-5x" style="position:absolute; right:-130px; top:20px; transform:rotate(40deg); color:#B8DBFF"></i>
    </div>


    <!-- CORNER FISH -->
    <div style="position:absolute; top:500px; right:1190px;">
            <i class="fa-regular fa-squid fa-10x" style="position:absolute;color:#153D65"></i>
            <i class="fa-solid fa-fish fa-3x" style="position:absolute; right:-110px; top:-60px; transform:rotate(-160deg); color:#B8DBFF"></i>
            <i class="fa-solid fa-fish fa-3x" style="position:absolute; right:-230px; top:60px; transform:rotate(-40deg); color:#B8DBFF"></i>
            <i class="fa-solid fa-fish fa-3x" style="position:absolute; right:-310px; top:45px; transform:rotate(40deg); color:#B8DBFF"></i>
    </div>
    </div>



</div>


<!-- CODE CREDIT == DO NOT REMOVE -->
<p class="text-center">
    <a class="tooltipster" style="color:#0f196a" href="https://toyhou.se/17465328.-f2u-forest" title="Code by starstruckcoder"><i class="fas fa-code"></i></a>
</p>