[ F2U ] Small Pride Carrds (aroace)

jiko

Info


Created
1 year, 10 months ago
Creator
jiko
Favorites
0

Profile


it's 1:18PM. . .

@USERNAME !!
they / them / sun prns
8teen + aroace
asian in aest
ENG & VIET okay!


yes! (´,,•ω•,,)♡

lorem ipsum dolor sit amet, consectetur adipiscing elit. duis sollicitudin elit sed tellus blandit viverra sed eget odio.

no ty (¬_¬;)

lorem ipsum dolor sit amet, consectetur adipiscing elit. duis sollicitudin elit sed tellus (blandit) viverra sed eget odio.

pls tw for: blood, gore, insects

BEFORE YOU INTERACT !!

lorem ipsum dolor sit amet, consectetur adipiscing elit. duis sollicitudin elit sed tellus blandit viverra sed eget odio.

DON'T INTERACT IF !!

lorem ipsum dolor sit amet, consectetur adipiscing elit. duis sollicitudin elit sed tellus blandit viverra sed eget odio.

spotify . twt . deviantart . tumblr
discord#000

 <!-------------------------------------------------
 
 
        Pride Carrds — Aroace 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
        → orange ----------------- #e38c00
        → yellow --------- #eccd00
        → light blue --------------- #62afde
        → dark blue --------------- #213757
        
        → background ----------- #fefefe
        → text ----------------- #464346
        
        use control/command + f to quickly change the colours!
 
 
 ------------------------------------------------->
 <div class="py-sm-5 p-3" style="margin:-15px -15px;
 
 
 /* IF YOU WANT TO USE AN ACTUAL IMAGE BG, USE
 [background-image:url(IMG_ADDRESS_HERE);]
 ---------------------------------------- */;
 
 background-image:linear-gradient(
 
 #e38c00 0%, #e38c00 20%,
 #eccd00 20%, #eccd00 40%,
 #fefefe 40%, #fefefe 60%,
 #62afde 60%, #62afde 80%,
 #213757 80%, #213757 100%
 
 );
 
 
 background-color:#;
 background-size:#;
 background-position:center;
 
 ">
 <div class="mx-auto my-4" style="color:#464346; max-width:750px; font-size:10.5pt; letter-spacing:0.5px">
 <div class="shadow card border-0 rounded-0 p-1" style="background-color:#fefefe;">
 <!-------------------------------------------------
 
 
                 TOP HEADER (DECOR)
 

 ------------------------------------------------->
 <div class="card border-0 rounded-0 py-2 px-3" style="background-color:#e38c00;">
 <div class="d-flex justify-content-between align-items-center text-monospace font-weight-bold" style="font-size:10pt">
    
    
    <!-- find more icons at [fontawesome.com]! -->
    <i class="fas fa-sun fa-fw fa-lg text-white"></i>
    
    
    <!-- can be weather or time -->
    <div class="card rounded-0 border-0 p-1 px-2" style="background-color:#fefefe;">
        it's 1:18PM. . .
    </div>
    
    
 </div>
 </div>
 <div class="card border-0 rounded-0 p-2" style="background-color:#fefefe;">
 <!-------------------------------------------------
 
 
                 BASIC INFOS
 

 ------------------------------------------------->
 <div class="row no-gutters mb-2">
    
    
    <!-- LEFT
    ---------------------------------------------->
    <div class="col-sm-4 p-1 pr-sm-2">
    <div class="card rounded-0 py-2 px-3 h-100 bg-transparent text-center" style="border-color:#eccd00; border-width:2px;">
        
        
        <!-- INFO -------------------------------->
        <p>
            
            <i class="text-monospace">
                
                <span>@</span>USERNAME !!
                
            </i><br>
            <!--
            → keep the <span> around the @ to avoid pinging yourself
            
            → don't need to keep the exact info format
            → use <br> whenever you want a line break :]
            -->
            
            <b>they / them / sun prns</b> <br>
            8teen + aroace <br>
            asian in <u>aest</u> <br>
            ENG & VIET okay!
            
        </p>
        <hr class="w-100" style="border-color:#eccd00; border-width:2px;">
        
        
        <!-- QUICK LINKS -------------------------------->
        <!--
        → you know those bulletin memes?
        i was thinking of those lol
        -->
        <div class="text-left">
            
            
            <i class="far fa-sun fa-fw fa-sm mr-1" style="color:#e38c00"></i>
            <a href="LINK_HERE" class="text-reset">rules</a><br>
            
            
            <i class="far fa-cloud fa-fw fa-sm mr-1" style="color:#e38c00"></i>
            <a href="LINK_HERE" class="text-reset">boundaries</a><br>
            
            
            <i class="far fa-cloud-showers fa-fw fa-sm mr-1" style="color:#e38c00"></i>
            <a href="LINK_HERE" class="text-reset">faq</a><br>
            
            
            <i class="far fa-rainbow fa-fw fa-sm mr-1" style="color:#e38c00"></i>
            <a href="LINK_HERE" class="text-reset">design prefs</a><br>
            
            
        <!-- add / delete above THIS line, but i think it looks best minimally ovo)b -->
        </div>
    </div>
    </div>
    
    
    <!-- MIDDLE
    ---------------------------------------------->
    <div class="col-sm-4 p-1 my-auto">
        
        
        <!-- NAME -------------------------------->
        <!--
        → best if short
        → if you can't fit it, you can use greetings like "hi hi !!" instead :]
        -->
        <div class="text-center" style="font-size:30px; color:#e38c00; font-weight:900; letter-spacing:3px;">
            
            GUMI
            <i class="faded">!!</i>
            
        </div>
        
        
        <!-- AVATAR -------------------------------->
        <!--
        → best if 200x200 or squared
        -->
        <div class="text-center my-2 mb-3">
            
            
            <img src="https://i.pinimg.com/736x/98/60/24/986024c5b6cdccaf0abf00ea39511418.jpg"
            
            
            style="height:160px; width:160px; object-fit:cover">
        </div>
        
        
        <!-- SPECIAL LINK TO SOMEWHERE IDK ---------->
        <a href="LINK_HERE" class="btn btn-sm rounded-0 w-100 text-white mb-sm-0 mb-2" style="background-color:#e38c00">
        <u>
            
            comm info here
            
        </u>
        </a>
    </div>
    
    
    <!-- RIGHT
    ---------------------------------------------->
    <!--
    → can be preferences or what people can/can't do to your oc's
    -->
    <div class="col-sm-4 p-1 pl-2 text-just my-auto">
        
        
        <!-- LIKES -------------------------------->
        <div class="mb-3">
            
            <span class="p-1 px-2" style="background-color:#eccd00; font-size:10pt">
                yes! (´,,•ω•,,)♡
            </span>
            <p>
                
                lorem ipsum dolor sit amet, <b>consectetur adipiscing</b> elit. duis sollicitudin elit sed tellus blandit viverra sed eget odio.
                
            </p>
        </div>
        
        
        <!-- DISLIKES ----------------------------->
        <div class="mb-0">
            <span class="p-1 px-2" style="background-color:#eccd00; font-size:10pt">
                no ty (¬_¬;)
            </span>
            <p>
                
                lorem ipsum dolor sit amet, consectetur adipiscing elit. duis <b>sollicitudin elit sed tellus</b> (blandit) viverra sed eget odio.
                
            </p>
        </div>
    </div>
 </div>
 <!-------------------------------------------------
 
 
                 BOUNDARIES
 

 ------------------------------------------------->
 <div class="row no-gutters">
    
    
    <!-- TW/CW FOR YOURSELF OR OTHER PEOPLE
    ---------------------------------------------->
    <div class="col-12 p-1 mb-2">
    <div class="card rounded-0 p-2 bg-transparent" style="border-color:#62afde; border-width:2px">
        <p>
            
            <b>pls tw for:</b>
            
            blood, gore, insects
            
        </p>
    </div>
    </div>
    
    
    <!-- BYI
    ---------------------------------------------->
    <div class="col-sm-6 p-1">
    <div class="mb-sm-0 mb-3">
        
        <div style="font-size:16px; color:#62afde; font-weight:900; letter-spacing:1px;">
            
            BEFORE YOU INTERACT
            <i class="faded">!!</i>
            
        </div>
        <p><i class="far fa-hand fa-fw mr-1 faded"></i>
        
            lorem ipsum dolor sit amet, <b>consectetur adipiscing</b> elit. duis sollicitudin elit sed tellus blandit viverra sed eget odio.
            
        </p>
    </div>
    </div>
    
    
    <!-- DNI
    ---------------------------------------------->
    <div class="col-sm-6 p-1">
    <div class="mb-sm-0 mb-3">
        
        <div style="font-size:16px; color:#62afde; font-weight:900; letter-spacing:1px;">
            
            DON'T INTERACT IF
            <i class="faded">!!</i>
            
        </div>
        <p><i class="far fa-ban fa-fw mr-1 faded"></i>
            
            lorem ipsum dolor sit amet, <b>consectetur adipiscing</b> elit. duis sollicitudin elit sed tellus blandit viverra sed eget odio.
            
        </p>
    </div>
    </div>
    
    
 <!-- add more above THIS line! -->
 </div>
 <!-------------------------------------------------
 
 
                 CHARACTER OR FRIEND LINKS (4)
                 OR MOODBOARD IDC
 

 ------------------------------------------------->
 <div class="row no-gutters mt-2">
    
    
    <a href="LINK_HERE" class="col-3 p-1">
        <img src="https://i.pinimg.com/originals/b6/38/40/b6384012b8364caa98e7fdd4a46de864.png">
    </a>
    
    
    <a href="LINK_HERE" class="col-3 p-1">
        <img src="https://pbs.twimg.com/media/EkHEsodU8AIcx0-.jpg">
    </a>
    
    
    <a href="LINK_HERE" class="col-3 p-1">
        <img src="https://i.pinimg.com/originals/b6/38/40/b6384012b8364caa98e7fdd4a46de864.png">
    </a>
    
    
    <a href="LINK_HERE" class="col-3 p-1">
        <img src="https://pbs.twimg.com/media/EkHEsodU8AIcx0-.jpg">
    </a>
    
    
 </div>
 </div>
 <!-------------------------------------------------
 
 
                 LINK FOOTER
 

 ------------------------------------------------->
 <div class="card rounded-0 py-2 px-3" style="background-color:#213757;">
 <div class="text-center text-monospace text-white" style="font-size:10pt">
    
    
    <a href="LINK_HERE" class="text-reset" style="text-decoration:underline">spotify</a> .
    
    <a href="LINK_HERE" class="text-reset" style="text-decoration:underline">twt</a> .
    
    <a href="LINK_HERE" class="text-reset" style="text-decoration:underline">deviantart</a> .
    
    <a href="LINK_HERE" class="text-reset" style="text-decoration:underline">tumblr</a>
    
    
    <!-- add above THIS line! -->
    <br>
    
    discord#000
    
 </div>
 </div>
 </div>
 </div>
 </div>
 <!-------------------------------------------------
 
 
                 CREDITS
 

 ------------------------------------------------->
 <div class="mt-4 text-center small faded" style="letter-spacing:0.5px">
    
    <a href="https://toyhou.se/16487749.-f2u-pride-carrds" class="text-body" style="color:#HEXCODE">
        ( code by jiko )
    </a>
    <!--
    → if credits can't be seen due to background, change [text-body] to text-dark OR text-light
    or manually set the text colour at the [color:#HEXCODE] (delete [class="text-body"] first), as long as it is visible!
    -->
    
 </div>