F2U Info Accordion [html] (CODE)

clowniicat

Profile


<!-------

CODE BY CLOWNIICAT ON TOYHOUSE

DO NOT STEAL/REMOVE CREDIT


IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it


Palette to change colours!!
select the colour and press Ctrl+F to replace it


Main colour: #555555
Text Boxes: #999999
Text: #444444
Credit: #dddddd


-------->

<div class="p-3 mx-auto" style="background-color:#555555;border-radius:25px;color:#444444;text-align:center;font-family:Lucida Console,monospace;font-weight:bold;max-width:600px">

<div class="accordion md-accordion" id="allclosed" role="tablist" aria-multiselectable="true">
    
    <div class="row no-gutters">

<!------------------------
 
 
 HEADCANONS
 
 
 ------------------------->

        <div class="col-6 p-2">
            
            <div class="p-3" style="background-color:#999999;border-top-left-radius:10px;border-top-right-radius:10px" role="tab" id="headcanons">
                
                <a data-toggle="collapse" data-parent="#allclosed" href="#allclosed1" aria-expanded="false"
        aria-controls="allclosed1" style="color:#444444">HEADCANONS</a>
                
            </div>
            
<div id="allclosed1" class="collapse p-3" role="tabpanel" aria-labelledby="headcanons" data-parent="#allclosed" style="background-color:#999999;border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-size:10px;text-align:left">
    
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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    
    
    </div>

            
        </div>

<!------------------------
 
 
 ITEMS
 
 
 ------------------------->

        <div class="col-6 p-2">
            
            <div class="p-3" style="background-color:#999999;border-top-left-radius:10px;border-top-right-radius:10px" role="tab" id="items">
                
                <a data-toggle="collapse" data-parent="#allclosed" href="#allclosed2" aria-expanded="false"
        aria-controls="allclosed2" style="color:#444444">ITEMS</a>
                
            </div>
            
<div id="allclosed2" class="collapse p-3" role="tabpanel" aria-labelledby="items" data-parent="#allclosed" style="background-color:#999999;border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-size:10px;text-align:left">
    
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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    
    
    </div>

            
        </div>

<!------------------------
 
 
 CONCEPTS
 
 
 ------------------------->

        <div class="col-6 p-2">
            
            <div class="p-3" style="background-color:#999999;border-top-left-radius:10px;border-top-right-radius:10px" role="tab" id="headcanons">
                
                <a data-toggle="collapse" data-parent="#allclosed" href="#allclosed3" aria-expanded="false"
        aria-controls="allclosed3" style="color:#444444">CONCEPTS</a>
                
            </div>
            
<div id="allclosed3" class="collapse p-3" role="tabpanel" aria-labelledby="headcanons" data-parent="#allclosed" style="background-color:#999999;border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-size:10px;text-align:left">
    
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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    
    
    </div>

            
        </div>

<!------------------------
 
 
 OTHER
 
 
 ------------------------->

        <div class="col-6 p-2">
            
            <div class="p-3" style="background-color:#999999;border-top-left-radius:10px;border-top-right-radius:10px" role="tab" id="other">
                
                <a data-toggle="collapse" data-parent="#allclosed" href="#allclosed4" aria-expanded="false"
        aria-controls="allclosed4" style="color:#444444">OTHER</a>
                
            </div>
            
<div id="allclosed4" class="collapse p-3" role="tabpanel" aria-labelledby="other" data-parent="#allclosed" style="background-color:#999999;border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-size:10px;text-align:left">
    
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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    
    
    </div>

            
        </div>

<!------------------------
 
 
 MOODBOARD
 
 
 ------------------------->

        <div class="col-12 p-2">
            
            <div class="p-3" style="background-color:#999999;border-top-left-radius:10px;border-top-right-radius:10px" role="tab" id="moodboard">
                
                <a data-toggle="collapse" data-parent="#allclosed" href="#allclosed5" aria-expanded="false"
        aria-controls="allclosed5" style="color:#444444">MOODBOARD</a>
                
            </div>
            
<div id="allclosed5" class="collapse p-3" role="tabpanel" aria-labelledby="moodboard" data-parent="#allclosed" style="background-color:#999999;border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-size:10px;text-align:center">
    
    <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="width:250px">

    </div>

            
        </div>
        
<!--------ADD/DELETE ABOVE THIS LINE-------->

    <!--

    CREDIT, DO NOT REMOVE

    --->

        <a href="https://toyhou.se/clowniicat" class="text-secondary mx-auto">

        <i class="fas fa-star mt-2 ml-2" style="color:#dddddd"></i>

</a>


    </div>
    
</div>

</div>