test forum

мультивселенная / порталы / путешествия по мирам

Maybe there's a universe out there - happening now - where we end up together and when I close my eyes at night, I'm not dreaming the way a normal person would. Instead I'm seeing flashes of our lives in the multiverse. They're not simple dreams because I miss you, right? They're scientific, anachronistic visions.
40%
up
down

Площадка безуууумия

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

Привет, Гость! Войдите или зарегистрируйтесь.



dfgfh

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

1

fghgh

0

2

[html]<style>
/*переменные для стиля*/
#game {
    --c: 200px; /*Высота блока, высота картинки*/
    --b: #dbc3db; /*цвет текста, цвет рамки*/
    --g: 500px; /*ширина картинки, ширина рамки, ширина таблицы*/
    --f: "helvetica"; /*опционально - шрифт блока*/}
/*стили блока с картинкой*/
.e1 {
  padding: 7px;
  border: 1px solid var(--b);
  height: calc(var (--c));
  width: calc(var(--g));
}
/*стиль самой картинки*/ 
.e1 img {
  width: calc(var(--g));
  height: calc(var(--c));
}
/*стиль названия эпизода*/
.e2 {
  width: 70px;
  border-right: 1px solid var(--b)!important;
  color: var(--b);
  vertical-align: top;
  padding-right: 10px!important;
  text-align:  right;  font-size:  30px;
  font-family:  impact;
text-shadow: 2px 2px 2px #fff;
}
/*стиль описания эпизода*/ 
.e3 {
  padding: 10px;
  text-align: justify;
  padding-right: 0px;
  vertical-align: top;
}
/*по желанию - стиль буквицы*/
//  .e3::first-letter {
  float: left;
  line-height: 35px;
  font-size: 3em;
  color: var(--b);
  border: solid var(--b);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 5px;
  margin-bottom: -5px;
   }
/*стиль блока участники*/ 
.e4 {
  padding: 7px;
  border: 1px solid var(--b);
  width: calc(var(--g));
    height: 22px;
    font-size: 1.1em;
    font-family: var(--f);
}
<style>

<div id="game">
<div align="center">
<div class="e1"><img src="https://dummyimage.com/500x200/dbc3db/fff.jpg"></div>
<table style="width:calc(var(--g));" border="0">
    <tbody>
    <tr>
        <td class="e2">Название эпизода</td>
        <td class="e3">
Описание эпизода:
<br>
        — Вэй Усянь мёртв! Вот так прекрасные новости!<br>
<br>
Не прошло и дня с осады горы Луаньцзан, как добрые вести разлетелись среди заклинателей, будто на крыльях, ничуть не уступая в скорости когда-то разгоревшемуся пожару войны. И в самых именитых кланах, и среди простых бродячих заклинателей — всюду оживленно обсуждали осаду, которую возглавили Четыре Великих Ордена, собрав под свои знамёна сотни союзников.
        </td>
    </tr>
    </tbody>
</table>
<div class="e4">
     Участники эпизода
</div>
</div></div>[/html]

0

3

[html]<style>
/*переменные для стиля*/
#game {
    --c: 200px; /*Высота блока, высота картинки*/
    --b: #dbc3db; /*цвет текста, цвет рамки*/
    --g: 500px; /*ширина картинки, ширина рамки, ширина таблицы*/
    --f: "helvetica"; /*опционально - шрифт блока*/}
/*стили блока с картинкой*/
.e1 {
  padding: 7px;
  border: 1px solid var(--b);
  height: calc(var (--c));
  width: calc(var(--g));
}
/*стиль самой картинки*/ 
.e1 img {
  width: calc(var(--g));
  height: calc(var(--c));
}
/*стиль названия эпизода*/
.e2 {
  width: 70px;
  border-right: 1px solid var(--b)!important;
  color: var(--b);
  vertical-align: top;
  padding-right: 10px!important;
  text-align:  right;  font-size:  30px;
  font-family:  impact;
text-shadow: 2px 2px 2px #fff;
}
/*стиль описания эпизода*/ 
.e3 {
  padding: 10px;
  text-align: justify;
  padding-right: 0px;
  vertical-align: top;
}
/*по желанию - стиль буквицы*/
//  .e3::first-letter {
  float: left;
  line-height: 35px;
  font-size: 3em;
  color: var(--b);
  border: solid var(--b);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 5px;
  margin-bottom: -5px;
   }
/*стиль блока участники*/ 
.e4 {
  padding: 7px;
  border: 1px solid var(--b);
  width: calc(var(--g));
    height: 22px;
    font-size: 1.1em;
    font-family: var(--f);
}
<style>[/html]
[html]
<div id="game">
<div align="center">
<div class="e1"><img src="https://dummyimage.com/500x200/dbc3db/fff.jpg"></div>
<table style="width:calc(var(--g));" border="0">
    <tbody>
    <tr>
        <td class="e2">Название эпизода</td>
        <td class="e3">
Описание эпизода:
<br>
        — Вэй Усянь мёртв! Вот так прекрасные новости!<br>
<br>
Не прошло и дня с осады горы Луаньцзан, как добрые вести разлетелись среди заклинателей, будто на крыльях, ничуть не уступая в скорости когда-то разгоревшемуся пожару войны. И в самых именитых кланах, и среди простых бродячих заклинателей — всюду оживленно обсуждали осаду, которую возглавили Четыре Великих Ордена, собрав под свои знамёна сотни союзников.
        </td>
    </tr>
    </tbody>
</table>
<div class="e4">
     Участники эпизода
</div>
</div></div>[/html]

0

4

Код:
[html]<style>
.osnova {
    width: 500px;
    height: 450px;
    background-color: #b2a087b5;
    margin: auto;
    box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
    overflow-y: scroll;
    border: 4px double #dcc5c5;
    border-bottom: 4px double #dcc5c5;
}


.taprim {
    display: flex;
    flex-wrap: wrap;
    width: 470px;
    height: auto;
 

}

.epprim {
    width: 200px;
    padding: 5px 15px;
     background: radial-gradient(360% 60%, #4b0000, #340000);
    text-align: center;
    font-size: 14px;
    font-family: 'Oswald';
    color: #d0c3b3;
    text-shadow: #fdf5f5 0 0 12px;
margin-left: 5px;
}


.whenprim {
     width: 200px;
    padding: 5px 15px;
    background: radial-gradient(360% 60%, #4b0000, #340000);
    text-align: center;
    font-size: 14px;
    font-family: 'Oswald';
    color: #d0c3b3;
    text-shadow: #fdf5f5 0 0 12px;
margin-left: 5px;
}

.tables {
    display: flex;
    flex-wrap: wrap;
    width: 470px;
    height: auto;
}

.episodes {
    width: 200px;
    height: auto;
    padding: 5px 15px;
    color: #5b432c;
    font-family: arial;
    background-color: #d6c4ab;
    text-align: center;
    border-radius: 5%;
    margin-bottom: 5px;
    border: 5px;
    margin-left: 5px;
    margin-top: 5px;
}



.when {
    width: 200px;
    height: auto;
    padding: 5px 15px;
    color: #5b432c;
    font-family: arial;
    background-color: #d6c4ab;
    text-align: center;
    border-radius: 5%;
    margin-bottom: 5px;
    border: 5px;
    margin-left: 5px;
    margin-top: 5px;
}

.shapka {
    margin: auto;
    width: 507px;
height: auto;
    background: radial-gradient(360% 60%, #4b0000, #060202);
    text-align: center;
    font-size: 32px;
    font-family: 'Oswald';
    color: #d0c3b3;
    text-shadow: #fdf5f5 0 0 12px;
    padding-top: 15px;
display: flex;
    flex-wrap: wrap;
}

.art {
    margin-left: 25px;
    margin-bottom: 15px;
    width: 100px;
}

.cita {
    text-align: center;
    text-transform: uppercase;
}
.citate{
    text-align: center;
    font-family: Arial Narrow;
    font-size: 12px;
}

.obob {
display: flex;
flex-direction: column;
width: 350px;
height: auto;
}

.episodes  a:hover {
    color: #a59c4c; /* Цвет ссылки при наведении на нее курсора мыши */  
    text-decoration: underline; /* Добавляем подчеркивание */
   }
<style>[/html]

[html]<div class="shapka">
<div class="art"><img src="https://i.ibb.co/n3KbPpr/111.png"></div>
<div class="obob">
<div class="cita">хронология</div>
<div class="citate">Здесь должна быть цитата</div>
</div>
</div>


<div class="osnova">

<div class="taprim">
<div class="epprim">Название эпизода</div>
<div class="whenprim">Дата</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода может быть длинным, поэтому в ячейке "дата" я написала комментарий, чтобы наглядно показать</a></div>
<div class="when">00.00.00<br>
(здесь может быть ваша реклама)</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>

</div>
[/html]

0

5

[html]<link rel="stylesheet" href="https://forumstatic.ru/files/001c/6d/19/59343.css?v=3">

<div class="gallery">
<div class="card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Hepatica_nobilis_plant.JPG" />
    <div class="overlay">
      <div class="overlay-text">
        <div class="tag">Растение</div>
        <div class="title">Hepatica nobilis</div>
      </div>
    </div>
  </div>
<div class="card">
    <img src="https://i.pinimg.com/736x/26/76/3f/26763f0ef951c4d931186fd7c9802368.jpg" />
    <div class="overlay">
      <div class="overlay-text">
        <div class="tag">Чувство</div>
        <div class="title">Интерес</div>
      </div>
    </div>
  </div>
<div class="card">
    <img src="https://i.pinimg.com/736x/16/d6/52/16d65269294ac7824325f9cc6133810c.jpg" />
    <div class="overlay">
      <div class="overlay-text">
        <div class="tag">Животное</div>
        <div class="title">Кролик</div>
      </div>
    </div>
  </div>
<div class="card">
    <img src="https://i.pinimg.com/736x/55/52/f8/5552f8b435cfba16dbe91be93ff72fd5.jpg" />
    <div class="overlay">
      <div class="overlay-text">
        <div class="tag">Месяц</div>
        <div class="title">Ранняя весна</div>
      </div>
    </div>
  </div>
<div class="card">
    <img src="https://i.pinimg.com/736x/b0/db/9f/b0db9f4bbe050ff366db089f6325218d.jpg" />
    <div class="overlay">
      <div class="overlay-text">
        <div class="tag">Персонаж</div>
        <div class="title">Топи / Альбедо</div>
      </div>
    </div>
  </div>
<div class="card">
    <img src="https://i.pinimg.com/1200x/42/ae/63/42ae6357b9b71d9521a70bfc9912be96.jpg" />
    <div class="overlay">
      <div class="overlay-text">
        <div class="tag">Аромат</div>
        <div class="title">Булочка с кофе</div>
      </div>
    </div>
  </div>
<div class="card">
    <img src="https://i.pinimg.com/1200x/e9/1f/ba/e91fba976ee21fa2c02e0f25ab7a2717.jpg" />
    <div class="overlay">
      <div class="overlay-text">
        <div class="tag">Камень</div>
        <div class="title">Опал</div>
      </div>
    </div>
  </div>
<div class="card">
    <div class="color-block" style="background:  linear-gradient(45deg, #fff1eb, #ace0f9);;"></div>
    <div class="overlay">
      <div class="overlay-text">
        <div class="tag">Цвет</div>
        <div class="title">Рассвет</div>
      </div>
    </div>
  </div>
<div class="card">
    <img src="https://i.pinimg.com/736x/6f/09/25/6f09252b5a0382d1c47a2e105e009e2c.jpg" />
    <div class="overlay">
      <div class="overlay-text">
        <div class="tag">Вкус</div>
        <div class="title">Кофейное суфле</div>
      </div>
    </div>
  </div>
</div>

<div style="background-color: #CFCBC7; padding: 0.5rem; border: 1px solid transparent; border-image: linear-gradient(135deg, #A69F94, #CFCBC7, #D1C7BA) 1; display: flex; justify-content: center; align-items: center; box-sizing: border-box;">
  <iframe src="https://music.yandex.ru/iframe/#track/114472983/26140519"
              style="width: 100%; height: 80px; border: none; border-radius: 8px; box-sizing: border-box;"></iframe>
</div>[/html]

0



Рейтинг форумов | Создать форум бесплатно