diff --git a/font-files/IBMPlexMono-Bold.ttf b/font-files/IBMPlexMono-Bold.ttf
deleted file mode 100644
index 2ad2fa1..0000000
Binary files a/font-files/IBMPlexMono-Bold.ttf and /dev/null differ
diff --git a/font-files/IBMPlexMono-BoldItalic.ttf b/font-files/IBMPlexMono-BoldItalic.ttf
deleted file mode 100644
index 29d9f35..0000000
Binary files a/font-files/IBMPlexMono-BoldItalic.ttf and /dev/null differ
diff --git a/font-files/IBMPlexMono-ExtraLight.ttf b/font-files/IBMPlexMono-ExtraLight.ttf
deleted file mode 100644
index 66ad6f1..0000000
Binary files a/font-files/IBMPlexMono-ExtraLight.ttf and /dev/null differ
diff --git a/font-files/IBMPlexMono-ExtraLightItalic.ttf b/font-files/IBMPlexMono-ExtraLightItalic.ttf
deleted file mode 100644
index 86a4e73..0000000
Binary files a/font-files/IBMPlexMono-ExtraLightItalic.ttf and /dev/null differ
diff --git a/font-files/IBMPlexMono-Italic.ttf b/font-files/IBMPlexMono-Italic.ttf
deleted file mode 100644
index d17f56b..0000000
Binary files a/font-files/IBMPlexMono-Italic.ttf and /dev/null differ
diff --git a/font-files/IBMPlexMono-Light.ttf b/font-files/IBMPlexMono-Light.ttf
deleted file mode 100644
index 88cbd9b..0000000
Binary files a/font-files/IBMPlexMono-Light.ttf and /dev/null differ
diff --git a/font-files/IBMPlexMono-LightItalic.ttf b/font-files/IBMPlexMono-LightItalic.ttf
deleted file mode 100644
index 02b6524..0000000
Binary files a/font-files/IBMPlexMono-LightItalic.ttf and /dev/null differ
diff --git a/font-files/IBMPlexMono-Medium.ttf b/font-files/IBMPlexMono-Medium.ttf
deleted file mode 100644
index 3dea23c..0000000
Binary files a/font-files/IBMPlexMono-Medium.ttf and /dev/null differ
diff --git a/font-files/IBMPlexMono-MediumItalic.ttf b/font-files/IBMPlexMono-MediumItalic.ttf
deleted file mode 100644
index ee9dfe7..0000000
Binary files a/font-files/IBMPlexMono-MediumItalic.ttf and /dev/null differ
diff --git a/font-files/IBMPlexMono-SemiBoldItalic.ttf b/font-files/IBMPlexMono-SemiBoldItalic.ttf
deleted file mode 100644
index 0f77c11..0000000
Binary files a/font-files/IBMPlexMono-SemiBoldItalic.ttf and /dev/null differ
diff --git a/font-files/IBMPlexMono-Thin.ttf b/font-files/IBMPlexMono-Thin.ttf
deleted file mode 100644
index 16bcd55..0000000
Binary files a/font-files/IBMPlexMono-Thin.ttf and /dev/null differ
diff --git a/font-files/IBMPlexMono-ThinItalic.ttf b/font-files/IBMPlexMono-ThinItalic.ttf
deleted file mode 100644
index d9c094c..0000000
Binary files a/font-files/IBMPlexMono-ThinItalic.ttf and /dev/null differ
diff --git a/font-files/Inter-Black.woff b/font-files/Inter-Black.woff
deleted file mode 100644
index a18593a..0000000
Binary files a/font-files/Inter-Black.woff and /dev/null differ
diff --git a/font-files/Inter-Black.woff2 b/font-files/Inter-Black.woff2
deleted file mode 100644
index 68f64c9..0000000
Binary files a/font-files/Inter-Black.woff2 and /dev/null differ
diff --git a/font-files/Inter-BlackItalic.woff b/font-files/Inter-BlackItalic.woff
deleted file mode 100644
index b6b0194..0000000
Binary files a/font-files/Inter-BlackItalic.woff and /dev/null differ
diff --git a/font-files/Inter-BlackItalic.woff2 b/font-files/Inter-BlackItalic.woff2
deleted file mode 100644
index 1c9c7ca..0000000
Binary files a/font-files/Inter-BlackItalic.woff2 and /dev/null differ
diff --git a/font-files/Inter-Bold.woff b/font-files/Inter-Bold.woff
deleted file mode 100644
index eaf3d4b..0000000
Binary files a/font-files/Inter-Bold.woff and /dev/null differ
diff --git a/font-files/Inter-Bold.woff2 b/font-files/Inter-Bold.woff2
deleted file mode 100644
index 2846f29..0000000
Binary files a/font-files/Inter-Bold.woff2 and /dev/null differ
diff --git a/font-files/Inter-BoldItalic.woff b/font-files/Inter-BoldItalic.woff
deleted file mode 100644
index 3275076..0000000
Binary files a/font-files/Inter-BoldItalic.woff and /dev/null differ
diff --git a/font-files/Inter-BoldItalic.woff2 b/font-files/Inter-BoldItalic.woff2
deleted file mode 100644
index 0b1fe8e..0000000
Binary files a/font-files/Inter-BoldItalic.woff2 and /dev/null differ
diff --git a/font-files/Inter-ExtraBold.woff b/font-files/Inter-ExtraBold.woff
deleted file mode 100644
index c2c17ed..0000000
Binary files a/font-files/Inter-ExtraBold.woff and /dev/null differ
diff --git a/font-files/Inter-ExtraBold.woff2 b/font-files/Inter-ExtraBold.woff2
deleted file mode 100644
index c24c2bd..0000000
Binary files a/font-files/Inter-ExtraBold.woff2 and /dev/null differ
diff --git a/font-files/Inter-ExtraBoldItalic.woff b/font-files/Inter-ExtraBoldItalic.woff
deleted file mode 100644
index c42f705..0000000
Binary files a/font-files/Inter-ExtraBoldItalic.woff and /dev/null differ
diff --git a/font-files/Inter-ExtraBoldItalic.woff2 b/font-files/Inter-ExtraBoldItalic.woff2
deleted file mode 100644
index 4a81dc7..0000000
Binary files a/font-files/Inter-ExtraBoldItalic.woff2 and /dev/null differ
diff --git a/font-files/Inter-ExtraLight.woff b/font-files/Inter-ExtraLight.woff
deleted file mode 100644
index d0de5f3..0000000
Binary files a/font-files/Inter-ExtraLight.woff and /dev/null differ
diff --git a/font-files/Inter-ExtraLight.woff2 b/font-files/Inter-ExtraLight.woff2
deleted file mode 100644
index f2ea706..0000000
Binary files a/font-files/Inter-ExtraLight.woff2 and /dev/null differ
diff --git a/font-files/Inter-ExtraLightItalic.woff b/font-files/Inter-ExtraLightItalic.woff
deleted file mode 100644
index 81f1a28..0000000
Binary files a/font-files/Inter-ExtraLightItalic.woff and /dev/null differ
diff --git a/font-files/Inter-ExtraLightItalic.woff2 b/font-files/Inter-ExtraLightItalic.woff2
deleted file mode 100644
index 9af717b..0000000
Binary files a/font-files/Inter-ExtraLightItalic.woff2 and /dev/null differ
diff --git a/font-files/Inter-Italic.woff b/font-files/Inter-Italic.woff
deleted file mode 100644
index a806b38..0000000
Binary files a/font-files/Inter-Italic.woff and /dev/null differ
diff --git a/font-files/Inter-Italic.woff2 b/font-files/Inter-Italic.woff2
deleted file mode 100644
index a619fc5..0000000
Binary files a/font-files/Inter-Italic.woff2 and /dev/null differ
diff --git a/font-files/Inter-Light.woff b/font-files/Inter-Light.woff
deleted file mode 100644
index c496464..0000000
Binary files a/font-files/Inter-Light.woff and /dev/null differ
diff --git a/font-files/Inter-Light.woff2 b/font-files/Inter-Light.woff2
deleted file mode 100644
index bc4be66..0000000
Binary files a/font-files/Inter-Light.woff2 and /dev/null differ
diff --git a/font-files/Inter-LightItalic.woff b/font-files/Inter-LightItalic.woff
deleted file mode 100644
index f84a9de..0000000
Binary files a/font-files/Inter-LightItalic.woff and /dev/null differ
diff --git a/font-files/Inter-LightItalic.woff2 b/font-files/Inter-LightItalic.woff2
deleted file mode 100644
index 842b2df..0000000
Binary files a/font-files/Inter-LightItalic.woff2 and /dev/null differ
diff --git a/font-files/Inter-Medium.woff b/font-files/Inter-Medium.woff
deleted file mode 100644
index d546843..0000000
Binary files a/font-files/Inter-Medium.woff and /dev/null differ
diff --git a/font-files/Inter-Medium.woff2 b/font-files/Inter-Medium.woff2
deleted file mode 100644
index f92498a..0000000
Binary files a/font-files/Inter-Medium.woff2 and /dev/null differ
diff --git a/font-files/Inter-MediumItalic.woff b/font-files/Inter-MediumItalic.woff
deleted file mode 100644
index 459a656..0000000
Binary files a/font-files/Inter-MediumItalic.woff and /dev/null differ
diff --git a/font-files/Inter-MediumItalic.woff2 b/font-files/Inter-MediumItalic.woff2
deleted file mode 100644
index 0e3019f..0000000
Binary files a/font-files/Inter-MediumItalic.woff2 and /dev/null differ
diff --git a/font-files/Inter-Regular.woff b/font-files/Inter-Regular.woff
deleted file mode 100644
index 62d3a61..0000000
Binary files a/font-files/Inter-Regular.woff and /dev/null differ
diff --git a/font-files/Inter-Regular.woff2 b/font-files/Inter-Regular.woff2
deleted file mode 100644
index 6c2b689..0000000
Binary files a/font-files/Inter-Regular.woff2 and /dev/null differ
diff --git a/font-files/Inter-SemiBold.woff b/font-files/Inter-SemiBold.woff
deleted file mode 100644
index a815f43..0000000
Binary files a/font-files/Inter-SemiBold.woff and /dev/null differ
diff --git a/font-files/Inter-SemiBold.woff2 b/font-files/Inter-SemiBold.woff2
deleted file mode 100644
index 611e90c..0000000
Binary files a/font-files/Inter-SemiBold.woff2 and /dev/null differ
diff --git a/font-files/Inter-SemiBoldItalic.woff b/font-files/Inter-SemiBoldItalic.woff
deleted file mode 100644
index 909e43a..0000000
Binary files a/font-files/Inter-SemiBoldItalic.woff and /dev/null differ
diff --git a/font-files/Inter-SemiBoldItalic.woff2 b/font-files/Inter-SemiBoldItalic.woff2
deleted file mode 100644
index 545685b..0000000
Binary files a/font-files/Inter-SemiBoldItalic.woff2 and /dev/null differ
diff --git a/font-files/Inter-Thin.woff b/font-files/Inter-Thin.woff
deleted file mode 100644
index 62bc58c..0000000
Binary files a/font-files/Inter-Thin.woff and /dev/null differ
diff --git a/font-files/Inter-Thin.woff2 b/font-files/Inter-Thin.woff2
deleted file mode 100644
index abbc3a5..0000000
Binary files a/font-files/Inter-Thin.woff2 and /dev/null differ
diff --git a/font-files/Inter-ThinItalic.woff b/font-files/Inter-ThinItalic.woff
deleted file mode 100644
index 700a7f0..0000000
Binary files a/font-files/Inter-ThinItalic.woff and /dev/null differ
diff --git a/font-files/Inter-ThinItalic.woff2 b/font-files/Inter-ThinItalic.woff2
deleted file mode 100644
index ab0b200..0000000
Binary files a/font-files/Inter-ThinItalic.woff2 and /dev/null differ
diff --git a/font-files/Inter-italic.var.woff2 b/font-files/Inter-italic.var.woff2
deleted file mode 100644
index b826d5a..0000000
Binary files a/font-files/Inter-italic.var.woff2 and /dev/null differ
diff --git a/font-files/Inter-roman.var.woff2 b/font-files/Inter-roman.var.woff2
deleted file mode 100644
index 6a256a0..0000000
Binary files a/font-files/Inter-roman.var.woff2 and /dev/null differ
diff --git a/font-files/Inter.var.woff2 b/font-files/Inter.var.woff2
deleted file mode 100644
index 365eedc..0000000
Binary files a/font-files/Inter.var.woff2 and /dev/null differ
diff --git a/font-files/inter.css b/font-files/inter.css
deleted file mode 100644
index f450010..0000000
--- a/font-files/inter.css
+++ /dev/null
@@ -1,200 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
-       url("Inter-Thin.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-ThinItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraLight.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-Light.woff2?v=3.19") format("woff2"),
-       url("Inter-Light.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-LightItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
-       url("Inter-Regular.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
-       url("Inter-Italic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
-       url("Inter-Medium.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-MediumItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
-       url("Inter-SemiBold.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
-       url("Inter-Bold.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-BoldItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraBold.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-Black.woff2?v=3.19") format("woff2"),
-       url("Inter-Black.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-BlackItalic.woff?v=3.19") format("woff");
-}
-
-/* -------------------------------------------------------
-Variable font.
-Usage:
-
-  html { font-family: 'Inter', sans-serif; }
-  @supports (font-variation-settings: normal) {
-    html { font-family: 'Inter var', sans-serif; }
-  }
-*/
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
-}
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
-}
-
-
-/* --------------------------------------------------------------------------
-[EXPERIMENTAL] Multi-axis, single variable font.
-
-Slant axis is not yet widely supported (as of February 2019) and thus this
-multi-axis single variable font is opt-in rather than the default.
-
-When using this, you will probably need to set font-variation-settings
-explicitly, e.g.
-
-  * { font-variation-settings: "slnt" 0deg }
-  .italic { font-variation-settings: "slnt" 10deg }
-
-*/
-@font-face {
-  font-family: 'Inter var experimental';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: oblique 0deg 10deg;
-  src: url("Inter.var.woff2?v=3.19") format("woff2");
-}
diff --git a/index.html b/index.html
index d5bf3e7..e9ca71d 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,6 @@
   <meta charset="UTF-8">
   <link rel="stylesheet" href="tools/normalize.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="font-files/inter.css">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
   <title>DOP</title>
 </head>
 <body class="flex-col">
@@ -15,21 +11,21 @@
   <div class="flex flex-col full-width">
     <div class="flex items-center flex-col">
       <img src="static/img/logo.svg" alt="logo">
-      <div class="inter-22">
+      <div class="ibmplexmono-22">
         Consulting and custom development
       </div>
     </div>
   </div>
   <nav class="header-menu flex">
-    <a href="#" class="menu-link ibmplexmono-22">Направление деятельности</a>
-    <a href="#" class="menu-link ibmplexmono-22">Экспертиза</a>
-    <a href="#" class="menu-link ibmplexmono-22">Команда</a>
-    <a href="#" class="menu-link ibmplexmono-22">Центры компетенций</a>
-    <a href="#" class="menu-link ibmplexmono-22">Проекты</a>
+    <a href="#activity_direction" class="menu-link ibmplexmono-22">Направление деятельности</a>
+    <a href="#expertise" class="menu-link ibmplexmono-22">Экспертиза</a>
+    <a href="#team" class="menu-link ibmplexmono-22">Команда</a>
+    <a href="#competence_centers" class="menu-link ibmplexmono-22">Центры компетенций</a>
+    <a href="#projects" class="menu-link ibmplexmono-22">Проекты</a>
   </nav>
 </header>
 <main class="flex flex-col full-width">
-  <h2 class="ibmplexmono-40">Направление деятельности</h2>
+  <h2 id="activity_direction" class="ibmplexmono-40">Направление деятельности</h2>
   <p class="ibmplexmono-28 max-width-1000">DOP это профильная компания по оказанию IT-услуг:</p>
   <ul class="list-style max-width-1000">
     <li class="ibmplexmono-24-600">Проектирование и разработка цифровых продуктов <span class="ibmplexmono-24"> – полный цикл разработки ПО с применением индивидуальных бизнес-решений;<span>
@@ -39,71 +35,81 @@
     <li class="ibmplexmono-24-600">Построение выделенных Центров Компетенций <span class="ibmplexmono-24"> – построение ЦК с командой специалистов разработки, тестирования и сопровождения IT-решений.</span>
     </li>
   </ul>
-  <h2 class="ibmplexmono-40">Экспертиза в областях</h2>
+  <h2 id="expertise" class="ibmplexmono-40">Экспертиза в областях</h2>
   <div class="flex full-width justify-center">
-    <img src="static/img/diagram.svg" alt="diagram">
+    <img class="diagram" src="static/img/diagram.png" alt="diagram">
   </div>
-  <h2 class="ibmplexmono-40">Команда</h2>
+  <h2 id="team" class="ibmplexmono-40">Команда</h2>
   <p class="ibmplexmono-28 max-width-1000">В состав команды DOP входят сотрудники с опытом выполнения
     проектов уровня Enterprise.<br/>
     Наша команда обладает широким спектром компетенций для
     реализации высокотехнологичных проектов с учетом отраслевой
     специфики.</p>
-  <h2 class="ibmplexmono-40">Центры компетенций</h2>
-  <div class="flex skill-list">
-    <div class="skill-card">
-      <div class="flex justify-center full-width inter-34-700">Dev:</div>
+  <h2 id="competence_centers" class="ibmplexmono-40">Центры компетенций</h2>
+  <div class="flex n-skill-card">
+    <div class="flex n-skill-item front">
+      <div class="flex full-width ibmplexmono-38-600">FRONTEND:</div>
       <ul>
-        <li class="inter-24-600 skill-list-item">Front - VueJS, React;</li>
-        <li class="inter-24-600 skill-list-item">BackEnd - Java, Spring,
-          Python, Django.
-        </li>
+        <li class="ibmplexmono-24-600 skill-list-item">JavaScript (React.js, Vue.js, AngularJS)</li>
+        <li class="ibmplexmono-24-600 skill-list-item">CSS</li>
+        <li class="ibmplexmono-24-600 skill-list-item">HTML</li>
+        <li class="ibmplexmono-24-600 skill-list-item">TypeScript</li>
       </ul>
     </div>
-    <div class="skill-card">
-      <div class="flex justify-center full-width inter-34-700">Databases:</div>
+    <div class="flex n-skill-item">
+      <div class="flex full-width ibmplexmono-38-600">MOBILE:</div>
       <ul>
-        <li class="inter-24-600 skill-list-item">Oracle;
-        </li>
-        <li class="inter-24-600 skill-list-item">MS;
-        </li>
-        <li class="inter-24-600 skill-list-item">Postgres.
-        </li>
+        <li class="ibmplexmono-24-600 skill-list-item">Swift</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Java</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Kotlin</li>
+        <li class="ibmplexmono-24-600 skill-list-item">React Native</li>
       </ul>
     </div>
-    <div class="skill-card">
-      <div class="flex justify-center full-width inter-34-700">Mobile:</div>
+    <div class="flex n-skill-item">
+      <div class="flex full-width ibmplexmono-38-600">BACKEND:</div>
       <ul>
-        <li class="inter-24-600 skill-list-item">Andriod;
-        </li>
-        <li class="inter-24-600 skill-list-item">IOS.
-        </li>
+        <li class="ibmplexmono-24-600 skill-list-item">Java</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Python</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Djnago</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Spring</li>
       </ul>
     </div>
-    <div class="skill-card">
-      <div class="flex justify-center full-width inter-34-700">DevOps:</div>
+    <div class="flex n-skill-item">
+      <div class="flex full-width ibmplexmono-38-600">DATABASE:</div>
       <ul>
-        <li class="inter-24-600 skill-list-item">Jenkins;</li>
-        <li class="inter-24-600 skill-list-item">Teamcity;</li>
-        <li class="inter-24-600 skill-list-item">Kubernetes;</li>
-        <li class="inter-24-600 skill-list-item">Docker.</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Oracle DB</li>
+        <li class="ibmplexmono-24-600 skill-list-item">PostgreSQL</li>
+        <li class="ibmplexmono-24-600 skill-list-item">MS SQL Server</li>
+        <li class="ibmplexmono-24-600 skill-list-item">MySQL</li>
       </ul>
     </div>
-    <div class="skill-card">
-      <div class="flex justify-center full-width inter-34-700">QA:</div>
+    <div class="flex n-skill-item">
+      <div class="flex full-width ibmplexmono-38-600">DEVOPS:</div>
       <ul>
-        <li class="inter-24-600 skill-list-item">Manual;</li>
-        <li class="inter-24-600 skill-list-item">Automated.</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Docker</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Kubernetes</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Jenkins</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Teamcity</li>
       </ul>
     </div>
-    <div class="skill-card">
-      <div class="flex justify-center full-width inter-34-700">CRM:</div>
+    <div class="flex n-skill-item">
+      <div class="flex full-width ibmplexmono-38-600">PLATFORMS:</div>
       <ul>
-        <li class="inter-24-600 skill-list-item">Oracle Siebel.</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Oracle Siebel CRM</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Atlassian</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Camunda</li>
+        <li class="ibmplexmono-24-600 skill-list-item">OpenText</li>
+      </ul>
+    </div>
+    <div class="flex n-skill-item qa">
+      <div class="flex full-width ibmplexmono-38-600">QA:</div>
+      <ul>
+        <li class="ibmplexmono-24-600 skill-list-item">Manual</li>
+        <li class="ibmplexmono-24-600 skill-list-item">Automation</li>
       </ul>
     </div>
   </div>
-  <h2 class="ibmplexmono-40">Проекты</h2>
+  <h2 id="projects" class="ibmplexmono-40">Проекты</h2>
   <div class="ibmplexmono-28">Участие в создании и внедрении:
   </div>
   <ul class="list-style max-width-1000">
@@ -141,7 +147,7 @@
     оптимальное технологическое решение.
   </div>
   <img src="static/img/logo.svg" alt="logo" class="bottom-logo">
-  <p>info@dopcore.com</p>
+  <a href="mailto:info@dopcore.com" class="ibmplexmono-22">info@dopcore.com</a>
 </footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/static/img/diagram.png b/static/img/diagram.png
new file mode 100644
index 0000000..5d620ff
Binary files /dev/null and b/static/img/diagram.png differ
diff --git a/style.css b/style.css
index 2f5e02a..1fa7d58 100644
--- a/style.css
+++ b/style.css
@@ -20,6 +20,7 @@ main {
   background-image: url("static/img/bg.svg");
   background-repeat: space;
   background-position-x: center;
+  padding: 20px;
 }
 
 footer {
@@ -104,7 +105,6 @@ h2, p, ul {
 }
 
 .skill-card {
-  filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.25));
   border-radius: 12px;
   border: 3px solid rgba(0, 0, 0, 0.27);
   width: 350px;
@@ -129,71 +129,57 @@ h2, p, ul {
   width: 112px;
 }
 
+h2 {
+  margin-top: 20px
+}
+
+.n-skill-card {
+  border: 3px dashed #000000;
+  padding: 20px;
+  row-gap: 34px;
+  justify-content: space-between;
+}
+
+.n-skill-item {
+  width: 350px;
+}
+
+.n-skill-item.front {
+  width: 450px;
+}
+
+.n-skill-item.qa {
+  align-content: flex-start;
+}
+
+.diagram {
+  max-width: 95vw;
+}
+
+@media screen and (max-width: 1050px) {
+  .header-menu {
+    display: none;
+  }
+}
+
+
 /* Typography */
 
-.inter-22 {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-size: 22px;
-  line-height: 27px;
-}
-
-.inter-40 {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 40px;
-  line-height: 48px;
-}
-
-.inter-28-700 {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 28px;
-  line-height: 34px;
-}
-
-.inter-24-600 {
-  font-family: 'Inter';
-  font-style: normal;
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style:  normal;
   font-weight: 600;
-  font-size: 24px;
-  line-height: 29px;
+  font-display: swap;
+  src: url("font-files/IBMPlexMono-SemiBold.ttf") format("truetype")
 }
-
-.inter-28 {
-  font-family: 'Inter';
-  font-style: normal;
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style:  normal;
   font-weight: 400;
-  font-size: 28px;
-  line-height: 34px;
+  font-display: swap;
+  src: url("font-files/IBMPlexMono-Regular.ttf") format("truetype")
 }
 
-.inter-34-700 {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 34px;
-  line-height: 41px;
-}
-
-.inter-38 {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 38px;
-  line-height: 46px;
-}
-
-.inter-26-600 {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-size: 26px;
-  line-height: 31px;
-}
 
 .ibmplexmono-22 {
   font-family: 'IBM Plex Mono', monospace;
@@ -235,4 +221,10 @@ h2, p, ul {
   font-family: 'IBM Plex Mono', monospace;
   font-weight: 400;
   font-size: 28px;
+}
+
+.ibmplexmono-38-600 {
+  font-family: 'IBM Plex Mono', monospace;
+  font-weight: 600;
+  font-size: 40px;
 }
\ No newline at end of file