<div class="wrap">


    <div class="zel">
<h4>РАЗРЕШАЕТСЯ И ПООЩРЯЕТСЯ:</h4>
<ul>
<li><span>Общаться на платформе!</span></li>
<li><span>Писать в каналы, говорить и показывать в голосовых каналах, знакомиться, показывать свои игры, части игр (арт, код, звук) и обсуждать чужие, задавать вопросы по разработке игр и так далее</span></li>


</ul></div>


  <div class="jel">
<h4>РЕКОМЕНДУЕТСЯ:</h4><ul>
<li><span>Уважать друг друга, ожидать от собеседников не меньшего чем от себя и наоборот</span></li>
<li><span>Не увлекаться политическими дискуссиями и другими заведомо противоречивыми и поляризующими темами</span></li>
</ul>
</div>




  <div class="kr">
<h4>ЗАПРЕЩЕНО:</h4><ul>
<li><span>Обсуждение кряков, кейгенов, или любых других нарушений авторского права</span></li>
<li><span>Любая информация, направленная на нанесение материального, финансового или личного ущерба другим участникам сообщества</span></li>
</ul>
</div>


</div>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');

body {
  background:#f7ebd4;
}
.wrap {
    width: 700px;
    margin: 0 auto;
    margin-top: 5em;
    font-family: 'Roboto', sans-serif;
    
}


li::marker {
    font-size: 1.77em;
}

.zel {
    border-left: 8px solid #3de03b;
    padding-left: 10px;
}

.zel span {
    color: black;
}
.zel li {
    color: #54d82a;
}



.jel {
    border-left: 8px solid #ffde64;
    padding-left: 10px;
}


.jel span {
    color: black;
}
.jel li {
    color: #ffde64;
}


.kr {
    border-left: 8px solid #ff6961;
    padding-left: 10px;
}

.kr span {
    color: black;
}
.kr li {
    color: #ff6961;
}


.wrap div {
    margin-top: 5em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.