Staff en línea

[html]Escaparate de imágenes sencillo
Tema iniciado por y Añadir a favoritos

[html]Escaparate de imágenes sencillo 
el Vie Dic 15, 2017 2:28 pm
staff
[codebox]Un lindo escaparate de imagenes[/codebox]

DEMO
https://www.opensourcephpbb3.com/h38-escapartate


CSS
[hidecode]
Código:
main-sect {
background: #fff;
    border: 4vw solid #fff;
    display: grid;
    grid-gap: 1vw;
    grid-template: repeat(5, 1fr)/repeat(5, 1fr);
    width: auto;
    height: auto;
    margin: 0 auto;
}

section {
  display: grid;
  grid-template: 1fr 1fr 4fr 1fr 1fr / 1fr 1fr 2fr 1fr 1fr;
}

section:nth-of-type(25n + 1)
div {
  background-color: #b71c1c;
}

section:nth-of-type(25n + 2)
div {
  background-color: #880e4f;
}

section:nth-of-type(25n + 3)
div {
  background-color: #4a148c;
}

section:nth-of-type(25n + 4)
div {
  background-color: #311b92;
}

section:nth-of-type(25n + 5)
div {
  background-color: #1a237e;
}

section:nth-of-type(25n + 6)
div {
  background-color: #0d47a1;
}

section:nth-of-type(25n + 7)
div {
  background-color: #01579b;
}

section:nth-of-type(25n + 8)
div {
  background-color: #006064;
}

section:nth-of-type(25n + 9)
div {
  background-color: #004d40;
}

section:nth-of-type(25n + 10)
div {
  background-color: #1b5e20;
}

section:nth-of-type(25n + 11)
div {
  background-color: #1b5e20;
}

section:nth-of-type(25n + 12)
div {
  background-color: #33691e;
}

section:nth-of-type(25n + 13)
div {
  background-color: #827717;
}

section:nth-of-type(25n + 14)
div {
  background-color: #f57f17;
}

section:nth-of-type(25n + 15)
div {
  background-color: #ff6f00;
}

section:nth-of-type(25n + 16)
div {
  background-color: #e65100;
}

section:nth-of-type(25n + 17)
div {
  background-color: #bf360c;
}

section:nth-of-type(25n + 18)
div {
  background-color: #d50000;
}

section:nth-of-type(25n + 19)
div {
  background-color: #c51162;
}

section:nth-of-type(25n + 20)
div {
  background-color: #aa00ff;
}

section:nth-of-type(25n + 21)
div {
  background-color: #6200ea;
}

section:nth-of-type(25n + 22)
div {
  background-color: #304ffe;
}

section:nth-of-type(25n + 23)
div {
  background-color: #2962ff;
}

section:nth-of-type(25n + 24)
div {
  background-color: #0091ea;
}

section:nth-of-type(25n + 25)
div {
  background-color: #00b8d4;
}

div::before {
  font-size: 0.75em;
}

.one {
  grid-column: 3;
  grid-row: 3;
}

section div img {
  width: 150px;
  height: 220px;
}

.two {
  grid-column: 2;
  grid-row: 3;
  opacity: 0.9;
}

.three {
  grid-column: 2 / span 2;
  grid-row: 4;
  opacity: 0.8;
}

.four {
  grid-column: 4;
  grid-row: 3 / span 2;
  opacity: 0.7;
}

.five {
  grid-column: 2 / span 3;
  grid-row: 2;
  opacity: 0.6;
}

.six {
  grid-column: 1;
  grid-row: 2 / span 3;
  opacity: 0.5;
}

.seven {
  grid-column: 1 / span 4;
  grid-row: 5;
  opacity: 0.4;
}

.eight {
  grid-column: 5;
  grid-row: 2 / span 4;
  opacity: 0.3;
}

.nine {
  grid-column: 1 / span 5;
  opacity: 0.2;
}
[/hidecode]

HTML
[hidecode]
Código:
<main-sect>
      <section>

    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
  </section>
  <section>
    <div class="one"><img src="https://images.gr-assets.com/users/1352063476p6/9991386.jpg"/></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
 
  </section>
</main-sect>
[/hidecode]
[likepost][time="20/05/18 - 9:16 hrs."][avatar="https://s.yimg.com/wv/images/cbe5af0680d53694356a643fe831528c_96.jpeg" user_id="https://source.foroactivo.com/u105"][userlike="https://source.foroactivo.com/u105"] Ysamar[/userlike], [time="11/05/18 - 18 hrs."][avatar="https://s.yimg.com/wv/images/cbe5af0680d53694356a643fe831528c_96.jpeg" user_id="https://www.opensourcephpbb3.com/u105"][userlike="https://www.opensourcephpbb3.com/u105"] Ysamar[/userlike][/likepost]
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html]Escaparate de imágenes sencillo 
el Vie Dic 15, 2017 2:30 pm
MO-RI
jajaja
¡¡Que hermosura!! Muchas gracias Rin por el aporte thumbss
Andreii
avatar

¿Que estoy pensando? :

Regresando a Open ^^ [table class=fecha_up][td]Se modifico:14/08/18 - 10:52 hrs. [/td][/table]


Banner en temas :

http://static.tumblr.com/376a46baffe3444282f3b414a2fd0d46/jsyqb9t/qxbnm1bqy/tumblr_static_tumblr_static_4eo5pzujbwcg8gws0gcc8oc0s_focused_v3.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

144


Puntos :

169


Me gusta :

21


ingreso :

21/01/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html]Escaparate de imágenes sencillo 
el Miér Mayo 09, 2018 1:05 pm
ay que chuli! me parece una gran idea! gracias por el aporte
Ysamar
avatar

¿Que estoy pensando? :

jjp´j [table class=fecha_up][td]Se modifico:10/05/18 - 19:04 hrs. [/td][/table]


Banner en temas :

http://descargarimagenestiernas.com/wp-content/uploads/2015/07/imagenes-tiernas-con-frases-para-descargar-3.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

68


Puntos :

78


Me gusta :

10


ingreso :

28/11/2015


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.