rogue

<!--
- turn off WYSIWYG
- don't use as base for paid codes
- keep the credit

COLORS:
accent: B45717
text: #ffffff
background: rgba(0,0,0,0.5)

-->

<div class="container-fluid p-2 pb-3 pr-5" style="color:#ffffff">

<!-- name & dagger -->
<div class="row ml-0 mr-5 pl-3" style="background-color:rgba(0,0,0,0.5); ">
    <div class="col">

 <!-- dagger right -->
<i class="fa-light fa-dagger float-right pt-2" style="transform:rotate(35deg); font-size:2.5rem; font-variant:small-caps;"></i>

<!-- name -->
<p align="left" style="font-size:2.5rem; font-variant:small-caps;">
      <s style="color:#B45717">N</s>ame
      <s style="color:#B45717">S</s>urname
</p>

</div>

</div>

<!-- stats, about & image -->
<div class="row ml-0 mr-5" style="min-height:550px;">

<!-- stats and proficiencies -->
<div class="col-md-5 p-2" style="background-color:rgba(0,0,0,0.5); border:0.5px solid #ffffff;">

<!-- stats -->
     <div class="card-deck pt-2">

<!-- strength -->
<div class="card justify-content-center align-items-center bg-transparent border-0">

            <p class="m-0 align-items-center justify-content-center" style="font-size:1.5rem; border:0.5px solid #fff; width:40px; height:40px;">
                7
            </p>
            <p class="my-2" style="font-size:1.5rem; color:#B45717">
                STR
            </p>

            <div class="p-1 align-items-center justify-content-center" style="border-radius:5rem; border:0.5px solid #fff; height:40px; width:40px;">
                -2
            </div>

         </div>

<!-- dexterity -->
<div class="card justify-content-center align-items-center bg-transparent border-0">

            <p class="m-0 align-items-center justify-content-center" style="font-size:1.5rem; border:0.5px solid #fff; width:40px; height:40px;">
                20
            </p>
            <p class="my-2" style="font-size:1.5rem; color:#B45717">
                DEX
            </p>

            <div class="p-1 align-items-center justify-content-center" style="border-radius:5rem; border:0.5px solid #fff; height:40px; width:40px;">
                +5
            </div>

         </div>

<!-- constitution -->
<div class="card justify-content-center align-items-center bg-transparent border-0">

            <p class="m-0 align-items-center justify-content-center" style="font-size:1.5rem; border:0.5px solid #fff; width:40px; height:40px;">
                13
            </p>
            <p class="my-2" style="font-size:1.5rem; color:#B45717">
                CON
            </p>

            <div class="p-1 align-items-center justify-content-center" style="border-radius:5rem; border:0.5px solid #fff; height:40px; width:40px;">
                +1
            </div>

         </div>

     </div>

<hr>

<!-- stats 2 -->
<div class="card-deck">

<!-- intelligence -->
<div class="card justify-content-center align-items-center bg-transparent border-0">

            <p class="m-0 align-items-center justify-content-center" style="font-size:1.5rem; border:0.5px solid #fff; width:40px; height:40px;">
                17
            </p>
            <p class="my-2" style="font-size:1.5rem; color:#B45717">
                INT
            </p>

            <div class="p-1 align-items-center justify-content-center" style="border-radius:5rem; border:0.5px solid #fff; height:40px; width:40px;">
                +3
            </div>

         </div>

<!-- wisdom  -->
<div class="card justify-content-center align-items-center bg-transparent border-0">

            <p class="m-0 align-items-center justify-content-center" style="font-size:1.5rem; border:0.5px solid #fff; width:40px; height:40px;">
                11
            </p>
            <p class="my-2" style="font-size:1.5rem; color:#B45717">
                WIS
            </p>

            <div class="p-1 align-items-center justify-content-center" style="border-radius:5rem; border:0.5px solid #fff; height:40px; width:40px;">
                0
            </div>

         </div>

 <!-- charisma -->
<div class="card justify-content-center align-items-center bg-transparent border-0">

            <p class="m-0 align-items-center justify-content-center" style="font-size:1.5rem; border:0.5px solid #fff; width:40px; height:40px;">
                8
            </p>
            <p class="my-2" style="font-size:1.5rem; color:#B45717">
                CHA
            </p>

            <div class="p-1 align-items-center justify-content-center" style="border-radius:5rem; border:0.5px solid #fff; height:40px; width:40px;">
                -1
            </div>

         </div>

     </div>

<br>

<!-- proficiencies -->
    <p align="center" style="font-size:1.7rem; font-variant:small-caps;">
      <s style="color:#B45717">
      P</s>roficiencies
    </p>
          <div class="card-deck">

<!-- skills -->
         <div class="card bg-transparent rounded-0">
    <p class="py-2" align="center" style="font-size:1.2rem; font-variant:small-caps;">
      <s style="color:#B45717">S</s>kills
    </p>
    <ul class="mb-0"  style="max-height:115px; overflow-y:auto;">
        <li>skill (+8)</li>
        <li>skill (+6)</li>
        <li>skill (+6)</li>
        <li>skill (+6)</li>
        <li>skill (+8)</li>
        <li>skill (+11)</li>
    </ul>
         </div>

<!-- weapons -->
         <div class="card bg-transparent rounded-0">
    <p class="py-2" align="center" style="font-size:1.2rem; font-variant:small-caps;">
      <s style="color:#B45717">W</s>eapons
    </p>
    <ul class="mb-0" style="max-height:115px; overflow-y:auto;">
        <li>weapon type</li>
        <li>weapon type</li>
        <li>weapon type</li>
        <li>weapon type</li>
        <li>weapon type</li>
    </ul>
         </div>

     </div>


    </div>

<!-- about and quote -->
<div class="col-md-4 p-2" style="background-color:rgba(0,0,0,0.5); border:0.5px solid #ffffff;">
    <p class="" align="center" style="font-size:2rem; font-variant:small-caps;">
      <s style="color:#B45717">
      A</s>bout
    </p>
<hr>
    <p align="center" style="font-size:1.3rem; font-variant:small-caps;color:#B45717">
        Class // Background // Alignment
    </p>

<br>

<div class="card rounded-0 bg-transparent p-2" style="max-height:300px; overflow-y:auto; ">
    <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>

<br>

<!-- this box doesn't scroll, keep it short -->
<div class="card bg-transparent rounded-0">
        <p class="font-italic p-2" align="center" style="font-size:1.5rem; font-variant:small-caps;">
      <i class="fas fa-quote-left float-left" style="color:#B45717"></i>
     Insert a short quote here!
      <i class="fas fa-quote-right float-right" style="color:#B45717"></i>
    </p>

</div>
    </div>

<!-- image -->
<div class="col-md-3 " style="background-color:rgba(0,0,0,0.5); border:0.5px solid #ffffff;">
        <div class="card " style="background:url(INSERT_IMAGE_HERE) left; background-size:cover;

        height:120%; width:135%; margin-top:-6rem;">
        <!-- delete the items in the row above (but leave ">) if you want a normal-sized image; i left the border on so you can see how big it is -->
        </div>
    </div>

    </div>

</div>

<!-- credit -->
<p align="center">
<a href="https://toyhou.se/sonneambedo" title="code by sonne"><i class="fas fa-sun" style="color:#FFD700"></i></a>
</p>