Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main>

  <section id="politico">
    <h2>Политика</h2>
    <article class="art">
      <h3>Закон о российской нации решили переименовать из-за «неготовности общества»</h3>
      <p>Разрабатываемый в настоящее время закон «О единстве российской нации и управлении межэтническими отношениями» будет переименован, пишет «Коммерсантъ». Такое решение приняла рабочая группа по подготовке концепции законопроекта из-за «неготовности
        общества...</p>
    </article>
    <article class="art">
      <h3>США начали развертывание THAAD в Южной Корее</h3>
      <p>Спустя день после очередного запуска Северной Кореей баллистических ракет, США направили два мобильных противоракетных комплекса THAAD в Южную Корею для начала развертыванию системы противоракетной обороны на полуострове. Об этом сообщает Bloomberg.
        В связи с...</p>
    </article>
  </section>

  <section id="world">
    <h2>В мире</h2>
    <article class="art">
      <h3>Россия перевела $77 млн в регулярный бюджет ООН</h3>
      <p>Идея поставить вознаграждение топ-менеджеров госкомпаний в зависимость от эффективности работы может быть забыта. Окончательное решение будет принято на совещании у Игоря Шувалова. В правительстве могут отказаться от новой методики расчета вознаграждений...</p>
    </article>
    <article class="art">
      <h3>Послабление для Ирака: Трамп подписал новый иммиграционный указ</h3>
      <p>Президент США Дональд Трамп подписал в понедельник новый указ "О защите от въезда в страну иностранных террористов" вместо предыдущего указа на аналогичную тему, который был приостановлен судом. Новый указ...</p>
    </article>
  </section>

  <section id="sport">
    <h2>Спор</h2>
    <article class="art">
      <h3>«МЮ» предупредил болельщиков об опасностях путешествия в Россию</h3>
      <p>«Манчестер Юнайтед» обратился с письмом к своим болельщикам, которые собираются поддержать команду в выездном матче Лиги Европы против «Ростова». В частности, фанатам не рекомендуется надевать клубную атрибутику. Английский клуб призвал своих болельщиков...</p>
    </article>
    <article class="art">
      <h3>WADA озвучила сумму, потраченную на расследование ситуации с допингом в РФ</h3>
      <p>Всемирное антидопинговое агентство потратило почти 4 млн долларов на расследование ситуации с допингом в России. Годовой бюджет организации при этом составляет 30 млн долларов. WADA озвучила сумму, потраченную на расследование ситуации с допингом
        в РФ. "В обще...</p>
    </article>
  </section>

  <section id="health">
    <h2>Здоровье</h2>
    <article class="art">
      <h3>В Хакасии возможен второй виток заболеваемости гриппом и ОРВИ</h3>
      <p>В Хакасии возможен второй эпидемический подъем заболеваемости гриппом и ОРВИ, сообщает республиканское управление Роспотребнадзора. Вакцинация от гриппа...</p>
    </article>
    <article class="art">
      <h3>Борьба с ВИЧ в России: что ждет пациентов и страну в 2017 году</h3>
      <p>В рамках масштабной коммуникационной кампании по профилактике ВИЧ/СПИДа, организованной Минздравом России, в нашей стране прошла уникальная акция по бесплатному анонимному тестированию на ВИЧ...</p>
    </article>
  </section>

</main>


              
            
!

CSS

              
                main {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
}

p {
  text-align: justify;
  text-indent: 1rem;
}

section {
  min-width: 300px;
   width: 40%;
  max-width: 500px;
  margin: 10px;
}
              
            
!

JS

              
                function pageReady() {
  var listSection = document.getElementsByTagName("section");
var listArticle = document.getElementsByClassName("art");
  
  var h2, art;
  var color_border = {
    politico: "green",
    world: "red",
    sport: "blue",
    health: "yellow"
  }
  var color_background = {
    politico: "hsla(120,100%,25%, 0.3)",
    world: "hsla(0,100%,50%, 0.3)",
    sport: "hsla(240,100%,50%, 0.3)",
    health: "hsla(60,100%,50%, 0.3)"
  }

  /* Исправим заголовки для разделов */
  for (var i = 0; i < listSection.length; ++i) {
    h2 = listSection[i].firstElementChild;

    h2.style.textTransform = "uppercase";
    h2.style.paddingLeft = "10px";
    h2.style.backgroundColor = color_background[listSection[i].id];
    //listSection[i].id - содержит имя идентификатора
    //к свойствам объект существет альтернативный доступ через ['nameProperty']
    h2.style.borderLeft = "4px solid " + color_border[listSection[i].id];
  }

  /* Украсим сноски статей */
  for(var i=0; i < listArticle.length; ++i) {
    art = listArticle[i];
    //art.parentElement.id - получили родительский элемент и сразу же у него берём ID
    art.style.border = "thin solid " + color_border[art.parentElement.id];
    art.style.margin = "10px 0px";
    art.style.padding = "5px";
    art.style.borderRadius = "5px";
  }
}

document.addEventListener("DOMContentLoaded", pageReady);
              
            
!
999px

Console