[ F2U ] User Lustrous (CODE (CC))

jiko

Profile


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



        USER LUSTROUS –– code by jiko

        RULES
             – Read this thoroughly please, and maybe leave a small comment saying that you've read it? :'3  thank youu
               [ https://toyhou.se/~bulletins/127417.code-rules ]


        TIPPY TIPS
            – insert your img links INSIDE the brackets!!
            – for more social media icons, please check [ https://fontawesome.com/ ] and have a look around!


        ACCENT  :  #9fa969



------------------------------------- -->
<div class="mx-auto" style="font-size:11px; letter-spacing:0.5px; max-width:420px;">
<div class="row no-gutters" style="margin:-4px;">
<!-- ------------------------------------


                 TOP BAR (social media)


------------------------------------- -->  
<div class="col-lg-12 p-1">
<div class="card border-0 rounded-0 p-3 h-100" style="background: #9fa969;">

    <div class="text-uppercase font-weight-bold" style="font-size:14px; letter-spacing:0.5em;">
    <div class="text-center text-white">


            <a href="#" class="text-white" style="text-decoration: none!important;">
                <i class="mx-2 fab fa-deviantart"></i>
            </a>


            <a href="#" class="text-white" style="text-decoration: none!important;">
                <i class="mx-2 fab fa-instagram"></i>
            </a>


            <a href="#" class="text-white" style="text-decoration: none!important;">
                <i class="mx-2 fab fa-twitter"></i>
            </a>


            <a href="#" class="text-white tooltipster" title="NAME#0000" style="text-decoration: none!important;">
                <i class="mx-2 fab fa-discord"></i>
            </a>


    </div>
    </div>

</div>
</div>
<!-- ------------------------------------


                 INFO


------------------------------------- -->  
<div class="col-lg-12 p-1">
<div class="card-block bg-faded text-muted h-100">



    <!--  INTRO  ------------------------------------- -->  
    <div class="row no-gutters">
        
        
        <!--  icon (square pictures are best!!) -->  
        <div class="col-4 m-auto">
            
            <img src="IMG LINK HERE"
        class="rounded-circle img-thumbnail p-1 mb-2" style="max-width:110px;">
        
        </div>
        
        
        <!--  divider  -->  
        <div class="col-auto p-2 hidden-xs-down">
            <div class="card h-100 rounded-0" style="border-width:0 1px 0 0;"></div>
        </div>
        
        
        <!--  short summary  -->  
        <div class="col-7 my-auto">
        <div class="text-right">
            
            <p class="font-weight-bold">name . prn . other</p>
            
            <p>Just keep the text aligned with the image to make it balanced!  This isn't scrollable by the way!</p>
            
        </div>
        </div>
        
        
    </div>
    <hr class="my-3">
    
    
    
    <!--  QUICK LOOKIE  ------------------------------------- -->
    <div class="mx-0">
        
        
        <div class="p-1 justify-content-between">
            <span class="font-weight-bold" style="color:#9fa969;">requests</span>
            <span>closed</span>
        </div>
        
        <div class="p-1 justify-content-between">
            <span class="font-weight-bold" style="color:#9fa969;">art trades</span>
            <span>closed</span>
        </div>
        
        
        <div class="p-1 justify-content-between">
            <span class="font-weight-bold" style="color:#9fa969;">commissions</span>
            <span>open ( <a href="#" style="color:#9fa969">link</a> )</span>
        </div>
        
        
    </div>
    
    
</div>
</div>
<!-- ------------------------------------


                 STAMPS (deletable section)
                     – stamps are accessible on deviantart (registering is not required to view content)
                     – though you could make your own with the online template...?
                     
                     – be sure to link back the stamp to its appropriate creator!!!


------------------------------------- -->
<div class="row no-gutters">



    <!--  STAMP 1  ------------------------------------- -->  
    <div class="col-3 p-1">
    <a href="LINK TO CREATOR">
        
        <img src="IMG LINK HERE">
    </a>
    </div>


    <!--  STAMP 2  ------------------------------------- -->  
    <div class="col-3 p-1">
    <a href="LINK TO CREATOR">
        
        <img src="IMG LINK HERE">
    
    </a>
    </div>


    <!--  STAMP 3  ------------------------------------- -->  
    <div class="col-3 p-1">
    <a href="LINK TO CREATOR">
        
        <img src="IMG LINK HERE">
    
    </a>
    </div>


    <!--  STAMP 4  ------------------------------------- -->  
    <div class="col-3 p-1">
    <a href="LINK TO CREATOR">
        
        <img src="IMG LINK HERE">
    
    </a>
    </div>



</div>
<!-- ------------------------------------


                 CREDIT
                 DON'T TOUCH THE BELOW </div>!! <33


------------------------------------- --> 
<div class="col-lg-12 p-1">
<div class="card border-0 rounded-0 p-2 px-3 h-100" style="background: #9fa969;">

    <div style="letter-spacing:0.3em;">
    <div class="text-right text-white">


            <a href="https://toyhou.se/8467603.-f2u-user-lustrous"
            class="text-white tooltipster" title="code by jiko" style="text-decoration: none!important;">
                <i class="far fa-code"></i>
            </a>


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