Stor8

<!------------BUTTONS------------>
<div class="card bg-faded border-0 rounded-0">
    <div class="p-3">
        <ul class="nav nav-fill flex-wrap mt-3">
            <li class="nav-item ml-3 mr-2"><a class="nav-link active btn btn-outline-secondary border-0" data-toggle="tab" href="#profile-1"><b>NOTICE</b></a></li>
            <li class="nav-item ml-2 mr-3"><a class="nav-link btn btn-outline-danger border-0" data-toggle="tab" href="#profile-2"><b>CONTENT WARNING</b></a></li>
        </ul>
    </div>
</div>
<!------------BUTTONS end------------>

<!--PROFILE TABS-->
<div class="p-3 bg-faded">
    <div class="tab-content">
        
        <!--TAB 1: NOTICE-->
        <div id="profile-1" class="tab-pane fade show active">
            <div class="rounded p-1 mx-3 mb-3"
            
            style="background-image: url(https://cdn.appunwrapper.com/wp-content/uploads/2019/06/img_1106.jpg);
            
            background-size: cover; background-position: center">
                <div class="rounded p-3 my-3 mx-3 text-center" style="font-weight: bold; font-size: 12pt; color: black; background-color: rgba(255,255,255,.5);">
                    
                    <!-- TEXT -->
                    <p>
                        Prior knowledge of the game Sky: Children of the Light and potential lore from it are needed to fully understand this character.<br>
                        Some aspects are personal headcanons that have not been comfirmed as canon by Thatgamecompany in any way, shape, or form.
                    </p>
                    <p>
                        Additional notice here.
                    </p>
                    <!-- TEXT end -->
                    
               </div>
               <!-- BACKGRUND IMAGE CREDIT -->
               <p style="font-size: 0.6em; color: black">Image from thatgamecompany</p>
            </div>
        </div>
        <!--TAB 1: NOTICE end-->
        
        <!--TAB 2: CONTENT WARNING-->
        <div id="profile-2" class="tab-pane fade">
            <div class="mx-3 mb-3">
                <div class="container justify-content-center text-uppercase bg-danger"><b>THIS CHARACTER'S PROFILE CONTAINS THE FOLLOWING</b></div>
                <ul class="mt-2">
                    <li>Ye</li>
                    <li>Ye</li>
                    <li>Ye</li>
                </ul>
            </div>
        </div>
        <!--TAB 2: CONTENT WARNING end-->
        
        <p style="font-size: 0.6em">Code by @FlowerlyRat</p>
    </div>
</div>