вашеимя
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur sit amet diam eu pharetra. Aliquam sit amet odio at urna tempus vehicula in sed quam. Cras ultricies dolor sit amet ex aliquam mollis. Donec iaculis est eget vestibulum aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur sit amet diam eu pharetra. Aliquam sit amet odio at urna tempus vehicula in sed quam. Cras ultricies dolor sit amet ex aliquam mollis. Donec iaculis est eget vestibulum aliquet.
love
улица бесконечное лето долгая бесконечная жизнь какие-то еще слова
flood
вася иванов 2 3
write
1 2 3

yanichegoneznayu

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

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


Вы здесь » yanichegoneznayu » готовые штуки » новости


новости

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

1

ы

0

2

[hideprofile][html]
<style>
/* =====================================================
   ON:AIR / WEEKLY NEWS — ВЫПУСК, ВАРИАНТ 06
   HTML + CSS БЕЗ JAVASCRIPT
   ВЕРХНИЙ БЛОК — КАРТА ЦВЕТОВ И РАЗМЕРОВ
   ===================================================== */
.oa-weekly {
  --navy: #11182f;                  /* тёмная внешняя рамка */
  --navy-light: #263962;            /* второе плечо градиента рамки */
  --cobalt: #4c70b7;                /* ссылки, акценты */
  --ice: #9bdff0;                   /* голубые детали */
  --paper: #f6f8fd;                 /* общий светлый фон */
  --card: #ffffff;                  /* белые карточки */
  --mist: #e8eef9;                  /* холодные подложки */
  --ink: #26334e;                   /* основной текст */
  --muted: #7785a2;                 /* мелкие подписи */
  --portrait-mask: rgba(65, 98, 161, .25); /* МАСКА: 6 КРУЖОЧКОВ */
  --pair-mask: rgba(65, 98, 161, .17);     /* МАСКА: ФОТО ПАРЫ */
  --host-mask: rgba(30, 56, 104, .08);    /* МАСКА: ФОТО ВЕДУЩЕГО */
  --width: 900px;                  /* максимальная ширина страницы */
  box-sizing: border-box;
  width: min(100%, var(--width));
  margin: 22px auto;
  padding: 13px;
  border-radius: 31px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  box-shadow: 0 18px 40px rgba(15,27,60,.17);
  color: var(--ink);
  font: 12px/1.45 'Trebuchet MS', Arial, sans-serif;
}
.oa-weekly *, .oa-weekly *::before, .oa-weekly *::after {box-sizing: border-box;}
.oa-weekly a {color: inherit; text-decoration: none;}
.oa-weekly a:hover {color: var(--cobalt);}
.oa-weekly p, .oa-weekly h2, .oa-weekly h3 {margin: 0;}
.oa-weekly img {max-width: 100%;}
.oa-weekly-shell {
  position: relative; overflow: hidden;
  padding: 21px 24px 16px; border-radius: 24px;
  background: radial-gradient(ellipse at 96% 0, rgba(136,179,232,.20), transparent 34%),
              radial-gradient(ellipse at 4% 100%, rgba(173,201,244,.23), transparent 36%),
              var(--paper);
}
.oa-weekly-shell::before {
  content: ''; position: absolute; width: 345px; height: 345px;
  border: 1px solid rgba(89,127,184,.12); border-radius: 50%;
  top: -190px; right: -130px; pointer-events: none;
}
.oa-weekly-head {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 16px;
}
.oa-weekly-brand {display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 20px; letter-spacing: -1px;}
.oa-weekly-brand b {color: var(--cobalt);}
.oa-weekly-brand small {font-size: 9px; line-height: 1.2; font-weight: 400; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase;}
.oa-weekly-date {padding: 7px 12px; border-radius: 999px; background: #e7edf8; color: #5572a8; font-size: 10px; letter-spacing: 1px;}

/* ===== ВЕРХ: ВЕДУЩИЙ, ГЛАВНАЯ РЕЧЬ, АКТИВНОСТИ ===== */
.oa-weekly-feature {display: grid; grid-template-columns: 35% minmax(0,1fr); gap: 22px; align-items: stretch;}
.oa-weekly-host {position: relative; min-width: 0; padding: 66px 8px 0; display: flex; flex-direction: column; align-items: stretch;}
.oa-weekly-host-frame {
  position: relative; height: 245px; min-height: 0;
  border: 8px solid white; overflow: hidden;
  border-radius: 84px 85px 94px 30px; background: #d6e2f1;
  box-shadow: 0 12px 23px rgba(27,41,73,.16);
}
.oa-weekly-host-frame img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%;}
.oa-weekly-host-frame::after {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,var(--host-mask),rgba(15,24,47,.20)); pointer-events: none;}
.oa-weekly-host-chip {position: absolute; top: 77px; left: 23px; z-index: 3; padding: 5px 10px; border-radius: 30px; background: #edf5ff; font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: #426ca7;}
.oa-weekly-host-info {
  position: relative; z-index: 2; margin: -17px 0 0 15px; width: calc(100% - 25px);
  padding: 13px 15px; color: white;
  background: linear-gradient(130deg, #39465e, var(--navy));
  border-radius: 12px 29px 24px 23px; box-shadow: 0 10px 20px rgba(16,25,51,.15);
}
.oa-weekly-host-info b {display: block; font-size: 19px; line-height: 1.14; text-transform: lowercase;}
.oa-weekly-host-info span {display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #b9d6ed; margin-top: 3px;}
/* Компактное облачко над фото. Скорость строки меняется в 18s. */
.oa-weekly-speech {
  position: absolute; z-index: 5; width: 184px; max-width: calc(100% - 8px); top: 0; right: -4px;
  padding: 9px 12px; background: white;
  border-radius: 17px 17px 17px 6px; box-shadow: 0 9px 20px rgba(21,37,71,.14);
}
.oa-weekly-speech::before {content: ''; position: absolute; left: 17px; bottom: -5px; width: 11px; height: 11px; transform: rotate(45deg); background: white;}
.oa-weekly-speech small {display: block; text-transform: uppercase; color: #8191ab; font-size: 8px; letter-spacing: .7px;}
.oa-weekly-ticker {overflow: hidden; margin-top: 4px;}
.oa-weekly-ticker-track {display: flex; width: max-content; animation: oa-weekly-recommend 18s linear infinite;}
.oa-weekly-ticker-track b {flex: none; padding-right: 32px; white-space: nowrap; font-size: 11px; line-height: 1.4;}
.oa-weekly-speech:hover .oa-weekly-ticker-track,
.oa-weekly-speech:focus-within .oa-weekly-ticker-track {animation-play-state: paused;}
@keyframes oa-weekly-recommend {to {transform: translateX(-50%);}}
@media(prefers-reduced-motion:reduce) {
  .oa-weekly-ticker {overflow-x: auto;}
  .oa-weekly-ticker-track {animation: none;}
  .oa-weekly-ticker-track b[aria-hidden] {display: none;}
}
.oa-weekly-hoststar {position: absolute; z-index: 3; top: 276px; right: -10px; width: 52px; height: 52px; background: var(--navy); color: var(--ice); display: grid; place-items: center; border-radius: 50%; border: 5px solid white; font-size: 22px;}
/* ЭМБЛЕМА ON:AIR ЗАПОЛНЯЕТ ПРОМЕЖУТОК ПОД ВЕДУЩИМ, НЕ ЯВЛЯЯСЬ ОТДЕЛЬНОЙ КАРТОЧКОЙ */
.oa-weekly-seal {
  margin: auto 12px 0; padding: 11px 12px 2px;
  text-align: center; color: #a2b8d9; opacity: .88;
}
.oa-weekly-seal b {display: block; font-size: 27px; line-height: 1; letter-spacing: 2px; font-weight: 900; color: rgba(74,112,183,.24);}
.oa-weekly-seal span {display: block; margin-top: 4px; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: #8a9dbe;}
.oa-weekly-seal i {display: block; width: 64%; height: 1px; margin: 9px auto 0; background: linear-gradient(90deg,transparent,#9cb0d2,transparent);}

.oa-weekly-news {position: relative; padding-top: 8px; min-width: 0;}
.oa-weekly-title {position: relative; overflow: hidden; padding: 15px 18px 13px; border-radius: 34px 20px 19px 19px; background: white; box-shadow: 0 10px 22px rgba(30,46,75,.07);}
.oa-weekly-title::after {content: 'ON AIR'; position: absolute; right: -9px; bottom: -21px; font-size: 75px; color: rgba(68,102,173,.065); font-weight: bold; letter-spacing: -5px; white-space: nowrap; pointer-events: none;}
.oa-weekly-kicker {position: relative; z-index: 1; display: block; color: var(--cobalt); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;}
.oa-weekly-title h2 {position: relative; z-index: 1; font-size: 35px; line-height: 1; letter-spacing: -1.6px; color: #283858; text-transform: lowercase; margin: 4px 0 5px;}
.oa-weekly-title p {position: relative; z-index: 1; color: var(--muted); font-size: 11px; letter-spacing: .4px;}
.oa-weekly-frontline {display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); gap: 12px; margin-top: 12px; align-items: stretch;}
.oa-weekly-story {min-width: 0; padding: 15px 17px 17px; color: white; background: linear-gradient(135deg,#373f58,#232a42); border-radius: 20px 20px 40px 20px;}
.oa-weekly-storyhead {display: flex; justify-content: space-between; align-items: center; gap: 9px; margin-bottom: 11px;}
.oa-weekly-storyhead small {color: #a8d8ee; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; line-height: 1.25;}
/* НОМЕР ВЫПУСКА НЕ ПЕРЕКРЫВАЕТ ТЕКСТ: ОН В ОБЫЧНОЙ СТРОКЕ НАД РЕЧЬЮ */
.oa-weekly-issue {display: inline-flex; flex: 0 0 auto; align-items: baseline; gap: 3px; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.13); color: #fff;}
.oa-weekly-issue span {font-size: 8px; color: #d6e6fd; text-transform: uppercase;}
.oa-weekly-issue strong {font-size: 15px; line-height: 1;}
.oa-weekly-story p {font-size: 12px; line-height: 1.56; color: #f1f4ff; overflow-wrap: anywhere;}
.oa-weekly-new {min-width: 0; padding: 14px 15px; border-radius: 20px 20px 32px 20px; background: #e8edf7;}
.oa-weekly-new strong {display: block; color: #334c7b; font-size: 13px; margin-bottom: 8px;}
.oa-weekly-new ul {margin: 0; padding-left: 16px; font-size: 11px; line-height: 1.55; color: #536484;}
.oa-weekly-new li + li {margin-top: 4px;}

/* ===== ЦИТАТА НЕДЕЛИ — ПОЛОСА НА ВСЮ ШИРИНУ ===== */
.oa-weekly-quote {
  position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: 14px; min-width: 0;
  margin: 13px 0 17px; padding: 12px 18px;
  border-radius: 18px 30px 18px 30px;
  background: #e2eaf8; border: 1px solid rgba(76,112,183,.12);
}
.oa-weekly-quote::before {content: '\201C'; font: 62px/.6 Georgia,serif; color: #9badd3; margin-top: 8px;}
.oa-weekly-quote div {min-width: 0;}
.oa-weekly-quote small {display: block; color: var(--cobalt); font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 3px;}
.oa-weekly-quote p {font-size: 12px; line-height: 1.4; font-style: italic; color: #35476a;}
.oa-weekly-quote a {color: #607ba9; font-size: 10px; white-space: nowrap;}

/* ===== ДВА РАВНОПРАВНЫХ БЛОКА С ОДИНАКОВЫМИ ИНТЕРВАЛАМИ ===== */
.oa-weekly-leaders {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch;}
.oa-weekly-trio-card {min-width: 0; padding: 15px 16px 17px; position: relative; border-radius: 27px;}
.oa-weekly-trio-card.is-dark {background: linear-gradient(135deg,#2d3955,var(--navy)); color: #fff;}
.oa-weekly-trio-card.is-light {background: white; color: var(--ink); box-shadow: 0 10px 26px rgba(28,43,78,.10);}
.oa-weekly-trio-card::after {content: '\2736'; position: absolute; right: 15px; top: -16px; font-size: 30px; color: #8fbce4; transform: rotate(-14deg); pointer-events: none;}
.oa-weekly-cardtitle {display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 12px;}
.oa-weekly-cardtitle h3 {font-size: 16px; line-height: 1.2; font-weight: 900; text-transform: lowercase;}
.oa-weekly-cardtitle span {font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #8395b7;}
.oa-weekly-trio-card.is-dark .oa-weekly-cardtitle span {color: #9ec3e5;}
.oa-weekly-trio {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px;}
.oa-weekly-person {min-width: 0; text-align: center;}
/* ОДНА ССЫЛКА И НА КРУЖОК, И НА ИМЯ */
.oa-weekly-player {display: flex; align-items: center; flex-direction: column; gap: 6px; min-width: 0;}
.oa-weekly-portrait {position: relative; display: block; flex: 0 0 auto; width: 76px; height: 76px; overflow: hidden; border-radius: 50%; border: 3px solid white; background: #cdd7e8; box-shadow: 0 7px 14px rgba(20,34,66,.18);}
.oa-weekly-portrait img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.oa-weekly-portrait::after {content: ''; position: absolute; inset: 0; background: var(--portrait-mask); pointer-events: none;}
.oa-weekly-player-name {display: block; max-width: 100%; font-size: 11px; font-weight: bold; line-height: 1.3; overflow-wrap: anywhere;}
.oa-weekly-player:hover .oa-weekly-portrait {box-shadow: 0 0 0 2px var(--ice),0 7px 16px rgba(20,34,66,.19);}
.oa-weekly-trio-card.is-dark .oa-weekly-player:hover {color: #b9edff;}

/* ===== КОРОТКИЕ ЭПИЗОДЫ И ПАРА ПО ЦЕНТРУ ===== */
.oa-weekly-minis {display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 12px; margin-top: 15px; align-items: stretch;}
.oa-weekly-mini {min-width: 0; padding: 13px 15px; border-radius: 20px; background: #fff; box-shadow: 0 9px 22px rgba(30,48,87,.07);}
.oa-weekly-mini h3 {font-size: 13px; text-transform: lowercase; margin-bottom: 10px; color: #31436a;}
.oa-weekly-episode-link {display: block; padding: 10px 11px; border-radius: 13px; background: #ecf1fa; color: #39598b!important; font-size: 12px; font-weight: bold; line-height: 1.35; overflow-wrap: anywhere;}
.oa-weekly-episode-link:hover {background: #dce8f9; color: #274270!important;}
.oa-weekly-episode-link::after {content: ' \2197'; font-size: 12px;}
.oa-weekly-pair-photo {position: relative; overflow: hidden; height: 61px; border-radius: 12px; background: #d4e0f2; margin-bottom: 9px;}
.oa-weekly-pair-photo img {display: block; width: 100%; height: 100%; object-fit: cover;}
.oa-weekly-pair-photo::after {content: ''; position: absolute; inset: 0; background: var(--pair-mask); pointer-events: none;}
.oa-weekly-pair-names {font-weight: bold; color: #334469; font-size: 11px; line-height: 1.3; text-align: center; overflow-wrap: anywhere;}
.oa-weekly-pair-names a {border-bottom: 1px dotted #8da6d3;}
.oa-weekly-pair-names b {color: #7e9bc8; padding: 0 4px;}
.oa-weekly-foot {display: flex; justify-content: space-between; gap: 10px; margin-top: 15px; color: #799bbd; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;}

/* ===== АДАПТАЦИЯ ДЛЯ УЗКИХ ЭКРАНОВ ===== */
@media(max-width:790px) {
  .oa-weekly-feature {grid-template-columns: 1fr; gap: 8px;}
  .oa-weekly-host {max-width: 380px; margin: 0 auto;}
  .oa-weekly-host-frame {height: 245px;}
  .oa-weekly-speech {right: 0;}
  .oa-weekly-seal {display: none;}
}
@media(max-width:650px) {
  .oa-weekly {padding: 10px; margin: 12px auto;}
  .oa-weekly-shell {padding: 17px 16px 14px;}
  .oa-weekly-head {flex-wrap: wrap;}
  .oa-weekly-frontline {grid-template-columns: 1fr;}
  .oa-weekly-quote {grid-template-columns: auto 1fr; row-gap: 4px;}
  .oa-weekly-quote a {grid-column: 2;}
  .oa-weekly-leaders {grid-template-columns: 1fr;}
  .oa-weekly-minis {grid-template-columns: 1fr;}
  .oa-weekly-mini {padding: 13px 15px;}
  .oa-weekly-pair-photo {height: 100px;}
}
@media(max-width:430px) {
  .oa-weekly-shell {padding: 13px;}
  .oa-weekly-title h2 {font-size: 28px;}
   .oa-weekly-speech {top: 0; right: 0; width: 184px;}
 
  .oa-weekly-hoststar {right: 3px;}
  .oa-weekly-portrait {width: 66px; height: 66px;}
  .oa-weekly-trio {gap: 7px;}
  .oa-weekly-quote::before {font-size: 48px;}
}

</style>

<div class="oa-weekly">
  <div class="oa-weekly-shell">
    <!-- 01. НОМЕР ВЫПУСКА В ШАПКЕ -->
    <div class="oa-weekly-head">
      <div class="oa-weekly-brand">ON<b>:AIR</b> <small>weekly news<br>broadcast</small></div>
      <div class="oa-weekly-date">выпуск • 08</div>
    </div>

    <!-- 02. ВЕДУЩИЙ, РЕЧЬ, НОВЫЕ АКТИВНОСТИ -->
    <div class="oa-weekly-feature">
      <div class="oa-weekly-host">
        <div class="oa-weekly-host-chip">ведущий эфира</div>
        <!-- ФОТО ВЕДУЩЕГО: ССЫЛКА НА КАРТИНКУ ИЛИ GIF -->
        <div class="oa-weekly-host-frame"><img src="ССЫЛКА_НА_ФОТО_ИЛИ_GIF_ВЕДУЩЕГО" alt="ведущий новостей"></div>
        <div class="oa-weekly-host-info">
          <b>seo changbin</b>
          <span>news host • on:air weekly</span>
        </div>
        <!-- НЕОБЯЗАТЕЛЬНАЯ РЕКОМЕНДАЦИЯ ОТ ВЕДУЩЕГО -->
        <div class="oa-weekly-speech">
          <small>рекомендация ведущего</small>
          <!-- Меняйте текст в ОБОИХ b одинаково: второй нужен для плавного повтора. -->
          <div class="oa-weekly-ticker" tabindex="0" role="region" aria-label="Рекомендация ведущего">
            <div class="oa-weekly-ticker-track">
              <b>слушаем: stray kids — cover me</b>
              <b aria-hidden="true">слушаем: stray kids — cover me</b>
            </div>
          </div>
        </div>
        <div class="oa-weekly-hoststar">♫</div>
        <!-- ЭМБЛЕМА ПОД ВЕДУЩИМ: ДЕКОР, МОЖНО НЕ МЕНЯТЬ -->
        <div class="oa-weekly-seal"><b>ON:AIR</b><span>weekly broadcast</span><i></i></div>
      </div>

      <section class="oa-weekly-news">
        <div class="oa-weekly-title">
          <span class="oa-weekly-kicker">weekly archive</span>
          <h2>новости эфира</h2>
          <p>еженедельный дайджест активности форума</p>
        </div>
        <div class="oa-weekly-frontline">
          <!-- ОСНОВНАЯ РЕЧЬ ВЕДУЩЕГО: МЕНЯТЬ ТЕКСТ В P -->
          <div class="oa-weekly-story">
            <div class="oa-weekly-storyhead">
              <small>главное за неделю</small>
              <!-- НОМЕР ОТДЕЛЬНО ОТ ТЕКСТА — НИЧЕГО НЕ ПЕРЕКРЫВАЕТ -->
              <span class="oa-weekly-issue"><span>№</span><strong>08</strong></span>
            </div>
            <p>На этой неделе в эфире оживились игровые эпизоды, участники закрыли несколько активностей, а в магазине появились новые лимитные позиции. Здесь можно кратко перечислить основные события и небольшие объявления для участников.</p>
          </div>
          <!-- НОВЫЕ АКТИВНОСТИ: ПУНКТЫ СПИСКА МОЖНО ДОБАВЛЯТЬ -->
          <section class="oa-weekly-new">
            <strong>✳ новые активности</strong>
            <ul>
              <li>обновились ежедневные задания;</li>
              <li>стартовал новый конкурс для участников;</li>
              <li>в магазине появились лимитные плашки;</li>
              <li>открыт новый тематический челлендж.</li>
            </ul>
          </section>
        </div>
      </section>
    </div>

    <!-- 03. ЦИТАТА НЕДЕЛИ: ПОЛОСА НА ВСЮ ШИРИНУ -->
    <div class="oa-weekly-quote">
      <div>
        <small>цитата недели</small>
        <p>«Иногда один удачный пост задаёт настроение всему эфиру».</p>
      </div>
      <a href="ССЫЛКА_НА_АВТОРА_ИЛИ_ПОСТ">— имя персонажа / игрока</a>
    </div>

    <!-- 04. ФЛУДЕРЫ И ПОСТОПИСЦЫ: ОДИНАКОВЫЕ РАЗМЕРЫ И ПРОМЕЖУТКИ -->
    <div class="oa-weekly-leaders">
      <section class="oa-weekly-trio-card is-dark">
        <div class="oa-weekly-cardtitle"><h3>флудеры недели</h3><span>топ-3</span></div>
        <div class="oa-weekly-trio">
          <!-- ФЛУДЕР 01: ОДНА ССЫЛКА НА КРУЖОК И ИМЯ -->
          <div class="oa-weekly-person"><a class="oa-weekly-player" href="ССЫЛКА_НА_ПРОФИЛЬ_ФЛУДЕРА_01"><span class="oa-weekly-portrait"><img src="ССЫЛКА_НА_ФОТО_ФЛУДЕРА_01" alt="kim seungmin"></span><span class="oa-weekly-player-name">kim seungmin</span></a></div>
          <!-- ФЛУДЕР 02 -->
          <div class="oa-weekly-person"><a class="oa-weekly-player" href="ССЫЛКА_НА_ПРОФИЛЬ_ФЛУДЕРА_02"><span class="oa-weekly-portrait"><img src="ССЫЛКА_НА_ФОТО_ФЛУДЕРА_02" alt="hwang hyunjin"></span><span class="oa-weekly-player-name">hwang hyunjin</span></a></div>
          <!-- ФЛУДЕР 03 -->
          <div class="oa-weekly-person"><a class="oa-weekly-player" href="ССЫЛКА_НА_ПРОФИЛЬ_ФЛУДЕРА_03"><span class="oa-weekly-portrait"><img src="ССЫЛКА_НА_ФОТО_ФЛУДЕРА_03" alt="han yujin"></span><span class="oa-weekly-player-name">han yujin</span></a></div>
        </div>
      </section>
      <section class="oa-weekly-trio-card is-light">
        <div class="oa-weekly-cardtitle"><h3>постописцы недели</h3><span>топ-3</span></div>
        <div class="oa-weekly-trio">
          <!-- ПОСТОПИСЕЦ 01: ОДНА ССЫЛКА НА КРУЖОК И ИМЯ -->
          <div class="oa-weekly-person"><a class="oa-weekly-player" href="ССЫЛКА_НА_ПРОФИЛЬ_ПОСТОПИСЦА_01"><span class="oa-weekly-portrait"><img src="ССЫЛКА_НА_ФОТО_ПОСТОПИСЦА_01" alt="lee felix"></span><span class="oa-weekly-player-name">lee felix</span></a></div>
          <!-- ПОСТОПИСЕЦ 02 -->
          <div class="oa-weekly-person"><a class="oa-weekly-player" href="ССЫЛКА_НА_ПРОФИЛЬ_ПОСТОПИСЦА_02"><span class="oa-weekly-portrait"><img src="ССЫЛКА_НА_ФОТО_ПОСТОПИСЦА_02" alt="bang chan"></span><span class="oa-weekly-player-name">bang chan</span></a></div>
          <!-- ПОСТОПИСЕЦ 03 -->
          <div class="oa-weekly-person"><a class="oa-weekly-player" href="ССЫЛКА_НА_ПРОФИЛЬ_ПОСТОПИСЦА_03"><span class="oa-weekly-portrait"><img src="ССЫЛКА_НА_ФОТО_ПОСТОПИСЦА_03" alt="yang jeongin"></span><span class="oa-weekly-player-name">yang jeongin</span></a></div>
        </div>
      </section>
    </div>

    <!-- 05. КОРОТКИЙ НИЖНИЙ РЯД: ЭПИЗОД / ПАРА / SNS-ЭПИЗОД -->
    <div class="oa-weekly-minis">
      <section class="oa-weekly-mini">
        <h3>эпизод недели</h3>
        <!-- НАЗВАНИЕ + ССЫЛКА; БЕЗ ОПИСАНИЯ -->
        <a class="oa-weekly-episode-link" href="ССЫЛКА_НА_ИГРОВОЙ_ЭПИЗОД">название игрового эпизода</a>
      </section>
      <section class="oa-weekly-mini">
        <h3>пара недели</h3>
        <!-- ССЫЛКА НА ФОТО ПАРЫ (ПОДГОНЯЕТСЯ АВТОМАТИЧЕСКИ) -->
        <div class="oa-weekly-pair-photo"><img src="ССЫЛКА_НА_ФОТО_ПАРЫ_НЕДЕЛИ" alt="пара недели"></div>
        <!-- ИМЕНА, У КАЖДОГО СВОЯ ССЫЛКА -->
        <div class="oa-weekly-pair-names"><a href="ССЫЛКА_НА_ПРОФИЛЬ_ПАРЫ_01">lee know</a><b>&amp;</b><a href="ССЫЛКА_НА_ПРОФИЛЬ_ПАРЫ_02">han jisung</a></div>
      </section>
      <section class="oa-weekly-mini">
        <h3>sns-эпизод недели</h3>
        <!-- ТОЛЬКО НАЗВАНИЕ И ССЫЛКА, БЕЗ ОПИСАНИЯ -->
        <a class="oa-weekly-episode-link" href="ССЫЛКА_НА_SNS_ЭПИЗОД">название SNS-эпизода</a>
      </section>
    </div>

    <div class="oa-weekly-foot"><span>on:air / weekly news</span><span>stay tuned ✦</span></div>
  </div>
</div>

[/html]
[/hideprofile]

0


Вы здесь » yanichegoneznayu » готовые штуки » новости


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