ahyenno

font-files/inter.css

@@ -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");
-}

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>

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;
@@ -236,3 +222,9 @@ h2, p, ul {
   font-weight: 400;
   font-size: 28px;
 }
+
+.ibmplexmono-38-600 {
+  font-family: 'IBM Plex Mono', monospace;
+  font-weight: 600;
+  font-size: 40px;
+}