эстетик героя / мудборд

Поделиться1Вчера 20:51:50

Автор: алга
Администратор
Сообщений: 65
Уважение: +28
Последний визит:
Сегодня 14:10:03

кто-то накидывает образ персонажа текстом, кто-то собирает музыку, кто-то — доску на пинтересте. мы объединили все вместе с небольшой мудборд, которым можно поделиться в этой теме. не воспринимайте все слишком серьезно, это такой небольшой пинок для вдохновения и осознания своего персонажа. копируйте код в ответ, заменяйте строчки картинка_что-то там на ссылки (можно взять любую по высоте и ширине картинку, она автоматически подрежется под квадрат и нужный размер) и выкладывайте сюда. самые продвинутые могут заменить фразы в title на пояснения к своим картинкам.
p.s. если что-то заставляет задуматься (код или выбор картинки), пишите в мыслефлуде, разберемся коллективно.

[html]<style>
.responsive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
aspect-ratio: 1 / 1;
width: 100%;
max-width: 100%;
background-color: white;
gap: 4px;
}

.responsive-grid > div {
aspect-ratio: 1 / 1;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.responsive-grid img {
width: 80%;
height: 80%;
object-fit: cover;
display: block;
border-radius: 2px;
}
</style>

<div class="responsive-grid">
<div><img src="https://i.imgur.com/dk0KbJq.png" alt=""></div>
<div><img src="https://i.imgur.com/jVPlZ2g.png" alt=""></div>
<div><img src="https://i.imgur.com/gO7lOzo.png" alt=""></div>
<div><img src="https://i.imgur.com/SXYpWAL.png" alt=""></div>
<div><img src="https://i.imgur.com/4rY1mqK.png" alt=""></div>
<div><img src="https://i.imgur.com/AFZG3N9.png" alt=""></div>
<div><img src="https://i.imgur.com/HabwdHZ.png" alt=""></div>
<div><img src="https://i.imgur.com/MCbCzY2.png" alt=""></div>
<div><img src="https://i.imgur.com/nCqYRpx.png" alt=""></div>
</div>
[/html]

Код:

[html]<style>
  .responsive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 100%;
    background-color: white;
    gap: 4px;
  }

  .responsive-grid > div {
    aspect-ratio: 1 / 1;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .responsive-grid img {
    width: 90%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 2px;
  }
</style>

<div class="responsive-grid">
  <div><img src="картинка_раса" alt="" title="раса"></div>
  <div><img src="картинка_цитата" alt="" title="цитата"></div>
  <div><img src="картинка_одежда" alt="" title="одежда"></div>
  <div><img src="картинка_запах" alt="" title="запах"></div>
  <div><img src="картинка_фотография персонажа" alt="" title="фотография персонажа"></div>
  <div><img src="картинка_профессия" alt="" title="профессия"></div>
  <div><img src="картинка_песня/обложка альбома" alt=""  title="песня/обложка альбома"></div>
  <div><img src="картинка_природа" alt="" title="природа"></div>
  <div><img src="картинка_эмоциональное состояние" alt="" title="эмоциональное состояние"></div>
</div>
[/html]

+4

Поделиться2Вчера 20:54:54

Автор: алга
Администратор
Сообщений: 65
Уважение: +28
Последний визит:
Сегодня 14:10:03

[html]<style>
.responsive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
aspect-ratio: 1 / 1;
width: 100%;
max-width: 100%;
background-color: white;
gap: 4px;
}

.responsive-grid > div {
aspect-ratio: 1 / 1;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.responsive-grid img {
width: 90%;
height: 90%;
object-fit: cover;
display: block;
border-radius: 2px;
}
</style>

<div class="responsive-grid">
<div><img src="https://i.pinimg.com/736x/73/b2/3c/73b23cc646a3d3b3dcf381b15e692599.jpg" alt="" title="раса"></div>
<div><img src="https://i.pinimg.com/736x/88/0c/97/880c97d55258eb2ae68662882ec8df1e.jpg" alt="" title="цитата"></div>
<div><img src="https://i.pinimg.com/736x/2d/b9/ae/2db9ae42498b63b127e84a770d7e76b6.jpg" alt="" title="одежда"></div>
<div><img src="https://i.pinimg.com/736x/5e/21/44/5e214493c89d9b58193a7d6250fc05cb.jpg" alt="" title="запах"></div>
<div><img src="https://i.pinimg.com/736x/91/5e/56/915e56e37fa246da1360a41b5d03c539.jpg" alt="" title="фотография персонажа"></div>
<div><img src="https://i.pinimg.com/736x/1a/65/b5/1a65b57b22cdceaa582c8085b9e40bd8.jpg" alt="" title="профессия"></div>
<div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhL-od1HxxY1tB4OO0lDS_ZFW-ltirRfpFoA&s" alt="" title="песня/обложка альбома"></div>
<div><img src="https://i.pinimg.com/736x/13/83/7a/13837aec326e3012e498a96541849a3f.jpg" alt="" title="природа"></div>
<div><img src="https://i.pinimg.com/736x/4f/a5/f7/4fa5f705f93c5c2a2dcceb78603c2eab.jpg" alt="" title="эмоциональное состояние"></div>
</div>
[/html]

+4

Поделиться3Вчера 22:02:59

Автор: горгона
беспризорник
Сообщений: 42
Уважение: +26
Последний визит:
Сегодня 11:52:27

[html]<style>
.responsive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
aspect-ratio: 1 / 1;
width: 100%;
max-width: 100%;
background-color: white;
gap: 4px;
}

.responsive-grid > div {
aspect-ratio: 1 / 1;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.responsive-grid img {
width: 90%;
height: 90%;
object-fit: cover;
display: block;
border-radius: 2px;
}
</style>

<div class="responsive-grid">
<div><img src="https://i.pinimg.com/736x/da/eb/d3/daebd3aaeae01f2b30742bceb9a6395b.jpg" alt="" title="раса"></div>
<div><img src="https://i.pinimg.com/736x/44/11/37/441137a9569121bda21e7b501e2673d8.jpg" alt="" title="цитата"></div>
<div><img src="https://i.pinimg.com/736x/46/3d/d2/463dd2195161213ec62236a63ef98899.jpg" alt="" title="одежда"></div>
<div><img src="https://i.pinimg.com/736x/f1/61/7e/f1617e006f34af8f853982f7228afcba.jpg" alt="" title="запах"></div>
<div><img src="https://i.pinimg.com/736x/da/48/ee/da48eee4c40709e9482cc0b879848208.jpg" alt="" title="фотография персонажа"></div>
<div><img src="https://i.pinimg.com/736x/f5/47/2f/f5472fdb0700c1ef6eba46fbb6341a70.jpg" alt="" title="профессия"></div>
<div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDka1OUf4xDgMAG_Qy2mTO_YAf4KFaYSg_Nw&s" alt="" title="песня/обложка альбома"></div>
<div><img src="https://i.pinimg.com/736x/33/21/e3/3321e34e7fb774a78d11cc9264c0d9e3.jpg" alt="" title="природа"></div>
<div><img src="https://i.pinimg.com/736x/c7/8e/54/c78e54a4419ee4e83be987bdb59ef3b5.jpg" alt="" title="эмоциональное состояние"></div>
</div>
[/html]

+5

Поделиться4Вчера 23:06:20

Автор: богиня дискотеки
беспонтово
Сообщений: 147
Уважение: +53
Последний визит:
Сегодня 14:23:32

[html]<style>
.responsive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
aspect-ratio: 1 / 1;
width: 100%;
max-width: 100%;
background-color: white;
gap: 4px;
}

.responsive-grid > div {
aspect-ratio: 1 / 1;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.responsive-grid img {
width: 90%;
height: 90%;
object-fit: cover;
display: block;
border-radius: 2px;
}
</style>

<div class="responsive-grid">
<div><img src="https://i.pinimg.com/736x/f8/c5/be/f8c5be3185250cfd56af2892a5567d13.jpg" alt="" title="раса"></div>
<div><img src="https://i.pinimg.com/736x/83/0c/e3/830ce3391d85d9a7f106df85433a290b.jpg" alt="" title="цитата"></div>
<div><img src="https://i.pinimg.com/736x/09/9d/1c/099d1cd48e8985cc395da529630d4b69.jpg" alt="" title="одежда"></div>
<div><img src="https://i.pinimg.com/736x/60/51/d8/6051d8f2b48087bc483a1e6e2aa90dc9.jpg" alt="" title="запах"></div>
<div><img src="https://i.scdn.co/image/ab6761610000e5eb226947a3e8f0f5434ee7c6b4" alt="" title="фотография персонажа"></div>
<div><img src="https://i.pinimg.com/736x/42/63/b1/4263b1917ac110cde6269949d9bacfa2.jpg" alt="" title="профессия"></div>
<div><img src="https://avatars.yandex.net/get-music-content/10641165/ad76b0a5.a.29719904-1/300x300" alt="" title="песня/обложка альбома"></div>
<div><img src="https://i.pinimg.com/736x/90/c5/f5/90c5f543753566d7d0f266c678b56a65.jpg" alt="" title="природа"></div>
<div><img src="https://i.pinimg.com/736x/15/26/0d/15260df20cfee32e8c889d3d24725557.jpg" alt="" title="эмоциональное состояние"></div>
</div>
[/html]

+5

Поделиться5Сегодня 00:28:02

Автор: хамелеон
беспризорник
Сообщений: 13
Уважение: +13
Последний визит:
Сегодня 14:32:33

[html]<style>
.responsive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
aspect-ratio: 1 / 1;
width: 100%;
max-width: 100%;
background-color: white;
gap: 4px;
}

.responsive-grid > div {
aspect-ratio: 1 / 1;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.responsive-grid img {
width: 90%;
height: 90%;
object-fit: cover;
display: block;
border-radius: 2px;
}
</style>

<div class="responsive-grid">
<div><img src="https://i.pinimg.com/736x/27/1b/4c/271b4ca79167f72311347c3f3285c1ad.jpg" alt="" title="хамелеон"></div>
<div><img src="https://i.pinimg.com/736x/03/b0/d1/03b0d112b4fbb64e173ab5ffcdf78d6c.jpg" alt="" title="цитата"></div>
<div><img src="https://i.pinimg.com/736x/d6/14/90/d614901cbf6d643da92efafa3ed52f27.jpg" alt="" title="одежда"></div>
<div><img src="https://i.pinimg.com/736x/88/4a/9f/884a9fe406ceeeb9d7ee6e1ea1118f69.jpg" alt="" title="жаркое солнце, волна, горячий песок"></div>
<div><img src="https://i.pinimg.com/736x/53/65/6a/53656ac5dbbc0f5db9490b6854365d3a.jpg" alt="" title="эйса"></div>
<div><img src="https://i.pinimg.com/736x/27/4b/ce/274bcec70b59486e2de288c5d1495007.jpg" alt="" title="тссс... это секрет"></div>
<div><img src="https://i.pinimg.com/736x/18/0e/0b/180e0b842b615ddfae0ce6e60c21fbd9.jpg" alt="" title="песня"></div>
<div><img src="https://i.pinimg.com/736x/da/d0/a0/dad0a0649942889921c22c8f04405156.jpg" alt="" title="побережье"></div>
<div><img src="https://i.pinimg.com/736x/61/44/fc/6144fcab00534537dea9ff97a7502e05.jpg" alt="" title="fell in love"></div>
</div>
[/html]

+3

Halazia

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

эстетик героя / мудборд

Сообщений 1 страница 5 из 5

Поделиться1Вчера 20:51:50

Поделиться2Вчера 20:54:54

Поделиться3Вчера 22:02:59

Поделиться4Вчера 23:06:20

Поделиться5Сегодня 00:28:02