[ F2U ] Small Pride Carrds (rainbow)

jiko

Info


Created
1 year, 10 months ago
Creator
jiko
Favorites
101

Profile


TATE !!

they / them / its


15 aries ; questioning...
intp + t asian in aest
eng & viet ok !!
discord#0000

commissions
open
art trades
ask
requests
check bulletin

BYI

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.

DNI

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.


 <!-------------------------------------------------
 
 
        Pride Carrds — Rainbow version.
        (code by jiko)
        
        ------------------------------
        
        RULES
        → read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
        thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
        
        → turn OFF WYSIWYG (in your display settings)
        → turn ON Code Editor
        
        ------------------------------
        
        TIPPY TIPS
        → insert your img links INSIDE brackets or quotation marks!!
        → looking for a good online code editor?  try [ https://th.circlejourney.net/# ] !
        
        ------------------------------
        
        PALETTE
        → red -------------- #c55c3f
        → orange ----------- #d27e43
        → yellow ----------- #e6a965
        → green ------------ #b6a16c
        → blue ------------- #879d9b
        → purple ----------- #616390
        
        → background ------- #ffffff
        → text ------------- #464346
        
        use control/command + f to quickly change the colours!
 
 
 ------------------------------------------------->
 <div class="p-sm-5 p-4 mx-auto shadow" style="max-width:1000px; border-radius:45px;
 background:linear-gradient(
    
    #c55c3f 0%, #c55c3f 16%,
    #d27e43 16%, #d27e43 32%,
    #e6a965 32%, #e6a965 48%,
    #b6a16c 48%, #b6a16c 64%,
    #879d9b 64%, #879d9b 80%,
    #616390 80%, #616390 100%
    
 );">
 <div class="mx-auto my-4" style="color:#464346; max-width:750px; font-size:10pt; letter-spacing:0.5px">
 <div class="card border-0 rounded-0 p-3" style="box-shadow:0px 0px 40px rgba(0,0,0,0.3); position:relative; z-index:2; background-color:#ffffff; border-radius:25px">
 <!-------------------------------------------------
 
 
                 CODE BEGINS
 

 ------------------------------------------------->
 <div class="row no-gutters">
    
    
    <!-- BRIEF LOOK
    ---------------------------------------------->
    <div class="col-md-5 p-2 my-auto">
        
        
        <!-- IMAGE --------------------------------->
        <div class="mb-2" style="min-height:200px;
        
        background-image:url(https://i.pinimg.com/originals/5b/68/93/5b689313e79fd2fe404a1b5acb5f9b30.png);
        
        background-size:cover;
        background-position:center;
        border-radius:15px"></div>
    
    
        <!-- USER --------------------------------->
        <div class="text-md-left text-center">
            <div class="font-italic" style="font-weight:900; font-size:23px; letter-spacing:2px">
                
                TATE
                <i class="faded">!!</i>
                
            </div>
            <p class="font-italic">
                
                they / them / its
                
            </p>
            <hr class="mt-2 w-100" style="border-top-width:2px; border-style:dashed; border-color:#464346; opacity:0.1">
            <!--
            → don't need to keep the exact info format
            → use <br> whenever you want a line break :]
            -->
            <p style="font-size:18px">
                
                15 aries ; questioning... <br>
                intp + t asian in aest <br>
                eng & viet ok !! <br>
                discord#0000
                
            </p>
        </div>
    </div>
    
    
    <!-- PROFILE CONTENT
    ---------------------------------------------->
    <div class="col-md-7 p-2 pl-md-4 my-auto">
        
        
        <!-- ART STATUS ------------------->
        <div class="row no-gutters mb-3">
            
            
           <div class="col-6 p-1 pr-2">
                <span class="text-uppercase" style="font-weight:900; letter-spacing:1px">
                    commissions
                </span>
           </div>
           <div class="col-6 p-1">
               
                open
                
           </div>
           
           
           <div class="col-6 p-1 pr-2">
                <span class="text-uppercase" style="font-weight:900; letter-spacing:1px">
                    art trades
                </span>
           </div>
           <div class="col-6 p-1">
               
                ask
                
           </div>
           
           
           <div class="col-6 p-1 pr-2">
                <span class="text-uppercase" style="font-weight:900; letter-spacing:1px">
                    requests
                </span>
           </div>
           <div class="col-6 p-1">
               
                check bulletin
                
           </div>
        </div>
        <hr class="mt-2 w-100" style="border-top-width:2px; border-style:dashed; border-color:#464346; opacity:0.1">
        
        
        <!-- BEFORE YOU INTERACT ------------------->
        <div class="mr-sm-5 mb-3">
            <div class="mb-2 font-italic" style="font-weight:900; font-size:23px; letter-spacing:2px">
                <span style="color:#c55c3f;">B</span><span style="color:#d27e43;">Y</span><span style="color:#e6a965;">I</span>
            </div>
            
            <p>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.</p>
            
        </div>
        
        
        <!-- DO NOT INTERACT ----------------------->
        <div class="mr-sm-5">
            <div class="mb-2 font-italic" style="font-weight:900; font-size:23px; letter-spacing:2px">
                <span style="color:#b6a16c;">D</span><span style="color:#879d9b;">N</span><span style="color:#616390;">I</span>
            </div>
            
            <p>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.</p>
            
        </div>
    </div>
 </div>
 <!-------------------------------------------------
 
 
                 DECOR ICONS
 

 ------------------------------------------------->
 <div style="position:absolute; transform:rotate(-10deg);">
    <i class="far fa-rainbow text-white fa-3x" style="text-shadow:0px 0px 5px rgba(0,0,0,0.4);"></i>
 </div>
 <div style="position:absolute; top:45px; left:20px; transform:rotate(-15deg);">
    <i class="fas fa-cloud text-white fa-lg fa-horizontal-flip" style="transform:scale(1.5, 1); text-shadow:0px 0px 5px rgba(0,0,0,0.4);"></i>
 </div>
 <div style="position:absolute; top:36px; left:50px; transform:rotate(-15deg);">
    <i class="fas fa-cloud text-white fa-lg" style="transform:scale(1.5, 1); text-shadow:0px 0px 5px rgba(0,0,0,0.4);"></i>
 </div>
 
 <!-- keep this last one if you want to change/delete the icons -->
 </div>
 <!-------------------------------------------------
 
 
                 IT LOOKS LIKE ROPE DECOR
 

 ------------------------------------------------->
 <div class="row no-gutters mx-5 px-sm-5 my-n2" style="position:relative; z-index:1;">
    
    
    <div class="col-auto" style="width:15px">
        <div class="shadow card" style="height:100px; background-color:#ffffff;"></div>
    </div>
    
    
    <div class="col">
        <!-- BLANK -->
    </div>
    
    
    <div class="col-auto" style="width:15px">
        <div class="shadow card" style="height:100px;background-color:#ffffff;"></div>
    </div>
    
    
 </div>
 <!-------------------------------------------------
 
 
                 SOCIAL LINKS
 

 ------------------------------------------------->
 <!--
 → find more icons at [fontawesome.com]!
 -->
 <div class="card border-0 rounded-0 p-3" style="box-shadow:0px 0px 40px rgba(0,0,0,0.3); position:relative; z-index:2; background-color:#ffffff; border-radius:25px">
 <div class="row no-gutters justify-content-center">
    
    
    <div class="col-auto p-2">
        <a href="#" class="text-reset">
            <i class="fas fa-id-card fa-3x fa-fw"></i>
        </a>
    </div>
    
    <div class="col-auto p-2">
        <a href="#" class="text-reset">
            <i class="fab fa-twitter fa-3x fa-fw"></i>
        </a>
    </div>
    
    <div class="col-auto p-2">
        <a href="#" class="text-reset">
            <i class="fab fa-deviantart fa-3x fa-fw"></i>
        </a>
    </div>
    
    <div class="col-auto p-2">
        <a href="#" class="text-reset">
            <i class="fab fa-instagram-square fa-3x fa-fw"></i>
        </a>
    </div>
    
    
    <div class="col-auto p-2">
        <a href="#" class="text-reset">
            <i class="fab fa-trello fa-3x fa-fw"></i>
        </a>
    </div>
    
    
 <!-- add more above THIS line! -->
 </div>
 </div>
 </div>
 </div>
 <!-------------------------------------------------
 
 
                 CREDITS
 

 ------------------------------------------------->
 <div class="mt-3 text-center small faded" style="letter-spacing:0.5px">
    
    <a href="https://toyhou.se/16487749.-f2u-pride-carrds" class="text-body">
        ( code by jiko )
    </a>
    <!--
    → if background is dark, change to text-white
    or manually set the text colour, as long as it is visible!
    -->
    
 </div>