Briefcase || Bootstrap

<!--

BRIEFCASE by Rocketfuel

Bootstrap Version


-->

<div class="container">

    <div class="row">

        <!-- left column -->

        <div class="col-md-3 p-2">

            <!-- top left image! -->
            <div class="card bg-faded border-0 p-3"

            style="background:url(https://assets.reedpopcdn.com/GothamCityPanel.jpg/BROK/thumbnail/1600x900/quality/100/GothamCityPanel.jpg) center; min-height: 100px;border-radius: 45px 0px 0px 0px;">

            </div>

        </div>

        <!-- left col end -->


        <!-- right col start -->

        <div class="col-md-9 p-2">

            <div class="card border-0 bg-faded p-3 h-100" style="border-radius: 0px 45px 0px 0px;">

                <h2 class="pt-3">CHARACTER NAME</h2>

            </div>

        </div>


        <!-- right col end -->


    </div>


    <div class="row">

        <!-- left col -->
        <div class="col-md-3 p-2">

            <!-- left box w/ info!- --->

            <div class="card bg-faded border-0 p-3 h-100 rounded-0">

                <p>NAME<span class="pull-right">NAME</span></p>

                <p>GENDER<span class="pull-right">GENDER</span></p>

                <p>RACE<span class="pull-right">RACE</span></p>

                <p>AGE<span class="pull-right">AGE</span></p>

                <p>ORIENTATION<span class="pull-right">ORIEN.</span></p>

                <p>STATUS<span class="pull-right">STATUS</span></p>

            </div>

        </div>


        <!-- right col -->

         <div class="col-md-9 p-2">


            <div class="card bg-faded border-0 p-3 h-100 rounded-0">

                 <p>The left col will grow as this one does.</p>

                 <p> The first time I stole so that I wouldn't starve, yes. I lost many assumptions about the simple nature of right and wrong. And when I traveled I learned the fear before a crime and the thrill of success. But I never became one of them.

<p>Someone like you. Someone who'll rattle the cages. Does it come in black? Bruce Wayne, eccentric billionaire.</p>

 <p>Does it come in black? It's not who I am underneath but what I do that defines me. No guns, no killing. Hero can be anyone. Even a man knowing something as simple and reassuring as putting a coat around a young boy shoulders to let him know the world hadn't ended.</p>




            </div>


        </div>


    </div>

    <div class="row">

        <div class="col-md-3 p-2">

            <div class="card bg-faded border-0 p-2 h-100" style="background:url(https://illgetdrivethru.files.wordpress.com/2019/10/who-created-batman.jpg?w=600) center; min-height:200px; border-radius: 0px 0px 0px 45px;">

            </div>

        </div>

        <div class="col-md-9 p-2">

            <!-- BOTTOM BOX -->

            <div class="card bg-faded border-0 p-2 h-100" style="border-radius: 0px 0px 45px 0px;">
                <h2 class="text-center"><i class="fa fa-quote-left"/> Quote Here <i class="fa fa-quote-right"/></h2>

                <div class="card m-1 border-0 rounded-0 p-1 w-100"><span class="border border-primary"></span></div>

                <!-- Trivia(?) Add more <li> tags to add more, the image will adjust! -->
                <ul>
                    <li>
                        Every man who has lotted here over the centuries, has looked up to the light and imagined climbing to freedom. So easy, so simple! And like shipwrecked men turning to seawater foregoing uncontrollable thirst, many have died trying
                    </li>

                     <li>
                        So as I terrorize Gotham, I will feed its people hope to poison their souls.
                    </li>

                    <li>
                        That was a long time ago, I was a kid at St. Swithin’s, It used to be funded by the Wayne Foundation. It’s an orphanage. My mum died when I was small, it was a car accident. I don’t remember it. My dad got shot a couple of years later for a gambling debt.
                    </li>

                </ul>

            </div>

        </div>

    </div>

</div>

<!--- CREDIT! Please don't remove this! ---->
<a class ="text-primary p-2" href="https://toyhou.se/ROCKETFUEL" data-toggle="tooltip" title="Code by Rocket"><i class="fas fa-rocket m-2" /></a>

<!-- Code end -->