mistica eterna

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

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

Вы здесь » mistica eterna » всяко разно » хлам

хлам

Страница: 1

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

1

  • Автор: di
  • Администратор
  • di
  • Зарегистрирован: 2025-07-30
  • Приглашений: 0
  • Сообщений: 2
  • Уважение: [+0/-0]
  • Позитив: [+1/-0]
  • Провел на форуме:
    4 часа 41 минуту
  • Последний визит:
    Сегодня 13:59:49

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Cuprum&display=swap" rel="stylesheet"><style>
.ship7 {
  --shtxt: #11001a;   /* текст в заголовках*/
  --shbg: #fdfbf9; /* фон в заголовках */
  --shbrd: #11001a; /* границы заголовка и картинки */
  --shots: 14px;   /* отступы эпизодов друг от друга */
  --shotg: 16px;   /* отступ текста от картинки */
  --shotz: auto auto 16px -40px;   /* отступ заголовка */
  --shgrad: linear-gradient(90deg, transparent 10%, #11001a 50%, transparent 90%);
}
.ship7 {max-width:700px;  /* ограничиваем ширину блока*/
position:relative; overflow:hidden; box-sizing:border-box; display:grid; grid-template-columns: 120px auto; align-items: start; margin: 8px auto auto 2em;}
.ship7 * {box-sizing:border-box;}
.ship7 *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
.ship7 *::-webkit-scrollbar-thumb {background: var(--shbg);}
.ship7 *::-webkit-scrollbar-corner {background: transparent;}
.ship7 .sh1 {display:block; min-height: 100px; height:100%; padding:0px !important; background: var(--shbg) 50% 0% repeat; border: 1px solid var(--shbrd);} /* shipovnik */
.ship7 .sh2 {display:block; height: 100%; width: auto; padding: 20px 6px 14px var(--shotg);}
.ship7 .sh3 {display:block; margin-top:34px;}
.ship7 .sh3:nth-child(1) {margin-top:0px;}
.ship7 h7 {font-family: 'Cuprum', Georgia, serif; font-size: 18px; display:block; background:var(--shbg); color:var(--shtxt); padding: 8px 14px 7px; width: 85%; margin: var(--shotz); border: 1px solid var(--shbrd);}
.ship7 p.sh5 {display:block; scroll-behavior: smooth; padding-right:8px; font-size: 11px;}
.ship7 .sh4 {position:relative; padding: 0 !important; margin-bottom:var(--shots); text-align: justify; font-size: 11px; line-height: 120%;}
.ship7 .sh4:last-child {margin-bottom:0px;}
.ship7 .sh4::after {display:block; content:""; width:auto; height:1px; background:var(--shgrad); margin-top:var(--shots); }
.ship7 .sh4:last-child::after {display:none;}
.ship7 a.epss {font-family: 'Oswald', Tahoma, sans-serif; font-size: 15px; display:block; width:max-content;}
.ship7 .pers {font-size: 10px; font-family: Tahoma, sans-serif; color: rgba(0, 0, 0, 0.6); font-style:normal !important; display:block; width:max-content; margin: 3px auto 5px 0px;}
</style><div class="ship7"><!-- START -->

<div class="sh1" style="background-image:url(https://image.freepik.com/free-vector/r … 9-6232.jpg);"></div><div class="sh2">

<!-------- ПЕРВЫЙ ГОД -------->
  <div class="sh3"><h7> Сюда вписываем год </h7>

    <!-- Эпизод_1 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
  <em class="pers">  Список игроков  </em>
текст-описание
  </div>

    <!-- Эпизод_2 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
  <em class="pers">  Список игроков  </em>
текст-описание
  </div>

    <!-- Эпизод_3 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
  <em class="pers">  Список игроков  </em>
текст-описание
  </div>

</div><!-- КОНЕЦ ГОДА -->

<!-------- ВТОРОЙ ГОД -------->
    <div class="sh3"><h7> Сюда вписываем следующий период </h7>

    <!-- Эпизод_1 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
  <em class="pers">  Список игроков  </em>
текст-описание
  </div>

    <!-- Эпизод_2 -->
    <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
    <em class="pers">  Список игроков  </em>
текст-описание
   </div>

    <!-- Эпизод_3 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a>
  <em class="pers">  Список игроков  </em>
текст-описание
   </div>

</div><!-- КОНЕЦ ГОДА -->

<!-- END --></div></div>[/html]

0

2

  • Автор: di
  • Администратор
  • di
  • Зарегистрирован: 2025-07-30
  • Приглашений: 0
  • Сообщений: 2
  • Уважение: [+0/-0]
  • Позитив: [+1/-0]
  • Провел на форуме:
    4 часа 41 минуту
  • Последний визит:
    Сегодня 13:59:49

.

0

3

  • Автор: Tris
  • Администратор
  • Зарегистрирован: 2025-07-30
  • Приглашений: 0
  • Сообщений: 3
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    31 минуту
  • Последний визит:
    Сегодня 00:49:44

[html]<style>body{
  background-color: #EDEDED;
  margin: 25px;
}

img{
  width:100%;
}

header{
  font-size: 3em;
  color: #111;
  font-weight: bold;
  text-align: center;
  margin-top: 30px;
  padding-bottom: 15px;
  text-shadow: -1px 1px 0 white, -2px 2px 0 #111;
}

hr{
  border-bottom: 4px solid #111;
  box-shadow: -1px 1px 0 white, -2px 2px 0 #111;
  margin-bottom: 50px;
}

section{
  -webkit-column-count: 4;
  -webkit-column-gap: 40px;
  -webkit-column-rule: 1px solid #A1A1A1;
  -moz-column-count: 4;
  -moz-column-gap: 40px;
  -moz-column-rule: 1px solid #A1A1A1;
  column-count: 4;
  column-gap: 40px;
  column-rule: 1px solid #A1A1A1;
  text-align: justify;
}

h1{
  margin-top:0;
  text-align: left;
}</style>

<header>THE STYLISH NEWS</header>
<hr />
<section>
  <h1>Ifdeli nonapes dans lutui issi oui</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis luctus eros, vitae fermentum tellus. Duis vitae nulla sapien. Nunc eleifend purus sed enim condimentum pulvinar. Aliquam erat volutpat. Donec dui dolor, mollis vitae mollis a, pulvinar id mauris. Integer aliquet vulputate erat, condimentum blandit quam rutrum sit amet. Proin eros tellus, sollicitudin nec lacus ac, porttitor luctus tortor. Cras velit mauris, varius id vehicula eu, tempor vel odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque in scelerisque sem.</p>

<p>Vestibulum eu ornare justo, et consequat sapien. Mauris tempus vehicula vulputate. Nam ac turpis ipsum. Ut massa nulla, feugiat sed ullamcorper et, eleifend nec velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis convallis dui non ante vulputate, in venenatis metus laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse a dui rhoncus, tempor odio quis, mollis justo. Vestibulum vel odio ac ligula aliquam dignissim in id elit. Cras facilisis rhoncus sem in ultrices. Integer placerat est eu neque fringilla fringilla. Nam et turpis tristique, dictum turpis id, consequat ante.</p>

  <img src="http://lorempixel.com/g/400/200/business" alt="lorem image" />
<p>Integer ac dolor ut nibh semper tempus eget commodo leo. Aenean et nisi in nisi aliquet placerat. Mauris adipiscing euismod magna ut mollis. Etiam neque risus, lacinia sit amet commodo non, lacinia in justo. In eget eleifend dui. Pellentesque imperdiet purus non velit aliquam venenatis. Curabitur suscipit non odio dignissim luctus. Sed id aliquam risus, at porta velit. Aenean et ligula ac leo dignissim condimentum et vitae ipsum. Curabitur suscipit velit nec odio porttitor auctor sed ac enim. Mauris dignissim odio ac accumsan auctor. Cras tristique nibh a pellentesque porta. Ut ac tincidunt neque. Aliquam erat volutpat. Praesent luctus velit id tellus lacinia cursus. Vivamus convallis eleifend libero, vitae dapibus ante pulvinar at. </p>

  <h1> Toudieukrec ahdhei ahelkria duntsun anutyh uitauye</h1>
<p>Curabitur ut lacinia enim. In in faucibus lorem. Sed faucibus ultrices dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vitae ante quis enim dignissim dignissim. Nunc faucibus facilisis tempus. Phasellus sit amet est egestas, adipiscing lacus blandit, dignissim arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

<p>Duis hendrerit ut elit interdum lobortis. Aenean auctor ultricies nibh, quis dignissim nisl sagittis sed. Nulla eu odio eros. Nam ultrices felis sed arcu sagittis, sed accumsan lorem lacinia. Nunc lacus lectus, pharetra ac aliquet sit amet, pulvinar sit amet ligula. Ut ut magna dolor. Vestibulum iaculis, sapien ac auctor consectetur, nisi sem convallis dui, vitae tincidunt ante nunc vitae dolor. Nam ultrices ante at nunc pulvinar sollicitudin. Integer condimentum risus at lobortis rutrum. Pellentesque imperdiet blandit mi at scelerisque. Morbi lorem sapien, luctus adipiscing cursus id, tincidunt nec leo. Donec a nunc eget purus ornare porttitor id eget nisi. Nullam sed justo id felis luctus accumsan sed et ipsum. </p>

 
<h1> Tudussi ouinaue du toi: nonapes dans lutui issi oui</h1>
<p>Sed dapibus ornare mauris, vulputate dictum felis congue ac. Proin at mi aliquet, malesuada metus ut, sollicitudin massa. Quisque vel dictum nibh. Nunc scelerisque faucibus pellentesque. Etiam sem odio, auctor accumsan nulla a, iaculis condimentum enim. Nulla dictum metus sodales, porttitor tortor nec, cursus nunc. Fusce id nisi interdum, auctor neque et, mollis mauris. Etiam viverra nec augue sit amet placerat. Maecenas iaculis mauris neque, sit amet adipiscing erat egestas eu. Sed sollicitudin ante sit amet est blandit volutpat. Pellentesque porta viverra dapibus. Nullam eget elit gravida, auctor tortor id, vestibulum metus. Aenean semper porta mi eget hendrerit. </p>
 
  <img src="http://lorempixel.com/g/400/200/sports" alt="lorem image" alt="lorem image" alt="lorem image" />

<p>Pellentesque enim augue, tristique nec libero sit amet, interdum molestie nisl. In nulla risus, lacinia a ante vitae, tempus auctor ante. Vestibulum iaculis sapien sapien, et laoreet enim varius in. In nec tempor massa. Cras risus libero, hendrerit a iaculis et, malesuada vitae leo. Praesent lacinia erat quam, non viverra enim iaculis sit amet. Quisque sodales augue sit amet placerat gravida. Cras tempus molestie augue vel tincidunt. Morbi fringilla magna eget malesuada consectetur. Curabitur ullamcorper commodo facilisis. Nunc pharetra mauris vel malesuada tristique. Aenean sed elit turpis. </p>

<p> Ut a libero dignissim, aliquet felis ut, tempor dolor. Nulla quis augue feugiat, auctor sapien sed, luctus est. Nullam pretium consectetur velit, eget porta velit semper at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras fermentum, ligula sed congue facilisis, leo nisl adipiscing neque, a porta augue urna et augue. Proin vehicula euismod congue. Maecenas arcu augue, semper non lectus id, tempus fringilla erat. Morbi sit amet fringilla ligula. Etiam in suscipit tellus. Nulla vitae nibh accumsan, gravida nisi nec, accumsan nunc. Ut vitae scelerisque mi. Nullam imperdiet purus ipsum, at fringilla diam malesuada et. Vivamus vitae aliquet dolor, eget facilisis turpis. </p>

<p> Proin commodo, orci id eleifend lacinia, ante felis elementum orci, a laoreet velit eros vel dolor. Fusce et tellus consectetur, convallis velit vitae, dignissim lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam lacinia ante ac sem volutpat aliquet quis sed quam. Phasellus consequat in enim in commodo. Vivamus et ipsum eget felis varius aliquet id ut elit. Aenean nec sapien vitae risus iaculis consectetur nec vitae sem. Aenean porta facilisis tortor. Nunc feugiat purus condimentum libero facilisis malesuada nec ut eros. Integer commodo a velit et convallis. Ut auctor pharetra nibh eget tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam quis arcu bibendum nisl tincidunt luctus. </p>

<p>Pellentesque enim augue, tristique nec libero sit amet, interdum molestie nisl. In nulla risus, lacinia a ante vitae, tempus auctor ante. Vestibulum iaculis sapien sapien, et laoreet enim varius in. In nec tempor massa. Cras risus libero, hendrerit a iaculis et, malesuada vitae leo. Praesent lacinia erat quam, non viverra enim iaculis sit amet. Quisque sodales augue sit amet placerat gravida. Cras tempus molestie augue vel tincidunt. Morbi fringilla magna eget malesuada consectetur. Curabitur ullamcorper commodo facilisis. Nunc pharetra mauris vel malesuada tristique. Aenean sed elit turpis. </p>

  <img src="http://lorempixel.com/g/400/200/nature/" alt="lorem image" alt="lorem image" />
</section>
<footer></footer>









[/html]

0

4

  • Автор: Tris
  • Администратор
  • Зарегистрирован: 2025-07-30
  • Приглашений: 0
  • Сообщений: 3
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    31 минуту
  • Последний визит:
    Сегодня 00:49:44

[html]<style>@import url(https://fonts.googleapis.com/css?family=Roboto:300);

html, body{
  padding: 0;
  margin: 0;
  font-family: Roboto;
  background-color: #eee;
}

section{
  position: relative;
  width: 450px;
  background-color: #fff; 
  box-shadow: 0px 2px 10px rgba(0,0,0,.3);
  overflow: hidden;
  margin: 20px auto;
  border-radius: 2px;
}

.header{
  width: 100%;
  height: 250px;
  background-color: #3498db; 
  overflow: hidden;
 
  .circle{
    position: relative;
    top: 20px;
    left: 60px;
    width: 50px;
    height: 50px;
    background-color: #ffff00;   
    box-shadow: 0px 3px 3px rgba(0,0,0,.3);
    border-radius: 50%;
    z-index: 10;
  }
 
  h1{
    position: relative;
    top: 10px;
    left: 110px;
    font-size: 2.5em;
    color: #fff;
    border-bottom: 1px solid #ffff00;
  }
}

.line{
  position: absolute;
  z-index: 0;
  top: 50px;
  left: 85px;
  height: calc(100% + 200px);
  width: 0px;
  border-right: 1px solid #ffff00;
}

#content{
  width: 100%;
  height: 700px;
  overflow: hidden;
  padding-top: 20px;
  overflow-y: auto;
  overflow-x: hidden;
 
  &::-webkit-scrollbar {
    width: 6px;
    background-color: #EBEBEB; 
  }

  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
  }
 
  .object{
    width: 100%;
   
    &:after{
      content: "";
      display: block;
      height: 0;
      clear: both;
    }
   
    .date{
      float: left;
      width: 40px;
      height: 40px;
      margin: 20px;
      background-color: #ffff00;
      color: #fff;
      border-radius: 10px;
      text-align: center;
      line-height: 1.9em;
      font-size: 1.4em;
    }
   
    .circle{
      position: relative;
      float: left;
      z-index: 10;
      margin: 30px 0 0 -5px;
      width: 20px;
      height: 20px;
      background-color: #3498db;
      border-radius: 50%;
    }
   
    .context{
      float: left;
      color: #666;
      width: 250px;
      min-height: 40px;
      margin: 10px 0 10px 0px;     
      padding: 20px;
      line-height: 1.5em;
    }
  } 
}</style>

<section>
  <div class="header">   
    <div class="circle"></div>
    <h1> News </h1>
  </div>
  <div class="line"></div>
  <div id="content">
    <div class="object">
      <div class="date"> 27 </div>
      <div class="circle"></div>
      <div class="context">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi doloribus ad neque laudantium sequi atque officiis quaerat iusto impedit saepe tempora inventore, unde dolore sit aut velit quia adipisci nam.
      </div>
    </div>
   
    <div class="object">
      <div class="date"> 
        25
      </div>
      <div class="circle">
      </div> 
      <div class="context">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi doloribus ad neque laudantium sequi atque officiis quaerat iusto.
      </div>
    </div>
   
    <div class="object">
      <div class="date"> 
        24
      </div>
      <div class="circle">
      </div> 
      <div class="context">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
   
    <div class="object">
      <div class="date">       
        21
      </div>
      <div class="circle">
      </div> 
      <div class="context">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi doloribus ad neque laudantium sequi atque officiis quaerat iusto impedit saepe tempora inventore, unde dolore sit aut velit quia adipisci nam.
      </div>
    </div>
   
    <div class="object">
      <div class="date">   
        19
      </div>
      <div class="circle">
      </div> 
      <div class="context">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi doloribus ad neque laudantium sequi atque officiis quaerat iusto impedit saepe tempora inventore, unde dolore sit aut velit quia adipisci nam.
      </div>
    </div>
   
    <div class="object">
      <div class="date"> 
        18
      </div>
      <div class="circle">
      </div>
      <div class="context">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi doloribus ad neque laudantium sequi atque officiis
      </div>
    </div>
  </div>
</section>[/html]

0

Страница: 1

Вы здесь » mistica eterna » всяко разно » хлам

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