pizza heroes

<!--
sorry for my disappearance i didnt wanna code

brick color: #9b2e42
stack color: #d6b295
-->

<div class="col-lg-7 col-md-10 col-sm-12 mx-auto">
    <div class="col-12" style="">
        <div class="row no-gutters">

        <!-- tab buttons, ignore -->
        <div class="col">
            <ul class="nav nav-tabs border-0 justify-content-between pr-3 pt-4">
                <li class="nav-item">
                    <a data-toggle="tab" href="#first" class="nav-link active mt-5 px-0 border-0">
                        <i class="fad fa-pizza-slice fa-flip-horizontal fa-4x"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a data-toggle="tab" href="#second" class="nav-link mt-3 px-0 border-0">
                        <i class="fad fa-pizza-slice fa-flip-horizontal fa-4x"></i>
                    </a>
                </li>
            </ul>
        </div>

        <!-- chimney thing, you could add something here? couldnt recommend it though. -->
        <div class="col-4 mb-n2 hidden-md-down" style="height: 200px">
            <div class="h-25 w-100" style="position: relative; z-index: 1; background: #d6b295"></div>

            <div class="h-100 w-75 mx-auto" style="overflow: hidden; background-color: #9b2e42">
            <div class="h-100 w-75" style="background-image: url(https://www.graphicpear.com/wp-content/uploads/2022/10/Brick-Seamless-Pattern-.png); position: absolute; top: 0; background-attachment: fixed; mix-blend-mode: hard-light"></div>
            </div>
        </div>

        <!-- tab buttons, ignore -->
        <div class="col">
            <ul class="nav nav-tabs justify-content-between pl-3 pt-4 border-0">
                <li class="nav-item ">
                    <a data-toggle="tab" href="#third" class="nav-link mt-3 px-0 border-0">
                        <i class="fad fa-pizza-slice fa-4x"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a data-toggle="tab" href="#fourth" class="nav-link mt-5 px-0 border-0">
                        <i class="fad fa-pizza-slice fa-4x"></i>
                    </a>
                </li>
            </ul>
        </div>

        </div>

    </div>

    <!-- part you need to care about -->
    <div class="col-12 pt-5 px-md-0" style="border-radius: 50% 50% 0 0; overflow: hidden; background: #9b2e42;">
        <div class="h-100 w-100" style="background-image: url(https://www.graphicpear.com/wp-content/uploads/2022/10/Brick-Seamless-Pattern-.png); position: absolute; top: 0; background-attachment: fixed; mix-blend-mode: hard-light"></div>

        <div class="mt-4 col-md-8 col-sm-12 mx-auto px-2">
            <div class="tab-content">

                <!-- tab 1 -->
                <div class="tab-pane active show" id="first">

                    <!-- title -->
                    <div class="row no-gutters p-0 text-muted">
                        <div class="card card-block m-0 rounded-0 p-1 font-weight-bold" style="border-width: 3px; border-right: none; font-size: 18px">IMAGE</div>
                        <div class="col-auto justify-content-center align-items-center p-2 card card-block rounded-0" style="border-width: 3px;"><i class="fas fa-pizza"></i></div>
                    </div>

                    <div class="card card-block rounded-0 p-2 overflow-auto" style="border-top: none; border-width: 3px; height: 169.9px">

                        <!-- little image of your character here, maybe a reference or just a drawing you really like? -->
                        <div class="w-100 h-100 p-2 align-items-end" style="background-image: url(IMGURLHERE); background-size: cover; background-position: center">

                            <!-- put image credit here -->
                            <a class="ml-auto text-muted" href="#" target=_blank><i class="fas fa-image"></i></a>
                        </div>
                    </div>
                </div>

                <!-- tab 2 -->
                <div class="tab-pane" id="second">

                    <!-- title -->
                    <div class="row no-gutters p-0 text-muted">
                        <div class="card card-block m-0 rounded-0 p-1 font-weight-bold" style="border-width: 3px; border-right: none; font-size: 18px">ABOUT</div>
                        <div class="col-auto justify-content-center align-items-center p-2 card card-block rounded-0" style="border-width: 3px;"><i class="fas fa-pizza fa-rotate-90"></i></div>
                    </div>

                    <!-- basics about oc -->
                    <div class="card card-block rounded-0 p-2 overflow-auto" style="border-top: none; border-width: 3px; max-height: 169.9px">

                        <!-- name -->
                        <div class="row no-gutters">
                            <div class="col-auto text-muted text-monospace font-weight-bold">NAME</div>
                            <div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
                            <div class="col-auto">NAMELESS SURNAME</div>
                        </div>

                        <!-- nickname -->
                        <div class="row no-gutters">
                            <div class="col-auto text-muted text-monospace font-weight-bold">NICKNAME</div>
                            <div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
                            <div class="col-auto">awesome nickname</div>
                        </div>

                        <!-- age -->
                        <div class="row no-gutters">
                            <div class="col-auto text-muted text-monospace font-weight-bold">AGE</div>
                            <div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
                            <div class="col-auto">amount of years</div>
                        </div>

                        <!-- bday -->
                        <div class="row no-gutters">
                            <div class="col-auto text-muted text-monospace font-weight-bold">BIRTHDAY</div>
                            <div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
                            <div class="col-auto">dd/mm/yy</div>
                        </div>

                        <!-- species -->
                        <div class="row no-gutters">
                            <div class="col-auto text-muted text-monospace font-weight-bold">SPECIES</div>
                            <div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
                            <div class="col-auto">name</div>
                        </div>

                        <!-- job -->
                        <div class="row no-gutters">
                            <div class="col-auto text-muted text-monospace font-weight-bold">OCCUPATION</div>
                            <div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
                            <div class="col-auto">job</div>
                        </div>

                        <!-- theme song -->
                        <div class="row no-gutters">
                            <div class="col-auto text-muted text-monospace font-weight-bold">THEME</div>
                            <div class="col px-2 flex-column"><hr class="w-100 my-auto"></div>
                            <div class="col-auto">
                            <!-- put youtube or spotify link here -->
                            <a href="#" class="text-muted"><i class="fas fa-music-note"></i></a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- tab 3 -->
                <div class="tab-pane" id="third">

                    <!-- title -->
                    <div class="row no-gutters p-0 text-muted">
                        <div class="card card-block m-0 rounded-0 p-1 font-weight-bold" style="border-width: 3px; border-right: none; font-size: 18px">STORY</div>
                        <div class="col-auto justify-content-center align-items-center p-2 card card-block rounded-0" style="border-width: 3px;"><i class="fas fa-pizza fa-rotate-180"></i></div>
                    </div>

                    <!-- just write some story. can also be a personality tab if you want -->
                    <div class="card card-block rounded-0 p-2 overflow-auto" style="border-top: none; border-width: 3px; max-height: 169.9px">

                        <p>
                            <!-- put first letter of sentence here. only first -->
                            <span class="card-block pull-left rounded-0 font-weight-bold text-muted px-3 py-2 mb-0" style="font-size: 18px;">L</span>
                        orem 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>
                </div>

                <!-- tab 4 -->
                <div class="tab-pane" id="fourth">

                    <!-- title -->
                    <div class="row no-gutters p-0 text-muted">
                        <div class="card card-block m-0 rounded-0 p-1 font-weight-bold" style="border-width: 3px; border-right: none; font-size: 18px">TRIVIA</div>
                        <div class="col-auto justify-content-center align-items-center p-2 card card-block rounded-0" style="border-width: 3px;"><i class="fas fa-pizza fa-rotate-270"></i></div>
                    </div>

                    <div class="card card-block rounded-0 p-2 overflow-auto" style="border-top: none; border-width: 3px; max-height: 169.9px">

                        <div class="row no-gutters">

                            <!-- likes -->
                            <div class="col-lg-6 col-12">
                                <div class="text-muted text-monospace font-weight-bold text-center" style="font-size: 18px">
                                    LIKES
                                </div>

                                    <ul class="fa-ul py-2 mb-0">
                                        <li><span class="fa-li"><i class="fas fa-plus"></i></span>like</li>
                                        <li><span class="fa-li"><i class="fas fa-plus"></i></span>like</li>
                                        <li><span class="fa-li"><i class="fas fa-plus"></i></span>like</li>
                                        <li><span class="fa-li"><i class="fas fa-plus"></i></span>like</li>
                                    </ul>
                            </div>

                            <!-- dislikes -->
                            <div class="col-lg-6 col-12">
                                <div class="text-muted text-monospace font-weight-bold text-center" style="font-size: 18px">
                                    DISLIKES
                                </div>

                                <ul class="fa-ul py-2 mb-0">
                                        <li><span class="fa-li"><i class="fas fa-minus"></i></span>dislike</li>
                                        <li><span class="fa-li"><i class="fas fa-minus"></i></span>dislike</li>
                                        <li><span class="fa-li"><i class="fas fa-minus"></i></span>dislike</li>
                                        <li><span class="fa-li"><i class="fas fa-minus"></i></span>dislike</li>
                                    </ul>
                            </div>

                            <!-- other trivia -->
                            <div class="col-12">
                                <div class="text-muted text-monospace font-weight-bold text-center" style="font-size: 18px">
                                    TRIVIA
                                </div>

                                <ul class="fa-ul py-2 mb-0">
                                        <li><span class="fa-li"><i class="fas fa-times"></i></span>trivia</li>
                                        <li><span class="fa-li"><i class="fas fa-times"></i></span>trivia</li>
                                        <li><span class="fa-li"><i class="fas fa-times"></i></span>trivia</li>
                                        <li><span class="fa-li"><i class="fas fa-times"></i></span>trivia</li>
                                    </ul>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- dont remove -->
    <a class="mt-1" href="/micro-wave"><i class="fas fa-microwave"></i></a>
</div>