Переделай мой сайт в соответствии с условиями.

Вот код моего сайта:

```
<!doctype html>
<html lang="ru">
<head>
  <link rel="shortcut icon"
        href="pics/favicon.png">
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">

  <!-- The page supports both dark and light color schemes,
          and the page author prefers / default is light. -->
  <meta name="color-scheme"
        content="light dark">

  <!-- Replace the Bootstrap CSS with the
          Bootstrap-Dark Variant CSS -->
  <link href="css/bootstrap-dark.min.css"
        rel="stylesheet">

  <title>Веб-сайт Дефлекты</title>

  <!-- Optional Meta Theme Color is also supported on Safari and Chrome -->
  <meta name="theme-color"
        content="#111111"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#eeeeee"
        media="(prefers-color-scheme: dark)">

  <link rel="stylesheet"
        href="https://code.cdn.mozilla.net/fonts/fira.css">
  <style>
    body {
      font-family: 'Fira Sans', sans-serif;
    }

    a[href] {
      vertical-align: middle;
    }

    a[href^='https://gamejolt.'] {
      background: url(pics/game-jolt-logo.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://www.curseforge.'] {
      background: url(pics/old-curseforge-logo.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href*='https://rushan.itch.'] {
      background: url(pics/itch-io-logo.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://modrinth.com'] {
      background: url(pics/modrinth-logo.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://ovk.'] {
      background: url(pics/openvk-logo.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://ru-minecraft.'] {
      background: url(pics/ru-minecraft-logo.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://twitter.'] {
      background: url(pics/twitter-logo.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://discord.'] {
      background: url(pics/discord-logo.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://github.'] {
      background: url(pics/gh.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://soundcloud.'] {
      background: url(pics/sc.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://steamcommunity.'] {
      background: url(pics/steam.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://ellies.'] {
      background: url(pics/ellies.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://fkokf.'] {
      background: url(pics/fkokfii.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://the-return-to-freddy-s.'] {
      background: url(pics/trtf.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://animal-crossing.'] {
      background: url(pics/ac.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }

    a[href^='https://t.'] {
      background: url(pics/tg.png) no-repeat 0; /* вставка иконки */
      padding-left: 22px; /* вставка иконки */
    }
  </style>
</head>
<body>
<div class="mx-3 my-3">
  <h2>Добро пожаловать на мой сайт!</h2>
  <div class="modal-body row">
    <div class="col-md-6">
      <h3>🔮 Обо мне</h3>
      <p>Меня зовут Рушан Мухутдинов, мой никнейм — Дефлекта. Я родился 25 июня 2002.</p>

      <h4>Я:</h4>
      <ul>
        <li>студент,</li>
        <ul>
          <li><b>Интересный факт</b>: Всё плохо.</li>
        </ul>
        <li>англорусский переводчик модификаций Minecraft, программ и игр,</li>
        <ul>
          <li><b>Интересный факт</b>: Я перевожу 240 английских слов на русский в час!</li>
        </ul>
        <li>разработчик игр,</li>
        <ul>
          <li><b>Интересный факт</b>: Из-за учёбы это не особо видно, но это одно из моих стремлений.</li>
        </ul>
        <li>Android-портировщик фанатских игр по Five Nights at Freddy's,</li>
        <ul>
          <li><b>Интересный факт</b>: Это то, за что я в основном популярен в Интернете.</li>
        </ul>
        <li>дизайнер сборок модов Minecraft,</li>
        <ul>
          <li><b>Интересный факт</b>: Я уже давно делаю приватные сборки для игры с друзьями, но в какой-то момент
                                    я решил сделать глобальную сборку. Такой сборкой должен был стать Сырок, но
                                    при его создании я резко понял, что мне нужно получше изучить мир модов и
                                    всё то, что совместимо между собой, поэтому я его архивировал.
          </li>
        </ul>
        <li>бюрократ нескольких вики на Фэндоме и Мирахезе,</li>
        <ul>
          <li><b>Интересный факт</b>: Они редко находят моё внимание в последнее время из-за других
                                    моих проектов.
          </li>
        </ul>
        <li>начинающий художник,</li>
        <ul>
          <li><b>Интересный факт</b>: Я мечтаю научиться хорошо рисовать!</li>
        </ul>
        <li>ютубер.</li>
        <ul>
          <li><b>Интересный факт</b>: Людям нравится мой канал, но у меня в 99% случаях нет возможности снимать видео с
                                    голосом
                                    .</li>
        </ul>
      </ul>

      <h4>Вы можете связаться со мной здесь:</h4>
      <ul>
        <li>ВКонтакте,</li>
        <li>Дискорд,</li>
        <li>Телеграм.</li>
      </ul>

      <h4>Мои проекты опубликованы здесь:</h4>
      <ul>
        <li>Модринт,</li>
        <li>Кёрсфордж,</li>
        <li>Гитхаб,</li>
        <li>ВКонтакте,</li>
        <li>Геймджолт.</li>
      </ul>

      <p>Мой путь разработчика начался с разработки игр на подобии Five Nights at Freddy's на Clickteam
         Fusion 2.5.</p>
    </div>
    <div class="col-md-6">
      <h3>🌳 Разделы сайта</h3>
      <ul>
        <li>🔴 <a href="fusion.html">Русификатор Clickteam Fusion 2.5</a></li>
        <li>📚 <a href="projects.html">Список проектов</a> (WIP)</li>
        <li>🦋 <a href="awesome.html">Список полезных программ, что должны быть у каждого</a> (WIP)</li>
        <li>🦖 <a href="godzilla.html">Хронология фильмов по Годзилле</a> (WIP)</li>
        <li>🔣 <a href="derivatives.html">Таблица производных</a> (WIP)</li>
        <li>🧾 <a href="licences.html">Список для определения с лицензией на Гитхабе</a> (WIP)
        </li>
      </ul>

      <h3>🔗 Внешние ссылки</h3>
      <ul>
        <li><img src="pics/yt.svg"
                 width="18px"
                 height="18px"
                 alt=""/> <a href="https://www.youtube.com/@deflecta">YouTube: игровой канал</a></li>
        <li><img src="pics/yt.svg"
                 width="18px"
                 height="18px"
                 alt=""/> <a href="https://www.youtube.com/@defstu">YouTube: второй канал</a></li>
        <li><img src="pics/vk.svg"
                 width="18px"
                 height="18px"
                 alt=""/> <a href="https://vk.com/deflecta">ВКонтакте:
                                                            профиль</a></li>
        <li><img src="pics/vk.svg"
                 width="18px"
                 height="18px"
                 alt=""/> <a href="https://vk.com/deflcomm">ВКонтакте: основное сообщество</a></li>
        <li><img src="pics/vk.svg"
                 width="18px"
                 height="18px"
                 alt=""/> <a href="https://vk.com/demipr">ВКонтакте: майнкрафт-сообщество</a></li>
        <li><a href="https://github.com/RushanM">Профиль в GitHub</a></li>
        <li><a href="https://discord.gg/jEBnF3ugSJ">Сервер в Discord</a></li>
        <li><a href="https://gamejolt.com/@Rushan">Профиль в Game Jolt</a></li>
        <li><a href="https://www.curseforge.com/members/rushan4444/projects">Профиль в CurseForge</a></li>
        <li><a href="https://rushan.itch.io/">Профиль в itch.io</a></li>
        <li><a href="https://modrinth.com/user/Deflecta">Профиль в Modrinth</a></li>
        <li><a href="https://ovk.to/rushan">Профиль в OpenVK</a></li>
        <li><a href="https://ru-minecraft.ru/user/Kolbasart">Профиль в «ру Майнкрафт»</a></li>
        <li><a href="https://soundcloud.com/deflecta">Профиль в SoundCloud</a></li>
        <li><a href="https://steamcommunity.com/id/rushanm">Профиль в Steam</a></li>
        <li><a href="https://t.me/RMKHTDNV">Профиль в Telegram</a></li>
        <li><a href="https://ellies.miraheze.org/wiki">Miraheze: ЭЛЛИС Вики</a></li>
        <li><a href="https://fkokf.fandom.com/wiki/">Фэндом: Англоязычная СККФII Вики</a></li>
        <li><a href="https://the-return-to-freddy-s.fandom.com/ru/wiki/">Фэндом: The Return to Freddy's Вики</a>
        </li>
        <li><a href="https://animal-crossing.fandom.com/ru/wiki/">Фэндом: Animal Crossing Вики</a></li>
        <li><a href="https://twitter.com/R_Mukhutdinov">Профиль в X</a></li>
      </ul>
    </div>
  </div>
</div>
<footer class="border-top">
  <div class="mx-3 my-3">
    <p class="fst-italic">Сайт создан Рушаном Мухутдиновым, и если он создан не им, не знаю, кто ещё мог его
                          создать</p>
  </div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous">
</script>
</body>
</html>
```

Подстрой мой сайт под элементы его нового концепта, который я составил в Figma. Предоставь файлы HTML, CSS и JS отдельно. Дай мне не пример сайта, а готовый сайт, учитывающий все мои пожелания.

# Элементы с Figma

## Страница

### Layout

```
/* ПК */
position: relative;
width: 1863px;
height: 920px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0px;
```

### Style

```
border: 2px solid rgb(0, 0, 0);
background: rgb(247, 249, 247);
```

## Боковая панель

### Layout

```
/* Боковая панель */
position: static;
width: 320px;
height: 918px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20;
padding: 20px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
```

### Style

```
background: rgb(235, 245, 236);
```

## Боковая панель → Заголовок

### Layout

```
/* Заголовок */
position: static;
width: 280px;
height: 81px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;


/* Inside Auto Layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
margin: 20px 0px;
```

## Боковая панель → Заголовок → Дефлекта

### Layout

```
/* Дефлекта */
position: static;
width: 260px;
height: 61px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
```

### Font Layout

```
color: rgb(11, 76, 19);
font-family: Days One;
font-size: 48px;
font-weight: 400;
line-height: 61px;
letter-spacing: 0%;
text-align: left;
```

### Content

```
Дефлекта
```

## Боковая панель → Пункты панели

### Layout

```
/* Пункты панели */
position: static;
width: 280px;
height: 478px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10;
padding: 0px;


/* Inside Auto Layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
margin: 20px 0px;
```

## Боковая панель → Пункты панели → Главная

### Layout

```
/* Главная */
position: static;
width: 164px;
height: 51px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 5px 10px 5px 10px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 10px 0px;
```

## Боковая панель → Пункты панели → Обо мне

### Layout

```
/* Обо мне */
position: static;
width: 169px;
height: 51px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 5px 10px 5px 10px;


/* Inside Auto Layout */
flex: none;
order: 1;
flex-grow: 0;
margin: 10px 0px;
```

## Содержание раздела

### Layout

```
/* Страница */
position: static;
width: 1543px;
height: 920px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 0px;


/* Inside Auto Layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 1;
margin: 0px 0px;
```

## Содержание раздела → Вверхняя часть

### Layout

```
/* Верх */
position: static;
width: 1543px;
height: 898px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10;
padding: 0px 20px 0px 20px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
```

## Содержание раздела → Промотка списка к верху

### Layout

```
/* Frame 16 */
position: static;
width: 800px;
height: 51px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 10px 20px 10px 20px;


/* Inside Auto Layout */
flex: none;
order: undefined;
flex-grow: 0;
margin: 0px 0px;
```

### Style

```
border-radius: 20px;

box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
background: rgb(247, 249, 247);
```

## Содержание раздела → Нижняя часть

### Layout

```
/* Низ */
position: static;
width: 1543px;
height: 150px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10;
padding: 20px;


/* Inside Auto Layout */
flex: none;
order: 1;
flex-grow: 1;
margin: 0px 0px;
```