Basic

HTMLCustom ColorsMixed ColorsBootstrapUser

Line Count: 298

Difficulty:

Theme Friendly
Accent Color
Custom Colors

<!------------------------------------

      Basic - theme friendly
      by HTMLobster
      
      TOS: https://toyhou.se/~bulletins/2899311.terms-of-service

------------------------------------->
<div>
  <!-- main image background -->
  <div class="container rounded p-3 card bg-secondary" style="background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/121453184_SXa3g7DYBHMOHeE.png');">
    <div class="row">
      <!-- left column -->
      <div class="col-lg-4">
        <!-- icon image -->
        <div class="card">
          <div class="p-2 card-header rounded border-0">
            <!-- image -->
            <div style="background:url('image_url') top center; background-size:cover; padding:50%;" class="rounded"></div>
          </div>
        </div>
        <!-- basic info -->
        <div class="card p-3 mt-4">
          <!-- user info -->
          <div class="d-flex mx-n1 mt-n2" style="font-size:1.2em;">
            <span class="badge badge-primary mt-2 flex-fill mx-1">
            name
            </span>
            <span class="badge badge-primary mt-2 flex-fill mx-1">
            age
            </span>
            <span class="badge badge-primary mt-2 flex-fill mx-1">
            pronouns
            </span>
          </div>
          <!-- team info -->
          <div style="font-size:1.2em;">
            <span class="badge badge-primary mt-2 d-block">
            team name
            </span>
          </div>
          
          <hr class="w-100">
          
          <!-- social media links -->
          <div class="row no-gutters mx-n1 mt-n2 justify-content-center">
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100">
              Link
              </a>
            </div>
          </div>
          
          <hr class="w-100">
          
          <!-- warnings -->
          <div class="bg-danger rounded p-2 text-white text-justify">
            <i class="fa-solid fa-triangle-exclamation"></i>
            Warning info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt augue vitae tortor maximus, vel porta orci vestibulum. 
          </div>
        </div>
      </div>
      
      <!-- general info -->
      <div class="col">
        <!-- about -->
        <div class="card mt-lg-0 mt-4">
          <!-- heading -->
          <div class="card-header text-primary">
            <span style="font-size:1.5em;">
            <i class="fa-solid fa-star"></i>
            About Me
            </span>
          </div>
          
          <!-- content -->
          <div class="p-3 text-justify">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt augue vitae tortor maximus, vel porta orci vestibulum. Maecenas odio elit, aliquet vitae tincidunt quis, mollis bibendum dolor. In hac habitasse platea dictumst. Curabitur ullamcorper ipsum non massa condimentum, quis laoreet augue sollicitudin. Quisque sed congue arcu, a dapibus sapien. Aliquam eget justo felis. In gravida lobortis enim luctus tincidunt. Suspendisse quis ornare ex, lobortis interdum eros. Phasellus et posuere nibh. 
            </p>
            <p>
              Proin congue nisi ut tincidunt sodales. Curabitur sed tortor sed tortor rhoncus pulvinar. Donec gravida nibh eget malesuada consectetur. Duis rhoncus et est vel cursus. Proin diam mi, malesuada nec maximus ut, elementum ut orci. Fusce quis metus eros. 
            </p>
            <p>
              Praesent quam augue, accumsan non ligula iaculis, egestas malesuada neque. Suspendisse id molestie nulla. Donec in suscipit enim, ac egestas felis. In vitae ullamcorper tellus. Proin faucibus leo eu tortor lacinia, ac mollis ipsum sodales. Donec in enim rutrum, elementum lorem eget, tincidunt leo.
            </p>
          </div>
        </div>
        
        <div class="row">
          <!-- likes -->
          <div class="col-sm mt-4">
            <div class="card h-100">
              <!-- heading -->
              <div class="card-header text-primary">
                <span style="font-size:1.5em;">
                <i class="fa-solid fa-heart"></i>
                Likes/Interests
                </span>
              </div>
              
              <!-- content -->
              <div class="p-3 text-justify">
                <ul class="mb-0">
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- will draw -->
          <div class="col-sm mt-4">
            <div class="card h-100">
              <!-- heading -->
              <div class="card-header text-primary">
                <span style="font-size:1.5em;">
                <i class="fa-solid fa-paintbrush"></i>
                Will Do
                </span>
              </div>
              
              <!-- content -->
              <div class="p-3 text-justify">
                <ul class="mb-0">
                  <!-- item -->
                  <li>
                    Humanoid, anthro
                  </li>
                  <!-- item -->
                  <li>
                    Digital art, crafts
                  </li>
                  <!-- item -->
                  <li>
                    Friendly fire
                  </li>
                  <!-- item -->
                  <li>
                    Revenges and chains
                  </li>
                  <!-- item -->
                  <li> 
                    Other stuff
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        
        <!-- stamps -->
        <div class="card mt-4">
          <!-- heading -->
          <div class="card-header text-primary">
            <span style="font-size:1.5em;">
            <i class="fa-solid fa-image"></i>
            Stamps
            </span>
          </div>
          
          <!-- content -->
          <div class="p-3 text-center">
            <!-- stamps -->
            <p>
              <img src="image_url">
            </p>
            <!-- blinkies -->
            <p>
              <img src="image_url">
            </p>
          </div>
        </div>
        
        <!-- friends -->
        <div class="card mt-4">
          <!-- heading -->
          <div class="card-header text-primary">
            <span style="font-size:1.5em;">
            <i class="fa-solid fa-user"></i>
            Friends
            </span>
          </div>
          <!-- friends -->
          <div class="p-3">
            <div class="row justify-content-center mt-n3">
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- credit -->
  <div class="text-center mt-3">
    <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="code by HTMLobster">
    <i class="fa-solid fa-lobster"></i>
    </a>
    <a href="https://www.transparenttextures.com/" data-toggle="tooltip" title="bg by transparenttextures">
    <i class="fa-solid fa-image"></i>
    </a>
  </div>
</div>

Copy

<!------------------------------------

      Basic - accent color
      by HTMLobster
      
      TOS: https://toyhou.se/~bulletins/2899311.terms-of-service

      Find & replace colors

      Accent: #b785be

------------------------------------->
<div>
  <!-- main image background -->
  <div class="container rounded p-3 card bg-secondary" style="background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/121453184_SXa3g7DYBHMOHeE.png');">
    <div class="row">
      <!-- left column -->
      <div class="col-lg-4">
        <!-- icon image -->
        <div class="card">
          <div class="p-2 card-header rounded border-0">
            <!-- image -->
            <div style="background:url('image_url') top center; background-size:cover; padding:50%;" class="rounded"></div>
          </div>
        </div>
        <!-- basic info -->
        <div class="card p-3 mt-4">
          <!-- user info -->
          <div class="d-flex mx-n1 mt-n2" style="font-size:1.2em;">
            <span class="badge mt-2 flex-fill mx-1 text-white" style="background-color:#b785be;">
            name
            </span>
            <span class="badge mt-2 flex-fill mx-1 text-white" style="background-color:#b785be;">
            age
            </span>
            <span class="badge mt-2 flex-fill mx-1 text-white" style="background-color:#b785be;">
            pronouns
            </span>
          </div>
          <!-- team info -->
          <div style="font-size:1.2em;">
            <span class="badge mt-2 d-block text-white" style="background-color:#b785be;">
            team name
            </span>
          </div>
          
          <hr class="w-100">
          
          <!-- social media links -->
          <div class="row no-gutters mx-n1 mt-n2 justify-content-center">
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100">
              Link
              </a>
            </div>
          </div>
          
          <hr class="w-100">
          
          <!-- warnings -->
          <div class="bg-danger rounded p-2 text-white text-justify">
            <i class="fa-solid fa-triangle-exclamation"></i>
            Warning info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt augue vitae tortor maximus, vel porta orci vestibulum. 
          </div>
        </div>
      </div>
      
      <!-- general info -->
      <div class="col">
        <!-- about -->
        <div class="card mt-lg-0 mt-4">
          <!-- heading -->
          <div class="card-header" style="color:#b785be;">
            <span style="font-size:1.5em;">
            <i class="fa-solid fa-star"></i>
            About Me
            </span>
          </div>
          
          <!-- content -->
          <div class="p-3 text-justify">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt augue vitae tortor maximus, vel porta orci vestibulum. Maecenas odio elit, aliquet vitae tincidunt quis, mollis bibendum dolor. In hac habitasse platea dictumst. Curabitur ullamcorper ipsum non massa condimentum, quis laoreet augue sollicitudin. Quisque sed congue arcu, a dapibus sapien. Aliquam eget justo felis. In gravida lobortis enim luctus tincidunt. Suspendisse quis ornare ex, lobortis interdum eros. Phasellus et posuere nibh. 
            </p>
            <p>
              Proin congue nisi ut tincidunt sodales. Curabitur sed tortor sed tortor rhoncus pulvinar. Donec gravida nibh eget malesuada consectetur. Duis rhoncus et est vel cursus. Proin diam mi, malesuada nec maximus ut, elementum ut orci. Fusce quis metus eros. 
            </p>
            <p>
              Praesent quam augue, accumsan non ligula iaculis, egestas malesuada neque. Suspendisse id molestie nulla. Donec in suscipit enim, ac egestas felis. In vitae ullamcorper tellus. Proin faucibus leo eu tortor lacinia, ac mollis ipsum sodales. Donec in enim rutrum, elementum lorem eget, tincidunt leo.
            </p>
          </div>
        </div>
        
        <div class="row">
          <!-- likes -->
          <div class="col-sm mt-4">
            <div class="card h-100">
              <!-- heading -->
              <div class="card-header" style="color:#b785be;">
                <span style="font-size:1.5em;">
                <i class="fa-solid fa-heart"></i>
                Likes/Interests
                </span>
              </div>
              
              <!-- content -->
              <div class="p-3 text-justify">
                <ul class="mb-0">
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- will draw -->
          <div class="col-sm mt-4">
            <div class="card h-100">
              <!-- heading -->
              <div class="card-header" style="color:#b785be;">
                <span style="font-size:1.5em;">
                <i class="fa-solid fa-paintbrush"></i>
                Will Do
                </span>
              </div>
              
              <!-- content -->
              <div class="p-3 text-justify">
                <ul class="mb-0">
                  <!-- item -->
                  <li>
                    Humanoid, anthro
                  </li>
                  <!-- item -->
                  <li>
                    Digital art, crafts
                  </li>
                  <!-- item -->
                  <li>
                    Friendly fire
                  </li>
                  <!-- item -->
                  <li>
                    Revenges and chains
                  </li>
                  <!-- item -->
                  <li> 
                    Other stuff
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        
        <!-- stamps -->
        <div class="card mt-4">
          <!-- heading -->
          <div class="card-header" style="color:#b785be;">
            <span style="font-size:1.5em;">
            <i class="fa-solid fa-image"></i>
            Stamps
            </span>
          </div>
          
          <!-- content -->
          <div class="p-3 text-center">
            <!-- stamps -->
            <p>
              <img src="image_url">
            </p>
            <!-- blinkies -->
            <p>
              <img src="image_url">
            </p>
          </div>
        </div>
        
        <!-- friends -->
        <div class="card mt-4">
          <!-- heading -->
          <div class="card-header" style="color:#b785be;">
            <span style="font-size:1.5em;">
            <i class="fa-solid fa-user"></i>
            Friends
            </span>
          </div>
          <!-- friends -->
          <div class="p-3">
            <div class="row justify-content-center mt-n3">
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- credit -->
  <div class="text-center mt-3">
    <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="code by HTMLobster">
    <i class="fa-solid fa-lobster"></i>
    </a>
    <a href="https://www.transparenttextures.com/" data-toggle="tooltip" title="bg by transparenttextures">
    <i class="fa-solid fa-image"></i>
    </a>
  </div>
</div>

Copy

<!------------------------------------

      Basic - custom colors
      by HTMLobster
      
      TOS: https://toyhou.se/~bulletins/2899311.terms-of-service

      Find & replace colors
  
      Text: #d5c3c3
      Card background: #2c1921
      Card header background: #1e1116
      Primary: #a63555
      Secondary: #884f57
      Danger: #ca4040

------------------------------------->
<div>
  <!-- main image background & colors -->
  <div class="container rounded p-3 flex-column" style="background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/121453184_SXa3g7DYBHMOHeE.png'); background-color:#2c1921; color:#d5c3c3;">
    <div class="row">
      <!-- left column -->
      <div class="col-lg-4">
        <!-- icon image -->
        <div class="card flex-column" style="background-color:#2c1921;">
          <div class="card p-2 rounded border-0" style="background-color:#1e1116;">
            <!-- image -->
            <div style="background:url('image_url') center; background-size:cover; padding:50%;" class="rounded"></div>
          </div>
        </div>
        <!-- basic info -->
        <div class="card p-3 mt-4 flex-column" style="background-color:#2c1921;">
          <!-- user info -->
          <div class="d-flex mx-n1 mt-n2" style="font-size:1.2em;">
            <span class="badge mt-2 flex-fill mx-1 text-white" style="background-color:#a63555;">
            name
            </span>
            <span class="badge mt-2 flex-fill mx-1 text-white" style="background-color:#a63555;">
            age
            </span>
            <span class="badge mt-2 flex-fill mx-1 text-white" style="background-color:#a63555;">
            pronouns
            </span>
          </div>
          <!-- team info -->
          <div style="font-size:1.2em;">
            <span class="badge mt-2 d-block text-white" style="background-color:#a63555;">
            team name
            </span>
          </div>
          
          <hr class="w-100" style="border-color:#000;">
          
          <!-- social media links -->
          <div class="row no-gutters mx-n1 mt-n2 justify-content-center">
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100 text-white" style="background-color:#884f57; border-color:#884f57;">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100 text-white" style="background-color:#884f57; border-color:#884f57;">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100 text-white" style="background-color:#884f57; border-color:#884f57;">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100 text-white" style="background-color:#884f57; border-color:#884f57;">
              Link
              </a>
            </div>
            <div class="col-sm-4 col-6 mt-2 px-1">
              <!-- link -->
              <a href="link_url" class="btn btn-secondary w-100 text-white" style="background-color:#884f57; border-color:#884f57;">
              Link
              </a>
            </div>
          </div>
          
          <hr class="w-100" style="border-color:#000;">
          
          <!-- warnings -->
          <div class="rounded p-2 text-white text-justify" style="background-color:#ca4040;">
            <i class="fa-solid fa-triangle-exclamation"></i>
            Warning info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt augue vitae tortor maximus, vel porta orci vestibulum. 
          </div>
        </div>
      </div>
      
      <!-- general info -->
      <div class="col">
        <!-- about -->
        <div class="card mt-lg-0 mt-4 flex-column" style="background-color:#2c1921;">
          <!-- heading -->
          <div class="card-header" style="color:#a63555; background-color:#1e1116;">
            <span style="font-size:1.5em;">
            <i class="fa-solid fa-star"></i>
            About Me
            </span>
          </div>
          
          <!-- content -->
          <div class="p-3 text-justify">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt augue vitae tortor maximus, vel porta orci vestibulum. Maecenas odio elit, aliquet vitae tincidunt quis, mollis bibendum dolor. In hac habitasse platea dictumst. Curabitur ullamcorper ipsum non massa condimentum, quis laoreet augue sollicitudin. Quisque sed congue arcu, a dapibus sapien. Aliquam eget justo felis. In gravida lobortis enim luctus tincidunt. Suspendisse quis ornare ex, lobortis interdum eros. Phasellus et posuere nibh. 
            </p>
            <p>
              Proin congue nisi ut tincidunt sodales. Curabitur sed tortor sed tortor rhoncus pulvinar. Donec gravida nibh eget malesuada consectetur. Duis rhoncus et est vel cursus. Proin diam mi, malesuada nec maximus ut, elementum ut orci. Fusce quis metus eros. 
            </p>
            <p>
              Praesent quam augue, accumsan non ligula iaculis, egestas malesuada neque. Suspendisse id molestie nulla. Donec in suscipit enim, ac egestas felis. In vitae ullamcorper tellus. Proin faucibus leo eu tortor lacinia, ac mollis ipsum sodales. Donec in enim rutrum, elementum lorem eget, tincidunt leo.
            </p>
          </div>
        </div>
        
        <div class="row">
          <!-- likes -->
          <div class="col-sm mt-4">
            <div class="card h-100 flex-column" style="background-color:#2c1921;">
              <!-- heading -->
              <div class="card-header" style="color:#a63555; background-color:#1e1116;">
                <span style="font-size:1.5em;">
                <i class="fa-solid fa-heart"></i>
                Likes/Interests
                </span>
              </div>
              
              <!-- content -->
              <div class="p-3 text-justify">
                <ul class="mb-0">
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                  <!-- like -->
                  <li>
                    Like
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- will draw -->
          <div class="col-sm mt-4">
            <div class="card h-100 flex-column" style="background-color:#2c1921;">
              <!-- heading -->
              <div class="card-header" style="color:#a63555; background-color:#1e1116;">
                <span style="font-size:1.5em;">
                <i class="fa-solid fa-paintbrush"></i>
                Will Do
                </span>
              </div>
              
              <!-- content -->
              <div class="p-3 text-justify">
                <ul class="mb-0">
                  <!-- item -->
                  <li>
                    Humanoid, anthro
                  </li>
                  <!-- item -->
                  <li>
                    Digital art, crafts
                  </li>
                  <!-- item -->
                  <li>
                    Friendly fire
                  </li>
                  <!-- item -->
                  <li>
                    Revenges and chains
                  </li>
                  <!-- item -->
                  <li> 
                    Other stuff
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        
        <!-- stamps -->
        <div class="card mt-4 flex-column" style="background-color:#2c1921;">
          <!-- heading -->
          <div class="card-header" style="color:#a63555; background-color:#1e1116;">
            <span style="font-size:1.5em;">
            <i class="fa-solid fa-image"></i>
            Stamps
            </span>
          </div>
          
          <!-- content -->
          <div class="p-3 text-center">
            <!-- stamps -->
            <p>
              <img src="image_url">
            </p>
            <!-- blinkies -->
            <p>
              <img src="image_url">
            </p>
          </div>
        </div>
        
        <!-- friends -->
        <div class="card mt-4 flex-column" style="background-color:#2c1921;">
          <!-- heading -->
          <div class="card-header" style="color:#a63555; background-color:#1e1116;">
            <span style="font-size:1.5em;">
            <i class="fa-solid fa-user"></i>
            Friends
            </span>
          </div>
          <!-- friends -->
          <div class="p-3">
            <div class="row justify-content-center mt-n3">
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
              <!-- friend -->
              <div class="col-sm-3 col-6 text-center mt-3">
                <!-- link -->
                <a href="user_link">
                  <!-- image -->
                  <img src="image_url" class="rounded">
                </a>
                <!-- name -->
                <div>
                  username
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- credit -->
  <div class="text-center mt-3">
    <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="code by HTMLobster">
    <i class="fa-solid fa-lobster"></i>
    </a>
    <a href="https://www.transparenttextures.com/" data-toggle="tooltip" title="bg by transparenttextures">
    <i class="fa-solid fa-image"></i>
    </a>
  </div>
</div>

Stor8

Basic

Password (optional)