Sweet n simple

<!--
BASICALLY i wanted to do a only accented code cause... i don't know lmao but PLEASEEE i'd be happy so frickin happy if you use my stupid code!! -->

<!-- COLORS (i had to test it out lmao) -->
<div style="--accent:#ffbf00;" class="container">

  <div class="container" style="max-width:1000px">
    <div class="mx-auto" style="max-width:550px">

      <!-- TOP -->
      <div class="card mx-auto p-2" style="border:0px; border-radius:15px;">

        <!-- ICON -->
        <div class="text-center" style="position:relative; display:inline-block;">
          <img src="https://i.imgur.com/GgRG37R.png" style="border-radius:12px; width:220px; border:3px solid var(--accent);">
        </div>

        <!-- DECORATIONS?? -->
        <div style="display:flex; justify-content:space-between; align-items:center; margin-top:-15px; font-size:22px; color:var(--accent);">
          <i class="fa-solid fa-guitar fa-flip-horizontal"></i>
          <i class="fa-solid fa-guitar"></i>
        </div>

        <!-- NAME -->
        <p style="font-family:monospace, sans-serif; font-size:30px; text-align:center; margin-top:-5px; letter-spacing:2px; font-style:normal;">
          <span style="font-size:45px; color:var(--accent)">N</span>AME
          <span style="font-size:45px; color:var(--accent)">L</span>AST NAME
        </p>

        <!-- QUOTE -->
        <p style="font-family:ms gothic, sans-serif; font-size:15px; text-align:center;">
          <i class="fa-solid fa-quote-left" style="color:var(--accent)"></i>
          <b><i>Quote. Keep it short.</i></b>
          <i class="fa-solid fa-quote-right" style="color:var(--accent)"></i>
        </p>

        <!-- DIVIDER -->
        <div class="d-flex align-items-center mt-2">
          <hr style="width:100%; border-color:var(--accent)">
          <span class="px-2" style="color:var(--accent)"><i class="fa-solid fa-cocktail"></i></span>
          <span class="px-2" style="color:var(--accent); font-size:28px;"><i class="fa-solid fa-pizza"></i></span>
          <span class="px-2" style="color:var(--accent)"><i class="fa-solid fa-cocktail"></i></span>
          <hr style="width:100%; border-color:var(--accent)">
        </div>

        <!-- SUMMARY -->
        <div class="card mt-2 p-2" style="border:1px solid var(--accent); border-radius:10px; height:125px; overflow-y:auto; scrollbar-color:var(--accent) transparent; scrollbar-width:thin;">
          <p style="font-family:ms gothic, sans-serif; font-size:15px;">
            <i class="fa-solid fa-feather-pointed" style="color:var(--accent)"></i>
            Can scroll btw!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>

      </div>

    </div>
  </div>

  <!-- INFO -->
  <div class="container" style="max-width:1000px">
    <div class="mx-auto mt-2" style="max-width:550px">

      <div class="row text-center" style="font-family:ms gothic, sans-serif; font-size:14px">

        <div class="col card border-0 m-1 p-1" style="border-radius:12px; border:1px solid var(--accent);">
          <i>Gender</i>
          <div style="color:var(--accent); font-size:18px;"><i class="fa-solid fa-venus-mars"></i></div>
          <hr style="margin-top:-10px; border-color:var(--accent)">
          <b>CONTENT</b>
        </div>

        <div class="col card border-0 m-1 p-1" style="border-radius:12px; border:1px solid var(--accent);">
          <i>Pronouns</i>
          <div style="color:var(--accent); font-size:18px;"><i class="fa-solid fa-comments"></i></div>
          <hr style="margin-top:-10px; border-color:var(--accent)">
          <b>CONTENT</b>
        </div>

        <div class="col card border-0 m-1 p-1" style="border-radius:12px; border:1px solid var(--accent);">
          <i>Age</i>
          <div style="color:var(--accent); font-size:18px;"><i class="fa-solid fa-hourglass-half"></i></div>
          <hr style="margin-top:-10px; border-color:var(--accent)">
          <b>CONTENT</b>
        </div>

        <div class="col card border-0 m-1 p-1" style="border-radius:12px; border:1px solid var(--accent);">
          <i>Orientation</i>
          <div style="color:var(--accent); font-size:18px;"><i class="fa-solid fa-heart"></i></div>
          <hr style="margin-top:-10px; border-color:var(--accent)">
          <b>CONTENT</b>
        </div>

        <div class="col card border-0 m-1 p-1" style="border-radius:12px; border:1px solid var(--accent);">
          <i>Species</i>
          <div style="color:var(--accent); font-size:18px;"><i class="fa-solid fa-paw"></i></div>
          <hr style="margin-top:-10px; border-color:var(--accent)">
          <b>CONTENT</b>
        </div>

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

  <!-- MOODBOARD -->
  <div class="container" style="max-width:550px; margin:auto; border:1px solid var(--accent); border-radius:12px; padding:8px;">
    <div style="text-align:center;">
      <img src="https://i.pinimg.com/736x/95/a7/36/95a736d02fa5cfe81cd7f97ed58beaf3.jpg" style="width:30%; display:inline-block; margin-right:3%; border-radius:8px; border:2px solid var(--accent);">
      <img src="https://i.pinimg.com/736x/be/a4/ce/bea4ce7642f5074dab1b8c92edf2413a.jpg" style="width:30%; display:inline-block; margin-right:3%; border-radius:8px; border:2px solid var(--accent);">
      <img src="https://i.pinimg.com/736x/50/d7/43/50d7438ff1dd2822ed0cf84e7aaf4965.jpg" style="width:30%; display:inline-block; border-radius:8px; border:2px solid var(--accent);">
    </div>
  </div>

  <!-- CREDIT -->
  <div class="text-center mx-1" style="font-size:15px;">
    <a href="https://toyhou.se/sokie_Visuvel"><i class="fas fa-cloud" style="color:var(--accent)"></i></a>
  </div>

</div>