[ F2U ] Warriors Remind (CODE (BS))

jiko

Profile


 <!-- ------------------------------
 
 
        REMIND — Bootstrap 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
        → turn ON Code Editor
        
        
        TIPPY TIPS
        → insert your img links INSIDE or quotation marks!!
        → looking for a good online code editor?  try [ https://th.circlejourney.net/# ] !
        → need more help with HTML? don't be afraid to PM me <3
        
        
        ACCENTS
        → set to -primary
        view other bootstrap colours if you're interested!
 
 
 ------------------------------- -->
 <div class="mx-auto text-justify p-2" style="font-size:90%; max-width:700px; margin-top:40px">
 <!-- ------------------------------
 
 
            IMG HEADER
 

 ------------------------------- -->
 <div style="
 
 background: url(IMG URL HERE);
 
 background-size:cover;
 background-repeat: no-repeat;
 background-position: bottom;">
 <div class="pt-3">
    
    
    <!-- ------------------------------------
                 HEADER + ICON
    ------------------------------------- -->
    <!--
    this is for spacing on mobile view!
    don't mind it~!
    -->
    <div class="hidden-md-up">
        <div class="pt-3"><!-- WOOP --></div>
    </div>
    
    <!--
    → general warning that if their name is long, it'll go behind the avatar!
    if it does, maybe keep it to their prefix?
    → if img bg is dark, change [text-white] to [text-dark]!
    -->
    <div class="hidden-sm-down">
    <div class="display-4 text-white justify-content-between p-3 pt-4" style="letter-spacing:4px">
        
        <span class="text-uppercase">Name</span> 
        <i class="fas fa-seedling"></i>
        
        
    </div>
    </div>
<!-- ------------------------------
 
 
            CONTENT START
 

 ------------------------------- -->
 <div class="bg-faded p-3 h-100">
    
    
    <!-- ------------------------------------
                 CHARACTER AVATAR
    ------------------------------------- -->
    <!--
    → best if 200x200 or squared
    → delete [fr-rounded] if you want a squared icon!
    -->
    <div class="text-center">
        
        <img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
        class="fr-rounded bg-faded p-2" style="height:150px; width:150px; margin-top: -90px;">
        
    </div>
    <div class="row no-gutters">
    
    
    <!-- ------------------------------------
                 LEFT SIDE
    ------------------------------------- -->
    <div class="col-lg-4 p-2">
        <div style="font-size:17px; letter-spacing:1px">
            
            <i>PROFILE</i>
            
        </div>
        <hr class="mt-1 mb-2">
        
        <!-- ------ BASIC INFO ------------------------------ -->
        <div class="row no-gutters">
            
            <div class="col-lg-12 mb-2 justify-content-between">
                <span class="text-uppercase text-muted" style="letter-spacing:1px">Name</span>
                <span class="text-muted">content</span>
            </div>
            
            <div class="col-lg-12 mb-2 justify-content-between">
                <span class="text-uppercase text-muted" style="letter-spacing:1px">Gender</span>
                <span class="text-muted text-right">content</span>
            </div>
            
            <div class="col-lg-12 mb-2 justify-content-between">
                <span class="text-uppercase text-muted" style="letter-spacing:1px">Rank</span>
                <span class="text-muted">content</span>
            </div>
            
            <div class="col-lg-12 mb-2 justify-content-between">
                <span class="text-uppercase text-muted" style="letter-spacing:1px">Clan</span>
                <span class="text-muted">content</span>
            </div>
            
            <div class="col-lg-12 mb-2 justify-content-between">
                <span class="text-uppercase text-muted" style="letter-spacing:1px">Mentor</span>
                <span class="text-muted">or apprentice</span>
            </div>
            
        </div>
        <hr class="mt-3 mb-2">
        
        
        <!-- ------ STATS ------------------------------ -->
        <div class="mb-0">
            
            <div class="d-flex">
                <span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Attack</span>
                <div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px">
                    <div class="progress-bar" style="width:50%"></div>
                </div>
            </div>
            
            <div class="d-flex">
                <span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Defence</span>
                <div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px">
                    <div class="progress-bar" style="width:50%"></div>
                </div>
            </div>
            
            <div class="d-flex">
                <span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Hunting</span>
                <div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px">
                    <div class="progress-bar" style="width:50%"></div>
                </div>
            </div>
            
            <div class="d-flex">
                <span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Swimming</span>
                <div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px">
                    <div class="progress-bar" style="width:50%"></div>
                </div>
            </div>
            
            <div class="d-flex">
                <span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Herbs</span>
                <div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px">
                    <div class="progress-bar" style="width:50%"></div>
                </div>
            </div>
            
        </div>
    </div>
    
    
    
    <!-- ------------------------------------
                 RIGHT SIDE
    ------------------------------------- -->
    <!--
    → don't want the scrolling feature?
    delete [style="height:340px; overflow:auto"]
    -->
    <div class="col-lg-8 p-2" style="height:340px; overflow:auto">
        
        
        <!-- ------ SUMMARY ------------------------------ -->
        <div class="summary mb-4">
            <div class="text-uppercase text-right" style="font-size:17px; letter-spacing:1px">
                
                <i>Summary</i>
                
            </div>
            <hr class="mt-1 mb-2">
            <div class="text-muted">
                
                <p>Write about your character's personality here! And maybe hints about their background.</p>
                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id tristique metus, at malesuada elit. Sed fermentum purus et odio tempor congue. Cras vestibulum porta efficitur,</p>
                
                <p>Morbi vel turpis at magna lobortis dapibus at vitae ante. Mauris faucibus velit et elementum rutrum. Morbi ac bibendum nibh. Integer interdum pharetra ligula, non dignissim dui fermentum varius.</p>
                
            </div>
        </div>
        
        
        <!-- ------ APPEARANCE ------------------------------ -->
        <div class="appearance mb-4">
            <div class="text-uppercase text-right" style="font-size:17px; letter-spacing:1px">
                
                <i>Appearance</i>
                
            </div>
            <hr class="mt-1 mb-2">
            <div class="text-muted">
                
                <p>Aliquam sed eros sed nisl bibendum facilisis at et augue. Maecenas luctus risus ante, ac egestas lacus suscipit ut. Etiam eu urna velit. Ut vitae augue quam. Vivamus ex nisi, suscipit non nisl id, rutrum condimentum velit. Aenean vel ante pulvinar, bibendum lacus eu, euismod ex.</p>
                
                <p>Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Ultrices dui sapien eget mi proin sed libero enim sed.</p>
                
            </div>
        </div>
        
        
        <!-- ------ DESIGN NOTES ------------------------------ -->
        <div class="design notes mb-4">
            <div class="text-uppercase text-right" style="font-size:17px; letter-spacing:1px">
                
                <i>Design Notes</i>
                
            </div>
            <hr class="mt-1 mb-2">
            <ul class="text-muted pt-1">
                
                <li>content</li>
                <li>content</li>
                <li>content</li>
                
            <!-- add / delete more above THIS line! -->
            </ul>
        </div>
        
        
        <!-- ------ TRIVIA ------------------------------ -->
        <div class="trivia">
            <div class="text-uppercase text-right" style="font-size:17px; letter-spacing:1px">
                
                <i>Trivia</i>
                
            </div>
            <hr class="mt-1 mb-2">
            <ul class="text-muted pt-1">
                
                <li><b>NOMENCLATURE</b></li>
                    <li class="ml-3"><i>Prefix</i> insert explanation</li>
                    <li class="ml-3 mb-1"><i>Suffix</i> insert explanation</li>
                <li>content</li>
                <li>content</li>
                
            <!-- add / delete more above THIS line! -->
            </ul>
        </div>
        
    <!-- add / delete scetions above THIS line! -->
    </div>
 </div>
 </div>
 <!-- ------------------------------
 
 
            CREDITS
            → please keep credits on the profile
            if you decide to move it!
            
            → if img bg is dark, change [text-white] to [text-dark]!
 

 ------------------------------- -->
 <div class="p-2 text-white text-right" style="letter-spacing:0.8px; font-size:85%">
    
    code by <a class="text-white" href="https://toyhou.se/5704608.-f2u-remind-warrior-cats-">jiko</a>
    
 </div>
 </div></div></div>