Code Laplace

<style>
/*
======== !! IMPORTANT !! DO NOT REMOVE ANY PART OF THIS SECTION =========

AUTHOR: Elle
FOR: Inoue [RPC Profile]
LANGUAGE: CSS/HTML/JS
SOURCE: https://pastebin.com/raw/CrH0Q5rU -
REGISTRATION: https://www.copyrighted.com/work/mgGQQtcdN3zy66Nr ;


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


* DISCLAIMER:
* THE DESIGN OF THIS CODE IS 100% BASED OFF LAPLACE ME AD PHOTOS. I DO NOT OWN THE
* DESIGN CHOICE BUT I OWN THE CODE BEHIND THIS WEBSITE VERSION OF IT.
*
* =================================================================================
*
* WARNING:
* This code needs some designing. As of now, I can't find a way for the paragraphs
* to be arranged in a slanting manner without slanting the whole thing. So, as of
* this stage of my coding abilities, the slanting style of the paragraphs edges are
* currently all done manually. Which is what you have to end up doing as well.
*
* I went ahead and broke the spacing in between paragraphs so you can see the cascading
* style and hopefully replicate it well.
*
* NOTE: This layout can only accommodate a maximum of 4 tabs.



============================================================================================================
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.
=============================================================================================================
*/

:root {
  /* ============= colors ================ */
    /* ==== basic colors ==== */
  --main-shade: rgb(205, 118, 115);
  --accent: rgb(211, 43, 55);

    /* ==== other colors ==== */
  --background-shade: rgb(238, 191, 190);
  --light-gradient: var(--main-shade);
  --dark-gradient: rgb(182, 96, 93);
  --diamond-color: rgb(235, 156, 156);
  --ability-bar: rgb(245, 141, 147);
  --ability-meter: var(--accent);
  --item-pill: rgb(155, 36, 44);
  --tab: var(--dark-gradient);
  --tab-hover: var(--light-gradient);

  /* =========== images ================ */
  --main-image: url(https://i.imgur.com/lX8LHqT.png);
  --background-pattern: url(https://i.imgur.com/1c3LMnG.png);
  --content-pattern: url(https://i.imgur.com/ZNAnq0v.png);

  /* ============= text styles ================ */
    /* ==== fonts ==== */
  --default-font: "Share", sans-serif;
  --name-font: "Black Pearl", cursive;
  --default-size: 2.5vh; /* keep this in vh pls thanks */

    /* ==== text colors ==== */
  --default-color: #ddd;
  --ability-name: rgb(155, 36, 44);
  --item-span: rgb(245, 141, 147);
  --link: rgb(216, 162, 238);
  --link-hover: var(--accent);
  --bold: rgb(255, 240, 179);
  --italics: rgb(199, 227, 86);
  --header: rgb(24, 55, 53);
  --title: var(--accent);
  --title-span: #222;
}


/*
=======================================================================================================
****** TROUBLESHOOTING: IF YOU NEED ANY HELP, MESSAGE ME ON DISCORD: Lil Monster#3557 ****
=======================================================================================================
*/
</style>

<!-- ============== load css ================= -->
<link href="https://ellexidecodes.github.io/Profile-Codes/free/laplace.css" rel="stylesheet">
<link href="https://ellexidecodes.github.io/Profile-Codes/free/fancy-fonts.css" rel="stylesheet">
<link href="https://ellexidecodes.github.io/Profile-Codes/free/all-google-fonts.css" rel="stylesheet">

<div class="container">
  <div class="image"></div>
</div>

<div id="abilities">
  <div class="ability" ability="Overall Ability">
    <div class="meter" style="width: 51.25%"></div>
  </div>
  <div class="ability" ability="Damage">
    <div class="meter" style="width: 30%"></div>
  </div>
  <div class="ability" ability="Strength">
    <div class="meter" style="width:45%"></div>
  </div>
  <div class="ability" ability="Intelligence">
    <div class="meter" style="width:75%"></div>
  </div>
  <div class="ability" ability="Stamina">
    <div class="meter" style="width:55%"></div>
  </div>
</div>

<div id="name" subtitle="White Mage/Support">Inoue</div>
<div id="title">
  <span>I'll heal you when you need it.</span>
  <br>
  The Sweetheart of the Team
</div>
<div class="slice">
    <div class="pattern"></div>
  </div>


<div class="tabs">

<!-- tab 1 || do not rename id -->
  <div class="tab"><input id="tab-1" name="tabs" type="radio" checked/>
    <label for="tab-1" tabName="Dossier"></label>

    <div class="content">
          <h1>Dossier</h1>
          <div class="sep">
            <div class="item">
              <span>Age</span> 20 y.o.
            </div>
            <div class="item">
              <span>Gender</span> Female
            </div>
            <div class="item">
              <span>Name</span> Inoue Hyuga
            </div>
            <div class="item">
              <span>Weight&nbsp;&nbsp;</span> &nbsp;&nbsp;110 pounds
            </div>
            <div class="item">
              <span>Height&nbsp;&nbsp;</span> &nbsp;&nbsp;5 feet 3 inches
            </div>
            <div class="item">
              <span>Marital Status</span> &nbsp;&nbsp;Single Pringle
            </div>
            <div class="item">
              <span>Personality</span> Bubbly and Innocent
            </div>
          </div>
    </div>
  </div>

    <!-- tab 2 || do not rename id -->
  <div class="tab"><input id="tab-2" name="tabs" type="radio" />
    <label for="tab-2" tabName="History"></label>

    <div class="content">
        <!--*
            * since there is no scrolling (as it messes with the paragraph)
            * design aspect, I instead give you internal "tabs"
            * to show the different overflow pages of your
            * information should you need them
            * just follow this template for every tab that needs
            * multiple pages
            * IMPORTANT: KEEP IN THE EMPTY LABELS
            * -->
          <input type="radio" name="history" id="cont-1" checked/>
          <label for="empty"></label>
          <div class="cont">
            <h1>History</h1>
            <p>
              Inoue is the epitome of a spoiled child <br>
              but she was never bratty. She grew up well <br>
              disciplined but still in a loving family. She was <br>
              given what she usually asked for because she never <br>
              really asked for more than what she knew her parents <br>
              could give her. Inoue loved her parents and her older <br>
              brother, Kaede, very much. Which was why when she lost <br>
              them, she felt like she also lost herself.
            </p>
            <p>
              It was hard for the 16-year-old Inoue to pick herself back up, but <br>
              she knew her parents wouldn't want to see her that way. Alone, she <br>
              buried her beloved parents while her heart longed to see her brother, <br>
              hoping against hope that he was okay. They only really found two bodies in that wreckage. She firmly believed one day she would see Kaede again.
            </p>
          </div>
          <label for="empty" class="prev"></label>

          <input type="radio" name="history" id="cont-2"/>
          <label for="cont-2" class="next">Read more</label>
          <div class="cont">
            <h1>History</h1>
            <p>
              Three years after the tragedy, she met her <br>
              new friends. Akira <i>(The Black Mage)</i>, Kagame <br>
              <i>(The Assassin)</i>, Lucio <i>(The Cleric)</i>, and Altera <br>
              <i>(The Warrior)</i>. They were a mismatched group, loudly <br>
              getting kicked out by the Inn in Saltlake City. It was kind <br>
              of comical to see this small group topple over a crying <br>
              pinkette. They all grimaced as her sobs turned into painful<br>
              little hiccups.
            </p>
            <p>
              "Are you okay, sweet thing?" Kagame asks, leaning down to brush<br>
              a stray pink lock away fromm her tear-filled eyes. Immediately, all hearts <br>
              melted. "No.." Inoue replies, her face contorting once again. In that instant, Kagame knew that these tears were not shed because of them but something far greater. Something someone as young as her shouldn't be carrying in the first place.
            </p>
            <p>
              Lucio, being the gentle giant that he is, immediately collected the 16 year old into his arms. They knew they couldn't just leave her. Her clothes were tattered, once beautiful pink hair mildly matted, and her bare feet had wounds on them. The team knew she needed their help and they weren't going to let her down.
            </p>
          </div>
          <label for="cont-1" class="prev">Previous</label>

          <input type="radio" name="history" id="cont-3" />
          <label for="cont-3" class="next">Read more</label>
          <div class="cont">
            <h1>History</h1>
            <p>
              It's been four years since they all met, and <br>
              three years since Inoue started training to be a<br>
              White Mage. Her motivation was sad but still as pure<br>
              as it once was: The make sure she never loses another<br>
              family again. Her current family who continues to help her<br>
              in her quest to find her lost brother.
            </p>
            <p>
              What more could anyone ask for?
            </p>
          </div>
          <label for="cont-2" class="prev">Previous</label>
        <!-- end of multiple pages in a tab -->
    </div>
  </div>

        <!-- tab 3 || do not rename id -->
  <div class="tab"><input id="tab-3" name="tabs" type="radio"/>
    <label for="tab-3" tabName="Persona"></label>

    <div class="content">
      <div class="scrollerWrap">
        <div class="scroller">
          <h1>Persona</h1>
          <p>
            She is completely innocent and has not <br>
            even experienced being in a relationship. <br>
            Though, Inoue has a huge crush on Akira, she is <br>
            unable to make a move because she doesn't know <br>
            how. Plus the fact that she feels as though Akira <br>
            only sees her as a little sister. It doesn't stop her<br>
            from daydreaming about him though!
          </p>
          <p>
            One of the biggest reasons why she is unable to get into a <br>
            relationship despite being a magnet for optimism, is that everyone <br>
            in her group coddles her and are way too over-protective. She was their youngest and sometimes it was frustrating, but to her, it felt good to have a family again. So, she doesn't complain much, if at all.
          </p>
          <p>
            Every night, Inoue becomes a bit more brooding--focusing a lot on her thoughts and memories. Night time was always the best moment to think. She was always the last one to go to bed, as everyone else often exhausted their energy throughout the day. This gave her an opportunity to be by herself and recharge. It was tiring to be an ambivert.
          </p>
        </div>
      </div>
    </div>
  </div>

    <!-- tab 4 || do not rename id -->
  <div class="tab"><input id="tab-4" name="tabs" type="radio" />
    <label for="tab-4" tabName="OOC"></label>

    <div class="content">
      <div class="scrollerWrap">
        <div class="scroller">
          <h1>Out of Character</h1>
          <ol>
            <li>This profile is made and <a href="https://www.copyrighted.com/work/mgGQQtcdN3zy66Nr" target="_blank" rel="noopener noreferrer">copyrighted</a> by <br>
              <a href="http://roleplay.chat/profile.php?user=Deum" target="_blank" rel="noopener noreferrer">The Monster</a> for anyone to use freely. DM <b>Deum</b> for codes of your own.<br>
              for a profile of your own.</li>
            <li>Inoue is my character and I will play her as I please.</li>
            <li>I reserve the right to accept or deny roleplay from <br>
              anyone. I don't care if you are the King of the world.</li>
            <li>Inoue has <b>PTSD</b> do <u>NOT</u> attempt to magic it away. She is literally a white mage. You'd think she would've tried that by now. It doesn't work. If you attempt to, I won't hesitate to bring her into a siezure.</li>
            <li>I am not afraid to block you.</li>
            <li>If you need any coding help, visit my website <a href="http://www.themonster.xyz/" target="_blank" rel="noopener noreferrer">The Monster</a> or DM me on my coding profile "Deum".</li>
            <li>This template will be public soon! Don't worry c:</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- =============== donator perk || if you're not a donator, this won't work but you can keep it in ======= -->
<script src='https://www.themonster.xyz/profiles/Addons/free.js'></script>