Мудборд #1 "Цвет настроения"
‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑
Праздник, любимые напитки, танцы, украшения, маски/
(Это не парный, он будет позже)
[html]<style>
.acol {
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
box-shadow: 0 0 6px rgba(0,0,0,0.2);
transform: translate(-53%, -172%);
pointer-events: none;
}
.acol.acol-1 { left: 17%; top: 15%; }
.acol.acol-2 { left: 17%; top: 29%; }
.acol.acol-3 { left: 17%; top: 44%; }
.acol.acol-4 { left: 17%; top: 58%; }
</style>
<div class="base_table">
<div class="pinterest-grid">
<div class="cell"><img src="https://i.pinimg.com/736x/d1/57/47/d157473c5c7d40cb75d36f9dc9c1b185.jpg" alt=""></div>
<div class="cell span-2x2"><img src="https://i.pinimg.com/1200x/c0/c7/74/c0c77402fd081330351c2263887c805b.jpg" alt=""></div>
<div class="cell span-2x1"><img src="https://i.pinimg.com/736x/3e/f9/e5/3ef9e5978f7e0fb88a9b20d500866604.jpg" alt=""></div>
<div class="cell"><img src="https://i.pinimg.com/1200x/ff/34/37/ff3437f9d4c703905b9cf61f3e6315e6.jpg" alt=""></div>
<div class="cell"><img src="https://propagandahistory.ru/pics/2016/04/1460843711_bcb9.jpg" alt=""></div>
<div class="cell span-1x2"><img src="https://i.pinimg.com/1200x/3b/cb/99/3bcb99aad56fbe00ed1296ad78d2c4b2.jpg" alt=""></div>
<div class="cell"><img src="https://i.pinimg.com/736x/99/9d/bb/999dbbf92d9e1acb460bafb3f1c7ccdc.jpg" alt=""></div>
<div class="cell"><img src="https://i.pinimg.com/1200x/23/9a/ee/239aee3ad6a6285358a60c4b72fed371.jpg" alt=""></div>
<div class="cell span-2x1"><img src="https://i.pinimg.com/originals/62/58/a7/6258a79c1901acebf8e6b1295e038bca.gif" alt=""></div>
<div class="cell"><img src="https://i.pinimg.com/736x/89/1d/fc/891dfcc33e14d2bf9affa7608d4fb6c4.jpg" alt=""></div>
<div class="cell span-2x1"><img src="https://i.pinimg.com/1200x/9c/ea/ed/9ceaed63c846697688f64f0abd5e8d1a.jpg" alt=""></div>
<!-- цветовые кружки -->
<div class="acol acol-1" style="background:#030303;"></div>
<div class="acol acol-2" style="background:#e7dcd0;"></div>
<div class="acol acol-3" style="background:#91a6d0;"></div>
<div class="acol acol-4" style="background:#d78da3;"></div>
</div>
</div>
[/html]
Код:[html] <style>.acol { position: absolute; width: 70px; height: 70px; border-radius: 50%; box-shadow: 0 0 6px rgba(0,0,0,0.2); transform: translate(-53%, -172%); pointer-events: none; } .acol.acol-1 { left: 17%; top: 15%; } .acol.acol-2 { left: 17%; top: 29%; } .acol.acol-3 { left: 17%; top: 44%; } .acol.acol-4 { left: 17%; top: 58%; }</style> <div class="base_table"> <div class="pinterest-grid"> <div class="cell"><img src="ссылка" alt=""></div> <div class="cell span-2x2"><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 span-2x1"><img src="ссылка" alt=""></div> <div class="cell"><img src="ссылка" alt=""></div> <div class="cell span-2x1"><img src="ссылка" alt=""></div> <!-— цветовые кружки, где нужно поменять цвет под свой мудборд --> <div class="acol acol-1" style="background:#030303;"></div> <div class="acol acol-2" style="background:#e7dcd0;"></div> <div class="acol acol-3" style="background:#91a6d0;"></div> <div class="acol acol-4" style="background:#d78da3;"></div> </div> </div>[/html]
