шпаргалка

Быстрый справочник по оформлению статей, чтобы я мог сюда заглянуть)

📷 ФОТОГРАФИИ

Обычное фото

Как писать:

![Мой проект](https://avatars.githubusercontent.com/u/127332134?v=4)

Как выглядит:

Размеры фото

Как писать:

<img src="https://avatars.githubusercontent.com/u/127332134?v=4" class="img-small" alt="Маленькое (30%)">
<img src="https://avatars.githubusercontent.com/u/127332134?v=4" class="img-medium" alt="Среднее (50%)">
<img src="https://avatars.githubusercontent.com/u/127332134?v=4" class="img-large" alt="Большое (80%)">

Как выглядит:

Выравнивание фото

Как писать:

<img src="https://avatars.githubusercontent.com/u/127332134?v=4" class="img-medium img-center" alt="По центру">
<img src="https://avatars.githubusercontent.com/u/127332134?v=4" class="img-medium img-left" alt="Слева">
<img src="https://avatars.githubusercontent.com/u/127332134?v=4" class="img-medium img-right" alt="Справа">

Как выглядит:

По центру:

Слева:

Справа:

Обтекание текстом

Как писать:

<img src="https://avatars.githubusercontent.com/u/127332134?v=4" class="img-float-left" style="width:150px;" alt="Слева">
Текст обтекает фото слева. Можно написать несколько предложений, чтобы увидеть эффект обтекания. Фото будет слева, а текст справа от него.

<div class="clearfix"></div>

Как выглядит:

Кастомный размер

Как писать:

<img src="https://avatars.githubusercontent.com/u/127332134?v=4" style="width: 100px;" alt="100px">
<img src="https://avatars.githubusercontent.com/u/127332134?v=4" style="width: 80px; border-radius: 50%;" alt="Круглое 80px">

Как выглядит:

🖼️ ГАЛЕРЕИ

Сетка 2 колонки

Как писать:

<div class="two-columns">
  <img src="https://avatars.githubusercontent.com/u/127332134?v=4" alt="Аватар 1">
  <img src="https://avatars.githubusercontent.com/u/127332134?v=4" alt="Аватар 2">
</div>

Как выглядит:

Галерея (адаптивная сетка)

Как писать:

<div class="gallery">
  <img src="https://avatars.githubusercontent.com/u/127332134?v=4" alt="Фото 1">
  <img src="https://avatars.githubusercontent.com/u/127332134?v=4" alt="Фото 2">
  <img src="https://avatars.githubusercontent.com/u/127332134?v=4" alt="Фото 3">
</div>

Как выглядит:

🃏 КАРТОЧКИ

Карточка с кнопкой

Как писать:

<div class="card">
  <div class="card-title">🤖 HuroBot</div>
  <div class="card-text">OSINT инструмент для Telegram. Позволяет собирать информацию о пользователях.</div>
  <a href="https://github.com/rud1x/HuroBot_tg" class="btn" target="_blank">GitHub →</a>
</div>

Как выглядит:

Сетка карточек 2 колонки

Как писать:

<div class="grid-2">
  <div class="card">
    <div class="card-title">🚀 NeoShell</div>
    <div class="card-text">Управляй ПК с телефона через Wi-Fi</div>
    <a href="#" class="btn btn-outline">Подробнее</a>
  </div>
  <div class="card">
    <div class="card-title">💻 GitWid</div>
    <div class="card-text">Виджеты GitHub статистики для Rainmeter</div>
    <a href="#" class="btn btn-outline">Подробнее</a>
  </div>
</div>

Как выглядит:

🔘 КНОПКИ

Обычная кнопка

Как писать:

<a href="https://t.me/therudix" class="btn" target="_blank">Telegram</a>

Как выглядит:

Telegram

Кнопка с иконкой

Как писать:

<a href="https://t.me/therudix" class="btn" target="_blank">
  <i class="ph-fill ph-telegram-logo"></i> Telegram
</a>

Как выглядит:

Кнопка-контур

Как писать:

<a href="https://github.com/rud1x" class="btn btn-outline" target="_blank">GitHub</a>

Как выглядит:

GitHub

Группа кнопок

Как писать:

<div class="button-group">
  <a href="https://t.me/therudix" class="btn" target="_blank">Telegram</a>
  <a href="https://github.com/rud1x" class="btn btn-outline" target="_blank">GitHub</a>
  <a href="#" class="btn btn-outline">Портфолио</a>
</div>

Как выглядит:

📝 ПРИМЕЧАНИЯ

Заметка (синяя)

Как писать:

<div class="note">
📌 **Примечание:** Это обычная заметка для важной информации.
</div>

Как выглядит:

Предупреждение (оранжевое)

Как писать:

<div class="warning">
⚠️ **Внимание:** Будьте осторожны при использовании этого инструмента.
</div>

Как выглядит:

Успех (зелёное)

Как писать:

<div class="success">
✅ **Готово:** Ваш бот успешно запущен!
</div>

Как выглядит:

Ошибка (красное)

Как писать:

<div class="error">
❌ **Ошибка:** Не удалось подключиться к серверу.
</div>

Как выглядит:

🎵 АККОРДЕОН (СПОЙЛЕР)

Как писать:

<details>
<summary>📖 Нажми, чтобы раскрыть ответ</summary>

Вот скрытый контент, который появляется при нажатии. Сюда можно вставить текст, код или даже картинки!

```python
print("Hello from inside!")

Как выглядит:

print("Hello from inside!")

💬 ВСПЛЫВАЮЩАЯ ПОДСКАЗКА

Как писать:

Наведи курсор на <span data-tooltip="Это секретная информация!">этот текст</span> чтобы увидеть подсказку.

Как выглядит:

Наведи курсор на этот текст чтобы увидеть подсказку.

🎬 ВИДЕО (YouTube)

Как писать:

<iframe width="100%" height="400" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Как выглядит:

📊 ТАБЛИЦЫ

Как писать:

| Проект | Описание | Статус |
|--------|----------|--------|
| HuroBot | OSINT инструмент | ✅ Активен |
| NeoShell | Управление ПК | 🚧 В разработке |
| GitWid | GitHub виджеты | ✅ Готов |

Как выглядит:

🏷️ ТЕГИ / BADGE

Как писать:

<span class="badge">Python</span>
<span class="badge">Telegram Bot</span>
<span class="badge">Open Source</span>

Как выглядит:

Python
Telegram Bot
Open Source

📐 ПРОГРЕСС-БАР

Как писать:

<div class="progress-bar">
  <div class="progress-fill" style="width: 75%;"></div>
</div>
<p style="text-align: center;">Готовность проекта: 75%</p>

Как выглядит:

Готовность проекта: 75%

✨ БЫСТРЫЙ СПРАВОЧНИК