Accions

Discussió

Table of contents: diferència entre les revisions

De Recursos docents

Cap resum de modificació
Cap resum de modificació
Línia 1: Línia 1:
<div style=" flex: 1; flex-direction: row; gap: 20px;">
<div style="display: flex; flex-direction: row; gap: 20px;">
    <!-- Left Column: Table of Contents -->
     <div style="flex: 1; max-width: 200px; position: sticky; top: 10px; padding: 10px; background-color: #f9f9f9; border: 1px solid #ccc; border-radius: 5px;">
     <div style=" max-width: 250px; padding: 10px;">
         __TOC__
         __TOC__
     </div>
     </div>
 
     <div style="flex: 3;">
    <!-- Right Column: Main Content -->
         <h2>Section 1</h2>
     <div style="flex: 3;padding: 10px; ">
         <p>Content for section 1 goes here.</p>
         <h2>Què és</h2>
         <h2>Section 2</h2>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
[[Fitxer:Qualificacions5def.png|vora|center|marc]]
</p>
         <h2>Com utilitzar</h2>
         <p>Content for section 2 goes here.</p>
         <p>Content for section 2 goes here.</p>
         <h2>Altres informacions</h2>
         <h2>Section 3</h2>
         <p>Content for section 3 goes here.</p>
         <p>Content for section 3 goes here.</p>
     </div>
     </div>
</div>
</div>
<div class="toc" style="background-color: #f9f9f9; padding: 10px; border: 1px solid #ccc; border-radius: 5px;">
    <div class="toctitle"><h2>Custom Table of Contents</h2></div>
    <ul>
        <li><a href="#section1">Custom Section 1</a></li>
        <li><a href="#section2">Custom Section 2</a></li>
        <li><a href="#section3">Custom Section 3</a></li>
    </ul>
</div>
<h2 id="section1">Custom Section 1</h2>
<p>Content for section 1...</p>
<h2 id="section2">Custom Section 2</h2>
<p>Content for section 2...</p>
<h2 id="section3">Custom Section 3</h2>
<p>Content for section 3...</p>

Revisió del 10:57, 27 gen 2025

Section 1

Content for section 1 goes here.

Section 2

Content for section 2 goes here.

Section 3

Content for section 3 goes here.