[F2U] Skyline v3: Horizons (Classic)

<!--

        ♥ SKYLINE v3: Horizons [CLASSIC EDITION] ♥
        -by BW4

        RULES:

          ♥ Please do not redistribute or sell this code as yours.
          ♥ Do NOT remove my li'l credit link.
          ♥ Please leave a comment on this code's page if you decide to use, and link to where you used it if possible! I'd love to see how it looks with your character. ;D

        OTHER:

          ♥ Hue/Transperency of boxes can be altered: adjust the values within each ' rgba(91, 0, 55, 0.65) ' ... the last value is the level of transparency (0.1-0.7 reccomended).
          ♥ Most important areas are marked, but please let me know if you need further assistance!
          ♥ VERY mobile-friendly!
          ♥ Beginner-friendly!

        UPDATES FROM 2.0:

          ♥ Cleaner, sleeker code
          ♥ Likes/dislikes boxes formatted properly on mobile
          ♥ Improved notes/default settings for character image customization

        Have fun! ;D

  -->

<!-- BEGIN -->
<!-- BACKGROUND IMAGE -->
<!-- Change ' https://i.pinimg.com/originals/81/34/08/81340844a99a35cc7993166cbd9b5866.gif ' to your image/gif! -->
<!-- Image address MUST be direct (right-click -> copy image *address*) -->
<!-- If you would like your image to be static, remove ' background-attachment:fixed ' -->
<!-- If your image is a tileable pattern, remove ' background-repeat:none ' and ' background-size:cover; ' -->
<div class="container px-0" style="max-width:795px; background-image:url(https://i.pinimg.com/originals/81/34/08/81340844a99a35cc7993166cbd9b5866.gif); background-repeat:none; background-size:cover; background-position:center center; border-style:none; border-radius:1em; background-attachment:fixed; color:white;">

  <div class="row no-gutters">

    <!-- LEFT SIDE (CHARACTER IMAGE) -->
    <!-- ' text-align: center ' centers the image horizontally. Change ' center ' to ' left ' or ' right ' as you see fit. -->
    <div class="col-md-6" style="text-align:center">
      <!-- CHARACTER IMAGE -->
      <!-- Change ' https://i.imgur.com/isAiWvm.png ' to the DIRECT link to your image
           Width set to *378* by default, height automatically changes to mantain the image's ratio; adjust for your image as necessary.
           You can also remove the width attribute altogether if you want the image to scale with the div; I would recommend that you
           resize the image in a photo editing software beforehand, however.
           (Transparency is recommended.) -->
      <IMG src="https://i.imgur.com/isAiWvm.png" width="378">
    </div>

    <!-- RIGHT SIDE (TEXT) -->
    <div class="col-md-6 p-2">
      <div class="row no-gutters">

        <!-- NAME BOX -->
        <div class="col-md-12 p-2">
          <div class="p-2" style="text-align:center; background: rgba(91, 0, 55, 0.65); border-style:none; border-radius:1em;">
            <!-- NAME -->
            <span style="letter-spacing:3mm; font-size:28px; font-weight:lighter;">NAME</span>
            <br>
            <!-- INFORMATION -->
            <span style="letter-spacing:2px; font-size:smaller;">species • pro/nouns • sexuality</span>
          </div>
        </div>

        <!-- DESCRIPTION BOX -->
        <div class="col-md-12 p-2">
          <div class="p-2" style="background: rgba(91, 0, 55, 0.65); border-style:none; border-radius:1em; letter-spacing:1px; font-size:smaller;">
            <div class="p-2" style="overflow-x: hidden; height:130px;">
              <p>Write a description of your character here! Extra-long descriptions work too, this box will scroll. ^-^</p>
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
            </div>
          </div>
        </div>

        <!-- LIKES BOX -->
        <div class="col-md-6 p-2">
          <div class="p-3 h-100" style="background: rgba(91, 0, 55, 0.65); border-style:none; border-radius:1em;">
             <div style="letter-spacing:3px;">LIKES<span class="pull-right"><i class="fas fa-check-circle"></i></span></div>
             <ul style="margin-bottom: 0; padding-left: 20px;">
              <li>Like</li>
              <li>Like</li>
              <li>Like</li>
              <li>Like</li>
              <li>Like</li>
            </ul>
          </div>
        </div>

        <!-- DISLIKES BOX -->
        <div class="col-md-6 p-2">
          <div class="p-3 h-100" style="background: rgba(91, 0, 55, 0.65); border-style:none; border-radius:1em;">
            <div style="letter-spacing:3px;">DISLIKES<span class="pull-right"><i class="fas fa-times-circle"></i></span></div>
             <ul style="margin-bottom: 0; padding-left: 20px;">
              <li>Dislike</li>
              <li>Dislike</li>
              <li>Dislike</li>
              <li>Dislike</li>
              <li>Dislike</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- CREDIT -->
<div class="mt-1" style="max-width:795px; margin-left: auto; margin-right: auto;">
    <span style="letter-spacing:3px; font-size:small;">
       <!-- CHARACTER IMAGE CREDIT -->
       <a href="https://toyhou.se/Badweather4cast"><i class="fa-solid fa-paw tooltipster" title="character image by badweather4cast"></i></a>
       /
       <!-- BG CREDIT -->
       <a href="https://www.artstation.com/james_d"><i class="fas fa-image tooltipster" title="pixel bg by james doyle"></i></a>
       <!-- CODE CREDIT . . . DO NOT REMOVE! -->
       <span class="pull-right"><a href="https://toyhou.se/Badweather4cast"><i class="fas fa-code tooltipster" title="code by badweather4cast"></i></a></span>
    </span>
</div>

<!-- END -->