Code Ruby Eyes

<style>
/*

======== !! IMPORTANT !! DO NOT REMOVE ANY PART OF THIS SECTION =========

AUTHOR: Elle
LANGUAGE: CSS/HTML/JS
SOURCE: https://pastebin.com/raw/q67Tnb3h -
REGISTRATION: https://www.copyrighted.com/work/2PKqDybNAqyK7xoN ;

######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
########------------------########-----------------########------------------########
########------------------########-----------------########------------------########
######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
########------------------########-----------------########------------------########
########------------------########-----------------########------------------########
######################----#####################----######################----######################
######################----#####################----######################----######################
######################----#####################----######################----######################


============================================================================================================
THE REST OF THE CODE IS KEPT IN MY FILE BUT IT WON'T AFFECT HOW YOUR PROFILE WILL LOOK. HERE ARE THE EDITABLE
PORTIONS OF YOUR CODE. IT MAKES IT EASIER FOR YOU TO IGNORE THE PARTS OF THE CODE WHERE YOU REALLY CAN'T TOUCH
BECAUSE IT MIGHT BREAK THE WHOLE THING. IT ALSO MAKES IT EASIER FOR ME TO FIX BUGS YOU MAY FIND.
=============================================================================================================
*/

/* =============== CHANGE BACKGROUNDS ================ */
#back{
  background-image: url(http://www.commentnation.com/backgrounds/images/damask_wallpaper_seamless_background_red_and_black.jpg) !important;
  background-size: 12% !important;
  opacity: 0.4 !important;
}

    /*
        ========================================================================
        THE RED OVERLAY DESIGN IS A PHOTOSHOPPED ASSET
        I WENT AHEAD AND EDITED A COUPLE OF OTHER COLOURED ONES FOR YOU GUYS
        ENJOY! https://imgur.com/a/1cqcD
        IF YOU THINK I MISSED A COLOR, FEEL FREE TO BOP ME TO EDIT A NEW COLOR
        =======================================================================
    */
#overlay{
  background-image: url(https://i.imgur.com/KbONjFB.png) !important;
  background-size: 100% !important;
  opacity: 0.8 !important;
}



/* =================== CHANGE IMAGES ===================== */
#main{background-image: url(https://i.imgur.com/NTMnigg.png) !important;}

    /* -- THESE PHOTOS HAVE BEEN CROPPED TO BE MORE WIDE THAN TALL -- */
.img01{background-image: url(https://i.imgur.com/4yMgwV8.jpg) !important}
.img02{background-image: url(https://i.imgur.com/HR1eKm6.jpg) !important}
.img03{background-image: url(https://i.imgur.com/BInnOm8.jpg) !important}
.img04{background-image: url(https://i.imgur.com/9lsr4ln.jpg) !important}

	/* -- IF YOU WANT TO ADD MORE IMAGES JUST MAKE A NEW CLASS AND NAME IT ANYTHING YOU WANT THEN FOLLOW THE FORMAT ABOVE
		.className{background:image: url(urlHere);}
	-- */

/* ===================== CHANGE COLORS ================ */
:root{
  --scrollbar: transparent !important;
  --background-color: #000 !important;
  --nav-design-color: #333 !important;
  --nav-background: #CDAEBF !important;
  --nav-border: #836064 !important;
  --nav-selected-design-color: #ccc !important;
  --info-box-border: #CDAEBF !important;
  --info-box-background: #836064 !important;
  --text: #1F171D !important;
  --h1: #AD2E95 !important;
  --h1-shadow: #5C2064 !important;
  --bold: #822027 !important;
  --bold-outline: #da5059 !important;
  --italics: #222 !important;
  --italics-outline: #444 !important;
  --underline: antiquewhite !important;
  --underline-outline: #1F171D !important;
  --link: #5C2064 !important;
  --link-outline: #AD2E95 !important;
  --tooltip-text: antiquewhite !important;
  --tooltip-shadow: #5C2064 !important;
  --tooltip-hover: #aaa !important;
}


/*
  =======================================================================================================
  ****** TROUBLESHOOTING: IF YOU NEED ANY HELP, MESSAGE ME ON DISCORD: Lil Monster#3557 ****
  =======================================================================================================
*/
</style>
<!-- ===================LOAD IN CSS FILE=================== -->
<link href="https://ellexidecodes.github.io/Profile-Codes/free/rubyEyes.css" rel="stylesheet">
<!-- THE SCRIPTS || DON'T TOUCH || IF YOU ARE NOT AN RPC DONATOR, THESE WON'T WORK BUT YOU CAN KEEP THEM ON IN CASE YOU WILL BE A DONATOR ONE DAY -->
<script src="https://themonstrousdev.github.io/profiles/Addons/free.js"></script>
<script src='https://ellexidecodes.github.io/Profile-Codes/repeatedEffects/tooltip.js'></script>

<!--
  ============================
  ****** PROFILE PROPER ******
  ============================
-->
<div id="back"></div>
<div id="overlay"></div>
<div id="main"></div>
<div class="tabs">


  <!-- TAB ONE -->
  <div class="tab">
    <input id="tab-1" name="infotabs" type="radio" />
    <label for="tab-1">✖</label>
    <div class="content">
      <div class="img01"></div>
      <div class="info">
        <h1>Header One</h1>
        <table>
          <tbody>
            <tr><td>Name:</td> <td>Tsubaki</td></tr>
            <tr><td>Gender:</td> <td>Female</td></tr>
            <tr><td>Age:</td> <td>Mid-20s</td></tr>
            <tr><td>Hair Color:</td> <td>Lavender<i>(Pale)</i></td></tr>
            <tr><td>Eye Color:</td> <td>Ruby</td></tr>
            <tr><td>Height:</td> <td>5'6"</td></tr>
            <tr><td>Weight:</td> <td>116 lbs.</td></tr>
            <tr><td>Orientation</td> <td>Asexual<i>(Demi)</i></td></tr>
            <tr><td>Marital Status:</td> <td>Single & <i>Disinterested</i></td></tr>
            <tr><td>Profession:</td> <td>Elite 4 Champion</td></tr>
            <tr><td>Alignment:</td> <td class="tooltip" title="And everything that entails">Self-serving</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>


  <!-- TAB TWO -->
  <div class="tab">
      <input id="tab-2" name="infotabs" type="radio" />
      <label for="tab-2">✖</label>
      <div class="content">
        <div class="img02"></div>
        <div class="info">
          <h1>Please Read</h1>
          <p>
            I am aware there is a user named Tsubaki in RPC and that I am using her faceclaim as example for my layout. Let it be known that I had a commission for a Tsubaki but it was <u>Tsubaki.</u> <i>(with a dot)</i> and not the normal Tsubaki. So, that was my bad. Which is why the sample information is as showcased. But, I felt it would be a waste to scrap this code so instead I push it out as a free code for you people c:
          </p>
          <p>
            Text || <b>Bold</b> || <i>Italics</i> || <u>Underline</u> || <s>Strikethrough</s> || <a href="#">Link</a> || <font class="tooltip" title="Example hover text">Word with hover text</font>
          </p>
        </div>
      </div>
    </div>


  <!-- TAB THREE -->
  <div class="tab">
      <input id="tab-3" name="infotabs" type="radio" />
      <label for="tab-3">✖</label>
      <div class="content">
        <div class="img03"></div>
        <div class="info">
          <h1>Header Three</h1>
          <p>
              Nulla auctor placerat pretium. Etiam sed commodo felis. In imperdiet dolor velit, et sollicitudin mi posuere non. Ut ipsum nibh, semper a sem et, aliquet sodales urna. Duis eget porttitor nisl, at porta magna. Pellentesque bibendum ultrices nisl, ut commodo risus porttitor luctus. Duis ac viverra est. Phasellus pellentesque sodales mi, eu elementum velit ullamcorper sed. Sed suscipit, libero vitae vestibulum elementum, purus orci fringilla mauris, et ultricies dolor mi consectetur ipsum. Sed faucibus ipsum hendrerit arcu tincidunt ullamcorper. Vivamus tincidunt, diam a pellentesque mollis, felis lectus mattis eros, sed vehicula sapien odio nec quam. Morbi eget elit quis mauris iaculis venenatis.
          </p>
        </div>
      </div>
    </div>


  <!-- TAB FOUR -->
  <div class="tab">
      <input id="tab-4" name="infotabs" type="radio" />
      <label for="tab-4">✖</label>
      <div class="content">
        <div class="img04"></div>
        <div class="info">
          <h1>Header Four</h1>
          <p>
              Aenean id mollis lorem. Sed sed purus in sapien vulputate luctus. Cras at risus bibendum, tempor sapien sit amet, viverra nibh. Quisque quam risus, scelerisque vitae metus at, consectetur rutrum odio. Morbi in sapien maximus, vulputate quam non, egestas felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultricies tortor odio, id iaculis justo accumsan a. Nullam vehicula eros sit amet nisi vestibulum accumsan. Morbi quis justo aliquam, consequat ante sed, commodo risus. Sed ullamcorper ornare ligula, a pretium diam dapibus at. Nunc consectetur ipsum eu ipsum tristique blandit. Mauris a nisl a enim euismod ultricies eget accumsan risus. Ut tempor imperdiet augue interdum egestas. Vestibulum convallis orci massa, ac elementum sem iaculis sed. Suspendisse eleifend tempor ipsum sed dapibus. Duis hendrerit enim et commodo consequat.
          </p>
        </div>
      </div>
    </div>


    <!-- TAB FIVE -->
    <div class="tab">
        <input id="tab-5" name="infotabs" type="radio" />
        <label for="tab-5">✖</label>
        <div class="content">
          <div class="img01"></div> <!-- to make this different from the before images, just change the class name to "panelImg <your new class here>" -->
          <div class="info">
            <h1>Header Five</h1>
            <p>
                Ut urna metus, dignissim at risus id, consectetur varius arcu. Fusce gravida at erat a rutrum. Sed non risus vitae metus euismod iaculis eget ut risus. Etiam porta erat id dapibus vehicula. Phasellus vel tincidunt mauris. Pellentesque sodales tellus eros, at blandit tortor consequat sed. Proin ut tellus tortor. Curabitur porttitor porttitor tellus eu varius. Quisque ac augue quam. Vivamus eu ante quis augue condimentum tempor id sit amet mauris. Praesent non nunc et ante mattis tristique. Phasellus porttitor semper enim quis vestibulum. Nulla vestibulum posuere consequat. Nulla pellentesque nunc ultrices risus convallis, in consequat massa pharetra. Donec suscipit ultrices nunc et efficitur.
            </p>
          </div>
        </div>
      </div>


    <!-- TAB SIX -->
    <div class="tab">
        <input id="tab-6" checked="checked" name="infotabs" type="radio" />
        <label for="tab-6">✖</label>
        <div class="content">
          <div class="img02"></div>
          <div class="info">
            <h1>Out of Character</h1>
            <p>
              <b>00.</b> This profile is made and <a href="https://www.copyrighted.com/work/2PKqDybNAqyK7xoN" target="_blank">copyrighted</a> by <a href="https://themonstrousdev.github.io/" target="_blank">The Monster</a> for anyone to use freely. DM Deum for one of your own. <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">CC License Summary</a> || <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">Full Documentation</a><br>
              <b>01.</b> OOC RULE HERE.<br>
              <b>02.</b> OOC RULE HERE.<br>
              <b>03.</b> OOC RULE HERE.<br>
              <b>04.</b> OOC RULE HERE.<br>
              <b>05.</b> OOC RULE HERE.<br>
              <b>06.</b> OOC RULE HERE.<br>
              <b>07.</b> OOC RULE HERE.<br>
              <b>08.</b> OOC RULE HERE.<br>
              <b>09.</b> OOC RULE HERE.<br>
              <b>10.</b> OOC RULE HERE.
            </p>
          </div>
        </div>
      </div>
</div>