html Modulo FrontEnd Dos Columnas

Posted 2021-05-10

    <!-- **************************** -->
    <!-- Modulo FrontEnd Dos Columnas -->

    <section class="modDosCol">
      <!-- Título central en una sola columna (FLEX) -->
      <article class="modDosCol__titulo">
        <h3 class="modDosCol__titulo__h3">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        </h3>
      </article>

      <!-- Dos columna (FLEX) -->
      <section class="modDosCol__verticales">
        <!-- Columna de la izquierda (FLEX) -->
        <article class="modDosCol__izq">
          <!-- Zona superior de texto -->
          <p class="modDosCol__izq__parrafo">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem
            culpa aperiam est eligendi magnam aut ab omnis ea, neque accusantium
            totam. Beatae, cumque odit vel voluptatibus eum soluta nisi.
            Deleniti.
          </p>

          <!-- Zona inferior de imagen -->
          <img src="#" alt="" class="modDosCol__izq__imagen" />
        </article>

        <!-- Columna de la derecha (FLEX) -->
        <article class="modDosCol__der">
          <!-- Zona superior de texto -->
          <p class="modDosCol__der__parrafo">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem
            culpa aperiam est eligendi magnam aut ab omnis ea, neque accusantium
            totam. Beatae, cumque odit vel voluptatibus eum soluta nisi.
            Deleniti.
          </p>

          <!-- zona de parrafos -->
          <ul class="modDosCol__der__parrafos">
            <!-- primera seccion de parrafos -->
            <li class="modDosCol__der__parrafos__primero">
              <h4 class="modDosCol__der__parrafos__primero__titulo">
                Lorem, ipsum.
              </h4>
              <p class="modDosCol__der__parrafos__primero__parrafo">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
                unde.
              </p>
            </li>
            <!-- segunda seccion de parrafos -->
            <li class="modDosCol__der__parrafos__segundo">
              <h4 class="modDosCol__der__parrafos__segundo__titulo">
                Lorem, ipsum.
              </h4>
              <p class="modDosCol__der__parrafos__segundo__parrafo">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
                unde.
              </p>
            </li>
            <!-- tercera seccion de parrafos -->
            <li class="modDosCol__der__parrafos__tercero">
              <h4 class="modDosCol__der__parrafos__tercero__titulo">
                Lorem, ipsum.
              </h4>
              <p class="modDosCol__der__parrafos__tercero__parrafo">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
                unde.
              </p>
            </li>
          </ul>
        </article>
      </section>
    </section>

    <!-- FINAL - Modulo FrontEnd Dos Columnas -->
    <!-- ************************************