[F2U] Skyline v2

<!--

        ♥ SKYLINE v2 ♥
        -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! 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(0,39,91,0.55) ' ... the last value is the level of transparency (0.1-0.6 reccomended).
          ♥ Most important areas are marked, but please let me know if you need help!
          ♥ VERY mobile-friendly!
          ♥ Beginner-friendly.

        Have fun! ;D

  -->

<!-- BEGIN -->
<!-- BACKGROUND IMAGE -->
<!-- Change ' https://i.pinimg.com/originals/61/c9/85/61c98528873cce6a7ddcc7760a26a4fa.gif ' to your image/gif! -->
<!-- Image address MUST be direct (right-click -> copy image address) -->
<!-- If you would like your image not to be fixed, remove ' background-attatchment:fixed ' -->
<div class="container px-0" style="max-width:795px; background-image:url(https://i.pinimg.com/originals/61/c9/85/61c98528873cce6a7ddcc7760a26a4fa.gif); background-repeat:auto; background-position:center center; border-style:none; border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; background-attachment:fixed;">
   <div class="row no-gutters">
      <!-- CHARACTER IMAGE -->
      <!-- Change ' https://i.imgur.com/naQtbPj.png ' to the DIRECT link to your image -->
      <!-- 8 x 10 inches recommended, transperency (.png) recommended -->
      <div class="col-md-6"><img src="https://i.imgur.com/naQtbPj.png"></div>
      <div class="col-md-6 p-3">
         <!-- NAME BOX -->
         <div class="col-12 text-white p-2" align="center" style="background: rgba(0,39,91,0.55); border-style:none; border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px;">
            <div class="mb-2">
               <!-- NAME -->
               <span style="letter-spacing:3mm; font-size:28px; font-weight:lighter;">NAME</span>
               <br>
               <!-- INFO -->
               <span style="letter-spacing:2px; font-size:smaller;">species • pro/nouns • sexuality</span>
            </div>
         </div>
         <!-- DESCRIPTION BOX -->
         <div class="col-12 text-white p-2 mt-3 mb-3" align="left" style="background: rgba(0,39,91,0.55); border-style:none; border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; height:150px;">
            <div class="p-2" style="overflow-x: hidden; height:130px;">
               <!-- DESCRIPTION -->
               <!-- Use the <br> tag within your text to break. -->
               <span style="letter-spacing:1px; font-size:smaller;">Write a description of your character here! Extra-long descriptions work too, this box will scroll. ^-^</span>
            </div>
         </div>
         <!-- LIKES/DISLIKES BOXES -->
         <div class="row">
            <div class="col-md-6 text-white" align="left">
               <div style="background: rgba(0,39,91,0.55); border-style:none; border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; height:170px;">
                  <div class="p-3">
                     <!-- LIKES -->
                     <span style="letter-spacing:3px; font-size:small;">LIKES<span class="pull-right"><i class="fas fa-check-circle"></i></span></span><br>
                     <span style="letter-spacing:1px; font-size:smaller;">• Like</span><br>
                     <span style="letter-spacing:1px; font-size:smaller;">• Like</span><br>
                     <span style="letter-spacing:1px; font-size:smaller;">• Like</span><br>
                     <span style="letter-spacing:1px; font-size:smaller;">• Like</span><br>
                     <span style="letter-spacing:1px; font-size:smaller;">• Like</span>
                  </div>
               </div>
            </div>
            <div class="col-md-6 text-white" align="left">
               <div style="background: rgba(0,39,91,0.55); border-style:none; border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; height:170px;">
                  <div class="p-3">
                     <!-- DISLIKES -->
                     <span style="letter-spacing:3px; font-size:small;">DISLIKES<span class="pull-right"><i class="fas fa-times-circle"></i></span></span><br>
                     <span style="letter-spacing:1px; font-size:smaller;">• Dislike</span><br>
                     <span style="letter-spacing:1px; font-size:smaller;">• Dislike</span><br>
                     <span style="letter-spacing:1px; font-size:smaller;">• Dislike</span><br>
                     <span style="letter-spacing:1px; font-size:smaller;">• Dislike</span><br>
                     <span style="letter-spacing:1px; font-size:smaller;">• Dislike</span>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- CREDITS -->
<div class="container px-0" style="max-width:795px;">
    <span style="letter-spacing:3px; font-size:small;">
       <!-- CHARACTER IMAGE CREDIT -->
       <a href="https://vk.com/adhell_forest"><i class="fas fa-portrait tooltipster" title="character image by ADLEENE"></i></a>
       /
       <!-- BG CREDIT -->
       <a href="https://twitter.com/1041uuu"><i class="fas fa-image tooltipster" title="pixel bg by toyoi yuuta"></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>