Estimados programadores,
Espero que se encuentren bien. Mi nombre es Adrian y estoy enfrentando un problema de codificación en un proyecto que estoy trabajando. Estoy seguro de que entre todos ustedes hay alguien que puede ayudarme a resolverlo.
Me encantaría pedirles su ayuda y sabiduría en este asunto. Si es posible, les agradecería si pueden revisar mi código y darme su opinión sobre cómo resolver el problema. Estoy seguro de que juntos podemos encontrar una solución efectiva.
Agradezco de antemano su tiempo y ayuda. Si necesitan más información o detalles sobre mi problema, estaré encantado de proporcionarlos.
Les agradezco de nuevo por su tiempo y espero su respuesta pronto.
Atentamente, Adrian
Problema:
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<title>APP</title>
<style>
html {
width: 100%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-behavior: smooth;
font-size: var(--text-small);
}
body {
width: 100%;
height: 100%;
background: var(--color-second);
display: flex;
justify-content: center;
align-items: center;
}
.contenedor {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-second);
padding: var(--margin-medium);
}
.boxNav {
width: 100%;
max-width: 1000px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: whitesmoke;
padding: var(--margin-medium);
border-radius: var(--border-radius-medium);
font-size: var(--text-small);
}
.boxNavLeft {
width: 500px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.boxlistUl {
margin-left: var(--margin-medium);
}
.boxNavRight {
width: 450px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="boxNav">
<div class="boxNavLeft">
<div class="boxList">
<ul class="boxlistUl">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
<li>m</li>
<li>n</li>
</ul>
</div>
</div>
<div class="boxNavRight">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur deleniti nam libero
magni amet esse praesentium officiis excepturi quis repellat? Blanditiis quas incidunt
adipisci quo quia qui quos? Id, laborum!
</p>
</div>
</div>
</div>
</body>
</html>
html {
width: 100%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-behavior: smooth;
font-size: var(--text-small);
}
body {
width: 100%;
height: 100%;
background: var(--color-second);
display: flex;
justify-content: center;
align-items: center;
}
.contenedor {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-second);
padding: var(--margin-medium);
}
.boxNav {
width: 100%;
max-width: 1000px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: whitesmoke;
padding: var(--margin-medium);
border-radius: var(--border-radius-medium);
font-size: var(--text-small);
}
.boxNavLeft {
width: 500px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.boxlistUl {
margin-left: var(--margin-medium);
}
.boxNavRight {
width: 450px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: aliceblue;
}
<div class="contenedor">
<div class="boxNav">
<div class="boxNavLeft">
<div class="boxList">
<ul class="boxlistUl">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
<li>m</li>
<li>n</li>
</ul>
</div>
</div>
<div class="boxNavRight">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur deleniti nam libero
magni amet esse praesentium officiis excepturi quis repellat? Blanditiis quas incidunt
adipisci quo quia qui quos? Id, laborum!
</p>
</div>
</div>
</div>