0

voy iniciando en frontend y empecé a crear mi primer proyecto personal. Inicie con el desarrollo de esta interfaz (asi es como quiero que se vea):

introducir la descripción de la imagen aquí

y asi es como segun yo hice la division para poder desarollar: introducir la descripción de la imagen aquí

y esto es lo que he podido hacer: introducir la descripción de la imagen aquí

Llevo bloqueado todo el dia tratando de resolver mi problema y no se a donde recurri, me gustaria recibir feedback, este es el html:

.headerinfo {
  padding-left: 0px;
  width: 100%;
  margin-left: 20px;
}

.contain er-left {
  display: flex;
  margin: 15px 0px;
}

.headerinfo-cajas {
  overflow: hidden;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin-right: 30px;
  position: relative;
  display: inline-block;
}

.headerinfo-cajas__titulo {
  color: black;
  font-size: 18px;
}

.headerinfo-cajas__titulo-center {
  color: black;
  font-size: 18px;
  text-align: center;
}

.headerinfo-cajas__subtitulo {
  color: #796f6a;
  font-size: 12px;
}

.headerinfo-cajas__subtitulo-2 {
  font-size: 15px;
}

.iconos {
  display: flex;
  flex-direction: column;
}

.headerinfo-cajas__icon {
  width: 15px;
  height: 15px;
  margin-bottom: 10px;
}
i
<section class="headerinfo">
  <div class="container-left">

    <div class="headerinfo-cajas">
      <h1 class="headerinfo-cajas__titulo">Casa Sofia en El Palomar</h1>
      <p class="headerinfo-cajas__subtitulo">3 personas han ofertado por esta propiedad</p>
      <p class="headerinfo-cajas__subtitulo">El Palomar, Tlajomulco, Jalisco</p>
      <div class="iconos">
        <img class="headerinfo-cajas__icon" src="../maquetacion-principal/assets/star.png" alt="Estrella">
        <img class="headerinfo-cajas__icon" src="../maquetacion-principal/assets/location.png" alt="Ubicacion">
      </div>
    </div>

    <div class="headerinfo-cajas">
      <h3 class="headerinfo-cajas__titulo-center">$6.0</h3>
      <p class="headerinfo-cajas__subtitulo-2">millones</p>
    </div>

    <div class="headerinfo-cajas">
      <h3 class="headerinfo-cajas__titulo-center">4</h3>
      <p class="headerinfo-cajas__subtitulo-2">hab</p>
    </div>

    <div class="headerinfo-cajas">
      <h3 class="headerinfo-cajas__titulo-center">4</h3>
      <p class="headerinfo-cajas__subtitulo-2">baños</p>
    </div>

    <div class="headerinfo-cajas">
      <h3 class="headerinfo-cajas__titulo-center">945 mt2</h3>
      <p class="headerinfo-cajas__subtitulo-2">$6,349 / mt2</p>
    </div>

  </div>

</section>

necesito ayuda en la parte de los flexbox, estoy muy atorado en esa tema, estuve practicando con paginas de ejercicios en css y aun asi no he podido encotrar una solucion, tambien intente hacerlo desde la consola y no se cual es el error que tengo

1
  • El flexbox es un tema difícil de comprender al 100% la primera vez, pero no te desanimes, a mí me ayudó mucho un video curso de FalconMasters, si te interesa le puedes dar un vistazo. Explica con gran calma y muy padre la verdad, con él yo aprendí las bases de todo lo que es front-end :3 Commented el 11 abr. 2021 a las 3:53

2 respuestas 2

0

El problema es el orden en que los estás colocando, es mejor colocar un div que tenga dentro el ícono y el texto. Esto asegura que estén alineados así como que sea más fácil su manejo.

.headerinfo {
        padding-left: 0px;
        width: 100%;
        margin-left: 20px;
    }

    .contain er-left {
        display: flex;
        margin: 15px 0px;
    }

    .headerinfo-cajas {
        overflow: hidden;
        flex-direction: row-reverse;
        justify-content: flex-end;
        margin-right: 30px;
        position: relative;
        display: inline-block;
    }

    .headerinfo-cajas__titulo {
        color: black;
        font-size: 18px;
    }

    .headerinfo-cajas__titulo-center {
        color: black;
        font-size: 18px;
        text-align: center;
    }

    .headerinfo-cajas__subtitulo {
        color: #796f6a;
        font-size: 12px;
    }

    .headerinfo-cajas__subtitulo-2 {
        font-size: 15px;
    }

    .iconos {
        display: flex;
        flex-direction: column;
    }

    .descripcion {
        display: flex;
    }
    .headerinfo-cajas__icon {
        width: 15px;
        height: 15px;
        margin-bottom: 10px;
    }
<!DOCTYPE html>
<html>

<head>
    <title>Toggle</title>
</head>

<body>
    <section class="headerinfo">
        <div class="container-left">

            <div class="headerinfo-cajas">
                <h1 class="headerinfo-cajas__titulo">Casa Sofia en El Palomar</h1>
                <div class="iconos">
                    <div class="descripcion">
                        <img class="headerinfo-cajas__icon" src="../maquetacion-principal/assets/star.png" alt="Estrella">
                        <p class="headerinfo-cajas__subtitulo">3 personas han ofertado por esta propiedad</p>
                    </div>
                    <div class="descripcion">
                        <img class="headerinfo-cajas__icon" src="../maquetacion-principal/assets/location.png" alt="Ubicacion">
                        <p class="headerinfo-cajas__subtitulo">El Palomar, Tlajomulco, Jalisco</p>
                    </div>
                </div>
            </div>

            <div class="headerinfo-cajas">
                <h3 class="headerinfo-cajas__titulo-center">$6.0</h3>
                <p class="headerinfo-cajas__subtitulo-2">millones</p>
            </div>

            <div class="headerinfo-cajas">
                <h3 class="headerinfo-cajas__titulo-center">4</h3>
                <p class="headerinfo-cajas__subtitulo-2">hab</p>
            </div>

            <div class="headerinfo-cajas">
                <h3 class="headerinfo-cajas__titulo-center">4</h3>
                <p class="headerinfo-cajas__subtitulo-2">baños</p>
            </div>

            <div class="headerinfo-cajas">
                <h3 class="headerinfo-cajas__titulo-center">945 mt2</h3>
                <p class="headerinfo-cajas__subtitulo-2">$6,349 / mt2</p>
            </div>

        </div>

    </section>
</body>
</html>

1
  • Gracias Eduardo, me funciono, supongo que para el boton que quiero poner de lado derecho tambien tendré que separarlo en un div, cierto? :)
    – Ali Pizra
    Commented el 12 abr. 2021 a las 16:08
0

Bienvenido,

Parece que el problema principal lo tienes en la forma en que has marcado los elementos en html, concretamente esta parte:

<div class="headerinfo-cajas">
    <h1 class="headerinfo-cajas__titulo">Casa Sofia en El Palomar</h1>
    <p class="headerinfo-cajas__subtitulo">3 personas han ofertado por esta propiedad</p>
    <p class="headerinfo-cajas__subtitulo">El Palomar, Tlajomulco, Jalisco</p>
    
    <div class="iconos">
        <img class="headerinfo-cajas__icon" src="../maquetacion-principal/assets/star.png" alt="Estrella">
        <img class="headerinfo-cajas__icon" src="../maquetacion-principal/assets/location.png" alt="Ubicacion">
    </div>
</div>

Con esto lo que creas es una caja que contiene cuatro elementos:

  • El elemento <h1>
  • Dos elementos <p>
  • Un elemento <div> (con dos iconos)

Mientras que según tu maqueta, lo que quieres ahí es:

  • Un elemento <h1>
  • Dos elementos <div>, cada uno de ellos con un elemento y un elemento

<div>
    <img src="el-icono-estrella" alt="⭐">
    <p>3 personas han hecho ofertas para esta propiedad</p>
</div>

En el CSS tienes que hacer ese <div> un elemento flex con los elementos en una línea.

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.