|
|
| Baris 1: |
Baris 1: |
| <div class="container col-md-4 col-sm-5 col-xs-12 p-1 float-right mb-3 ml-md-3 ml-sm-3" style="border: 2px SeaGreen solid; border-radius: .5em;"> | | <div class="accordion col-md-5 p-0 float-right ml-0 ml-md-3 mb-3 border border-success rounded p-1" id="accordionExample"> |
| [[Berkas:Logo KOM.png|center|link=Kehidupan Orientasi Melayani|class=img-responsive img-fluid p-1]]
| |
|
| |
|
| <div style="background: MediumSeaGreen;" class="h3 mt-1 mb-1 pt-3 pb-3 text-center">
| | [[Berkas:Logo KOM.png|class=img-fluid p-1|link=KOM]] |
| '''[[KOM 100|<span style="color:black;">KOM Seri 100<br />Pencari Tuhan</span>]]'''</div>
| |
|
| |
|
| {{BootstrapTabs | tabcount=4 | tabclass=btn-sm | contentstyle=font-size: 90%
| | <div class="bg-success text-white pt-3 pb-3 pl-2 pr-2 text-center h5 rounded">[[KOM 100|<span class="text-white">KOM 100 Pencari Tuhan</span>]]</div> |
|
| |
|
| | tab1=110 | | <div class="card"> |
| | tab2=120 | | <div class="card-header rounded" id="heading01"> |
| | tab3=130 | | <p class="mb-0 h2"> |
| | tab4=140
| | <btn class="btn btn-link btn-block {{{btnalign|text-center}}} p-0" type="button" data-toggle="collapse" data-target="#collapse01" aria-expanded="{{{show01|false}}}" aria-controls="collapse01"> |
| | <span class="text-success">'''KOM 110'''</span> |
| | </btn> |
| | </p> |
| | </div> |
| | <div id="collapse01" class="collapse {{#ifeq:{{{show01|false}}}|true|show}}" aria-labelledby="heading01" data-parent="#accordionExample"> |
| | <div class="card-body" style="font-size: 90%; {{{contentstyle|}}}"> |
| | {{KOM100/110}} |
| | </div> |
| | </div> |
| | </div> |
|
| |
|
| | content1={{KOM100/110}} | | <div class="card"> |
| | content2={{KOM100/120}}
| | <div class="card-header" id="heading02"> |
| | content3={{KOM100/130}}
| | <h2 class="mb-0"> |
| | content4={{KOM100/140}}
| | <btn class="btn btn-link btn-block {{{btnalign|text-center}}} collapsed p-0" type="button" data-toggle="collapse" data-target="#collapse02" aria-expanded="{{{show02|false}}}" aria-controls="collapse02"> |
| }}
| | <span class="text-success">'''KOM 120'''</span> |
| | </btn> |
| | </h2> |
| | </div> |
| | <div id="collapse02" class="collapse {{#ifeq:{{{show02|false}}}|true|show}}" aria-labelledby="heading02" data-parent="#accordionExample"> |
| | <div class="card-body" style="font-size: 90%; {{{contentstyle|}}}"> |
| | {{KOM100/120}} |
| | </div> |
| | </div> |
| | </div> |
|
| |
|
| </div><noinclude> | | <div class="card"> |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum nulla, sagittis ut lacinia nec, tempor ut erat. Ut ornare sed augue at faucibus. Vestibulum ut felis in sem elementum semper ac consequat lorem. Sed efficitur interdum ante. Sed tincidunt leo lacus, non aliquet lorem sodales eu. Quisque mollis dui in ex convallis, in faucibus massa imperdiet. Aenean a feugiat nibh. Nunc felis leo, aliquam ac nunc nec, placerat ullamcorper elit. Nullam sodales, lectus posuere pretium vestibulum, mauris elit pharetra elit, a imperdiet sem erat ut nisl.
| | <div class="card-header" id="heading03"> |
| | <h2 class="mb-0"> |
| | <btn class="btn btn-link btn-block {{{btnalign|text-center}}} collapsed p-0" type="button" data-toggle="collapse" data-target="#collapse03" aria-expanded="{{{show03|false}}}" aria-controls="collapse03"> |
| | <span class="text-success">'''KOM 130'''</span> |
| | </btn> |
| | </h2> |
| | </div> |
| | <div id="collapse03" class="collapse {{#ifeq:{{{show03|false}}}|true|show}}" aria-labelledby="heading03" data-parent="#accordionExample"> |
| | <div class="card-body" style="font-size: 90%; {{{contentstyle|}}}"> |
| | {{KOM100/130}} |
| | </div> |
| | </div> |
| | </div> |
|
| |
|
| Sed convallis libero id urna consectetur, nec rhoncus purus interdum. Curabitur posuere urna vitae dolor accumsan aliquam. Vestibulum ornare augue non ante pharetra sodales. Fusce facilisis felis id eros elementum molestie. Duis volutpat pellentesque varius. Suspendisse potenti. Phasellus ut condimentum metus. Vivamus vehicula vestibulum turpis. Suspendisse sed mollis dolor. Duis blandit vel leo in mollis. Phasellus efficitur et leo ut rhoncus. Pellentesque interdum tellus ut mauris scelerisque, vel lobortis ligula finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eget est at tellus pellentesque hendrerit venenatis quis augue.
| | <div class="card"> |
| | <div class="card-header" id="heading04"> |
| | <h2 class="mb-0"> |
| | <btn class="btn btn-link btn-block {{{btnalign|text-center}}} collapsed p-0" type="button" data-toggle="collapse" data-target="#collapse04" aria-expanded="{{{show04|false}}}" aria-controls="collapse04"> |
| | <span class="text-success">'''KOM 140'''</span> |
| | </btn> |
| | </h2> |
| | </div> |
| | <div id="collapse04" class="collapse {{#ifeq:{{{show04|false}}}|true|show}}" aria-labelledby="heading04" data-parent="#accordionExample"> |
| | <div class="card-body" style="font-size: 90%; {{{contentstyle|}}}"> |
| | {{KOM100/140}} |
| | </div> |
| | </div> |
| | </div> |
|
| |
|
| Pellentesque quis urna ac ligula placerat semper. Duis velit lectus, aliquet at scelerisque ut, aliquet eu leo. Cras tincidunt, risus sed tincidunt sodales, dolor neque imperdiet nulla, at semper leo mi id ex. Morbi vestibulum risus id varius pellentesque. Sed vel felis turpis. Nullam dictum, dui ac cursus fringilla, arcu enim dapibus nunc, et viverra felis mi a odio. Nunc blandit turpis et cursus scelerisque. Nullam nec diam nunc. Donec vel hendrerit lorem. Vivamus eget pellentesque sem.
| | </div> |
| | |
| Donec finibus augue eu varius posuere. Integer condimentum, elit eu tempor rhoncus, metus neque ullamcorper lectus, ut maximus massa metus at dolor. Nunc condimentum pellentesque magna, sit amet bibendum ligula malesuada sed. Curabitur auctor nec nisi ac molestie. Aenean eu maximus sem, vitae auctor turpis. Nullam eget dictum ex. In hac habitasse platea dictumst. Integer at diam ut neque commodo facilisis. Quisque augue metus, congue a dictum eget, fermentum a dui. Sed eleifend elit sem. Quisque maximus metus sit amet tortor pellentesque, quis vulputate magna auctor. Curabitur vel lacus ac eros tincidunt accumsan. Etiam blandit libero vel efficitur rhoncus. Pellentesque at dui mauris. Proin tincidunt velit vulputate, accumsan massa nec, blandit justo. Cras commodo lorem ac sagittis accumsan.
| |
| </noinclude> | |
