[P2U Hybrid] Tone Setter Minimal

<!--

  CREDIT: ovob


-----------------------------------------------


  INFO:
    - Background can be any size but you might have to adjust it for it to look right
      https://www.w3schools.com/css/css_background.asp

    - Character image can be any size - best if big though!

    - Featured character avatars must be square


-----------------------------------------------

  CSS:

    Copy & Paste the following into your CSS box
    (found here > https://toyhou.se/~account/profile/advanced)


    /* CONTROLS
    ======================================== */
    $fade-in:            on;
    $image-slide-in:     on;
    $content-slide-in:   on;
    $image-grow:         on;


    /* IMPORT
    ======================================== */
    @import '0/1263/5sfD0F/misc-001-tone-setter';


-----------------------------------------------


  CHANGING COLORS:
    - Highlight one of the hexes below and press CRTL + F
    - Press the + under the first box in the pop up menu
    - Enter the new hex code in the new box
    - Hit 'All' that's beside 'Replace'

    - Visual Help > https://i.gyazo.com/1707871b5214f11a8a11692b05bacc26.gif


  CHANGING NAV LINKS:
    - Same as changing colors, except replace 'USERNAME'
      with yours

  COLORS:
    text color:             #fff
    background color:       rgba(0,0,0,0.5)


-----------------------------------------------


         BACKGROUND & GLOBAL STYLES


-------------------------------------------- -->
<div class="d-flex bg-faded" style="margin:-15px -15px -31px -40vw;


  /* GLOBAL STYLES
  ======================================== */;
  color: #fff;
  letter-spacing: 1px;
  font-size: 13px;


  /* BACKGROUND IMAGE
  ======================================== */;
  background-image: url(IMG URL HERE);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;">


<div class="ml-auto user-main-content" style="position:relative;min-height: calc(100vh - 43px);width:100vw;background-color: rgba(0,0,0,0.5);">
<div class="row no-gutters h-100" style="z-index:100;">
<!-- -------------------------------------------


                CHARACTER IMAGE


-------------------------------------------- -->
<div class="col-lg-7 mt-auto text-center p-3">


  <img src="IMG URL HERE" class="user-image" style="max-height:90vh;">


</div>
<!-- -------------------------------------------


                USER DESCRIPTION


-------------------------------------------- -->
<div class="user-description col-lg-4 pull-lg-1 my-auto pb-md-5 p-4">
<!-- -------------------------------------

                  TITLE

-------------------------------------- -->
<hr class="w-50 mt-4" style="border-color: rgba(255,255,255,0.1);">
<div class="text-center text-uppercase" style="font-size: 18px;">


  Title Here


</div>
<hr class="w-75 mb-4" style="border-color: rgba(255,255,255,0.1);">
<!-- -------------------------------------

                MAIN INFO

-------------------------------------- -->
<div class="collapse credit text-center show">


  <p>Dapibus eleifend arcu, in ornare est laoreet non. Sed placerat erat consectetur nibh sodales ornare. Quisque at est nec ante pellentesque mollis rutrum eu tortor. Aenean fringilla, justo eget vehicula malesuada, tellus ipsum lobortis lacus, quis viverra sapien sapien vel metus.</p>

  <p>Maecenas egestas neque eu erat molestie interdum non nec purus. Aliquam nisl orci, egestas quis mi et, feugiat cursus nulla. Sed tempor interdum ante quis tempus. Maecenas non mauris vel elit fermentum porttitor. Sed id ullamcorper lectus.</p>


</div>
<!-- -------------------------------------

               CREDIT INFO

-------------------------------------- -->
<div class="collapse credit">


  <a class="d-flex p-1" style="color: inherit;" href="URL HERE">
    <b class="w-50 text-truncate">Background</b>
    <span>Username</span>
  </a>


  <a class="d-flex p-1" style="color: inherit;" href="URL HERE">
    <b class="w-50 text-truncate">Side Image</b>
    <span>Username</span>
  </a>


  <a class="d-flex p-1" style="color: inherit;" href="URL HERE">
    <b class="w-50 text-truncate">Character Avatars</b>
    <span>Username</span>
  </a>


  <!-- ADD MORE ABOVE HERE ----
  ---- DO NOT REMOVE CREDIT -->
  <a class="d-flex p-1" style="color: inherit;" href="https://toyhou.se/2547611.-p2u-html-tone-setter">
    <b class="w-50 text-truncate">Profile Template</b>
    <span>ovob</span>
  </a>


</div>
<!-- -------------------------------------

             SOCIAL MEDIA LINKS

-------------------------------------- -->
<hr class="w-75 mt-4" style="border-color: rgba(255,255,255,0.1);">
<div class="text-center" style="word-spacing: 10px;">


  <a style="color:inherit;text-decoration:none"
    title="Deviantart" class="fab fa-deviantart tooltipster" href="#">
  </a>


  <a style="color:inherit;text-decoration:none"
    title="Tumblr" class="fab fa-tumblr tooltipster" href="#">
  </a>


  <a style="color:inherit;text-decoration:none"
    title="Twitter" class="fab fa-twitter tooltipster" href="#">
  </a>


  <a style="color:inherit;text-decoration:none"
    title="furaffinity" class="fas fa-paw tooltipster" href="#">
  </a>


  <!-- ADD MORE ABOVE HERE ----
  ---- DO NOT REMOVE CREDIT -->
  <a href="#" data-toggle="collapse" data-target=".credit" class="tooltipster far fa-code" title="Credit" style="color:inherit;text-decoration:none;"></a>


</div>
<hr class="w-50 mb-4" style="border-color: rgba(255,255,255,0.1);">
</div>
</div>
<!-- -------------------------------------------


              TOP & BOTTOM BARS


-------------------------------------------- -->
<div class="top-bottom-bar text-uppercase text-center hidden-sm-down" style="color: #fff;font-size:13px;letter-spacing:1px;word-spacing: 10px;">
<div class="text-uppercase text-center p-2" style="position:absolute;top:0;left:0;right:0;z-index:200;background-color: rgba(0,0,0,0.5);">


  <a href="USERNAME/bulletins" style="color:inherit;text-decoration:none;">Bulletins</a>
  <a href="USERNAME/characters" style="color:inherit;text-decoration:none;">Characters</a>
  <a href="USERNAME/links" style="color:inherit;text-decoration:none;">Links</a>
  <a href="USERNAME/worlds" style="color:inherit;text-decoration:none;">Worlds</a>
  <a href="USERNAME/created" style="color:inherit;text-decoration:none;">Designs</a>
  <a href="USERNAME/art" style="color:inherit;text-decoration:none;">Art</a>
  <a href="USERNAME/literatures" style="color:inherit;text-decoration:none;">Literature</a>
  <a href="USERNAME/favorites" style="color:inherit;text-decoration:none;">Favorites</a>
  <a href="USERNAME/comments" style="color:inherit;text-decoration:none;">Comments</a>


</div>
<div class="p-2" style="position:absolute;bottom:0;left:0;right:0;z-index:200;background: rgba(0,0,0,.5);">
<div class="offset-lg-4">


  <a href="~messages/create/USERNAME" style="color:inherit;text-decoration:none;">Message</a>
  <a href="USERNAME/stats" style="color:inherit;text-decoration:none;">Stats</a>
  <a href="USERNAME/subscribe" style="color:inherit;text-decoration:none;">Subscribe</a>
  <a href="USERNAME/authorize" style="color:inherit;text-decoration:none;">Authorize</a>
  <a href="USERNAME/block" style="color:inherit;text-decoration:none;">Block</a>
  <a href="~tickets/create/user" style="color:inherit;text-decoration:none;">Report</a>


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