Мудборд #1 "Теневая сторона персонажа"
‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑
тайные желания, страхи и скрытые мотивы
Код:[html]<div class="base_table"> <div class="pinterest-grid"> <div class="cell span-2x2"><img src="ссылка" alt=""></div> <div class="cell"><img src="ссылка" alt=""></div> <div class="cell span-2x1"><img src="ссылка" alt=""></div> <div class="cell"><img src="ссылка" alt=""></div> <div class="cell"><img src="ссылка" alt=""></div> <div class="cell span-1x2"><img src="ссылка" alt=""></div> <div class="cell"><img src="ссылка" alt=""></div> <div class="cell"><img src="ссылка" alt=""></div> <div class="cell"><img src="ссылка" alt=""></div> <div class="cell span-2x1"><img src="ссылка" alt=""></div> <div class="cell span-2x1"><img src="ссылка" alt=""></div> </div> </div>[/html]
[html]<style>
.pinterest-grid {
width: 900px;
height: 600px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 0;
overflow: hidden;
position: relative;
margin: 0 auto;
margin-bottom: -160px;
}
.pinterest-grid .cell {
position: relative;
overflow: hidden;
}
.pinterest-grid .cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Хаотичные размеры */
.pinterest-grid .span-2x2 {
grid-column: span 2;
grid-row: span 2;
}
.pinterest-grid .span-2x1 {
grid-column: span 2;
}
.pinterest-grid .span-1x2 {
grid-row: span 2;
}
</style>
<div class="base_table">
<div class="pinterest-grid">
<div class="cell span-2x2"><img src="https://i.pinimg.com/1200x/a6/2b/04/a62b04355f6446ec02a5e54a53f1bf25.jpg" alt=""></div>
<div class="cell"><img src="https://i.pinimg.com/1200x/ac/ea/a5/aceaa51d370b0d0af265fb7c9a8dd341.jpg" alt=""></div>
<div class="cell span-2x1"><img src="https://i.pinimg.com/736x/93/b8/aa/93b8aaf050d18eb8c1dcd181310f78cf.jpg" alt=""></div>
<div class="cell"><img src="https://i.pinimg.com/736x/8c/ea/7e/8cea7e02c40b2fed3607cd38cf539601.jpg" alt=""></div>
<div class="cell"><img src="https://i.pinimg.com/736x/75/e2/3b/75e23ba528b9409c1d0f7268b673cc98.jpg" alt=""></div>
<div class="cell span-1x2"><img src="https://i.pinimg.com/1200x/4d/1a/d1/4d1ad16a0be06214dad6501e8ef0dd97.jpg" alt=""></div>
<div class="cell"><img src="https://i.pinimg.com/736x/ca/bf/85/cabf85bb5abe3d1f6a6f285d13d7631f.jpg" alt=""></div>
<div class="cell"><img src="https://i.pinimg.com/736x/8e/52/cf/8e52cfeb8cd2b2d00c5060d7428a2391.jpg" alt=""></div>
<div class="cell"><img src="https://i.pinimg.com/736x/cb/43/f3/cb43f3b5520eade539b7f5f7ade301a7.jpg" alt=""></div>
<div class="cell span-2x1"><img src="https://i.pinimg.com/736x/e0/e2/fa/e0e2fa7bd9380ee3661a481a2d0866b2.jpg" alt=""></div>
<div class="cell span-2x1"><img src="https://i.pinimg.com/1200x/54/4e/f6/544ef6c2f1cd57d28f0938cda0ecbec3.jpg" alt=""></div>
</div>
</div>
[/html]
