Galeria de fotos responsiva html css



        <div>

            <div class="galeria">

                <div class="contenedorq">

                    <img src="img/mlmsoftwarek chica sillon celular.png" />

                    <div class="centradoq">Maneje su empresa MLM desde casa miestras disfruta de la comodidad</div>

                  </div>

                  <div class="contenedorq">

                    <img src="img/mlmsoftwarek madre con nino bebe celular.png" />

                    <div class="centradoq">Maneje su empresa MLM desde casa miestras cuida disfruta con su bebé</div>

                  </div>

                  <div class="contenedorq">

                    <img src="img/mlmsoftwarek celular pareja yate.png" />

                    <div class="centradoq">Siga ganando dinero mientras pasea en su yate junto a su pareja</div>

                  </div>

                  <div class="contenedorq">

                    <img src="img/mlmsoftwarek joven en el parque copn celular.png" />

                    <div class="centradoq">Administre desde la App mientras disfruta en el parque</div>

                  </div>

                  <div class="contenedorq">

                    <img src="img/mlmsoftwarek pareja en la ventana.png" />

                    <div class="centradoq">Una vez que haya tomado la decisión de emprender, el software trabajará por tí</div>

                  </div>

                  <div class="contenedorq">

                    <img src="img/mlmsoftwarek madre soltera con su hijo celular.png" />

                    <div class="centradoq">Revice sus ganancias mientras pasa los mejores momentos on su hijo</div>

                  </div>


              </div>


              <style>

                .contenedorq{

                    position: relative;

                    display: inline-block;

                    text-align: center;

                }

                 

                

                .centradoq{

                    position: absolute;

                    top: 20%;

                    left: 60%;

                    transform: translate(-50%, -50%);

                    font-size: 14px;

                    color: rgb(0, 5, 8);

                    text-shadow: -1px 0 rgb(143, 232, 246), 0 1px rgb(143, 232, 246), 1px 0 rgb(143, 232, 246), 0 -1px rgb(143, 232, 246);        

                }

                

                </style>


<!-- style de imagen comienza -->

              <style>

                .galeria{

  display: flex;

  flex-flow: wrap;

  justify-content: center;

}


.galeria img{

  max-width: 400px;

  padding: 1rem;

}

              </style>

        </div>

Comentarios

Entradas más populares de este blog

Mensaje emergente html css con nota y boton