Aquí tienes el código HTML base que utilizaremos como plantilla para la presentación de los posts en este curso. Este código incluye la estructura del acordeón de los índices y los contenedores para el contenido de cada tema. Puedes copiarlo y adaptarlo para crear nuevas lecciones de manera consistente.
<div class="separator" style="clear: both;"><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/640px-Python-logo-notext.svg.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="320" data-original-height="703" data-original-width="640" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/640px-Python-logo-notext.svg.png"/></a></div>
<div class="container">
<h1>Acordeón de los Índices</h1>
<div class="container">
<div style="overflow-x: auto;">
<div id="accordion-unificado-modelo">
<div class="card">
<div class="card-header" id="heading-indices-modelo" style="background-color: #ADD8E6;">
<h5 class="mb-0 d-flex justify-content-between">
<span class="font-weight-bold"
style="font-family: Georgia; font-size: 1.5rem;">Índice de los temas</span>
<button class="btn btn-link" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-indices-modelo" aria-expanded="true"
aria-controls="collapse-indices-modelo">
<i class="fa fa-chevron-down"></i>
</button>
</h5>
</div>
<div id="collapse-indices-modelo" class="collapse show" aria-labelledby="heading-indices-modelo"
data-parent="#accordion-unificado-modelo">
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">
<a href="#heading-indice-1" id="index-indice-1">Índice 1</a>
</li>
<li class="list-group-item">
<a href="#heading-indice-2" id="index-indice-2">Índice 2</a>
</li>
<li class="list-group-item">
<a href="#heading-indice-3" id="index-indice-3">Índice 3</a>
</li>
<li class="list-group-item">
<a href="#heading-indice-4" id="index-indice-4">Índice 4</a>
</li>
<li class="list-group-item">
<a href="#heading-indice-5" id="index-indice-5">Índice 5</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div><br>
<hr><br>
<div class="container">
<h1>Lección: [Número de Lección] - [Título de la Lección]</h1>
<div class="container">
<div style="overflow-x: auto;">
<div id="accordion-leccion-modelo">
<div class="card">
<div class="card-header" id="heading-indice-1" style="background-color: #ADD8E6;">
<h5 class="mb-0 d-flex justify-content-between">
<span class="font-weight-bold"
style="font-family: Georgia; font-size: 1.5rem;">Índice 1</span>
<button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-indice-1" aria-expanded="false"
aria-controls="collapse-indice-1">
<i class="fa fa-chevron-down"></i>
</button>
</h5>
</div>
<div id="collapse-indice-1" class="collapse"
aria-labelledby="heading-indice-1" data-parent="#accordion-leccion-modelo">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-indice-2" style="background-color: #ADD8E6;">
<h5 class="mb-0 d-flex justify-content-between">
<span class="font-weight-bold"
style="font-family: Georgia; font-size: 1.5rem;">Índice 2</span>
<button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-indice-2" aria-expanded="false"
aria-controls="collapse-indice-2">
<i class="fa fa-chevron-down"></i>
</button>
</h5>
</div>
<div id="collapse-indice-2" class="collapse"
aria-labelledby="heading-indice-2" data-parent="#accordion-leccion-modelo">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-indice-3" style="background-color: #ADD8E6;">
<h5 class="mb-0 d-flex justify-content-between">
<span class="font-weight-bold"
style="font-family: Georgia; font-size: 1.5rem;">Índice 3</span>
<button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-indice-3" aria-expanded="false"
aria-controls="collapse-indice-3">
<i class="fa fa-chevron-down"></i>
</button>
</h5>
</div>
<div id="collapse-indice-3" class="collapse"
aria-labelledby="heading-indice-3" data-parent="#accordion-leccion-modelo">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-indice-4" style="background-color: #ADD8E6;">
<h5 class="mb-0 d-flex justify-content-between">
<span class="font-weight-bold"
style="font-family: Georgia; font-size: 1.5rem;">Índice 4</span>
<button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-indice-4" aria-expanded="false"
aria-controls="collapse-indice-4">
<i class="fa fa-chevron-down"></i>
</button>
</h5>
</div>
<div id="collapse-indice-4" class="collapse"
aria-labelledby="heading-indice-4" data-parent="#accordion-leccion-modelo">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-indice-5" style="background-color: #ADD8E6;">
<h5 class="mb-0 d-flex justify-content-between">
<span class="font-weight-bold"
style="font-family: Georgia; font-size: 1.5rem;">Índice 5</span>
<button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-indice-5" aria-expanded="false"
aria-controls="collapse-indice-5">
<i class="fa fa-chevron-down"></i>
</button>
</h5>
</div>
<div id="collapse-indice-5" class="collapse"
aria-labelledby="heading-indice-5" data-parent="#accordion-leccion-modelo">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
</div><br>
<hr><br>
<div style="float:right;">
<a name="" id="" class="btn btn-dark" href="https://frioyelectronica.blogspot.com/p/curso-python.html"
rel="noopener noreferrer" target="_blank" role="button">Ir al indice</a>
</div>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias