Habibty

CuckooHoopoe

Info

Created: 2 years, 5 months ago
Creator: https://toyhou.se/CuckooHoopoe
Favorites: 596
Profile

Habibty [f2u]
I made a new profile code for my self so I guess I'll share the old one. This code was my favourite for a very long time and it's undergone many changes, in fact all my chracter folders were based around this code. The only reason I changed everything was because I felt like it lol. So here, enjoy my messy baby. You can see my old profile by clicking the "example" button on the side (or click the tab on the side)
This is NOT beginner friendly, you should have some basic knowledge on how tabs work. I tried to add some helpful comments but it's a messy code so good luck lol
Features
Mobile Friendly
Custom colours
Not beginner friendly
IMPORTANT NOTES
Don't forget to credit the images used! At the bottom of the code you can see icons with hover lables, all you have to do is paste the right link!
Icons from font-awesome
A comment would be appreciated, I'd like to see it!
Don't use WYSIWYG
Code Rules
Example
Code

<!--
COLOURS:
  » highlight the numbers i have written below
  » hit ctrl f
  » hit the plus sign 
  » put in your new colour (use hex codes)
  » click the "all" button - this automatically replaces all the colours
  
    86608f              accent
    ededed              title
    0, 0, 0, 0.7        title background
    ddd9f2              text
    000000              box background
    222222              profile background
 -->

<!-- Background -->
<div class="card rounded-0 border-0" style="z-index:100;position:relative;margin:-15px -15px -31px;min-height:calc(100vh - 74px);
  background-color: #222222;
  background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/32240180_oXdd0Xbazy5tnUy.png);
  background-attachment: fixed;
  background-size: auto;">
  
  
<!-- Content below -->

<div class="row no-gutters mx-auto my-4 text-center" style="max-width: 750px; color:#ddd9f2">
  <!-- HEADER -->
  <div class="col-12">
    <div class="card border-0 p-2 mb-2" style="background-color:#000000; border-radius: 25px 25px 10px 10px;">
      <div class="card p-2" style="background-color:#000000; border-style: dashed; border-width: 2px; border-radius: 20px 20px 5px 5px; border-color:#86608f;">
        <!-- HEADER BACKGROUND -->
        <div class="card border-0 p-1" style="
            background:url(https://images.unsplash.com/photo-1558350283-8269d86681f2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80) center;
            background-attachment: fixed; 
            background-size: cover; 
            border-radius: 15px 15px 2px 2px;">
            <div class="card border-0 p-2" style="background:rgba(0, 0, 0, 0.7); color:#ededed; letter-spacing: 3px; font-size: 1.8em; border-radius: 15px 15px 2px 2px;">
                <!-- CHANGE ICONS AND NAME -->
                <p style="font-variant:small-caps"><i class="fad fa-flower"></i> Username <i class="fad fa-flower"></i></p>
            </div>
        </div>
      </div> <!-- stitching end -->
    </div><!-- card end -->
  </div> <!-- col end -->

  <!-- middle block -->
  <div class="col-md-12 mb-2">
    <div class="card border-0 p-2" style="background-color:#000000; border-radius: 10px;">
      <div class="card modal-open" style="background-color:#000000; border-style: dashed; border-width: 2px; border-radius: 5px; border-color:#86608f;">
        <!-- TABS - change tab icons here -->
        <ul class="nav row no-gutters card-header-tabs pt-2 px-1" style="border-bottom-style: dashed; border-width: 2px;">
          <!-- ABOUT TAB -->
          <li class="col-4 mb-2 px-1"><a class="btn btn-block" style="background-color:#86608f; color:#000000" data-toggle="tab" href="#ABOUT"><i class="fas fa-seedling fa-lg"></i></a></li>
          <!-- CHARACTER & FOLDER TAB -->
          <li class="col-4 mb-2 px-1"><a class="btn btn-block" style="background-color:#86608f; color:#000000" data-toggle="tab" href="#STORIES"><i class="fas fa-user fa-lg"></i></a></li>
          <!-- LINKS TAB -->
          <li class="col-4 mb-2 px-1"><a class="btn btn-block" style="background-color:#86608f; color:#000000" data-toggle="tab" href="#LINKS"><i class="fas fa-file fa-lg"></i></a></li>
        </ul>
        <!-- tabs end -->
        <!-- TAB CONTENT -->
        <div class="mx-2 mb-1 mt-3" style="height:400px; overflow:auto;">
        <div class="tab-content p-2">
        <!-- ABOUT TAB CONTENT -->
          <div class="tab-pane show active fade px-2" id="ABOUT">
            <p class="mb-3">A blurb about you, or if you know how you can convert this into a chracter profile. Write as much as you want, this whole tab will scroll when filled up. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
            <div class="row">
              <div class="col-6">
                <div class="card p-1 mb-4 rounded-0" style="background-color:#000000; border-style: dashed; border-width: 1px; border-color:#86608f;">
                  <!-- LIKES LIST -->
                  <p class="display-4 mb-1" style="font-size:20px; color:#86608f; letter-spacing:2px">LIKES</p>
                  <ul class="text-left fa-ul mb-2">
                    <li><span class="fa-li"><i class="fas fa-heart-square"></i></span>like</li>
                    <li><span class="fa-li"><i class="fas fa-heart-square"></i></span>like</li>
                    <li><span class="fa-li"><i class="fas fa-heart-square"></i></span>like</li>
                  </ul>
                </div>
              </div>
              <div class="col-6">
                <div class="card p-1 mb-4 rounded-0" style="background-color:#000000; border-style: dashed; border-width: 1px; border-color:#86608f;">
                  <!-- DISLIKES LIST -->
                  <p class="display-4 mb-1" style="font-size:20px; color:#86608f; letter-spacing:2px">DISLIKES</p>
                  <ul class="text-left fa-ul mb-2">
                    <li><span class="fa-li"><i class="fas fa-times-square"></i></span>dislike</li>
                    <li><span class="fa-li"><i class="fas fa-times-square"></i></span>dislike</li>
                    <li><span class="fa-li"><i class="fas fa-times-square"></i></span>dislike</li>
                  </ul>
                </div>
              </div>
              <div class="col-12">
                <div class="card p-1 mb-2 rounded-0" style="background-color:#000000; border-style: dashed; border-width: 1px; border-color:#86608f;">
                  <!-- NOTES LIST -->
                  <p class="display-4 mb-1" style="font-size:20px; color:#86608f; letter-spacing:2px">NOTES</p>
                  <ul class="text-left fa-ul mb-2">
                    <li><span class="fa-li"><i class="fal fa-angle-double-right"></i></span>Write about disclaimers or whatever. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
                    <li><span class="fa-li"><i class="fal fa-angle-double-right"></i></span>note</li>
                    <li><span class="fa-li"><i class="fal fa-angle-double-right"></i></span>notes</li>
                  </ul>
                </div>
              </div>
            </div>
          </div><!-- ABOUT tab end -->

          <!-- CHARACTERS & FOLDERS TAB CONTENT -->
          <div class="tab-pane fade text-left px-2" id="STORIES">
            <div class="row no-gutters" style="font-size: 20px; font-weight:lighter; color:#86608f">
                <div class="col-auto text-uppercase" style="letter-spacing: 1px;"> Characters</div>
                <div class="col mx-2 my-auto"><hr class="my-0" style="border-color:#ddd9f2; border-bottom:dashed 1px; border-top:0pc"></div>
                <div class="col-auto px-1 my-auto"><i class="fad fa-clouds-moon"></i></div>
            </div>
            <p><i class="fas fa-exclamation-triangle mr-1"></i> Warning about character content here! This tab will scroll so add as many characters you want</p>
            
            <!-- CHARACTER ROW START -->
            <div class="row no-gutters my-1 pb-2">
              <!-- CHARACTER ONE -->
              <div class="col-sm-3 p-1">
                <div class="card card-block rounded-0 p-0" style="
                    background:url(IMAGE_URL); 
                    background-position:center top; background-size:cover; border:0px; height:150px;">
                    <a href="CHARACTER_LINK" class="btn btn-outline-info mx-auto w-100 rounded-0 tooltipster" title="CHARACTER_NAME" style="height: 150px; border: 0; opacity: 0.4; background-blend-mode:screen"></a>
                </div>
              </div>
              <!-- CHARACTER TWO -->
              <div class="col-sm-3 p-1">
                <div class="card card-block rounded-0 p-0" style="
                    background:url(IMAGE_URL); 
                    background-position:center; background-size:cover; border:0px; height:150px;">
                    <a href="CHARACTER_LINK" class="btn btn-outline-info mx-auto w-100 rounded-0 tooltipster" title="CHARACTER_NAME" style="height: 150px; border: 0; opacity: 0.4; background-blend-mode:screen"></a>
                </div>
              </div>
              <!-- CHARACTER THREE -->
              <div class="col-sm-3 p-1">
                <div class="card card-block rounded-0 p-0" style="
                    background:url(IMAGE_URL); 
                    background-position:center; background-size:cover; border:0px; height:150px;">
                    <a href="CHARACTER_LINK" class="btn btn-outline-info mx-auto w-100 rounded-0 tooltipster" title="CHARACTER_NAME" style="height: 150px; border: 0; opacity: 0.4; background-blend-mode:screen"></a>
                </div>
              </div>
              <!-- CHARACTER FOUR -->
              <div class="col-sm-3 p-1">
                <div class="card card-block rounded-0 p-0" style="
                    background:url(IMAGE_URL); 
                    background-position:center; background-size:cover; border:0px; height:150px;">
                    <a href="CHARACTER_LINK" class="btn btn-outline-info mx-auto w-100 rounded-0 tooltipster" title="CHARACTER_NAME" style="height: 150px; border: 0; opacity: 0.4; background-blend-mode:screen"></a>
                </div>
              </div>
            </div><!-- CHARACTER ROW END - copy & paste the entire row if you want to add more characters -->

            <div class="row no-gutters mt-3" style="font-size: 20px; font-weight:lighter; color:#86608f">
                <div class="col-auto text-uppercase" style="letter-spacing: 1px;"> Folders</div>
                <div class="col mx-2 my-auto"><hr class="my-0" style="border-color:#ddd9f2; border-bottom:dashed 1px; border-top:0pc"></div>
                <div class="col-auto px-1 my-auto"><i class="fad fa-dungeon"></i></div>
            </div>
            <p class="mb-2">Description about how you organize your folders.</p>
            <p class="font-weight-bold text-center">
              <a class="badge-pill px-2 m-1" style="background:#86608f; color:#ededed;" href="LINK">FOLDER</a>
              <a class="badge-pill px-2 m-1" style="background:#86608f; color:#ededed;" href="LINK">FOLDER</a>
              <a class="badge-pill px-2 m-1" style="background:#86608f; color:#ededed;" href="LINK">FOLDER</a>
            </p>
          </div><!-- STORIES tab end --> 
          
          <!-- LINKS TAB CONTENT -->
          <div class="tab-pane fade" id="LINKS">
            <div class="row m-0 mb-2 text-left">
              <div class="col-2 hidden-sm-down h-100">
                <!-- LEFT SIDEBAR -->
                <div class="card-block d-block p-0" style="
                    background:url(https://images.unsplash.com/photo-1558350283-8269d86681f2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80);
                    background-attachment: fixed; 
                    background-size: cover;
                    height:190px;">
                </div> <!-- image end -->
              </div>
              <div class="col-sm-8 mx-auto py-2" style="border: dashed 1px;">
                <p><span class="text-uppercase" style="letter-spacing:2px;">Commissions</span>
                  <span class="badge-pill pull-right px-2" style="background:#86608f; color:#ededed;">closed</span>
                </p>
                <p><span class="text-uppercase" style="letter-spacing:2px;">Trades</span>
                  <span class="badge-pill pull-right px-2" style="background:#86608f; color:#ededed;">closed</span>
                </p>
                <p><span class="text-uppercase" style="letter-spacing:2px;">Colabs</span>
                  <span class="badge-pill pull-right px-2" style="background:#86608f; color:#ededed;">closed</span>
                </p>
                <p><span class="text-uppercase" style="letter-spacing:2px;">Requests</span>
                  <span class="badge-pill pull-right px-2" style="background:#86608f; color:#ededed;">closed</span>
                </p>
                <p><span class="text-uppercase" style="letter-spacing:2px;">UFS/T</span>
                  <span class="badge-pill pull-right px-2" style="background:#86608f; color:#ededed;">check folder</span>
                </p>
              </div>
              <div class="col-2 hidden-sm-down h-100">
                  <!-- RIGHT SIDEBAR -->
                  <div class="card-block d-block p-0" style="
                    background:url(https://images.unsplash.com/photo-1558350283-8269d86681f2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80);
                    background-attachment: fixed; 
                    background-size: cover;
                    height:190px">
                  </div> <!-- image end -->
              </div>
            </div>
            <div class="row mb-2 m-0">
              <!-- SOCIAL MEDIA LINKS -->
              <div class="col-sm">
              <div class="row no-gutters" style="font-size: 20px; font-weight:lighter; color:#86608f">
                <div class="col-auto text-uppercase" style="letter-spacing: 1px;"> Social Media</div>
                <div class="col mx-2 my-auto"><hr class="my-0" style="border-color:#ddd9f2; border-bottom:dashed 1px; border-top:0pc"></div>
                <div class="col-auto px-1 my-auto"><i class="fad fa-share-square"></i></div>
              </div>
              <!-- SOCIAL MEDIA LINKS -->
                <a href="LINK" class="btn my-2" style="width:100%; background-color:#86608f; color:#ededed"><i class="fab fa-instagram mr-1"></i> instagram</a>
                <a href="LINK" class="btn mb-2" style="width:100%; background-color:#86608f; color:#ededed"><i class="fab fa-deviantart mr-1"></i> deviantart</a>
                <a href="LINK" class="btn mb-2" style="width:100%; background-color:#86608f; color:#ededed"><i class="fas fa-pencil-paintbrush mr-1"></i> artfight</a>
                <a href="LINK" class="btn mb-2" style="width:100%; background-color:#86608f; color:#ededed"><i class="fas fa-external-link mr-1"></i> linktr.ee</a>
              </div>
               <!-- TOYHOUSE DIRECTORY -->
              <div class="col-sm">
              <div class="row no-gutters" style="font-size: 20px; font-weight:lighter; color:#86608f">
                <div class="col-auto text-uppercase" style="letter-spacing: 1px;">Toyhouse Directory</div>
                <div class="col mx-2 my-auto"><hr class="my-0" style="border-color:#ddd9f2; border-bottom:dashed 1px; border-top:0pc"></div>
                <div class="col-auto px-1 my-auto"><i class="fad fa-icons"></i></div>
              </div>
              <!-- DIRECTORY LINKS -->
                <a href="LINK" class="btn my-2" style="width:100%; background-color:#86608f; color:#ededed"><i class="fas fa-globe"></i> Directory</a>
                <a href="LINK" class="btn mb-2" style="width:100%; background-color:#86608f; color:#ededed"><i class="fas fa-tag"></i> Tags</a>
                <a href="LINK" class="btn mb-2" style="width:100%; background-color:#86608f; color:#ededed"><i class="fas fa-retweet"></i> Trade/Sale</a>
                <a href="LINK" class="btn mb-2" style="width:100%; background-color:#86608f; color:#ededed"><i class="fas fa-stars"></i> Other </a>
              </div>
            </div>
          </div><!-- Links end --> 
          
        </div> <!-- scroll end -->
        </div> <!-- tab content end -->
      </div>
    </div>
  </div> <!-- col end -->

<!-- FOOTER-->
  <div class="col-sm-12 d-flex">
    <div class="card border-0 flex-fill h-100 p-2" style="background-color:#000000; border-radius: 10px 10px 25px 25px;">
      <div class="card p-2" style="background-color:#000000; border-style: dashed; border-width: 2px; border-radius: 5px 5px 20px 20px; border-color:#86608f;">
        <!-- CREDITS -->
        <p> <a href="https://toyhou.se/13419844.habibty-f2u-" class="tooltipster" title="Code by CuckooHoopoe" style="color:#86608f"><i class="fas fa-ghost"></i></a> |
            <a href="https://unsplash.com/photos/rU_BvpGC8nQ" class="tooltipster" style="color:#86608f" title="Top Image"><i class="fad fa-flower"></i></a> |
            <a href="https://toyhou.se/6259293.-f2u-transparent-patterns" class="tooltipster" style="color:#86608f" title="Background Image"><i class="fad fa-image"></i></a>
        </p>
      </div>
    </div>
  </div><!-- credits end -->
</div>


<!-- more info above -->
</div>
Username
| |
Recent Images

No images.