[ TOYHOUSE LAYOUTS ] (1| PROFILE WINDOW)

Oryl

Info

Created: 6 years, 6 months ago
Creator: Oryl
Favorites: 54

Profile

TH themed version

CODE:


<!-------- [ COLORS ] -----------
       ctrl+f & replace all
        
#TH text color: text-danger

-------------------------------->

<div class="container row mx-auto my-5" style="max-width:750px;">
<!-------------------

      PICTURE 
      
-------------------> 
<div class="col-lg-6 push-lg-6 col-12 mb-lg-0 mb-2">
  

    <div class="card card-block h-100 rounded border-0 p-0" style="
    
    background: url(https://orig00.deviantart.net/fe39/f/2017/277/b/b/skull_bird_by_rubyfeather-dbpgkm7.png);
    
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;">
      
    <div class="hidden-lg-up p-0 m-0" style="height:500px;"></div>
        
    </div>

</div><!------------- END COLUMN PICTURE --------------->  
  
  
  
<!-------------------

      INFO BOX 
      
------------------->  
<div class="col-lg-6 pull-lg-6 col-12">
  <div class="card card-block bg-faded rounded p-0">
    <div class="card-header bg-dark text-white border-0 px-2 py-1">

      <!------------- TITRE --------------->
      <div class="d-inline text-white" style="font-size: 1.1rem; letter-spacing: 3px; font-weight: 400;">
          ❚USERNAME
      </div>

      <div class="pull-right">
        <div class="btn btn-secondary btn-sm" style="height:20px; width:20px; font-size: 0.7rem; padding: 5px;"><i class="far fa-minus my-auto"></i></div>
          
        <div class="btn btn-secondary btn-sm" style="height:20px; width:20px; font-size: 0.7rem; padding: 2px;"><i class="far fa-window-restore"></i></div>
          
        <div class="btn btn-danger btn-sm" style="height:20px; width:20px; font-size: 0.8rem; padding: 1px;"><i class="far fa-times"></i></div>
      </div>
    </div>

    <div class="text-justify p-4" style="font-size: 12px;">
      <div class="text-center" style="font-size: 16px; letter-spacing: 1px;">
        
        <span class="text-danger">INFO</span> | <span class="text-danger">INFO</span> | <span class="text-danger">INFO</span> | <span class="text-danger">INFO</span>
        
          <div class="pb-4" style="font-size: 10px; font-weight: 500;">
            PROFESSION or STUDIES
          </div>
      </div>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non efficitur massa. Cras a suscipit ante, in cursus nunc. Proin tincidunt nisi ultricies eros semper tempus. Nulla luctus dolor rutrum tempor posuere. Sed in pulvinar lectus, et viverra magna.
      </p>

      <div class="text-center p-4" style="font-size: 14px;">
        <a href="#"><i class="fab fa-deviantart btn text-white bg-dark" style="height: 24px; width: 24px; padding: 2px;"></i></a>
        
        <a href="#"><i class="fab fa-facebook-f btn text-white bg-dark" style="height: 24px; width: 24px; padding: 2px;"></i></a>
        
        <a href="#"><i class="fab fa-tumblr btn text-white bg-dark" style="height: 24px; width: 24px; padding: 2px;"></i></a>
        
        <a href="#"><i class="fab fa-instagram btn text-white bg-dark" style="height: 24px; width: 24px; padding: 2px;"></i></a>
        
        <a href="#"><i class="fab fa-twitter btn text-white text-center bg-dark" style="height: 24px; width: 24px; padding: 2px;"></i></a>
        
        <a href="#"><i class="fab fa-youtube btn text-white bg-dark" style="height: 24px; width: 24px; padding: 2px;"></i></a>
        
      </div>

      <div class="text-center" style="font-size: 11px;">
        <div>Friends on Toyhouse:</div>
          <a href="#" class="text-danger" target="_blank">Friend</a>
          | 
          <a href="#" class="text-danger" target="_blank">Friend</a>
          |
          <a href="#" class="text-danger" target="_blank">Friend</a>
          |
          <a href="#" class="text-danger" target="_blank">Friend</a>
          
        </div>
      </div>
    </div>
   </div>
    
<!---------------------------- 

         CREDITS
    Please don't remove
         
----------------------------->
 <div class="col-lg-6 text-right w-100 px-lg-3">
   <a href="https://toyhou.se/Oryl" class="text-dark" style="font-size: 12px;">
   
      <i class="fal fa-code tooltipster" data-placement="left" title="code by Oryl"></i>
      
   </a><!---- END CREDITS ---->

    
</div><!---- /INFO BOX ---->
</div>

❚USERNAME

INFO | INFO | INFO | INFO

PROFESSION or STUDIES

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non efficitur massa. Cras a suscipit ante, in cursus nunc. Proin tincidunt nisi ultricies eros semper tempus. Nulla luctus dolor rutrum tempor posuere. Sed in pulvinar lectus, et viverra magna.

Friends on Toyhouse:

Friend | Friend | Friend | Friend

custom colors version