Quiero agregar una Malla

[paulacortes3011]

<title>Malla Curricular TDAI 2019</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .malla-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 20px; } .semestre { border: 1px solid #ccc; padding: 10px; border-radius: 5px; background-color: #f9f9f9; } .semestre h3 { text-align: center; margin-top: 0; color: #333; } .materia { padding: 8px; margin-bottom: 8px; background-color: #e6f7ff; border-left: 4px solid #1890ff; cursor: pointer; border-radius: 3px; } .materia:hover { background-color: #d0e6ff; } .materia-info { display: none; padding: 10px; margin-top: 5px; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; } .area-basica { border-left-color: #1890ff; } .area-electiva { border-left-color: #52c41a; } .creditos { font-size: 0.8em; color: #666; float: right; } </style>

Tecnología en Delineantes de Arquitectura e Ingeniería

Plan de Estudios 2019 - Universidad Colegio Mayor de Cundinamarca

<div class="malla-container">
    <!-- Semestre 1 -->
    <div class="semestre">
        <h3>Semestre 1</h3>
        <div class="materia area-basica" onclick="toggleInfo(this)">
            <span>Taller Dibujo de Arquitectura I</span>
            <span class="creditos">4 créditos</span>
            <div class="materia-info">
                <p><strong>Horas:</strong> 6</p>
                <p><strong>Área:</strong> Formación Profesional - Representación Gráfica</p>
                <p><strong>Requisitos:</strong> Ninguno</p>
            </div>
        </div>
        
        <div class="materia area-basica" onclick="toggleInfo(this)">
            <span>Taller Dibujo Ingeniería I</span>
            <span class="creditos">3 créditos</span>
            <div class="materia-info">
                <p><strong>Horas:</strong> 6</p>
                <p><strong>Área:</strong> Formación Profesional - Representación Gráfica</p>
                <p><strong>Requisitos:</strong> Ninguno</p>
            </div>
        </div>
        
        <!-- Más materias del semestre 1 -->
    </div>
    
    <!-- Semestre 2 -->
    <div class="semestre">
        <h3>Semestre 2</h3>
        <div class="materia area-basica" onclick="toggleInfo(this)">
            <span>Taller Dibujo de Arquitectura II</span>
            <span class="creditos">5 créditos</span>
            <div class="materia-info">
                <p><strong>Horas:</strong> 10</p>
                <p><strong>Área:</strong> Formación Profesional - Representación Gráfica</p>
                <p><strong>Requisitos:</strong> Taller Dibujo de Arquitectura I</p>
            </div>
        </div>
        
        <!-- Más materias del semestre 2 -->
    </div>
    
    <!-- Continuar con los demás semestres -->
</div>

<script>
    function toggleInfo(element) {
        const info = element.querySelector('.materia-info');
        info.style.display = info.style.display === 'block' ? 'none' : 'block';
    }
</script>