AQUI EL CODIGO NO ME SALE :$
no te sale porque ...
<div className="image-container">
className no existe, es <div class="
1.creamos un <div> por ejemplo <div class="cont1">
<div class="cont1">
...
</div>
2.Dentro ponemos cada "sección", cada uno en un <div> con class por ejemplo "menux"
<div class="cont1">
<div class="menux">Empleos</div>
<div class="menux">registrarse</div>
<div class="menux">iniciar sesion</div>
<div class="menux">Mas Demandados</div>
<div class="menux">menos demandados</div>
<div class="menux">Quienes Somos</div>
<div class="menux">menos demandados</div>
<div class="menux">newsletter</div>
<div class="menux">Ferias Laborales en Santiago</div>
</div>
3.creamos otro <div> para las imágenes por ejemplo <div class="cont2">
<div class="cont2">
...
</div>
4.Dentro ponemos cada "imagen", cada uno en un <div> con class por ejemplo "menu-img1", "menu-img2","menu-img3"
<div class="cont2">
<div class="menu-img1"><img src="
https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467" /></div>
<div class="menu-img2"><img src="
https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467" /></div>
<div class="menu-img3"><img src="
https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467" /></div>
</div>
5.previo...
6. Ahora le ponemos style/css
a .cont1 le ponemos width a .menux le ponemos width: max-content; y margin
7.previo...
8. a .cont2 le ponemos display: flex; para que se alinie horizontalmente y un width: max-content;
9.previo...
10. a cada .menu-img le ponemos width height margin y border
previo...
11. a cada imagen .menu-img1 img,.menu-img2 img,.menu-img3 img le ponemos width: 100%; y height: 100%;
previo...
12 y listo
En resumen...
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<title>Trabajos.cl</title>
<style>
body {
background-color: #cccccc;
}
.cont1 {
width: 240px;
}
.menux {
width: max-content;
margin: 4px;
}
.cont2 {
display: flex;
width: max-content;
}
.menu-img1 {
width: 200px;
height: 150px;
margin: 10px;
border: 6px solid #000;
}
.menu-img2 {
width: 300px;
height: 150px;
margin: 10px;
border: 6px solid #000;
}
.menu-img3 {
width: 400px;
height: 150px;
margin: 10px;
border: 6px solid #000;
}
.menu-img1 img,.menu-img2 img,.menu-img3 img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="cont1">
<div class="menux">Empleos</div>
<div class="menux">registrarse</div>
<div class="menux">iniciar sesion</div>
<div class="menux">Mas Demandados</div>
<div class="menux">menos demandados</div>
<div class="menux">Quienes Somos</div>
<div class="menux">menos demandados</div>
<div class="menux">newsletter</div>
<div class="menux">Ferias Laborales en Santiago</div>
</div>
<div class="cont2">
<div class="menu-img1"><img src="https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467"/></div>
<div class="menu-img2"><img src="https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467" /></div>
<div class="menu-img3"><img src="https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467" /></div>
</div>
</body>
</html>