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;
}