MrHaim

MrHaim Хорошая работа. Но я предлагаю сделать так:
На мой взгляд это смотрится интереснее. А цвета работают на всех шаблонах.
/*стиль для наград*/ /* First Place */ .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: #ffd700; font-family: FontAwesome; } /* Second Place */ .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: #c0c0c0; font-family: FontAwesome; } /* Third Place */ .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: #cd7f32; font-family: FontAwesome; } /* Third Place */ .ipsWidget .ipsDataItem:nth-child(4) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(4) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: #404040ba; font-family: FontAwesome; } /* Third Place */ .ipsWidget .ipsDataItem:nth-child(5) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(5) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: #404040ba; font-family: FontAwesome; }  

@MrHaim его там нет, плагин только тут. попросите автора исправить, если плагин действительно не работает. @BlackShot

Hello. I had an idea to replace the first three places in widget with trophy icons. I tried several times and was successful in doing it only using CSS. 😉 
How to do it? Add the following code to custom.css:
/* First Place */ .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-first--background); font-family: FontAwesome; } /* Second Place */ .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-second--background); font-family: FontAwesome; } /* Third Place */ .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-third--background); font-family: FontAwesome; } Results:

Hello. I had an idea to replace the first three places in widget with trophy icons. I tried several times and was successful in doing it only using CSS. 😉 
How to do it? Add the following code to custom.css:
/* First Place */ .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-first--background); font-family: FontAwesome; } /* Second Place */ .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-second--background); font-family: FontAwesome; } /* Third Place */ .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-third--background); font-family: FontAwesome; } Results:

Any of you already added humans.txt? 😉 
A few examples:
https://www.netflix.com/humans.txt
https://www.google.com/humans.txt
https://www.gov.uk/humans.txt
https://www.php.net/humans.txt
About humans.txt
It's an initiative for knowing the people behind a website. It's a TXT file that contains information about the different people who have contributed to building the website.

The thing is, I'm trying and I don't know Russian language communities / other languages, and I don't really know how it is with you.
That's why I believe that sometimes I publish content from the forums of the other surfers here and upload things to the download area without knowing that it is related to the community here.
But on the other hand I do want to help here because I met amazing people here.
Our communities in Israel are nothing at all

I'd better start translating in English
I didn't even know what you were saying, now I really want to help more here

В нашей стране правительство поощряет торренты, прокат кинолент в кинотеатрах без наличия лицензии, пиратские версии программ всех известных и неизвестных производителей как меру борьбы с незаконными западными санкциями. Выкладывая программы на этом форуме, вы помогаете экономике и людям России. Что касается языка, вы можете писать на английском, это международный язык, либо дублировать английский и русский в одном сообщении. 

Вполне возможно, что слово общины нужно заменить на сообщества.

Я очень надеюсь, что произойдут изменения. Я знаю, что копирую и публикую вещи, которые иногда существуют, но я хочу инвестировать сюда, потому что общины на Земле Израиля — дерьмо.. Пожалуйста, помогите в этом вопросе.

Всем привет
Кто меня знает и кто не знает, очень приятно.. Меня зовут Хаим, мне 27 лет, я живу в Земле Израиля.
Управляет несколькими предприятиями, связанными с играми, а также управляет форумами.
Недавно я решил инвестировать сюда, в форум, и действительно поделиться своими знаниями / ресурсами, которые у меня есть, и у меня есть несколько небольших предложений:
- В настоящее время английский язык в системе не так оптимизирован, поэтому я использую Google Translate и для письма, и для чтения. Я был бы рад, если бы вы добавили готовую панель перевода из Google Translate или что-нибудь, что помогло бы им понять, что я пишу. Потому что иногда Google Translate не дает правильного перевода.
- И второе, небольшая просьба: пожалуйста, просматривайте время от времени раздел загрузок и подтверждайте выложенные мной файлы, буду рад помочь
Спасибо!

HTML:
.main-wrapper .badge.yellow .circle i(class='fa fa-bolt') .ribbon Initiator .badge.orange .circle i(class='fa fa-wheelchair-alt') .ribbon Disabler .badge.pink .circle i(class='fa fa-pied-piper') .ribbon Nuker .badge.red .circle i(class='fa fa-shield') .ribbon Ganker .badge.purple .circle i(class='fa fa-anchor') .ribbon Durable .badge.teal .circle i(class='fa fa-bicycle') .ribbon Roamer .badge.blue .circle i(class='fa fa-users') .ribbon Pusher .badge.blue-dark .circle i(class='fa fa-rocket') .ribbon Escape .badge.green .circle i(class='fa fa-tree') .ribbon Jungler .badge.green-dark .circle i(class='fa fa-user fa-street-view') .ribbon Offlaner .badge.silver .circle span.font AFK .ribbon Carry .badge.gold .circle i(class='fa fa-magic') .ribbon Support footer a(href="https://www.linkedin.com/in/oliviale/" target="_blank") i(class="fa fa-linkedin icons") a(href="https://twitter.com/meowlivia_" target="_blank") i(class="fa fa-twitter icons") a(href="https://github.com/oliviale" target="_blank") i(class="fa fa-github icons") a(href="https://dribbble.com/oliviale" target="_blank") i(class="fa fa-dribbble icons")  
CSS:
@mixin margin-auto { top: 0; left: 0; right: 0; bottom: 0; margin: auto; } body { font-family: 'Comfortaa', sans-serif; background: #111; } .main-wrapper { width: 90%; max-width: 900px; margin: 3em auto; text-align: center; } .badge { position: relative; margin: 1.5em 3em; width: 4em; height: 6.2em; border-radius: 10px; display: inline-block; top: 0; transition: all 0.2s ease; &:before, &:after { position: absolute; width: inherit; height: inherit; border-radius: inherit; background: inherit; content: ""; @include margin-auto; } &:before { transform: rotate(60deg); } &:after { transform: rotate(-60deg); } &:hover { top: -4px; } .circle { width: 60px; height: 60px; position: absolute; background: #fff; z-index: 10; border-radius: 50%; @include margin-auto; i.fa { font-size: 2em; margin-top: 8px; } } .font { display: inline-block; margin-top: 1em; } .ribbon { position: absolute; border-radius: 4px; padding: 5px 5px 4px; width: 100px; z-index: 11; color: #fff; bottom: 12px; left: 50%; margin-left: -55px; height: 15px; font-size: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27); text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); text-transform: uppercase; background: linear-gradient(to bottom right, #555 0%, #333 100%); cursor: default; } } .yellow { background: linear-gradient(to bottom right, #ffeb3b 0%, #fbc02d 100%); color: #ffb300; } .orange { background: linear-gradient(to bottom right, #ffc107 0%, #f57c00 100%); color: #f68401; } .pink { background: linear-gradient(to bottom right, #F48FB1 0%, #d81b60 100%); color: #dc306f; } .red { background: linear-gradient(to bottom right, #f4511e 0%, #b71c1c 100%); color: #c62828; } .purple { background: linear-gradient(to bottom right, #ab47bc 0%, #4527a0 100%); color: #7127a8; } .teal { background: linear-gradient(to bottom right, #4DB6AC 0%, #00796B 100%); color: #34a297; } .blue { background: linear-gradient(to bottom right, #4FC3F7 0%, #2196F3 100%); color: #259af3; } .blue-dark { background: linear-gradient(to bottom right, #1976D2 0%, #283593 100%); color: #1c68c5; } .green { background: linear-gradient(to bottom right, #cddc39 0%, #8bc34a 100%); color: #7cb342; } .green-dark { background: linear-gradient(to bottom right, #4CAF50 0%, #1B5E20 100%); color: #00944a; } .silver { background: linear-gradient(to bottom right, #E0E0E0 0%, #BDBDBD 100%); color: #9e9e9e; } .gold { background: linear-gradient(to bottom right, #e6ce6a 0%, #b7892b 100%); color: #b7892b; } footer { text-align: center; margin: 5em auto; a { text-decoration: none; display: inline-block; width: 45px; height: 45px; border-radius: 50%; background: #111; border: .5px dashed #f8f8f8; color: #999; margin: 5px; &:hover { background: #222; } .icons { margin-top: 12px; display: inline-block; font-size: 20px; } } } outcome:

https://codepen.io/oliviale/pen/qpPByV
Credit to severniy

HTML <span class="pulse"></span> CSS .pulse { margin:100px; display: block; width: 22px; height: 22px; border-radius: 50%; background: #cca92c; cursor: pointer; box-shadow: 0 0 0 rgba(204,169,44, 0.4); animation: pulse 2s infinite; } .pulse:hover { animation: none; } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); } 70% { -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); } 70% { -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0); box-shadow: 0 0 0 10px rgba(204,169,44, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0); box-shadow: 0 0 0 0 rgba(204,169,44, 0); } } Кредит Северному

Beautiful vertical CSS menu with hover animation. // Красивое вертикальное меню на CSS с анимацией при на ведении.
CSS:
menu_vert{ float: none; clear: both; width: 29%; margin: 5% auto; background: #e8e5e5; } menu_vert ul { list-style: none; margin: 0px; padding: 0px; } menu_vert li{ float: none; width: 100%; } menu_vert li a { display: block; width: 100%; padding: