0

Quiero que el texto / la información que voy a poner en mi menu que es de investigación la voy a poner alado del menu quiero porfavor que me ayuden a eliminar que este debajo del menu. Si tambien me explican que no se mueva la barra del menu les agradezco y como puedo añadir la información GRACIAS. <3 La imagen que se observa es como esta y quiero que este alado del menu de las opciones el texto no debajo ayuda porfavor necesito entregar esto en 2 días [1]: https://i.sstatic.net/2ByZrFM6.png El código:

    <!DOCTYPE html>
   <html lang="es">
  <head>
   <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Inicio</title>
  <link rel="stylesheet" href="css/estilos.css" />
  <!-- Comentario -->
  <!-- script conexion con los iconos para el menú-->
  <script src="https://kit.fontawesome.com/4754ddb85d.js" crossorigin="anonymous"></script>

  </head>
  <body>

   <nav class="nav">
  <ul class="list">       
    <li class="list__item">
      <div class="list__button">
        <img src="imgmn/bx-wrench.svg" class="list__img">
        <a href="#" class="nav__link--nc"><h1>Soporte Técnico</h1>  </a>
      </div>

      <div class="list__button">
        <img src="imgmn/bxs-dashboard.svg" class="list__img">
        <a href="#" class="nav__link">Inicio</a>
      </div>
      
      <li class="list__item list__item--click">
        <div class="list__button list__button--click">
          <i class="fa-solid fa-1" style="color: #ffffff;" class="list__img"></i>
          <a href="#" class="nav__link">Primer Año</a>
          <img src="imgmn/bx-chevron-right.svg" class="list__arrow">
        </div>

        <ul class="list__show">
          <li class="list__inside">
            <a href="#" class="nav__link nav__link--inside">Trimestre 1</a>
          </li>
          <li class="list__inside">
            <a href="#" class="nav__link nav__link--inside">Trimestre 2</a>
          </li>
          <li class="list__inside">
            <a href="#" class="nav__link nav__link--inside">Trimestre 3</a>
          </li>

        </ul>

      </li>
      <li class="list__item list__item--click">
        <div class="list__button list__button--click">
          <i class="fa-solid fa-2" style="color: #ffffff;" class="list__img"></i>
          <a href="#" class="nav__link">Segundo Año</a>
          <img src="imgmn/bx-chevron-right.svg" class="list__arrow">
        </div>

        <ul class="list__show">
          <li class="list__inside">
            <a href="#" class="nav__link nav__link--inside">Trimestre 1</a>
          </li>
          <li class="list__inside">
            <a href="#" class="nav__link nav__link--inside">Trimestre 2</a>
          </li>
          <li class="list__inside">
            <a href="#" class="nav__link nav__link--inside">Trimestre 3</a>
          </li>

        </ul>

      </li>
      <li class="list__item list__item--click">
        <div class="list__button list__button--click">
          <i class="fa-solid fa-3"  style="color: #ffffff;"class="list__img"></i>
          <a href="#" class="nav__link">Tercer Año</a>
          <img src="imgmn/bx-chevron-right.svg" class="list__arrow">
        </div>

        <ul class="list__show">
          <li class="list__inside">
            <a href="#" class="nav__link nav__link--inside">Trimestre 1</a>
          </li>
          <li class="list__inside">
            <a href="#" class="nav__link nav__link--inside">Trimestre 2</a>
          </li>
          <li class="list__inside">
            <a href="#" class="nav__link nav__link--inside">Trimestre 3</a>
          </li>
        </ul>
      </li>

      <div class="list__button">
        <img src="imgmn/bx-info-circle.svg" class="list__img">
        <a href="#" class="nav__link">Información</a>
      </div>

      <div class="list__button">
        <img src="imgmn/bxs-contact.svg" class="list__img">
        <a href="#" class="nav__link">Sobre Nosotros</a>
      </div>
     </li>
    </ul>

  </nav>
 <!-- /* ==================================== */ -->
<!-- /* ==============TEXTO=============== */ -->
<!-- /* ====================================*/ -->
 <main class="contenido-principal">  
  <div class="contenido"> 
    <div class="entrada">
      <div class="texto">
        <div><img src="img/ini1.jpeg" width="100" class="foto" ></div>
        <h2>Hola,</h2>
        <h3>Somos  </h3><br>
        <h4>Estudiantes de Informática en la Unidad Educativa  </h4><br>
        <p>Diseñamos esta página junto a la asesoría de nuestra profe 
           con el fin de informar, educar e integrar los contenidos que hay dentro
            de toda la carrera de la Figura Profesional de Informática específicamente 
            en el área de Soporte Técnico </p><br>
      </div>
    </div>
    <div class="intruccion">
      <h2>Nos da mucho gusto <br>
        tenerte aquí 
        </h2>
        <h4>¿Qué estás buscando? </h4>
        <div><img src="img/ini2.jpg" alt=""></div>
        <p>•    En Inicio volverás a esta página principal de todo el contenido. </p>
        <div><img src="img/ini3.jpg" alt=""></div>
        <p>•    Los contenidos están organizados por trimestres del año, y dentro de cada 
          trimestre se dividen en unidades específicas. Esto permite un acceso más ordenado
          y facilita la búsqueda de información concreta. </p>
        <div><img src="img/ini4.jpg" alt=""></div>
        <p>•    En Información podrás encontrar algunas preguntas con su debida respuesta 
 para poder ayudar y mejorar tus enseñanzas adquiridas. </p>
        <div><img src="img/ini5.jpg" alt=""></div>
        <p>•    En Sobre Nosotros conocerás más de nosotros los creadores de la página web 
</p>
      </div>
    </div>
  </main>

  <!-- llama al archivo javascript -->
  <script src="js/script.js"></script>
 <!-- TEXTOO -->
  </body>
 </html>

El css es: }

        /* ==================================== */
       /* ==============MENU=============== */
       /* ====================================*/
       * {
           margin: 0;
           padding: 0;
           /* box-sizing: border-box; */
           /*elimina el subrayado de las páginas*/
           text-decoration: none;

       

       }

       body {
           background: #eaebef;
           font-family: 'Times New Roman';
       }
       
       .nav {
           width: 300px;
       }
       
       .nav__link {
           /* color de las letras */
           color: white;
           display: block;x
           padding: 15px 0;
           text-decoration: none;
       }
       .nav__link--inside {
           border-radius: 6px;
           padding-left: 20px;
           text-align: lef;
       }

       /* agregar comentario con cntrl } */
       /* sirve para que cuando pase el raton cambie de color */
       .nav__link--inside:hover {
           background: #5DADE2;
       }
       
       .list {
           /*fijo*/
           width: 100%;
           /*area visible el navegador*/
           height: 100vh;
           display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 0 16px 16px 0;
    /* COLOR FONDO DE LA LISTA */
    background: #0061AA;

       }

       .list__item {
    list-style: none;
    width: 100%;
    text-align: center;
    /* que se vea y no el submenu */
    overflow: hidden;
       }

       .list__item--click {
           cursor: pointer;
       }
       
       .list__button {
    display: flex;
    align-items: center;
    gap: 1em;
    width: 70%;
    margin: 0 auto;

       }



       

       .arrow .list__arrow {
    transform: rotate(90deg);
       }

       .list__arrow {
    margin-left: auto;
    transition: transform .3s;
       }

       /* aparece y desaparece el men*/
       .list__show {
    width: 80%;
    margin-left: auto;
    border-left: 2px solid white;
    list-style: none;
    transition: height .4s;
    height: 0;

       }

       /* visualizar encabezado soporte técnico */

       .nav__link--nc {
    /* color de las letras */
    color: white;
    display: block;
    padding: 15px 0;
    text-decoration: none;
    pointer-events: none;
       }

       /* ==================================== */
       /* ==============FIN MENU=============== */
       /* ====================================*/

       main {
           display: flex;
           justify-content: inherit;
    margin-left: 300px;
    padding: 0 10px;
    font-size: 20px;
       }

       .contenido-prinicpal p {
    text-align: justify;
       }

       img {
           width: 100;
       }

2 respuestas 2

0

Si comprendí bien el problema deberías solo darle los estilos correspondientes al contenedor padre que en este caso seria el body, esto utilizando display flex y dandole la orientacion en fila, después de eso solo asignas el ancho correspondiente al contenedor nav y main para que se acomplen bien dentro del body, de esta manera:

/* ==================================== */


/* ==============MENU=============== */


/* ====================================*/

* {
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
  /*elimina el subrayado de las páginas*/
  text-decoration: none;
}

body {
  display: flex;
  /*SE LE ASIGNA AL BODY LA ORIENTACION EN FILA*/
  flex-direction: row;
  /*ANCHO QUE OCUPARA EL BODY*/
  width: 100%;
  background: #eaebef;
  font-family: 'Times New Roman';
}

.nav {
  /*MODIFICAMOS EL ANCHO DEL MENU A %*/
  width: 20%;
}

.nav__link {
  /* color de las letras */
  color: white;
  display: block;
  x padding: 15px 0;
  text-decoration: none;
}

.nav__link--inside {
  border-radius: 6px;
  padding-left: 20px;
  text-align: lef;
}


/* agregar comentario con cntrl } */


/* sirve para que cuando pase el raton cambie de color */

.nav__link--inside:hover {
  background: #5DADE2;
}

.list {
  /*fijo*/
  width: 100%;
  /*area visible el navegador*/
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 0 16px 16px 0;
  /* COLOR FONDO DE LA LISTA */
  background: #0061AA;
}

.list__item {
  list-style: none;
  width: 100%;
  text-align: center;
  /* que se vea y no el submenu */
  overflow: hidden;
}

.list__item--click {
  cursor: pointer;
}

.list__button {
  display: flex;
  align-items: center;
  gap: 1em;
  width: 70%;
  margin: 0 auto;
}

.arrow .list__arrow {
  transform: rotate(90deg);
}

.list__arrow {
  margin-left: auto;
  transition: transform .3s;
}


/* aparece y desaparece el men*/

.list__show {
  width: 80%;
  margin-left: auto;
  border-left: 2px solid white;
  list-style: none;
  transition: height .4s;
  height: 0;
}


/* visualizar encabezado soporte técnico */

.nav__link--nc {
  /* color de las letras */
  color: white;
  display: block;
  padding: 15px 0;
  text-decoration: none;
  pointer-events: none;
}


/* ==================================== */


/* ==============FIN MENU=============== */


/* ====================================*/

main {
  display: flex;
  justify-content: inherit;
  padding: 0 10px;
  font-size: 20px;
  /*ASIGNAMOS EL ANCHO DEL MAIN*/
  width: 80%
}

.contenido-prinicpal p {
  text-align: justify;
}

img {
  width: 100;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Inicio</title>
  <link rel="stylesheet" href="css/estilos.css" />
  <!-- Comentario -->
  <!-- script conexion con los iconos para el menú-->
  <script src="https://kit.fontawesome.com/4754ddb85d.js" crossorigin="anonymous"></script>

</head>

<body>


  <nav class="nav">
    <ul class="list">
      <li class="list__item">
        <div class="list__button">
          <img src="imgmn/bx-wrench.svg" class="list__img">
          <a href="#" class="nav__link--nc">
            <h1>Soporte Técnico</h1>
          </a>
        </div>

        <div class="list__button">
          <img src="imgmn/bxs-dashboard.svg" class="list__img">
          <a href="#" class="nav__link">Inicio</a>
        </div>

        <li class="list__item list__item--click">
          <div class="list__button list__button--click">
            <i class="fa-solid fa-1" style="color: #ffffff;" class="list__img"></i>
            <a href="#" class="nav__link">Primer Año</a>
            <img src="imgmn/bx-chevron-right.svg" class="list__arrow">
          </div>

          <ul class="list__show">
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 1</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 2</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 3</a>
            </li>

          </ul>

        </li>
        <li class="list__item list__item--click">
          <div class="list__button list__button--click">
            <i class="fa-solid fa-2" style="color: #ffffff;" class="list__img"></i>
            <a href="#" class="nav__link">Segundo Año</a>
            <img src="imgmn/bx-chevron-right.svg" class="list__arrow">
          </div>

          <ul class="list__show">
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 1</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 2</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 3</a>
            </li>

          </ul>

        </li>
        <li class="list__item list__item--click">
          <div class="list__button list__button--click">
            <i class="fa-solid fa-3" style="color: #ffffff;" class="list__img"></i>
            <a href="#" class="nav__link">Tercer Año</a>
            <img src="imgmn/bx-chevron-right.svg" class="list__arrow">
          </div>

          <ul class="list__show">
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 1</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 2</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 3</a>
            </li>
          </ul>
        </li>

        <div class="list__button">
          <img src="imgmn/bx-info-circle.svg" class="list__img">
          <a href="#" class="nav__link">Información</a>
        </div>

        <div class="list__button">
          <img src="imgmn/bxs-contact.svg" class="list__img">
          <a href="#" class="nav__link">Sobre Nosotros</a>
        </div>
      </li>
    </ul>

  </nav>
  <!-- /* ==================================== */ -->
  <!-- /* ==============TEXTO=============== */ -->
  <!-- /* ====================================*/ -->
  <main class="contenido-principal">
    <div class="contenido">
      <div class="entrada">
        <div class="texto">
          <div><img src="img/ini1.jpeg" width="100" class="foto"></div>
          <h2>Hola,</h2>
          <h3>Somos </h3><br>
          <h4>Estudiantes de Informática en la Unidad Educativa </h4><br>
          <p>Diseñamos esta página junto a la asesoría de nuestra profe con el fin de informar, educar e integrar los contenidos que hay dentro de toda la carrera de la Figura Profesional de Informática específicamente en el área de Soporte Técnico </p><br>
        </div>
      </div>
      <div class="intruccion">
        <h2>Nos da mucho gusto <br> tenerte aquí
        </h2>
        <h4>¿Qué estás buscando? </h4>
        <div><img src="img/ini2.jpg" alt=""></div>
        <p>• En Inicio volverás a esta página principal de todo el contenido. </p>
        <div><img src="img/ini3.jpg" alt=""></div>
        <p>• Los contenidos están organizados por trimestres del año, y dentro de cada trimestre se dividen en unidades específicas. Esto permite un acceso más ordenado y facilita la búsqueda de información concreta. </p>
        <div><img src="img/ini4.jpg" alt=""></div>
        <p>• En Información podrás encontrar algunas preguntas con su debida respuesta para poder ayudar y mejorar tus enseñanzas adquiridas. </p>
        <div><img src="img/ini5.jpg" alt=""></div>
        <p>• En Sobre Nosotros conocerás más de nosotros los creadores de la página web
        </p>
      </div>
    </div>
  </main>
  <!-- llama al archivo javascript -->
  <script src="js/script.js"></script>
  <!-- TEXTOO -->
</body>

</html>

Nota: El ejemplo que te acabo de dar es solo si no va a agregar mas contenido del que acabas de mostrar, de lo contrario deberás agregar mas contenedores (padre) y dentro de ellos encapsular el diferente contenido que quieras agregar, esto con la finalidad de mantener un orden por secciones y puedas controlar los diferentes estilos para cada uno de ellos.

3
  • 1
    Muchas gracias Antonio no sabes de la que me acabas de salvar gracias por apoyar a la comunidad con tus grandes conocimientos, te puedo molestar con como debo de organizar el texto a poner? eso fue lo unico que no entendi
    – Gabriel C1
    Commented el 28 may. a las 21:03
  • Si, a lo que me refiero es por ejemplo, si tu quisieras agregar imágenes después del texto, deberías de agregar un nuevo contenedor <div> y dentro de el las imágenes que pretendes agregar, ademas de encapsular el texto dentro de un contenedor también, esto separaría el contenido del nav quedando. <nav><div class="texto"></div><div class="imagenes"><img></div></nav>, si observas el contenedor padre ahora es el nav que separa tu contenido y puedes controlar mejor los estilos por separado, disculpa que no edite tu pregunta actual pero perdería el contexto principal. Commented el 28 may. a las 22:32
  • Puedes revisar mas de este tema aqui o si tienes mas dudas puedes generar una nueva pregunta y la comunidad podrá ayudarte mejor, recuerda, siempre muestra el intento que haz realizado. Commented el 28 may. a las 22:35
0

Prueba con esto:

* {
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
  /*elimina el subrayado de las páginas*/
  text-decoration: none;
}

body {
  display: flex;
  /*SE LE ASIGNA AL BODY LA ORIENTACION EN FILA*/
  flex-direction: row;
  /*ANCHO QUE OCUPARA EL BODY*/
  width: 100%;
  background: #eaebef;
  font-family: 'Times New Roman';
  max-height: 100vh;
}

.nav {
  /*MODIFICAMOS EL ANCHO DEL MENU A %*/
  width: 20%;
}

.nav__link {
  /* color de las letras */
  color: white;
  display: block;
  padding: 15px 0;
  text-decoration: none;
}

.nav__link--inside {
  border-radius: 6px;
  padding-left: 20px;
  text-align: lef;
}


/* agregar comentario con cntrl } */


/* sirve para que cuando pase el raton cambie de color */

.nav__link--inside:hover {
  background: #5DADE2;
}

.list {
  /*fijo*/
  width: 100%;
  /*area visible el navegador*/
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 0 16px 16px 0;
  /* COLOR FONDO DE LA LISTA */
  background: #0061AA;
}

.list__item {
  list-style: none;
  width: 100%;
  text-align: center;
  /* que se vea y no el submenu */
  overflow: hidden;
}

.list__item--click {
  cursor: pointer;
}

.list__button {
  display: flex;
  align-items: center;
  gap: 1em;
  width: 70%;
  margin: 0 auto;
}

.arrow .list__arrow {
  transform: rotate(90deg);
}

.list__arrow {
  margin-left: auto;
  transition: transform .3s;
}


/* aparece y desaparece el men*/

.list__show {
  width: 80%;
  margin-left: auto;
  border-left: 2px solid white;
  list-style: none;
  transition: height .4s;
  height: 0;
}


/* visualizar encabezado soporte técnico */

.nav__link--nc {
  /* color de las letras */
  color: white;
  display: block;
  padding: 15px 0;
  text-decoration: none;
  pointer-events: none;
}


/* ==================================== */


/* ==============FIN MENU=============== */


/* ====================================*/

main {
  display: flex;
  justify-content: inherit;
  padding: 0 10px;
  font-size: 20px;
  overflow-y: auto;
  /*ASIGNAMOS EL ANCHO DEL MAIN*/
  width: 80%
}

.contenido-prinicpal p {
  text-align: justify;
}


img {
  width: 100;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Inicio</title>
  <link rel="stylesheet" href="css/estilos.css" />
  <!-- Comentario -->
  <!-- script conexion con los iconos para el menú-->
  <script src="https://kit.fontawesome.com/4754ddb85d.js" crossorigin="anonymous"></script>

</head>

<body>


  <nav class="nav">
    <ul class="list">
      <li class="list__item">
        <div class="list__button">
          <img src="imgmn/bx-wrench.svg" class="list__img">
          <a href="#" class="nav__link--nc">
            <h1>Soporte Técnico</h1>
          </a>
        </div>

        <div class="list__button">
          <img src="imgmn/bxs-dashboard.svg" class="list__img">
          <a href="#" class="nav__link">Inicio</a>
        </div>

        <li class="list__item list__item--click">
          <div class="list__button list__button--click">
            <i class="fa-solid fa-1" style="color: #ffffff;" class="list__img"></i>
            <a href="#" class="nav__link">Primer Año</a>
            <img src="imgmn/bx-chevron-right.svg" class="list__arrow">
          </div>

          <ul class="list__show">
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 1</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 2</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 3</a>
            </li>

          </ul>

        </li>
        <li class="list__item list__item--click">
          <div class="list__button list__button--click">
            <i class="fa-solid fa-2" style="color: #ffffff;" class="list__img"></i>
            <a href="#" class="nav__link">Segundo Año</a>
            <img src="imgmn/bx-chevron-right.svg" class="list__arrow">
          </div>

          <ul class="list__show">
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 1</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 2</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 3</a>
            </li>

          </ul>

        </li>
        <li class="list__item list__item--click">
          <div class="list__button list__button--click">
            <i class="fa-solid fa-3" style="color: #ffffff;" class="list__img"></i>
            <a href="#" class="nav__link">Tercer Año</a>
            <img src="imgmn/bx-chevron-right.svg" class="list__arrow">
          </div>

          <ul class="list__show">
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 1</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 2</a>
            </li>
            <li class="list__inside">
              <a href="#" class="nav__link nav__link--inside">Trimestre 3</a>
            </li>
          </ul>
        </li>

        <div class="list__button">
          <img src="imgmn/bx-info-circle.svg" class="list__img">
          <a href="#" class="nav__link">Información</a>
        </div>

        <div class="list__button">
          <img src="imgmn/bxs-contact.svg" class="list__img">
          <a href="#" class="nav__link">Sobre Nosotros</a>
        </div>
      </li>
    </ul>

  </nav>
  <!-- /* ==================================== */ -->
  <!-- /* ==============TEXTO=============== */ -->
  <!-- /* ====================================*/ -->
  <main class="contenido-principal">
    <div class="contenido">
      <div class="entrada">
        <div class="texto">
          <div><img src="img/ini1.jpeg" width="100" class="foto"></div>
          <h2>Hola,</h2>
          <h3>Somos </h3><br>
          <h4>Estudiantes de Informática en la Unidad Educativa </h4><br>
          <p>Diseñamos esta página junto a la asesoría de nuestra profe con el fin de informar, educar e integrar los contenidos que hay dentro de toda la carrera de la Figura Profesional de Informática específicamente en el área de Soporte Técnico </p><br>
        </div>
      </div>
      <div class="intruccion">
        <h2>Nos da mucho gusto <br> tenerte aquí
        </h2>
        <h4>¿Qué estás buscando? </h4>
        <div><img src="img/ini2.jpg" alt=""></div>
        <p>• En Inicio volverás a esta página principal de todo el contenido. </p>
        <div><img src="img/ini3.jpg" alt=""></div>
        <p>• Los contenidos están organizados por trimestres del año, y dentro de cada trimestre se dividen en unidades específicas. Esto permite un acceso más ordenado y facilita la búsqueda de información concreta. </p>
        <div><img src="img/ini4.jpg" alt=""></div>
        <p>• En Información podrás encontrar algunas preguntas con su debida respuesta para poder ayudar y mejorar tus enseñanzas adquiridas. </p>
        <div><img src="img/ini5.jpg" alt=""></div>
        <p>• En Sobre Nosotros conocerás más de nosotros los creadores de la página web
        </p>
      </div>
    </div>
  </main>
  <!-- llama al archivo javascript -->
  <script src="js/script.js"></script>
  <!-- TEXTOO -->
</body>

</html>

Así mantienes el navegador lateral inmóvil y solo mueves el contenido del lado derecho.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.